JavaScript 详解

1. JavaScript介绍

• 虽然是java作为前缀，但java和javascript的关系，就像老婆和老婆饼之间的关系，没有一毛钱关
• 系！
• 网景公司在Netscape2.0首先推出了JavaScript
• JavaScript 的正式名称是 “ECMAScript”，此标准由 ECMA 组织发展和维护，简称“js”
• JavaScript 是一种网页编程技术，用来向 HTML 页面添加交互行为
• JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释执行代码，不进行预编译。

1.1 js的特点

• 可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序 （后面会学习不用浏览器也能运行）
• 解释执行：事先不编译，逐行执行
• 基于对象：内置大量现成对象
• 适宜：
  • 客户端数据计算
  • 客户端表单合法性验证
  • 浏览器事件的触发
  • 网页特殊显示效果制作

1.2 js的组成

• ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准
• DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每
• 一个节点。
• BOM：浏览器对象模型，是对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改
• 变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀
• 疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的准。
  • 弹出新的浏览器窗口
  • 移动、关闭浏览器窗口以及调整窗口大小
  • 提供 Web 浏览器详细信息的定位对象
  • 提供用户屏幕分辨率详细信息的屏幕对象
  • 对 cookie 的支持
  • IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX对象，进而
  • 实现ajax局部刷新技术

2. HTML与javaScript结合方式

使用js的三种方式

2.1.行内脚本

• 1. 点击按钮（触发）
• 2. 弹框（具体的操作）

点我一下

2.2.内部脚本

1. 使用
2. 标准是写在head和body之间（脖子位置），但其实只要写在html文件内部就可以，无论什么位置
外，

内部，都可以。

2.3.外部脚本

1. 在项目根目录下创建一个目录js
2. 在js目录中创建一个文件，后缀名是.js
3. 在html页面中，使用

以上使用脚本的三种方式的优先级，谁在上，谁先执行。因为是解释性语言。

3. JavaScript的使用

3.1 变量

• 因为js是弱类型语言，所以，在定义变量的时候，所有的数据类型都是var
• 声明变量： var x ; var x,y;
• 数值类型：number
  • 不区分整型数值和浮点型数值
  • 所有数字都采用 64 位浮点格式存储，类似于double 格式
• 字符串：string
  • 首尾由单引号或双引号括起
• 布尔类型：
  • 仅有两个值：true和false也代表1和0
  • 实际运算中true=1,false=0

3.1.1 自动类型转换

数字 + 字符串：数字转换为字符串 10+’a’ -> 10a
数字 + 布尔值：true转换为1，false转换为0 true+5->6
字符串 + 布尔值：布尔值转换为字符串true或false true+’a’->truea
布尔值 + 布尔值：布尔值转换为数值1或0 true+true->2

3.1.2 数据类型转换函数

• parseInt：强制转换成整数
  • 如果不能转换，则返回 NaN （NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字）
  • 例如：parseInt("6.32")=6
• parseFloat：强制转换成浮点数
  • 如果不能转换，则返回 NaN
  • 例如：parseFloat("6.32")=6.32
• typeof：查询数值当前类型，返回 string / number / boolean / object
  • 例如：typeof("test"+3)=="string"

3.1.3 null 与 undefined

• null 在程序中代表“无值”或者“无对象”
  • 可以通过给一个变量赋值 null 来清除变量的内容
• undefined
  • 声明了变量但从未赋值或者对象属性不存在

3.1.4 算术运算

• 加(＋)、 减(－)、 乘( * ) 、除( / ) 、余数( % )
  • - 可以表示减号，也可以表示负号，如：x = -y
  • +可以表示加法，也可以用于字符串的连接
• 递增( ++ ) 、递减( -- )
  • i++ 相当于 i=i+1
  • i-- 相当于 i=i-1

3.1.5 关系运算

• 严格相等：===
  • 类型相同
  • 数值相同
• 非严格相等：!==

var a = "10";
var b = 10;
if (a == b)
　　alert("equal");
if (a === b)
　　alert("same");

3.1.6 逻辑运算

• 逻辑非（!）、逻辑与（&&）、逻辑或（||）
• 逻辑运算的操作数均为 boolean 表达式
• 我要吃两碗拉面或者10个包子才能吃饱！问题是，我只吃两碗面，饱了！ 我只吃10个包子，饱了
• 我要吃两碗拉面并且10个包子才能吃饱！问题是，我只吃两碗面，没饱！ 我只吃10个包子，没饱，

3.1.7 控制语句

if（关系表达式） {
　　// 语句块 1
}else {
　　// 语句块 2
}

if (表达式1) {
    // 语句1;
}else if (表达式2){
    // 语句2;
}else if (表达式3){
    // 语句3;
} else{
    // 语句4;
}

switch (表达式) {
　　case 值1:
　　　　// 语句1;
　　　　break;
　　case 值2:
　　　　// 语句2;
　　　　break;
　　default:
　　　　// 语句4;
}

for (var i=1 ; i<=5 ; i++){
　　alert(i);
}

while (条件){
    // 语句1;
    ...
}

3.2 常用字符串API

• length:获取字符串的长度（字符串中字符的个数） 属性，没有小括号

• var str = "hello";
  console.log( str.length );

• toUpperCase/toLowerCase :转大小写

• var name = "AngierSun";
  console.log( "大写："+name.toUpperCase() );
  console.log( "小写："+name.toLowerCase() );

• charAt(下标) ： 返回某个下标上的字符

• var str1 = "javascript网页教程";
  var str2 = str1.charAt(12); // 下标12上的字符
  console.log(str2); //教
  var str3 = str1.charCodeAt(12);
  console.log(str3); //25945:（汉字“教”在unicode编码中的编号）

• indexof(字符)：查找字符串中字符出现的首次下标
• lastIndexof(字符)：查找字符串中字符最后一次出现的下标

• var str1 = "javascript网页教程";
  var str2 = str1.indexOf("a");
  console.log(str2); // 1 , a字符在str1中第一次出现的下标
  var str3 = str1.lastIndexOf("a"); //3,a字符在str1中最后一次出现的下标
  console.log(str3);

• substring(开始,结束)：截取字符串中一部分（结束是不包含的）

• var str1 = "abcdefgh";
  var str2 = str1.substring(2,4);
  console.log(str2); //cd，从2开始（包含），4结束（不包含）

• replace(旧的,新的)：将字符串中的旧字符替换成新字符

• var str1 = "abcde";
  var str2 = str1.replace("cd","XXX");
  console.log(str2); // abXXXe，将str1中的cd替换成XXX

• split(分割的节点)：一个字符串切割成N个小字符串，所以返回的是数组类型

• var str1 = "一,二,三,四,五";
  var arr = str1.split(","); // 将str1 以逗号进行分割，分割成N份，所以返回的结果一定
  是数组结构
  console.log( "共分割成："+arr.length+"份" );
  console.log( "第三份是：" + arr[2] ); // 三

3.3 数组

3.3.1 创建数组

var arr1 = new Array();

3.3.2 初始化数组的三种方式

// 第一种
var arr1 = new Array();
arr1[0] = 110;
arr1[1] = 119;
arr1[2] = 120;
// 第二种
var arr1 = new Array(10,"a",true);
// 第三种
var arr1 = [10,"a",true];
for (var i = 0; i < arr1.length; i++) {
　　console.log(arr1[i]);
}

3.3.3 数组的常用方法

• tostring()：将数组转换成字符串

• var arr = [1,2,3,4];
  console.log("类型为：" + typeof( arr ) );
  var str = arr.toString(); // 将数组转换成字符串
  console.log( str +",类型为：" + typeof( str ) );

• join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串。

• var arr = [1,2,3,4];
  var str = arr.join("-"); // 将数组中每个元素用-进行连接，并形成一个全新的字符串
  console.log( str +",类型为：" + typeof( str ) );

• concat(新元素)：将原来的数组连接新元素，原数组不变。

• var arr = [1,2,3,4];
  var arrnew = arr.concat(5,6); // 在arr数组的后面添加新的元素，形成一个新数组，但是
  原数组是不变的
  console.log( arrnew +",类型为：" + typeof( arrnew ) );
  console.log("原数组：" + arr);

• slice(开始，结束)：在数组中提取一部分，形成新的数组。
  • 1,2,3,4,5 slice(2,4) 结果：3,4

  • var arr = ['a','b','c','d','e','f','g','h'];
    var arrnew = arr.slice( 2,4 ); // 在arr数组中截取，从2开始（包含），4结束（不包
    含）
    console.log( arrnew ); // cd

• reverse()：数组的反转（倒序）

• var arr = [31,12,111,444];
  console.log( arr.toString() );
  arr.reverse(); // 将数组中的元素倒置
  console.log( arr.toString() );

• sort()：数组排序
  • arr.sort() 字符排序

    • var arr = [31,12,111,444];
      arr.sort(); // 字符排序（不会按照字面量的大小）
      console.log( arr );

  • arr.sort(func) 数值排序

    • var arr = [31,12,111,444];
      arr.sort( laosun ); // 数字排序（会按照字面量的大小）
      console.log( arr );
      // 定义排序函数
      function laosun(a,b){
      　　return a-b;
      }

3.4 Math数学对象

• Math 对象用于执行数学任务
• 没有构造函数 Math()
• 无需创建，直接把 Math 作为对象使用就可以调用其所有属性和方法

// 返回0-9之间任意一个随机数字
var i = Math.random() * 10;
var j = Math.floor(i);
console.log(j);

3.5 Number对象

Number.fixed(2); 自带四舍五入技能

var n = new Number( 12.345 );
var n1 = n.toFixed(2); // 12.35，固定两位小数，第三位小数四舍五入
console.log( n1 );
var x = new Number( 12.3 );
var n2 = x.toFixed(2); // 12.30，固定两位小数，位数不够，0来补齐
console.log( n2 );

3.6 正则表达式

对字符串执行模式匹配的强大工具

var reg1 = /^\d{3,6}$/; // 匹配纯数字3-6个
var reg2 = new RegExp(“^\\d{3,6}$");

// 方式1
var age = "18"; // 判断：1-3位纯数字
var reg = /^\d{1,3}$/; // 以/^开始，中间写正则内容，以$/结束
var b = reg.test(age); // 验证age变量的是否符合reg的匹配
if (b == true) {
　　console.log("验证通过！");
} else {
　　console.log("格式错误");
}
// 方式2
var name = "abc123"; // 大小写字母和数字的组合（特殊字符不能出现）, 5~8位
var reg = new RegExp("^[a-zA-Z0-9]{5,8}$"); // 以^开始，中间写正则内容，以$结束
if (reg.test(name)) {
　　console.log("验证通过！");
} else {
　　console.log("格式错误");
}

3.7 日期对象

var time = new Date();
console.log( time ); // Tue Jul 14 2020 11:09:46 GMT+0800 (中国标准时间)
var year = time.getFullYear(); // 年份
var month = time.getMonth() + 1; //月份从0开始，11结束，所以国内习惯要+1
var day = time.getDate(); // 几号
var hour = time.getHours(); // 几点
var mm = time.getMinutes(); // 分钟
var s = time.getSeconds(); //秒
var ms = time.getMilliseconds(); // 毫秒， 1000毫秒 = 1秒
var timestr = year+"年"+month+"月"+day+"号 "+hour+"点"+mm+"分"+s+"秒"+ms+"毫秒";
console.log( timestr );

3.8 函数

• 使用关键字 function 定义函数

  • function 函数名( 形参列表 ){
        // 函数体
        return 返回值;
    }

• 函数声明后不会立即执行，会在我们需要的时候调用到。
• 注意：
  • 形参：一定不要带数据类型
  • 分号是用来分隔可执行JavaScript语句。 由于函数声明不是一个可执行语句，所以不以分号结束。

3.8.1 无返回值

function qiuhe(a, b) {
　　var he = a + b;
　　console.log("两数之和：" + he);
}
qiuhe(3,4);

3.8.2 有返回值

function qiuhe(a, b) {
　　var he = a + b;
　　return "两数之和：" + he;
}
var s = qiuhe(3,4);
console.log( s );

3.8.3 参数对象

在函数内部，调用参数列表的属性

function func(a,b,c){
    console.log( arguments.length ); // 获得参数的个数
    console.log( arguments[1] ); // 获得下标为1的参数
}

3.8.4 构造函数

函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义

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

注： 上述函数以分号结尾，因为它是一个执行语句。

3.8.5 匿名函数

没有名称的函数

var fn = function(a, b) {// 没有名字的函数，应该用一个变量来接收
    return a * 10 + b;
};
console.log( fn(3, 4) );

3.8.6 全局函数

• isNaN：检查其参数是否是非数字值

  • console.log( isNaN( 123 ) ); // 数字，false
    console.log( isNaN( "hello" ) ); // 非数字，true
    console.log( isNaN( 4-1 ) ); // 数字，false
    console.log( isNaN( 123 ) ); // 数字，false
    console.log( isNaN( -10 ) ); // 数字，false
    console.log( isNaN( "123" ) ); // 数字，false
    console.log( isNaN( "1a23" ) ); // 非数字，true

• eval：用来转换字符串中的运算

  • var str = "1+3";
    console.log( str ); // 1+3 , +会认定为一种字符符号而已，没有加法的作用
    console.log( eval( str ) ); // 让字符串中的运算符号生效

• encodeURI 与 decodeURI

  • var name = "拉勾网";
    console.log( "转码前：" + name );
    name = encodeURI(name);
    console.log( "转码后：" + name );
    name = decodeURI(name);
    console.log( "解码后：" + name );

3.8.7 闭包

1、闭包的概念：指有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一
个函数。

2、闭包的作用：访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理；

简单地说：就是在函数的局部范围内声明一个封闭的环境，此环境不会被垃圾回收探测到。保证了数据
的安全唯一性

想了解闭包，首先要了解什么是全局变量，什么是局部变量

a = 10; // 全局变量，声明的时候可以不使用var
function test1(){
　　b = 20; // 不适用var声明的变量，就是全局变量
　　var c = 30; // 用var声明，并且在函数的内部。这样的变量叫做局部变量，有效范围只能
　　//在其声明的函数内部
　　console.log(c);
}
function test2(){
　　console.log(c); //c is not defined (c变量没有定义)
}
test1();
test2();

需求：统计方法执行了多少次

var count = 0; // 总次数
function test1(){
　　count++; // 自增+1
}
test1();
test1();
test1();

console.log( count );

谁都可以访问count，所以count变量并不安全，因为是全局变量。

如何才能安全呢？将count声明为局部变量

function test1(){
　　var count = 0; //局部变量
　　return count++; //外部无法访问count，只能通过return才能将count变量返回，并输
　　//出
}
test1();
test1();
test1();


console.log( test1() ); // 每次调用方法，首先就是将变量还原为0

结果一直是0，因为每次调用test1()，方法体的第一句代码就是还原，无论曾经的值是多少。

突发奇想，如果在test1()函数里面，再嵌套一个函数，js是支持函数嵌套的

　　function test1(){
　　　　var count = 0; //局部变量
　　　　function jia(){
　　　　　　return count++;
　　　　}
　　　　jia();
　　　　return count;
　　}
test1();
test1();
test1();

console.log( test1() ); // 每次调用方法，首先就是将变量还原为0

如果每次只调用test1()里面的jia()就好了。ok，闭包帮你解决此问题！

function test1(){
　　var count = 0; //局部变量
　　function jia(){
　　　　return count+=1;
　　}
　　return jia;
}
var fn = test1(); // fn => function jia(){return count+=1; }
fn();
fn();
console.log( fn() ); // 每次调用方法，首先就是将变量还原为0

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不 受外界干
扰。

直观的说就是形成一个不销毁的栈环境。

• 闭包的优点： 方便调用上下文中声明的局部变量 逻辑紧密，可以在一个函数中再创建个函数，避免了传参的问题
• 闭包的缺点： 因为使用闭包，可以使函数在执行完后不被销毁，保留在内存中，如果大量使用闭包就会造 成内存泄露，内存消耗很大

3.9 弹框输出

• 普通弹框 alert("hello，拉勾");
• 控制台日志输出 console.log("谷歌浏览器按F12进入控制台");
• 页面输出 document.write("

  我爱你中国

  "); 将

  元素输出到中

• 确认框 confirm("确定删除吗？");

  • var b = confirm("确定删除吗？");
    if(b){
        document.write( "
    删除成功！
    " );
    }else{
        document.write( "
    你取消了操作
    " );
    }

• 输入框 prompt("请输入姓名：");

  • var name = prompt("请输入你的名字：");
    document.write( "

    大名："+name+"！

    " );

4.DOM 操作

• 在一个html页面中，会使用很多标签来规划制作页面。
• 每个标签都有它存在的意义，如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找到这个标签元素
• 如何查找到这个元素是个难题，W3C组织的工程师们，突然看到了一棵大树。我要是想找到某一片叶子，应该怎么做？
• “顺藤摸瓜”，主树干有分支，每个分支还有许多小分支，只要把这个分支的结构整理清楚，任何一片叶子都不是难事了
• 叶子和大树的一些启发，工程师们开会讨论就定了这个理论“文档对象模型”，
• 文档对象模型，就是将页面中所有的标签元素都看成是一个对象（一片叶子），主树干定义为根节点（根元素），所有的标签都是从根元素延伸出去的，摸清结构，找到某个标签就不再困难了
  • 在节点树中，顶端节点就是根节点（root）
  • 每个节点都有父节点（除了根节点）
  • 任何一个节点都可以拥有任意数量的子节点
  • 同胞是拥有相同父节点的节点

• <html>
  <head>
  　　<meta charset="utf-8">
  　　<title>DOM 教程title>
  head>
  <body>
  　　<h1>第一节：HTML DOMh1>
  　　<p>Hello world!p>
  body>
  html>

从上面的 HTML 中：

• 节点没有父节点；它是根节点
• 和 的父节点是 节点
• 文本节点 "Hello world!" 的父节点是

  节点

并且：

• 节点拥有两个子节点： 和
• 节点拥有两个子节点： 与