您的位置:首页 > Web前端 > JavaScript

☕ JS 入门笔记

2022-04-03 20:40 696 查看 https://www.cnblogs.com/cenjw/

[toc]

JavaScript简介

JavaScript(简称“JS”)是当前最流行、应用最广泛的客户端脚本语言,用来在网页中添加一些动态效果与交互功能,在 Web 开发领域有着举足轻重的地位。

JS、HTML和CSS的关系:

  • HTML 用来定义网页的内容,例如标题、正文、图像等;
  • CSS 用来控制网页的外观,例如颜色、字体、背景等;
  • JavaScript 用来实时更新网页中的内容,例如从服务器获取数据并更新到网页中

JS是由以下三个部分组成:

  • 核心(ECMAScript):提供语言的语法和基本对象;
  • 文档对象模型(DOM):提供处理网页内容的方法和接口;
  • 浏览器对象模型(BOM):提供与浏览器进行交互的方法和接口。

常见的 JavaScript 引擎有:

  • V8:Chrome 和 Opera 中的 JavaScript 引擎;
  • SpiderMonkey:Firefox 中的 JavaScript 引擎;
  • Chakra:IE 中的 JavaScript 引擎;
  • ChakraCore:Microsoft Edge 中的 JavaScript 引擎;
  • SquirrelFish:Safari 中的 JavaScript 引擎。

JavaScript 具有以下特点:

1) 解释型脚本语言

JavaScript 是一种解释型脚本语言,代码不需要编译,可以直接运行。

2) 面向对象

JavaScript 是一种面向对象语言,使用 JavaScript 不仅可以创建对象,也能操作使用已有的对象。

3) 弱类型

JavaScript 是一种弱类型的编程语言,对使用的数据类型没有严格的要求,可以将一个变量初始化为任意类型,也可以随时改变这个变量的类型。

4) 动态性

JavaScript 是一种采用事件驱动的脚本语言,它不需要借助 Web 服务器就可以对用户的输入做出响应,例如我们在访问一个网页时,通过鼠标在网页中进行点击或滚动窗口时,通过 JavaScript 可以直接对这些事件做出响应。

5) 跨平台

JavaScript 不依赖操作系统,在浏览器中就可以运行。因此一个 JavaScript 脚本在编写完成后可以在任意系统上运行,只需要系统上的浏览器支持 JavaScript 即可。

Node.js 是一个 JavaScript 运行时,它让 JavaScript 脱离了浏览器环境,可以直接在计算机上运行,极大地拓展了 JavaScript 用途。

JavaScript 基础

变量

  • 定义变量

    var str;  //用来存储字符串
    var age;  //用来存储年龄
    var prePage;  //用来存储上一页
    var a, b, c;    // 同时声明多个变量
  • 变量赋值

    var num;    // 定义一个变量 num
    num = 1;
    
    var num = 1;                // 定义一个变量 num 并将其赋值为 1
    var a = 2, b = 3, c = 4;    // 同时定义 a、b、c 三个变量并分别赋值为 2、3、4
    
    // 为了让代码看起来更工整,上一行代码也可以写成这样
    var a = 2,
    b = 3,
    c = 4;
  • 变量提升:JS在预编译期会先预处理声明的变量,但是变量的赋值操作发生在执行期,而不是预编译期

    document.write(str); //显示undefined
    str = http://c.biancheng.net/js/;
    document.write(str); //显示 http://c.biancheng.net/js/
    var str;

    JS引擎的解析方式是:先解析代码,获取所有被声明的变量,然后再一行一行地运行。 这样,所有声明的变量都会被提升到代码的头部,这就叫作变量提升(Hoisting).

let 和 const 关键字

  • let 关键字声明的变量只在其所在的代码块中有效(类似于局部变量),并且在这个代码块中,同名的变量不能重复声明

  • const 关键字的功能和 let 相同,但使用 const 关键字定义的为常量

    let name = "小明";      // 声明一个变量 name 并赋值为“小明”
    let age  = 11;          // 声明一个变量 age
    let age  = 13;          // 报错:变量 age 不能重复定义
    
    const PI = 3.1415       // 声明一个常量 PI,并赋值为 3.1415
    console.log(PI)         // 在控制台打印 PI

数据类型

JS 中的数据类型可以分为两种类型:

  • 基本数据类型(值类型):字符串(

    String
    )、数字(
    Number
    )、布尔(
    Boolean
    )、空(
    Null
    )、未定义(
    Undefined
    )、
    Symbol

  • 引用数据类型:对象(

    Object
    )、数组(
    Array
    )、函数(
    Function
    )。

  • typeof
    操作符:获取变量的数据类型

    var x = 1;
    typeof x;       // 获取变量 x 的数据类型
    typeof(x);      // 获取变量 x 的数据类型
  1. Symbol 是 ECMAScript6 中引入的一种新的数据类型,表示独一无二的值。

基本数据类型

  • String

  • Number

    JS中不区分整数和小数(浮点数),统一使用 Number 类型表示。
  • 特殊的值: Infinity:用来表示正无穷大的数值,一般指大于 1.7976931348623157e+308 的数;
  • -Infinity:用来表示负无穷大的数值,一般指小于 5e-324 的数;
  • NaN:即非数值(Not a Number 的缩写),用来表示无效或未定义的数学运算结构,例如 0 除以 0
  • Boolean

  • Null

      Null 其实使用属于 Object(对象)的一个特殊值
  • Undefined

    Undefined 也是一个只有一个值的特殊数据类型,表示未定义。

    var num;
    console.log(num);  // undefined
  • Symbol

    var str = "123";
    var sym1 = Symbol(str);
    var sym2 = Symbol(str);
    console.log(sym1 == sym2);  // false
  • 引用数据类型

    • Object

      JS 的对象(Object)类型是一组由键、值组成的无序集合:

      格式:

      {k1:v1, k2:v2,..., kn:vn}

      var person = {
      name: 'Bob',
      age: 20,
      tags: ['js', 'web', 'mobile'],
      city: 'Beijing',
      hasCar: true,
      zipcode: null
      };
      console.log(person.name);       // 输出 Bob
      console.log(person.age);        // 输出 20
    • Array

      var arr = [1, 2, 3, 'hello', true, null];
      var arr2 = new Array(1,2,3,4);
    • Function

      函数(Function)是一段具有特定功能的代码块,通过函数名调用运行。

      function sayHello(name){
      return "Hello, " + name;
      }
      var res = sayHello("Peter");
      console.log(res);  // 输出 Hello, Peter

    运算符

    • 比较运算符

      === 全等 x === y 表示如果 x 等于 y,并且 x 和 y 的类型也相同,则为真
      !== 不全等 x !== y 表示如果 x 不等于 y,或者 x 和 y 的类型不同,则为真
      var a = 1;
      var b = '1';
      a==b; // true
      a===b; // false  类型不同

    输出

    1. 使用 alert() 函数来弹出提示框;
    2. 使用 confirm() 函数来弹出一个对话框;
    3. 使用 document.write() 方法将内容写入到 HTML 文档中;
    4. 使用 innerHTML 将内容写入到 HTML 标签中;
    5. 使用 console.log() 在浏览器的控制台输出内容。

    函数

    以下两个函数等价:

    // 函数声明
    function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
    }
    
    // 函数表达式
    var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
    };

    事件

    JS 事件(event)是当用户与网页进行交互时发生的事情。

    事件绑定

    事件只有与 HTML 元素绑定之后才能被触发。

    • 通过【HTML 事件属性】来直接绑定事件处理程序

      <html>
      ...
      <button type="button" onclick="myBtn">Button</button>
      <script>
      function myBtn() {
      alert("hello");
      }
      </script>
      ...
      </html>
    • 通过JS内置函数来为指定元素绑定事件处理程序

      <html>
      ...
      <button type="button" id="myBtn">Button</button>
      <script>
      function sayHello() {
      alert("hello");
      }
      document.getElementById("myBtn").onclick=sayHello;
      </script>
      ...
      </html>

      事件示例

      一般情况下,事件可以分为四大类——鼠标事件、键盘事件、表单事件和窗口事件,另外还有一些其它事件。

      1) onmouseover 事件

      onmouseover 事件就是指当用户鼠标指针移动到元素上时触发的事件。

      <button type="button" onmouseover="alert('您的鼠标已经移动到了该按钮上');">请将鼠标移动至此处</button><br>
      
      <a href="#" onmouseover="myEvent()">请将鼠标移动至此处</a>
      <script>
      function myEvent() {
      alert('您的鼠标已经移动到了该链接上');
      }
      </script>

      2) onmouseout 事件

      onmouseout 事件会在鼠标从元素上离开时触发.

      <div style="width: 350px; height: 200px; border:1px solid black" id="myBox"></div>
      <script>
      function myEvent() {
      alert('您的鼠标已经离开指定元素');
      }
      document.getElementById("myBox").onmouseout = myEvent;
      </script>

      3) onkeydown 事件

      onkeydown 事件是指当用户按下键盘上的某个按键时触发的事件。

      <input type="text" onkeydown="myEvent()">
      <script>
      function myEvent() {
      alert("您按下了键盘上的某个按钮");
      }
      </script>

    JS对象

    Number对象

    var myNum = new Number(value);  // 创建新对象
    var myNum = Number(value);  // 转换

    Array 对象中的属性

    属性 描述
    constructor 返回创建数组对象的原型函数
    length 设置或返回数组中元素的个数
    prototype 通过该属性您可以向对象中添加属性和方法
    var cars = new Array("saab", "volvo", "bmw");
    Array.prototype.name = null;
    cars.name = "JS";

    JS DOM

    文档对象模型(Document Object Model,简称 DOM),是一种与平台和语言无关的模型,用来表示 HTML 或 XML 文档。文档对象模型中定义了文档的逻辑结构,以及程序访问和操作文档的方式。

    当网页加载时,浏览器就会自动创建当前页面的文档对象模型(DOM)。在 DOM 中,文档的所有部分(例如元素、属性、文本等)都会被组织成一个逻辑树结构(类似于族谱),树中每一个分支的终点称为一个节点,每个节点都是一个对象,如下图所示:

    Document 对象

    当浏览器加载一个 HTML 文档时,会创建一个 Document 对象,Document 对象是 DOM 树中所有节点的根节点。通过 Document 对象我们可以访问 HTML 文档中的所有元素。

    提示:Document 对象是 Window 对象的一部分,所以可以通过 window.document 来访问 Document 对象。

    Element对象

    逻辑树的每一个分支的终点称为一个节点,每个节点都包含一个对象,这个对象就是 Element 对象

    使用 Document 对象中提供的方法(例如

    getElementsByTagName()
    getElementById()
    getElementsByClassName()
    等)可以得到 Element 对象。

    JS attributes对象

    元素属性是指在 HTML 元素的开始标签中用来控制标签行为或提供标签信息的特殊词语

    属性 / 方法 描述
    attributes.isId 如果属性是 ID 类型,则返回 true,否则返回 false
    attributes.name 返回属性名称
    attributes.value 设置或者返回属性的值
    attributes.specified 如果定义了指定属性,则返回 true,否则返回 false
    nodemap.getNamedItem() 从节点列表中返回的指定属性节点
    nodemap.item() 返回节点列表中处于指定索引号的节点
    nodemap.length 返回节点列表的节点数目
    nodemap.removeNamedItem() 删除指定属性节点
    nodemap.setNamedItem() 设置指定属性节点(通过名称)

    JS BOM

    浏览器对象模型(Browser Object Model,简称 BOM)是 JavaScript 的组成部分之一,BOM 赋予了 JavaScript 程序与浏览器交互的能力。

    window 对象是 BOM 的核心,用来表示当前浏览器窗口,其中提供了一系列用来操作或访问浏览器的方法和属性。另外,JavaScript 中的所有全局对象、函数以及变量也都属于 window 对象,甚至我们前面介绍的 document 对象也属于 window 对象。

    注意:如果 HTML 文档中包含框架( 或 标签),浏览器会为 HTML 文档创建一个 window 对象的同时,为每个框架创建一个额外的 window 对象。

    navigator 对象

    navigator 对象中存储了与浏览器相关的信息(名称、版本等),、通过 window 对象的 navigator 属性(即 window.navigator)来引用 navigator 对象,并通过它来获取浏览器的基本信息。

    location对象

    location 对象中包含了有关当前页面链接(URL)的信息(当前页面的完整 URL、端口号)。

    history对象

    history 对象中包含了用户在浏览器中访问过的历史记录,其中包括通过浏览器浏览过的页面,以及当前页面中通过

    <iframe>
    加载的页面。

    JS 定时器

    利用定时器来延迟执行某些代码,或者以固定的时间间隔重复执行某些代码。

    方法 说明
    setTimeout() 在指定的时间后(单位为毫秒),执行某些代码,代码只会执行一次
    setInterval() 按照指定的周期(单位为毫秒)来重复执行某些代码,定时器不会自动停止,除非调用 clearInterval() 函数来手动停止或着关闭浏览器窗口

    setTimeout()用法

    <script type="text/javascript">
    var myFun = function (str = 'JavaScript'){
    document.write(str + "<br>");
    };
    setTimeout(myFun, 500, 'Hello');
    setTimeout(myFun, 1000);
    // 常用匿名函数方式
    setTimeout(function(){
    document.write("定时器<br>");
    }, 1500);
    
    //		出于安全考虑不建议使用
    setTimeout("document.write(\"setTimeout()\")", 2000);
    </script>

    setInterval() 函数的语法

    <body>
    <p id="one"></p>
    <p id="two"></p>
    <script type="text/javascript">
    var num = 1;
    var myFun = function (){
    document.getElementById('one').innerHTML += num + "&nbsp;";
    num ++;
    };
    setInterval(myFun, 500);
    setInterval(function(){
    var d = new Date();
    document.getElementById('two').innerHTML = d.toLocaleTimeString();
    }, 1000);
    </script>
    </body>
    1 2 3 4 5 6 7 8
    19:38:23

    JS 取消定时器

    使用 setTimeout() 或 setInterval()都会产生一个定时器的唯一 ID(正整数值),通过 ID 可以清除所对应的定时器。

    var timeoutID;
    timeoutID = setTimeout(showAlert, 2000);
    clearTimeout(timeoutID);

    JS 表单验证

    使用 JavaScript 来验证提交数据(客户端验证)比将数据提交到服务器再进行验证(服务器端验证)用户体验要更好,因为客户端验证发生在用户浏览器中,无需向服务器发送请求,所以速度更快,而服务器端验证,需要先将数据提交到服务器,然后服务器再将结果返回给浏览器,用户需要等待服务器响应结果才能知道哪里出了问题。

    在开发过程中,无论是否进行客户端验证,都需要在服务器端对于用户提交的数据进行验证,因为用户可以在浏览器中禁用 JavaScript。

    表单验证通常由两个部分组成:

    • 必填字段验证:确保必填的字段都被填写;
    • 数据格式验证:确保所填内容的类型和格式是正确的、有效的。

    必填字段验证

    只需要通过程序来检查必填表单元素的值是否为空即可。

    <form onsubmit="return validateForm()" action="" method="post">
    <fieldset>
    <legend>注册:</legend>
    <div class="row">
    <label>用户名:</label>
    <input type="text" name="name">
    <span class="error" id="nameErr"></span>
    </div>
    <div class="row">
    <label>密码:</label>
    <input type="password" name="pwd">
    <span class="error" id="pwdErr"></span>
    </div>
    <div class="row">
    <label>验证码:</label>
    <input type="text" name="captcha" maxlength="4"><span id="captcha" onclick="getCaptcha()"></span>
    <span class="error" id="captchaErr"></span>
    </div>
    <div class="row">
    <input type="submit" value="注册">
    </div>
    </fieldset>
    </form>
    <script>
    var captcha = getCaptcha(); // 生成验证码
    // 清空 input 标签后的提示信息
    var tags = document.getElementsByTagName('input');
    for (var i = 0; i < tags.length; i++) {
    tags[i].onchange = function(){
    var idname = this.name + "Err";
    document.getElementById(idname).innerHTML = '';
    }
    }
    // 显示错误消息
    function printError(elemId, hintMsg) {
    document.getElementById(elemId).innerHTML = hintMsg;
    }
    // 验证表单数据
    function validateForm() {
    // 获取表单元素的值
    var name = document.querySelector("input[name='name']").value;
    var pwd = document.querySelector("input[name='pwd']").value;
    var captcha = document.querySelector("input[name='captcha']").value;
    
    if(name == "" || name == null){
    printError("nameErr", "用户名不能为空");
    return false;
    }
    if(pwd == "" || pwd == null){
    printError("pwdErr", "密码不能为空");
    return false;
    }
    if(captcha == "" || captcha == null){
    printError("captchaErr", "验证码不能为空");
    return false;
    }
    }
    // 获取验证码
    function getCaptcha(){
    var cap = Math.floor(Math.random()*10000).toString();
    if(cap.length != 4) cap += "0";
    captcha = cap;
    document.getElementById("captcha").innerHTML = cap;
    }
    </script>

    数据格式验证

    数据格式验证就是通过正则表达式来验证用户所填的数据。

    以邮箱地址为例,正确的邮箱地址中要包含一个

    @
    和一个
    .
    ,而且
    .
    要出现在
    @
    之后

    if(email == "" || email == null){
    printError("emailErr", "邮箱不能为空");
    return false;
    } else {
    var regex = /^\S+@\S+\.\S+$/;
    if(regex.test(email) === false) {
    printError("emailErr", "请输入正确的邮箱地址");
    return false;
    }
    }

    JS 动画

    JavaScript 动画主要是通过修改元素样式来实现的,能够实现许多 CSS 动画所不能实现的效果,例如暂停、回放等。

    CSS 动画相比,JavaScript 动画具有以下特点:

    • JavaScript 动画控制能力更强,可以在动画播放过程中对动画进行控制,例如开始、暂停、回放、终止、取消等;
    • JavaScript 动画的效果比 CSS 动画更丰富,比如曲线运动,冲击闪烁,视差滚动等效果,只有 JavaScript 动画才能完成;
    • CSS 动画有兼容性问题,而 JavaScript 大多时候没有兼容性问题。

    JavaScript 主要通过代码修改 DOM 元素来实现动画的,并且可以配合定时器来实现循环播放,示例代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    #box {
    width: 200px;
    height: 200px;
    margin-top: 10px;
    background: rgb(43, 221, 255);
    position: relative;
    left: -200px;
    top: 0;
    }
    #box span {
    width: 20px;
    background: rgb(255, 119, 157);
    position: absolute;
    left: 200px;
    top: 75px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    padding: 5px 1px 5px 0;
    border-radius: 0 5px 5px 0;
    }
    #box span:hover {
    background: rgb(255, 84, 137);
    }
    </style>
    </head>
    <body>
    <div id="box">
    <span id="share">分享</span>
    </div>
    <script>
    window.onload = function () {
    //动画
    var div = document.getElementById("box");
    var timer = null;
    div.onmouseover = function () {
    startMove(0);
    };
    div.onmouseout = function () {
    startMove(-200);
    };
    function startMove(targetPosition) {
    clearInterval(timer);
    var speed = 0;
    if (targetPosition < 0) {
    speed = -10;
    } else {
    speed = 10;
    }
    timer = setInterval(function () {
    if (div.offsetLeft == targetPosition) {
    clearInterval(timer);
    } else {
    div.style.left = div.offsetLeft + speed + 'px';
    }
    }, 17);
    }
    };
    </script>
    </body>
    </html>

    JS 闭包

    所谓闭包,指的就是一个函数。当两个函数彼此嵌套时,内部的函数就是闭包。

    闭包的形成条件是内部函数需要通过外部函数 return 给返回出来:

    function funOne() {
    var num = 0;
    function funTwo() {
    num++;
    return num;
    }
    return funTwo;
    }
    var fun = funOne();

    JS 解析JSON

    JSON 全称为“JavaScript Object Notation”,是当前最流行的一种轻量级的数据交换格式,用来存储和传输数据,通常服务器端与客户端在进行交互时就是使用 JSON 格式的数据。

    解析Json数据

    var json = '{"course": {"name": "JavaScript","author": "http://c.biancheng.net/","year": 2021,"genre": "Getting Started tutorial","bestseller": true},"fruits": ["Apple","Banana","Strawberry","Mango"]}';
    
    var obj = JSON.parse(json);
    console.log(obj.fruits);   // ['Apple', 'Banana', 'Strawberry', 'Mango']

    将数据转换为Json

    var obj = {
    "name": "JavaScript",
    "author": "http://c.biancheng.net/",
    "year": 2021,
    "genre": "Getting Started tutorial",
    "bestseller": true
    };
    var json = JSON.stringify(obj);
    document.write(json);

    JS Cookie

    在编程领域,Cookie 代表一种小型的文本文件,可以让开发人员在用户计算机上存储少量的数据(大约 4kb),来记录用户的某些信息(用户身份、喜好等),当用户下次访问网站时,网站可以通过检索这些信息来为用户展示个性化页面。

    Cookie 就是为了让服务器能够记住浏览器而发明的。

    JS 设置/获取Cookie

    设置和获取cookie都是通过

    document.cookie
    ,设置要求
    nanme=value
    形式:

    document.cookie = "url:http://xxxx.xx/";

    内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: