JS基础

目录

对象

  • JavaScript 对象无法进行比较
  • for/in 语句遍历对象的属性

对象构造器

  • 用大写首字母对构造器函数命名是个好习惯：

    function Person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}

  • 创建相同类型的对象：

    var myStar = new Person("Zhou", "Shen", 28, "black");

  • 无法为已有的对象构造器添加新属性

    如果要添加，可以使用prototype属性

    prototype 属性允许您为对象构造器添加新属性和新方法

    请只修改自己的原形，绝不修改JavaScript的

创建对象

  • 使用对象字面量创建对象

    对象文字指的是花括号 {} 中的名称:值对（比如 age:28）：

        var person = {firstName:"Zhou", lastName:"Shen", age:28, eyeColor:"black"};

    空格和折行不重要。对象定义可横跨多行

  • 使用关键词new

    var person = new Object();
person.firstName = "Zhou";

属性

  • 访问属性

    objectName.property	//person.firstName
objectName["property"]	//person["firstName"]

  • 删除属性

    delete关键词从对象中删除属性

    delete 关键词不会删除被继承的属性，但是如果删除了某个原型属性，则将影响到所有从原型继承的对象

方法

  • 创建对象方法

    methodName : function() { 代码行 }

  • 访问对象方法

    objectName.methodName()

    如果访问时没有使用（），则返回函数定义

  • call()方法可以使用另一个对象的方法：

    var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName:"Zhou",
    lastName: "Shen",
}
person.fullName.call(person1);  // 将返回 "Bill Gates"

    带参数的call()方法：

    var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Zhou",
  lastName: "Shen"
}
    person.fullName.call(person1, "Guiyang", "China");

  • apply()与call()相似

    不同之处是：

    call() 方法分别接受参数。

    apply() 方法接受数组形式的参数。

    如果要使用数组而不是参数列表，则 apply() 方法非常方便

    带参数的apply()方法：

    var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Zhou",
  lastName: "Shen"
}
person.fullName.apply(person1, ["Guiyang", "China"]);

函数

  • 创建函数

    • 直接声明函数

    • 用表达式定义（匿名函数）：

      var x = function (a, b) {return a * b};
var z = x(4, 3);

    • Function()构造器：

      var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);

  • JavaScript 函数能够在声明之前被调用

  • toString() 方法以字符串返回函数：

    function myFunction(a, b) {
    return a * b;
}
var txt = myFunction.toString();

  • JavaScript 支持嵌套函数；嵌套函数可以访问其上的作用域

字符串方法

所有字符串方法都会返回新字符串。它们不会修改原始字符串。

正式地说：字符串是不可变的：字符串不能更改，只能替换

  • length 属性返回字符串长度

  • indexOf() 方法返回字符串中指定文本首次引（位置）（从0开始计算

  • lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引

    如果未找到文本， indexOf() 和lastIndexOf()均返回 -1

    两种方法都接受作为检索起始位置的第二个参数

  • search() 方法搜索特定值的字符串，并返回匹配的位置

    • search() 方法无法设置第二个开始位置参数。
    • indexOf() 方法无法设置更强大的搜索值（正则表达式）

  • slice() 提取字符串的某个部分并在新字符串中返回被提取的部分

    该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）

    如果某个参数为负，则从字符串的结尾开始计数

    如果省略第二个参数，则该方法将裁剪字符串的剩余部分

  • substring() 类似于 slice()

    不同之处在于 substring() 无法接受负的索引

  • substr() 类似于 slice()

    不同之处在于第二个参数规定被提取部分的长度

    如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分

    如果首个参数为负，则从字符串的结尾计算位置

    第二个参数不能为负，因为它定义的是长度

  • replace() 方法用另一个值替换在字符串中指定的值

    replace() 方法不会改变调用它的字符串。它返回的是新字符串。

    默认地，replace() 只替换首个匹配

    默认地，replace() 对大小写敏感

    如需执行大小写不敏感的替换，请使用正则表达式 /i（大小写不敏感）：

    str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");

    请注意正则表达式不带引号。

    如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）:

    str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3School");

  • toUpperCase() 把字符串转换为大写

  • toLowerCase() 把字符串转换为小写

  • concat() 连接两个或多个字符串

    可用于代替加运算符

  • charAt() 方法返回字符串中指定下标（位置）的字符串

  • charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码

  • split() 将字符串转换为数组（括号内写分隔符）

    如果省略分隔符，被返回的数组将包含 index [0] 中的整个字符串

    如果分隔符是 ""，被返回的数组将是间隔单个字符的数组：

    var txt = "a,b,c,d,e";   // 字符串
txt.split(",");          // 用逗号分隔
txt.split(" ");          // 用空格分隔
txt.split("|");          // 用竖线分隔
txt.split("");           // 分隔为字符

数字

一、

  • 超大或超小的数可通过科学计数法来写（123e5）

  • JavaScript 数值始终是 64 位的浮点数

  • 整数（不使用指数或科学计数法）会被精确到 15 位

  • JavaScript 的加法和级联（concatenation）都使用 + 运算符。

    数字用加法。字符串用级联

    JavaScript 从左向右进行编译

    如果您对一个数和一个字符串相加，结果也是字符串级联

    如果您对一个字符串和一个数字相加，结果也是字符串级联：

    var x = 10;
var y = 20;
var z = "30";
var result1 = "The result is: " + x + y; //1020
var result2 = x + y + z;  //3030

  • 除加法外，在所有数字运算中，JavaScript 会尝试将字符串转换为数字

  • toString() 方法把数输出为十六进制、八进制或二进制

  • 数值可以是对象

  • 可以通过关键词 new 定义为对象：var y = new Number(123)

  • 请不要创建数值对象。这样会拖慢执行速度

NaN——非数值

NaN 属于 JavaScript 保留词，指示某个数不是合法数（Not a Number)

全局 JavaScript 函数isNaN()来确定某个值是否是数

NaN 是数，typeof NaN 返回 number

Infinity

Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值

除以 0（零）也会生成 Infinity

Infinity 是数：typeOf Infinity 返回number

方法

所有数字方法可用于任意类型的数字（字面量、变量或表达式）

  • toString()以字符串返回数值

  • toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字（参数定义小数点后的字符数）

  • toFixed() 返回字符串值，它包含了指定位数小数的数字

    toFixed(2) 非常适合处理金钱

  • toPrecision() 返回字符串值，它包含了指定长度的数字

  • Number() 可用于把 JavaScript 变量转换为数值：

    x = true;
Number(x);        // 返回 1
x = false;     
Number(x);        // 返回 0
x = new Date();
Number(x);        // 返回 1404568027739
x = "10"
Number(x);        // 返回 10
x = "10 20"
Number(x);        // 返回 NaN

    还可以把日期转换为数字（返回 1970 年 1 月 1 日至今的毫秒数）：

    Number(new Date("2019-04-15"));    
// 返回 1506729600000

  • parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字

    如果无法转换为数值，则返回 NaN：

    parseInt("10");         // 返回 10
parseInt("10.33");      // 返回 10
parseInt("10 20 30");   // 返回 10
parseInt("10 years");   // 返回 10
parseInt("years 10");   // 返回 NaN

数组

  • 向数组添加新元素的最佳方法可以使用 push() 方法

    也可以使用 length 属性向数组添加新元素：

    fruits[fruits.length] = "Lemon";     // 向 fruits 添加一个新元素 (Lemon)

  • JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来删除

    使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之

方法

  • toString() 把数组转换为数组值（逗号分隔）的字符串:

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

  • join() 方法也可将所有数组元素结合为一个字符串。

    它的行为类似 toString()，但是您还可以规定分隔符：

    var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

  • pop() 方法从数组中删除最后一个元素、返回“被弹出”的值

  • push() 方法（在数组结尾处）向数组添加一个新的元素，返回新数组的长度

  • shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引，返回新字符串

  • unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素，返回新数组的长度

  • splice() 方法可用于向数组添加新项，第一个参数为应添加新元素的位置，第二个参数为应删除多少元素，其余参数为要添加的新元素，返回一个包含已删除项的数组：

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

    也可用于移除元素

  • concat() 方法通过合并（连接）现有数组来创建一个新数组，不会更改现有数组，返回一个新数组，可以使用任意数量的数组参数，也可以将值作为参数：

    var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起
var myChildren2 = arr1.concat(["Emil", "Tobias", "Linus"]);

  • slice() 方法用数组的某个片段切出新数组，一个参数两个参数都可

    如果结束参数被省略，则 slice() 会切出数组的剩余部分

  • sort() 函数按照字符串顺序对值进行排序

    如果数字按照字符串来排序，则 "25" 大于 "100"，因为 "2" 大于 "1"，因此，sort() 方法在对数值排序时会产生不正确的结果，使用比值函数来修正问题：

    var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b}); //正序
points.sort(function(a, b){return b - a}); //降序
points.sort(function(a, b){return 0.5 - Math.random()}); //随机排序

  • 使用 Math.max.apply 来查找数组中的最高值

  • 使用 Math.min.apply 来查找数组中的最低值

  • forEach() 方法为每个数组元素调用一次函数（回调函数）:

    var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}

  • map() 方法通过对每个数组元素执行函数来创建新数组，不会对没有值的数组元素执行函数，不会更改原始数组：

    var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}

  • filter() 方法创建一个包含通过测试的数组元素的新数组：

    var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

  • indexOf() 方法在数组中搜索元素值并返回其位置

    未找到项目，Array.indexOf() 返回 -1

    项目多次出现，则返回第一次出现的位置

  • Array.lastIndexOf() 与Array.indexOf()类似，但是从数组结尾开始搜索

  • find() 方法返回通过测试函数的第一个数组元素的值

  • findIndex() 方法返回通过测试函数的第一个数组元素的索引

日期

  • new Date() 用当前日期和时间创建新的日期对象
  • new Date(year, month, ...) 用指定日期和时间创建新的日期对象，7个数字分别指定年、月、日、小时、分钟、秒和毫秒，如果只提供一个参数，则将其视为毫秒

方法

  • toDateString() 方法将日期转换为更易读的格式
  • toUTCString()方法将日期转换为 UTC 字符串（一种日期显示标准）
  • getTime() 方法返回自 1970 年 1 月 1 日以来的毫秒数
  • getFullYear() 方法以四位数字形式返回日期年份
  • getMonth() 以数字（0-11）返回日期的月份
  • getDate() 方法以数字（1-31）返回日期的日
  • getHours() 方法以数字（0-23）返回日期的小时数
  • getMinutes() 方法以数字（0-59）返回日期的分钟数
  • getSeconds() 方法以数字（0-59）返回日期的秒数
  • getMilliseconds() 方法以数字（0-999）返回日期的毫秒数
  • getDay() 方法以数字（0-6）返回日期的星期名（weekday），在 JavaScript 中，一周的第一天（0）表示“星期日”
  • 以上get改为set即可设定日期

数学

  • Math.PI即是pi

  • Math.round(x) 的返回值是 x 四舍五入为最接近的整数

  • Math.pow(x, y) 的返回值是 x 的 y 次幂

  • Math.sqrt(x) 返回 x 的平方根

  • Math.abs(x) 返回 x 的绝对（正）值

  • Math.ceil(x) 的返回值是 x 上舍入最接近的整数

  • Math.floor(x) 的返回值是 x 下舍入最接近的整数

  • Math.sin(x) 返回角 x（以弧度计）的正弦（介于 -1 与 1 之间的值）

  • Math.cos(x) 返回角 x（以弧度计）的余弦（介于 -1 与 1 之间的值）

  • Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值

  • Math.random() 返回介于 0（包括） 与 1（不包括） 之间的随机数

  • Math.random() 与 Math.floor() 一起使用用于返回随机整数：

    Math.floor(Math.random() * 10);		// 返回 0 至 9 之间的数
Math.floor(Math.random() * 11);		// 返回 0 至 10 之间的数
Math.floor(Math.random() * 100);	// 返回 0 至 99 之间的数
Math.floor(Math.random() * 101);	// 返回 0 至 100 之间的数
Math.floor(Math.random() * 10) + 1;	// 返回 1 至 10 之间的数

正则表达式

  • 正则表达式是构成搜索模式（search pattern）的字符序列

  • 当您搜索文本中的数据时，您可使用搜索模式来描述您搜索的内容

  • /pattern/modifiers;

    修饰符

  • i ：执行对大小写不敏感的匹配

  • g：执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）

  • m：执行多行匹配

    模式（pattern）

  • [abc]寻找方括号之间的任何字符（分开一个个字母）

  • [0-9]查找任何从 0 至 9 的数字

  • (x|y)查找由 | 分隔的任何选项

  • \d查找数字

  • \s寻找空白字符

  • \b匹配单词边界

  • \uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符

  • test()是正则表达式方法，通过模式来搜索字符串，然后根据结果返回 true 或 false：

    var patt = /e/;
patt.test("The best things in life are free!"); 
//或/e/.test("The best things in life are free!");
//由于字符串中有一个'e'，以上代码输出的是true

  • exec() 方法是一个正则表达式方法，通过指定的模式（pattern）搜索字符串，并返回已找到的文本，如果未找到匹配，则返回 null

异常

try 语句允许您定义一个代码块，以便在执行时检测错误

catch 语句允许你定义一个要执行的代码块，如果 try 代码块中发生错误

try {
     供测试的代码块
}
 catch(err) {
     处理错误的代码块
}

当发生错误时，JavaScript 通常会停止并产生错误消息，JavaScript 实际上会创建带有两个属性的Error 对象：name 和 message

throw 语句创建自定义错误

<!DOCTYPE html>
<html>
<body>

<p>请输入 5 - 10 之间的数字：</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入</button>
<p id="message"></p>

<script>
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "空的";
         if(isNaN(x)) throw "不是数字";
         x = Number(x);
        if(x < 5) throw  "太小";
        if(x > 10) throw "太大";
    }
    catch(err) {
        message.innerHTML = "输入是 " + err;
    }
}
</script>

</body>
</html>

finally 语句在 try 和 catch 之后执行代码，无论 try / catch 结果如何都执行的代码块

this

  • 在方法中，this 指的是所有者对象。
  • 单独的情况下，this 指的是全局对象。
  • 在函数中，this 指的是全局对象。
  • 在函数中，严格模式下，this 是 undefined。
  • 在事件中，this 指的是接收事件的元素。

let

  • 重新声明变量：使用 var 关键字重新声明变量会带来问题，

    在块中重新声明变量也将重新声明块外的变量；使用 let 关键字重新声明变量可以解决这个问题，在块中重新声明变量不会重新声明块外的变量：

    var x = 10;
// 此处 x 为 10
{ 
  let x = 6;
  // 此处 x 为 6
}
// 此处 x 为 10

  • 在相同的作用域，或在相同的块中，通过 var 重新声明一个 let 变量是不允许的

  • 在不同的作用域或块中，通过 let 重新声明变量是允许的

const

  • 通过 const 定义的变量与 let 变量类似，但不能重新赋值
  • 必须在声明时赋值
  • 在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const
  • 在同一作用域或块中，为已有的 const 变量重新声明声明或赋值是不允许的

调试

  • 通常通过 F12 键启动浏览器中的调试器，然后在调试器菜单中选择“控制台”

  • 如果您的浏览器支持调试，那么您可以使用 console.log() 在调试窗口中显示 JavaScript 的值

  • debugger 关键词会停止 JavaScript 的执行，并调用（如果有）调试函数。

    这与在调试器中设置断点的功能是一样的。

    如果调试器不可用，debugger 没有效果。

    如果调试器已打开，此代码会在执行第三行之前停止运行

注意事项

  • 避免全局变量
  • 始终声明局部变量
  • 顶部声明
  • 初始化变量
  • 不使用new Object()
  • 使用===比较
  • 使用default 结束switch
  • 避免使用eval()
  • 写字符串要换行时使用反斜杠\

HTML DOM

  • HTML DOM 方法是您能够（在 HTML 元素上）执行的动作

    HTML DOM 属性是您能够设置或改变的 HTML 元素的值

  • document对象代表网页

  • getElementById方法使用元素的id

  • innerHTML属性课用于获取或替换HTML元素的内容；可用于获取或改变任何HTML元素，包括和

    <script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

具体其他方法可以参考：https://www.w3school.com.cn/js/js_htmldom_document.asp

  • document.write() 可用于直接写入 HTML 输出流

    千万不要在文档加载后使用，这么做会覆盖文档

寻找HTML元素

  • 通过id：

    var myElement = document.getElementById("intro");

    如果元素被找到，此方法会以对象返回该元素;如果未找到元素，myElement 将包含 null

  • 通过标签名：

    //查找所有<p>元素
var x = document.getElementsByTagName("p");

  • 通过类名

    //返回包含class="intro"的所有元素的列表
var x = document.getElementsByClassName("intro");

动画

var id = setInterval(frame, 5);

function frame() {
    if (/* 测试是否完成 */) {
        clearInterval(id);
    } else {
         /* 改变元素样式的代码 */
    }
}

实例：

function myMove() {
    var elem =  document.getElementById("animate"); 
    var pos = 0;
    var id = setInterval(frame, 5);
     function frame() {
        if (pos ==  350) {
             clearInterval(id);
        } else {
             pos++; 
             elem.style.top = pos + 'px'; 
             elem.style.left = pos + 'px'; 
        }
     }
}

事件

  • onclick 事件

  • 当用户进入后及离开页面时，会触发 onload 和 onunload 事件

    onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本

    onload 和 onunload 事件可用于处理 cookie

  • onchange事件经常与输入字段验证结合使用：

    <input type="text" id="fname" onchange="upperCase()">
//当用户改变输入字段内容时，会调用 upperCase() 函数

  • onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数

  • onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。

    首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。

BOM

  • 所有浏览器都支持 window 对象；它代表浏览器的窗口

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至（HTML DOM 的）document 对象也是 window 对象属性：

window.document.getElementById("header");
//等同于document.getElementById("header");

Screen

  • screen.width 属性返回以像素计的访问者屏幕宽度:

    document.getElementById("demo").innerHTML = "Screen Width: " + screen.width;

  • screen.height 属性返回以像素计的访问者屏幕的高度

  • screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征

  • screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征

  • screen.colorDepth 属性返回用于显示一种颜色的比特数

  • screen.pixelDepth 属性返回屏幕的像素深度

Location

  • window.location.href 属性返回当前页面的 URL

  • window.location.hostname 属性返回（当前页面的）因特网主机的名称

  • window.location.pathname 属性返回当前页面的路径名

  • window.location.protocol 属性返回页面的 web 协议

  • window.location.port 属性返回（当前页面的）互联网主机端口的编号

  • window.location.assign() 方法加载新文档

History

  • history.back() 方法加载历史列表中前一个 URL;等同于在浏览器中点击后退按钮
  • history forward() 方法加载历史列表中下一个 URL;等同于在浏览器中点击前进按钮
  • navigator.cookieEnable返回true如果cookie已启用，否则返回false
  • navigator.appName 属性返回浏览器的应用程序名称
  • navigator.appCodeName 属性返回浏览器的应用程序代码名称
  • navigator.product 属性返回浏览器引擎的产品名称
  • navigator.appVersion 属性返回有关浏览器的版本信息
  • navigator.userAgent 属性返回由浏览器发送到服务器的用户代理报头（user-agent header）
  • navigator.platform 属性返回浏览器平台（操作系统）
  • navigator.language 属性返回浏览器语言
  • navigator.onLine 属性返回 true，假如浏览器在线
  • navigator.javaEnabled() 方法返回 true，如果 Java 已启用

弹出框

  • 警告框：window.alert() 方法可以不带 window 前缀来写

    window.alert("海华食杂店")
//或alert("海华食杂店")

  • 确认框：window.confirm()方法可以不带 window 前缀来编写

    如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false

    var r = confirm("周深唱歌好听吗？");
if (r == true) {
    x = "确实！";
} else {
    x = "没有这个选项回去重选！";
}

  • 提示框：window.prompt()方法可以不带window

    如果您希望用户在进入页面前输入值，通常会使用提示框。

    当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。

    如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL

    var person = prompt("请输入您的姓名", "周深");		//第二个参数是预设值
if (person != null) {
 document.getElementById("demo").innerHTML = "你好 " + person + "！今天开心吗？";
}

Timing

  • setTimeout(function, milliseconds)在等待指定的毫秒数后执行函数

    window.setTimeout() 方法可以不带 window 前缀来编写

  • clearTimeout() 方法停止执行 setTimeout() 中规定的函数

    window.clearTimeout() 方法可以不带 window 前缀来写

    clearTimeout() 使用从 setTimeout() 返回的变量

    <button onclick="myVar = setTimeout(myFunction, 3000)">试一试</button>
<button onclick="clearTimeout(myVar)">停止执行</button>

  • setInterval(function, milliseconds) 方法在每个给定的时间间隔重复给定的函数

    window.setInterval() 方法可以不带 window 前缀来写

  • clearInterval() 方法停止 setInterval() 方法中指定的函数的执行

    window.clearInterval() 方法可以不带 window 前缀来写

  • JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie

  • 创建cookie：

    document.cookie = "username=Charlie";

    还可以添加有效日期（UTC 时间）

    通过 path 参数，您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页

    document.cookie = "username=Charlie; expires=Sun, 28 Aug 2020 12:00:00 UTC; path=/";

  • 读取cookie

    var x = document.cookie;

    document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value

    document.cookie 属性看起来像一个正常的文本字符串，但它不是

    即使你向 document.cookie 写一份完整的 cookie 字符串，当再次读取时，你只能看到它的名称-值对

    如果你想找到一个指定 cookie 的值，你必须编写 JavaScript 函数来搜索 cookie 字符串中的 cookie 值

  • 删除cookie

    删除 cookie 时不必指定 cookie 值

    直接把 expires 参数设置为过去的日期即可

    您应该定义 cookie 路径以确保删除正确的 cookie

    如果你不指定路径，一些浏览器不会让你删除 cookie

    document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

  • 实例

    • 设置cookie

      function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
} 
//这个函数的的参数是：cookie 的名字（cname），cookie 的值（cvalue），以及知道 cookie 过期的天数（exdays）

    • 获取cookie

      function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
         if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
         }
     }
    return "";
} 
//把 cookie 作为参数（cname）。
创建变量（name）与要搜索的文本（CNAME”=”）。
解码 cookie 字符串，处理带有特殊字符的 cookie，例如 “$”
（decodeURIComponent(URIstring可对 encodeURIComponent() 函数编码的 URI 进行解码）
用分号把 document.cookie 拆分到名为 ca（decodedCookie.split(';')）的数组中。
遍历 ca 数组（i = 0; i < ca.length; i++），然后读出每个值 c = ca[i]
（charAt() 方法可返回指定位置的字符）
如果找到 cookie（c.indexOf(name) == 0），则返回该 cookie 的值（c.substring(name.length, c.length）。
如果未找到 cookie，则返回 ""。

    • 检查cookie是否设置

      function checkCookie() {
    var username = getCookie("username");
    if (username != "") {
        alert("Welcome again " + username);
    } else {
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

AJAX

XMLHttp

  • XMLHttpRequest 对象用于同幕后服务器交换数据

  • 创建XMLHttpRequest对象

    variable = new XMLHttpRequest();

    老版本的IE（IE5\IE6）使用ActiveX对象

    variable = new ActiveXObject("Microsoft.XMLHTTP");

    为了应对所有浏览器，请检查浏览器是否支持XMLHttpRequest对象，不支持则创建ActiveX对象

    var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
     xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

  • XMLHttpRequest对象方法

    • abort()取消当前请求

    • getAllResponseHeaders()返回头部信息

    • getAllResponseHeader()返回特定的头部信息

    • open(method, url, async, user, psw)

      method：请求类型GET或POST

      url：文件位置

      async：true(异步)或false(同步)

      user：可选的用户名称

      psw：可选的用户密码

    • send()将请求发送到服务器，用于GET请求

    • send()将请求发送到服务器，用于POST请求

    • setRequestHeader()想要发送的报头添加标签/值对

  • XMLHttpRequest 对象属性

    • onreadystatechange定义当readyState属性发生变化时被调用的函数

    • readyState保存XMLHttpRequest的状态

      0：请求未初始化

      1：服务器连接已建立

      2：请求已收到

      3：正在处理请求

      4：请求完成且响应已就绪

    • responseText以字符串返回响应数据

    • responseXML以XML数据返回响应数据

    • status返回请求的状态号

      200："OK"

      403："Forbidden"

      404："Page not found"

    • statusText返回状态文本

请求

  • GET请求

    如果需要用GET方法来发送信息，向url添加这些信息

    xhttp.open("GET", "demo_get2.asp?fname=Shen&lname=Zhou", true);
xhttp.send();

  • POST请求

    如果需要像HTML表单那样POST数据，需要通过setRequsetHeader()添加一个HTTP头部

    xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Shen&lname=Zhou");
//setRequestHeader(header, value) 向请求添加HTTP头部

响应

  • readyState 属性存留 XMLHttpRequest 的状态

    当readyState 发生变化时就会调用 onreadystatechange 函数

    当 readyState 为 4，status 为 200 时，响应就绪

    function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML =
            this.responseText;
       }
    };
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send(); 
} 
//onreadystatechange 被触发五次（0-4），每次 readyState 都发生变化

  • 如果您的网站中有多个 AJAX 任务，那么您应该创建一个执行 XMLHttpRequest 对象的函数，以及一个供每个 AJAX 任务的回调函数。

    该函数应当包含 URL 以及当响应就绪时调用的函数

    loadDoc("url-1", myFunction1);

loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}

function myFunction1(xhttp) {
  // action goes here
 } 
function myFunction2(xhttp) {
  // action goes here
 }

  • 属性

    • responseText获取字符串形式的响应数据

      document.getElementById("demo").innerHTML = xhttp.responseText;

    • responseXML获取XML数据形式的响应数据

      使用此属性，可以把响应解析为 XML DOM 对象

  • 方法

    • getAllResponseHeaders() 方法返回所有来自服务器响应的头部信息
    • getResponseHeader() 方法返回来自服务器响应的特定头部信息
posted @ 2020-09-01 22:27  阿飘飘不起来  阅读(37)  评论(0)    收藏  举报