JavaScript 详解

课程目标：
1、JavaScript介绍
2、HTML和JavaScript结合方式3、JavaScript的使用
4、DOM操作
5、BOM操作

JavaScript介绍

• 虽然是java作为前缀，但java和javascript的关系，就像老婆和老婆饼之间的关系，没有一毛钱关系！
• 网景公司在Netscape2.0首先推出了JavaScript
• JavaScript 的正式名称是 “ECMAScript”，此标准由 ECMA 组织发展和维护，简称“js”
• JavaScript 是一种网页编程技术，用来向 HTML 页面添加交互行为

• JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释执行代码，不进行预编译。

  js的特点

• 可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序 （后面会学习不用浏览器也能运行）

• 解释执行：事先不编译，逐行执行
• 基于对象：内置大量现成对象
• 适宜：

客户端数据计算
客户端表单合法性验证
浏览器事件的触发
网页特殊显示效果制作

js的组成

• ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准
• DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每一个节点。
• BOM：浏览器对象模型，是对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的准。

弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口大小
提供 Web 浏览器详细信息的定位对象
提供用户屏幕分辨率详细信息的屏幕对象
对 cookie 的支持
IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX对象，进而实现ajax局部刷新技术

HTML与javaScript结合方式

使用js的三种方式

行内脚本

1. 点击按钮（触发）

2. 弹框（具体的操作）

   <button onclick="alert('弹框测试')">点我一下</button>
   

   内部脚本

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

) 、除( / ) 、余数( % )
- 可以表示减号，也可以表示负号，如：x = -y
+可以表示加法，也可以用于字符串的连接递增( ++ ) 、递减( — )
i++ 相当于 i=i+1 i— 相当于 i=i-1 ### 关系运算 严格相等：=== 类型相同数值相同
非严格相等：!== var a = “10”; var b = 10; if (a == b)
alert(“equal”); if (a === b)
alert(“same”); ### 逻辑运算 逻辑非（!）、逻辑与（&&）、逻辑或（||） 逻辑运算的操作数均为 boolean 表达式
我要吃两碗拉面或者10个包子才能吃饱！问题是，我只吃两碗面，饱了！ 我只吃10个包子，饱了
我要吃两碗拉面并且10个包子才能吃饱！问题是，我只吃两碗面，没饱！ 我只吃10个包子，没饱， 1. 控制语句 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;
…
} ## 常用字符串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] ); // 三 ## 数组 ### 创建数组 var arr1 = new Array(); 1. 初始化数组的三种方式 // 第一种
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]);
} ### 数组的常用方法 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;
} ## Math数学对象 Math 对象用于执行数学任务没有构造函数 Math()
无需创建，直接把 Math 作为对象使用就可以调用其所有属性和方法
// 返回0-9之间任意一个随机数字var i = Math.random()

我爱你中国

元素输出到中确认框 confirm(“确定删除吗？”); var b = confirm(“确定删除吗？”); if(b){
document.write( “

删除成功！

你取消了操作

大名：”+name+”！

第一节：HTML DOM

Hello world!

从上面的 HTML 中：
节点没有父节点；它是根节点
和 的父节点是 节点文本节点 “Hello world!” 的父节点是

节点
并且：
节点拥有两个子节点： 和
节点拥有两个子节点： 与