JavaScript入门笔记
JavaScript编程语言
介绍个好东西JavaScript--前端的灵魂！
JavaScript，就是我们通常所说的JS。这是一种嵌入到HTML页面中的编程语言，由浏览器一边解释一边执行。我们都知道，前端最核心的3个技术是HTML、CSS和JavaScript。其中3者区别如下：HTML用于控制网页的结构，CSS用于控制网页的外观，而JavaScript控制着网页的行为。
JavaScript入门
学习目标
JavaScript的历史
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
JavaScript诞生于1995年。网景公司的员工布兰登 • 艾奇（Brendan Eich，1961年～）在1995年开发出了 JavaScript 语言。
JavaScript是由网景公司（Netscape）发明，最初命名为LiveScript；1995年12月与SUN公司合作，SUN公司就是开发了Java语言的公司，因市场宣传需要，改名为 JavaScript。
备注：由于 Sun 公司当时的Java 语言特别火，所以为了傍大牌，就借势改名为JavaScript。如同“北大”和“北大青鸟”的关系。“北大青鸟”就是傍“北大”大牌。
同时期还有其他的网页语言，比如VBScript、JScript等等，但是后来都被JavaScript打败了，所以现在的浏览器中，只运行一种脚本语言就是JavaScript。
JavaScript特点
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
- 是一种解释性脚本语言。
- 主要用来向HTML页面添加交互行为。
- 可以直接嵌入HTML页面。
- 跨平台特性。
JavaScript的优点
- 脚本语言。
- 基于对象。
- 简单。
- 动态性。
- 跨平台性。
JavaScript的使用方法
1.HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
<head>
<script>
alert("我的第一个 JavaScript");
</script>
</head>
2.JavaScript 会在页面加载时向 HTML 的 <body> 写文本
<!DOCTYPE html>
<html>
<body>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
</body>
</html>
3.通过<script src="style.js" type="text/javascript"></script>的方法向页面中引入外联的JavaScript脚本文件，这种方法也是应用最多的。
<!DOCTYPE html>
<html>
<head>
<script src="style.js" type="text/javascript"></script>
</head>
<body>
<script>
document.write("<h1>这是一个标题</h1>"); document.write("<p>这是一个段落</p>");
</script>
</body>
</html>
JavaScript的语法
JavaScript的语法和Java语言类似，每个语句以;结束，语句块用{...}。但是，JavaScript并不强制要求在每个语句的结尾加;，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;。
注意：让JavaScript引擎自动加分号在某些情况下会改变程序的语义，导致运行结果与期望不一致。大家在使用JavaScript的时候都要加上结尾的分号。
例如：下面的一行代码就是一个完整的赋值语句：
var x = 1;
语句块是一组语句的集合，例如，下面的代码先做了一个判断，如果判断成立，将执行{...}中的所有语句：
if (2 > 1) {
alert(1);
alert(2);
alert(3);
}
注意花括号{...}内的语句具有缩进，通常是4个空格。缩进不是JavaScript语法要求必须的，但缩进有助于我们理解代码的层次，所以编写代码时要遵守缩进规则。很多文本编辑器具有“自动缩进”的功能，可以帮助整理代码。
{...}还可以嵌套，形成层级结构：
if (2 > 1) {
alert(1);
alert(2);
alert(3);
x=1;
y=2;
if (x < y) {
alert(4);
}
if (x > y) {
alert(5);
}
}
JavaScript本身对嵌套的层级没有限制，但是过多的嵌套无疑会大大增加看懂代码的难度。遇到这种情况，需要把部分代码抽出来，作为函数来调用，这样可以减少代码的复杂度。
JavaScript的注释
1.以//开头直到行末的字符被视为行注释，注释是给开发人员看到，JavaScript引擎会自动忽略：
// 这是一行注释
alert('hello'); // 这也是注释
2.另一种块注释是用/*...*/把多行字符包裹起来，把一大“块”视为一个注释：
/* 从这里开始是块注释
仍然是注释
仍然是注释
注释结束 */
课程总结
JavaScript变量与常量
学习目标
JavaScript的组成部分
- ECMAScript：JavaScript的核心，描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义)。
- 文档对象模型：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。
- 浏览器对象模型：BOM（浏览器对象模型）对浏览器窗口进行访问和操作。例如弹出新的浏览器窗口，移动、改变和关闭浏览器窗口等等。
JavaScript关键字和保留字
JavaScript描述了一组具有特定用途的关键字，一般用于控制语句的开始或结束，或者用于执行特定的操作等。
| break | else | new | var |
|---|---|---|---|
| case | finally | return | void |
| catch | for | switch | while |
| continue | function | this | with |
| default | if | throw | |
| delete | in | try | |
| do | instanceof | typeof |
JavaScript还描述了另一组不能用作标识符的保留字。尽管保留字在JavaScript中还没有特定的用途，但它们很有可能在将来被用作关键字。
| abstract | enum | int | short |
|---|---|---|---|
| boolean | export | interface | static |
| byte | extends | long | super |
| char | final | native | synchronized |
| class | float | package | throws |
| const | goto | private | transient |
| debugger | implements | protected | volatile |
| double | import | public |
| alert | eval | location | open |
|---|---|---|---|
| array | focus | math | outerHeight |
| blur | funtion | name | parent |
| boolean | history | navigator | parseFloat |
| date | image | number | regExp |
| document | isNaN | object | status |
| escape | length | onLoad | string |
JavaScript变量
什么是变量？
- 在JavaScript中，变量指的是一个可以改变的量。也就是说，变量的值在程序运行过程中是可以改变的。
- 变量是用于存储数据的"容器"。我们通过「变量名」获取数据，甚至可以修改数据。
- 变量的本质是程序在内存中申请的一块用来存放数据的空间。
变量的命名
1.变量的名字就和我们的名字一样，程序也需要通过名字来找到对应的数据。
例如：曹老师，我想要JavaScript的视频。曹老师就是变量的名字，JavaScript的视频就是变量的值。
2.在JavaScript中，给一个变量命名，我们需要遵循以下的原则：
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
- 变量名称对大小写敏感（y 和 Y 是不同的变量）
- JavaScript 语句和 JavaScript 变量都对大小写敏感
- 变量的声明不能使用保留字和关键字
变量的使用
1.定义变量时要使用var操作符（var是关键），后面跟一个变量名（变量名是标识符）。
例：var a = 100;
如下图所示：
2.一个var也可以同时声明多个变量名，其中变量名之间必须用英文逗号（,）隔开，例如：
var a=10,b=20,c=30;
JavaScript的常量
在JavaScript中，常量指的是一个不能改变的量。也就是说，常量的值从定义开始就是固定的，一直到程序结束都不会改变。
在JavaScript中，我们可以把常量看成是一种特殊的变量，之所以特殊，是因为它的值是不会变的。一般情况下，常量名全部大写，别人一看就知道这个值很特殊，有特殊用途，如：var DEBUG = 1
目前我们只需要简单了解常量的知识，在之后的课程中我们会详细讲解。
课程总结
JavaScript数据类型
学习目标
JavaScript数据类型介绍
1.数据类型其实就是变量的值的类型。
例：var a = 10； 10就是数字类型的数据类型。
2.在JavaScript中，数据类型可以分为两种：一种是“基本数据类型”；另外一种是“引用数据类型”。
JavaScript中的数据类型
JavaScript中的基本数据类型：数字、字符串、布尔值、未定义值和空值。JavaScript中的引用数据类型，Object类型。
1.Undefined类型只有一个值，即特殊的undefined,下面是四种常见的undefined出现的情况：
- 在使用var声明变量，但没有对其初始化时，会返回undefined。
var box;
alert(box); //值是undefined
- 获取一个对象的某个不存在的属性时，会返回undefined。
var obj = {
name = 'cao';
}
alert(obj.like);
- 函数没有明确的返回值，却在其他地方使用了返回值，会返回undefined。
function foo(){};
alert(foo());
- 函数定义使用了多个形式参数，而在调用是传递的参数数量少于形参的数量，那么未匹配上 的参数就为undefined。
function foo(param1,param2,param3){
document.write("param1");
}
foo(1,2);
2.Null类型
Null类型是一个只有一个值的数据类型，即特殊的值null。它表示一个空对象引用(指针)，而typeof操作符检测null会返回object,下面是三种常见的null出现的情况：
- 数字、字符串等数据在定义的时候，系统都会分配一定的内存空间。如果一个变量的值等于null，则表示系统没有给这个变量n分配内存空间。
var box = null;
alert(typeof box);
- JavaScript在获取DOM元素时，没有获取到指定的元素对象，就会返回null。
document.getElementById("id");
- 在使用正则表达式进行捕获时，如果没有捕获结果，就会返回null。
test.match(/a/);
3.null和undefined两种类型的异同
1.相同点
- null类型和undefined两种类型只有一个字面值。
- null类型和undefined两种类型在转换为boolean类型时都会转为false，所以通过非运算符！获取结果是true时，不能区分是null类型或undefined类型。
- 在两者要转换成对象是都会抛出引用异常。
var a;
console.log(a.name); //Cannot read property 'name' of undefined
var b = null;
console.log(b.name) //Cannot read property 'name' of null
- 两者是相等的 null == undefined。
2.不同点
- null是JavaScript中的关键字，undefined是JavaScript中的一个全局变量，挂载在window对象上的一个变量，并不是关键字。
- 使用typeof运算符检测时，undefined类型的值会返回undefined，null类型会返回object。
- 在进行字符串类型转换时null会转换成null，undefined会转换成undefined。
- 在进行运算时，undefined会转换成NaN无法参与运算，null会转换成0可以参加运算。
undefined+0; //NaN
null+0; //0
4.JavaScript 数字（Number）类型，JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
var box = 0 / 0; //NaN
//NaN，即非数值(Not a Number)是一个特殊的值，这个数值用于表示一个本来要返回数值的操作数未返回数值的情况
5.JavaScript中的数字类型可以采用八进制或十六进制的方式表示数值。
var num1 = 024; //20
var num2 = 079; //79
var num3 = 0x3f; //63
var num4 = 0x2g; //SynataxError: Invaild or unexpected token
6.JavaScript 字符串,字符串是存储字符（比如 "cao teacher"）的变量。字符串可以是引号中的任意文本。可以以使用单引号或双引号：
var name='cao teacher'; //使用单引号来写
var name="cao teacher"; //使用双引号来写
//单引号括起来的字符串中，不能含有单引号，只能含有双引号。同样的道理，双引号括起来的字符串中，也不能含有双引号，只能含有单引号。
var test = "曹老师，给你"舒服"的前端课程~";//被单双引号包裹的数字也会变成字符串类型。
var test = "1000";
var test = String('true'); //调用String函数的方式声明字符串
7.JavaScript 布尔类型布尔（逻辑）只能有两个值：true 或 false。
var x=true; //值是true
var y=false; //值是false
8.Object类型，也是引用数据类型，数组和对象都是Object类型。
var cars=new Array(); //创建数组
var mObj=new Object(); //创建对象
课程总结
JavaScript_type of 操作符
学习目标
typeof操作符
1.typeof是用来检测变量的数据类型的操作符，有以下两种形式：
typeof operand
typeof (operand)
2.operand表示需要返回的数据类型可以是引用类型也可以是基本数据类型。
3.括号有时候是必须的，如果不加上括号将会因为优先级的问题得不到我们想要的结果。
| 类型 | 结果 |
|---|---|
| undefined | "undefined" |
| boolean | "boolean" |
| string | "string" |
| number | "number" |
| 任何其他对象 | "object" |
| 函数对象 | "function" |
4.处理Undefined类型的值
虽然Undefined的值只有一个undefined，但是typeof运算符在处理以下3种值时都会返回undefined。
- undefined本身。
- 未声明的变量。
- 已声明未初始化的变量。
typeof true =='undefined';
typeof false =='undefined';
5.处理Boolean类型的值
Boolean类型的值只有两个，分别是true和false。typeof运算符在处理这两个值以及它们的包装类型时会返回Boolean，但是不推荐使用包装类型的写法。
```js
typeof true =='boolean';
typeof false =='boolean';
typeof Boolean(true) ==='boolean'; //不推荐
6.处理Number类型的值
对于Number类型的数据，可以概况为以下的值，typeof运算符在处理时会返回"number"
-
数字，如1,123,345。
-
Number类型的静态变量，如Number.MAX_VALUE。
-
Math对象的静态变量值，如Math.PI。
-
NaN，虽然NaN是Not aNumber的缩写，但是他是number类型。
-
Infinity和-Infinity，表示的是无穷大和无穷小的数。
-
数值类型的包装类型Number(1)不推荐
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof Math.LN2 === 'number';
typeof Infinity === 'number';
typeof NaN === 'number';
typeof Number(1) === 'number'; //不推荐
7.处理String类型的值
对于String类型的数据，可以概况为以下的值，typeof运算符在处理时会返回"string"
- 任何类型的字符串，包括空字符串和非空字符串。
- 返回值为字符串类型的表达式。
- 字符串类型的包装类型 不推荐
typeof "" === 'string';
typeof "str" === 'string';
typeof (typeof 1) === 'string';
typeof String("abc") === 'string'; //不推荐
8.处理Function类型的值
对于Function类型的数据，可以概况为以下的值，typeof运算符在处理时会返回"function"
- 函数的定义，包括函数的声明和函数表达式。
- 使用class关键字定义的类。
- 某些内置对象的特定函数。
var foo = function(){};
function foo2(){}
typeof foo === 'function';
typeof foo2 === 'function';
typeof Class C{} === 'function';
typeof Math.sin === 'function';
typeof new Function() === 'function';
9.处理Object类型的值
对于Object类型的数据，可以概况为以下的值，typeof运算符在处理时会返回"object"。
- 对于字面量的形式，例如{name:'kingx'}。
- 数组，例如[1,2,3,]和Array(1,2,3)。
- 所有构造函数通过new操作符实例化后得到的对象，例如new Date()，但是 newFunction(){}除外。
typeof{a:1} === 'object';
typeof[1,2,4] === 'object';
typeof new Date()=== 'object';
10.处理null类型的值
用typeof处理null类型，返回的是'Object',这是一个让大家感到惊讶的结果，null是一个原生类型的数据，为什么会返回object呢？
这是一个JavaScript设计之初就存在的问题，我们简单介绍下：
在JavaScript中每种数据类型都会使用3bit表示：
- 000表示Object类型的数据。
- 001表示Int类型的数据。
- 010表示Double类型的数据。
- 100表示String类型的数据。
- 110表示Boolean类型的数据。
由于null代表的是空指针，大多数平台中值为0x00，因此null类型的标签就成了0，所以使用typeof运算符判断时就会为Object类型。
11.typeof相关的语法括号问题
因为JavaScript优先级的存在不加括号可能会导致运算结果的差异。
var number = 123;
typeof (number+'hello'); //string
typeof number+'hello'; //numberhello
typeof运算符的优先级高于+，但是typeof运算符优先级小于()未使用括号时，会优先处理typeof number 返回的是number，然后与hello字符串拼接。所以返回的是numberhello。
typeof 1/0; //NaN
typeof (1/0); //number
第一行代码因为没有小括号会运行typeof1，返回number，然后除以0，得到NaN。
第二行代码会先运算1/0得到NaN，在经过typeof后得到Number。
课程总结
JavaScript隐式转换
学习目标
JavaScript类型转换
1.JavaScript 变量可以转换为新变量或其他数据类型：
1.通过 JavaScript 自身自动转换（隐式转换）。
2.通过使用 JavaScript 函数（强制转换）。
2.在学习类型转换之前先学习下if else语句：
if(decide){
decide为真;
}else{
decide为假;
}
var str = "2018" + 1000;
document.write(str);
JavaScript其他类型转换为Boolean类型
| 数据类型 | 转换为true的值 | 转换为false的值 |
|---|---|---|
| Boolean | true | false |
| String | 任何非空字符串 | 空字符串 |
| Number | 任何非零数字值(包括无穷大) | 0和NaN |
| Object | 任何对象 | null |
| Function | 任何Function类型 | |
| Undefined | undefined | |
| null | null |
JavaScript其他类型转换为number类型
| 数据类型 | 转换的值 |
|---|---|
| Undefined | NAN |
| Null | 0 |
| true | 1 |
| False | 0 |
| 字符串 | 转换为数字或者NaN |
| 其他对象 | 转换为NaN |
JavaScript其他类型转换为字符串类型
| 数据类型 | 转换的值 |
|---|---|
| Undefined | Undefined |
| Null | null |
| true | True |
| False | False |
| Number | NaN，0或者数值对应的字符串 |
| 其他对象 | 转换为toString（）否则转换为Undefined |
课程总结
JavaScript强制转换Boolean()函数
学习目标
JavaScript强制转换
1.JavaScript 变量可以转换为新变量或其他数据类型：
- 通过 JavaScript 自身自动转换（隐式转换）。
- 通过使用 JavaScript 函数（强制转换）。
JavaScript其他类型转换为Boolean类型
1.使用Boolean()函数强制转换
| 数据类型 | 转换为true的值 | 转换为false的值 |
|---|---|---|
| Boolean | true | false |
| String | 任何非空字符串 | 空字符串 |
| Number | 任何非零数字值(包括无穷大) | 0和NaN |
| Object | 任何对象 | null |
| Undefined | undefined |
课程总结
JavaScript强制转换number()函数
学习目标
JavaScript其他类型转换为number类型
通过number函数强制转换number（）
| 数据类型 | 转换的值 |
|---|---|
| 数值 | 数值 |
| 字符串 | 转换为数字或者NaN或者0 |
| trur | 1 |
| False | 0 |
| Undefined | NaN |
| Null | 0 |
number()函数可以用于将任何数据类型转换为Number类型，它在转换时遵循以下的规则：
- 如果是数字，会按照对应的进制格式，统一转换成十进制并返回。
Number(10); //10
Number(010); //8, 010是八进制数据
Number(0x10); //16,0x10是十六进制数据
- 如果是Boolean类型的值，true将返回1，false将返回0。
Number(true); //1
Number(false); //0
- 如果值是null，则返回0
Number(null); //0
- 如果只是undefined,则返回NaN
Number(undefined); //NaN
如果只是字符串类型则遵循以下规则
- 如果该字符串只包含数字，则会转换成十进制数，如果数字前面有0则会忽略这个0。
Number('21'); //21
Number('021'); //21
- 如果字符串是有效的浮点数形式，则会转换成对应的浮点数，前置的多个0会被清空。
Number('0.12'); //0.12
Number('00.12'); //0.12
- 如果字符串是有效的十六进制形式，则会转换成十进制数值。
Number('0x12'); //18
Number('0x21'); //33
- 如果字符串是有效的八进制形式，则不会按照八进制转换，而是直接转换成十进制数值，并且前置0会被忽略。
Number('010'); //10;
Number('0020'); //20
- 如果字符串为空，即字符串不包含任何字符，或者是连续的多个空格，则会转换为0。
Number(''); //0
Number(' '); //0
- 如果字符串包含了任何不是以上5种情况的其他格式的内容，则会返回NaN。
Number('123a'); //NaN
Number('a1.1'); //NaN
Number('abc'); //NaN
- 如果值为对象类型，则会先调用valueOf()函数获取返回值，在按照上述的方式进行转换,如果都不满足，则会调用对象的toString函数获取函数返回值，并将返回值重新按照步骤判断能否转换成Number类型，如果也不满足，则会返回NaN。
通过valueOf()函数将对象转换成Number类型的实例。
var obj = {
age:21,
valueOf:function(){
return this.age;
},
toString:function(){
return 'good';
}
};
Number(obj); //21
通过toString()函数将对象转换成Number类型的实例。
var obj = {
age:21,
valueOf:function(){
return [];
},
toString:function(){
return this.age;
}
};
Number(obj); //21
通过valueOf()函数和toString()函数都无法转换成Number类型，输出NaN。
var obj = {
age:21,
valueOf:function(){
return 'a';
},
toString:function(){
return 'b';
}
};
Number(obj); //NaN
如果valueOf()函数和toString()函数返回的都是对象类型，则会抛出异常。
var obj = {
age:21,
valueOf:function(){
return [];
},
toString:function(){
return [];
}
};
Number(obj); //TypeError:Cannot convert object tp primitive value
课程总结
JavaScript强制转换parseInt()函数
学习目标
parseInt()函数
parseInt()函数用于解析一个字符串，并返回指定的基数对应的整数值。
语法格式：
parseInt(string,radix);
- string是要被解析的值，如果该参数不是一个字符串会先调用toString()函数将其转换为字符串，字符串前面的空白符会被忽略。
- radix表示的进制转换的基数，数据范围是2-36,采用不同的基数会有不同的结果，所以在任何情况下使用parseInt函数都应该手动补充第二个基数。
1.非字符串类型转换为字符串类型
parseInt('0x12',16); //18
parseInt(0x12,16); //24
第一条语句直接将字符串转换为十六进制得到结果1x16+2 =18。
第二条语句由于传入的是十六进制数，所以会先转换成十进制数18，然后在转换成字符串"18"，再将字符串"18"转换成16进制，得到结果为1x16+8=24。
2.数据截取的前置匹配原则
parseInt()函数在做转换时，会从字符串的第一个字符进行匹配，如果处于指定基数的范围，则保留并继续往后匹配满足条件的字符，直到某个字符不满足指定技术的范围，从该字符开始，舍弃后面的所有字符，在获取满足条件的字符后，将这些字符转换为整数。
parseInt("fg123",16); //15
parseInt("0x12",16); //18=16+2
parseInt("0x12",10); //0
如果传入的字符串中设计运算，则不执行，如果传入的算术表达式，则运算后在计算。
parseInt(15*3,10); //45, 先运算45在转换成10进制
parseInt("15*3",10); //15，直接当做字符串处理
3.对包含字符e的不同数据处理差异
当传入的参数本身就是Number类型时，会将e按照科学计数法计算后转换成字符串，然后按照对应的基数转换成最终的结果
当传入的字符串中包含e时，并不会按照科学计数法计算，而是判断字符e是否包含在可处理的进制范围内。
parseInt(6e3,10); //6000 6*10的三次幂
parseInt(6e3,16); //24576 6*10的三次幂 转换成16进制
parseInt('6e3',10); //6 转换成10进制
parseInt('6e3',10); //1763 转换成16进制
4.对浮点类型的处理
如果传入的值是浮点类型，则会忽略小数点及后面的数，直接取整。
parseInt('6.01',10); //6
parseInt(6.99,10); //6
经过上面的学习我们来总结一下：
parseInt('0xF',16); //十六进制f为15 返回15
parseInt('F',16); //十六进制f为15 返回15
parseInt('17',8); //八进制1x7+8=15 返回15
parseInt(021,8); //021先转换成十进制17，然后转换成字符串"17",然后转换 成八进制1x7+8=15 返回15
parseInt("015",10); //前面的0直接忽略 返回15
parseInt(15.99,10); //小数点后直接忽略 返回15
parseInt("15,123",10); //字符串匹配到15 返回15
parseInt("FX123",16); //十六进制f为15 返回15
parseInt("1111",2); //1x2三次幂 + 1x2二次幂 + 1x2 + 1 =15
parseInt("15*3",10); //字符串不会进行运算返回15
parseInt("15e2",10); //10进制不包含e 返回15
parseInt("15px",10); //字符串匹配到15 返回15
课程总结
JavaScript强制转换parseFloat()函数
学习目标
parseFloat()函数
parseFloat()函数用于解析一个字符串，返回对应的浮点数，如果不能转换返回NaN，parseFloat()函数没有进制的概念所以相对简单接下来我们看下注意点。
1.如果解析过程中遇到了正负号，数字0-9，小数点或者科学计数法e以外的字符，则会忽略从该字符开始至结束的所有字符，然后返回当前已经解析的字符浮点数。
parseFloat("+1.2"); //1.2
parseFloat("-1.2"); //-1.2
parseFloat("++1.2"); //NaN
parseFloat("--1.2"); //NaN
parseFloat("1+1.2"); //1
2.字符串前面的空白符会被直接忽略，如果第一个字符无法解析，就返回NaN。
parseFloat(' 1.2'); //1.2
parseFloat('f1.2'); //NaN
3.字符串中出现的合法科学运算符e，进行运算处理后会转换成浮点型数，这点与parseInt()函数的处理有很大的不同。
parseFloat('4e3'); //4000;
parseInt('4e3',10); //4;
4.对于小数点只能正确匹配第一个，第二个小数点是无效的。
parseFloat('11.20'); //11.2
parseFloat('11.2.10'); //11.2
经过上面的学习我们来总结一下：
parseFloat('123af'); //123
parseFloat('0xa'); //0
parseFloat('22.5'); //22.5
parseFloat('22.3.6'); //22.3
parseFloat('0908.5'); //908.5
虽然Number(),parseInt(),parseFloat()函数都能用于Number类型的转换，但是大家要注意他们的差异。
- Number()函数转换的是传入的整个值，并不会像parseInt()和parseFloat()一样从首位开始匹配符合条件的值。
- parseInt()函数在遇到小数点时会停止解析，parseFloat()函数在解析小数点时，会将第一个小数点作为有效字符，第二个和之后的小数点忽略。
- parseFloat()函数在使用时只需要传递字符串，parseInt()函数在使用时需要添加指数。
课程总结
JavaScript强制转换字符串
学习目标
JavaScript强制转换字符串
| 数据类型 | 转换的值 |
|---|---|
| 数值 | 数值本身 |
| 字符串 | 字符串本身 |
| true | True |
| False | False |
| Undefined | Undefined |
| Null | Null |
在JavaScript中，想要将数字转换为字符串，也有2种方式。
1.与空字符串相加
var a = 2018 + "";
var b = a + 1000;
console.log(b);
2.toString()函数
var a = 2018;
var b = a.toString() + 1000;
console.log(b);
3.使用string函数强制转换string（）
var a = 2018;
var b = string(a) + 1000;
console.log(b);
4.string（）和to string（）区别
1.toString()方法一般是不需要传参的
2.如果在转型之前不知道变量是否是null或者undefined的情况下，我们还可以使用转型函数String()，这个函数能够将任何类型的值转换为字符串。
课程总结
JavaScript算数运算符
学习目标
JavaScript算术运算符
JavaScript定义了5个算术运算符，加减乘除，取余。如果在算术运算的值不是数值，那么后台会先使用Number()转型函数将其转换为数值(隐式转换)。
1.加法
var box = 1 + 2; //等于3
var box = 1 + NaN; //NaN，只要有一个NaN就为NaN
2.减法
var box = 100 - 70; //等于30
var box = -100 - 70 //等于-170
3.乘法
var box = 100 * 70; //7000
var box = 100 * NaN; //NaN，只要有一个NaN即为NaN
4.除法
var box = 100 / 70; //1.42....
var box = 100 / NaN; //NaN
5.取余
var box = 10 % 3; //1，余数为1
var box = 100 % NaN; //NaN
6.递增++和递减--
var box = 100;
++box; //把box累加一个1，相当于box = box+1--box;
box--; //把box累减一个1，相当于box = box-1box++;
7.前置和后置的区别
在没有赋值操作，前置和后置是一样的。但在赋值操作时，如果递增或递减运算符前置，那么前置的运算符会先累加或累减再赋值，如果是后置运算符则先赋值再累加或累减。
var box = 100;
var age = ++box; //age值为101
var height = box++; //height值为100
8.+号的两种作用
var a = 1+1; //纯数值 就是加法
alert(a);
var a = 1+'123abc'; //数值和字符串 连接符作用1123abc
alert(a);
判断一个数是整数，还是小数？
从前面的学习可以知道，对于一个“数字型字符串”，如果这个数字是整数，则parseInt()和parseFloat()两个方法返回的结果是一样的，例如parseInt(“2017”)返回2017，parseFloat(“2017”)返回2017。如果这个数字是小数，则parseInt()和parseFloat()两个返回的结果是不一样的，例如parseInt(“3.14”)返回3，而parseFloat(“3.14”)返回的是3.14。
也就是说，如果是整数，则parseInt()和parseFloat()返回结果一样。如果是小数，则parseInt()和parseFloat()返回结果不一样。因此我们可以通过这个特点，来判断一个数是整数，还是小数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var n = 3.14;
if (parseInt(n.toString()) == parseFloat(n.toString()))
{
document.write(n+ "是整数")
}
else
{
document.write(n + "是小数")
}
</script>
</head>
<body>
</body>
</html>
课程总结
JavaScript比较和条件运算符
学习目标
JavaScript比较运算符
比较运算符：小于(<)、大于(>)、小于等于(<=)、大于等于(>=)、相等(==)、不等(!=)、全等(恒等)(===)、不全等(不恒等)(!==)。
| 运算符 | 说明 | 举例 |
|---|---|---|
| > | 大于 | 2>1 //返回true |
| < | 小于 | 2<1 //返回false |
| >= | 大于等于 | 2>=2 //返回true |
| <= | 小于等于 | 2<=2 //返回true |
| == | 等于 | 1==2 //返回false |
| != | 不等于 | 1!=2 //返回true |
JavaScript条件运算符
JavaScript还为我们提供了一种特殊的运算符：条件运算符。条件运算符，也叫“三目运算符”。在JavaScript中，条件运算符用英文问号（?）表示。
var a = (2 > 1) ? "小芳" : "小美";
document.write(a);
比较运算符操作非数值时规则：
- 两个操作数都是数值，则数值比较；
- 两个操作数都是字符串，则比较两个字符串对应的字符编码值；
- 两个操作数有一个是数值，则将另一个转换为数值，再进行数值比较；
- 两个操作数有一个是对象，则先调用valueOf()方法或toString()方法，再用结果比较；
非数值相等和不等比较时规则：
- 一个操作数是布尔值，则比较之前将其转换为数值，false转成0，true转成1；
- 一个操作数是字符串，则比较之前将其转成为数值再比较；
- 一个操作数是对象，则先调用valueOf()或toString()方法后再和返回值比较；
- 不需要任何转换的情况下，null和undefined是相等的；
- 一个操作数是NaN，则==返回false，!=返回true；并且NaN和自身不等
- 两个操作数都是对象，则比较他们是否是同一个对象，如果都指向同一个对象，则返回true，否则返回false。
- 在全等和全不等的判断上，比如值和类型都相等，才返回true，否则返回false。
课程总结
JavaScript赋值和逻辑运算符
学习目标
JavaScript赋值运算符
赋值运算符：等于(=) 加等于(+=) 减等于（-=） 乘等于（*=） 除等于（/=） 取于等于（%=）
var ad = 6;
var ae = 6;
//alert(ad+=ae);
//alert(ad*=ae);
//alert(ad/=ae);
//alert(ad%=ae);
alert(ad-=ae)
JavaScript逻辑运算符
逻辑运算符通常用于布尔值的操作，一般和关系运算符配合使用，有三个逻辑运算符：逻辑与(AND)、逻辑或(OR)、逻辑非(NOT)。
1.逻辑与(AND) ：&&
var box = (5 > 4) && (4 > 3) //true，两边都为true，返回true。
2.逻辑或(OR)：||
var box = (9 > 7) || (7 > 8); //true，两边只要有一边是true，返回true
3.逻辑非(NOT)：!
逻辑非运算符可以用于任何值。无论这个值是什么数据类型，这个运算符都会返回一个布尔值。
它的流程是：先将这个值转换成布尔值，然后取反，规则如下：
1.操作数是一个对象，返回false；
2.操作数是一个空字符串，返回true；
3.操作数是一个非空字符串，返回false；
4.操作数是数值0，返回true；
5.操作数是任意非0数值(包括Infinity)，false；
6.操作数是null，返回true；
7.操作数是NaN，返回true；
8.操作数是undefined，返回true；
课程总结
JavaScript判断语句
学习目标
JavaScript判断语句
条件分支语句if () {} else {}
语法：if (条件表达式) {语句;} else if (条件表达式) {语句;} ... else {语句;}
例一：
var score = 100;
if (score > 60) {
alert("那你很棒棒噢~");
}
//这个“条件”一般是一个比较表达式。如果“条件”返回为true，则会执行大括号{}内部的程序；如果“条件”返回为false，则会直接跳过大括号{}内部的程序，然后按照顺序来执行后面的程序。
例二：
var score = 100;
if (score < 60) {
alert("补考！");
} else {
alert("通过！");
}
//“if…else…”相对“if…”来说，仅仅是多了一个选择。当条件返回为true时，会执行if后面大括号{}中的程序；当条件返回为false时，会执行else后面大括号{}中的程序。
例三：
var score = 100;
if (score >= 100) { //如果满足条件，不会执行下面任何分支
alert('甲');
} else if (score >= 90) {
alert('乙');
} else if (score >= 80) {
alert('丙');
} else if (score >= 70) {
alert('丁');
} else if (score >= 60) {
alert('及格');
} else { //如果以上都不满足，则输出不及格
alert('不及格');
}
//对于多向选择，我们会从第1个if开始判断，如果第1个if条件不满足，则判断第2个if条件……直到满足为止。一旦满足，就会退出整个if结构。
例四：
var gender = "女";
var height = 172;
if(gender=="男")
{
if(height>170)
{
document.write("高个子男生");
}
else
{
document.write("矮个子男生");
}
}
else
{
if (height > 170)
{
document.write("高个子女生");
}
else
{
document.write("矮个子女生");
}
}
//在这个例子中，首先外层if语句的判断条件gender=="男"返回false，因此会执行else语句。然后我们可以看到else语句内部还有一个if语句，这个内层if语句的判断条件height>170返回true，所以最终输出内容为“高个子女生”。
多重分支语句
语法：switch () { case n : ...};switch语句是多重条件判断，用于多个值相等的比较。
var box = 1;
switch (box) { //用于判断box相等的多个值
case 1 :
alert('one');
break; //break;用于防止语句的穿透
case 2 :
alert('two');
break;
case 3 :
alert('three');
break;
default : //相当于if语句里的else，否则的意思
alert('error');
}
课程总结
JavaScript 循环语句
学习目标
JavaScript 循环语句
1.do...while语句是一种先运行，后判断的循环语句。也就是说，不管条件是否满足，至少先运行一次循环体。
var box = 1; //如果是1，执行五次，如果是10，执行1次
do {
alert(box);
box++;
} while (box <= 5); //先运行一次，再判断
2.while语句是一种先判断，后运行的循环语句。也就是说，必须满足条件了之后，方可运行循环体。
var box = 1; //如果是1，执行五次，如果是10，不执行
while (box <= 5) { //先判断，再执行
alert(box);
box++;
}
3.for语句也是一种先判断，后运行的循环语句。但它具有在执行循环之前初始变量和定义循环后要执行代码的能力。
for (var box = 1; box <= 5 ; box++) { //第一步，声明变量var box = 1;
alert(box); //第二步，判断box <=5
} //第三步，alert(box)
//第四步，box++
//第五步，从第二步再来，直到判断为false
4.for...in语句是一种精准的迭代语句，可以用来枚举对象的属性。
var box = { //创建一个对象
'name' : 'Cao Teacher’, //键值对，左边是属性名，右边是值 'age' : 28,
'height' : 178
};
for (var p in box) { //列举出对象的所有属性 alert(p);
}
5.break和continue语句用于在循环中精确地控制代码的执行。其中，break语句会立即退出循环，强制继续执行循环体后面的语句。而continue语句退出当前循环，继续后面的循环。
for (var box = 1; box <= 10; box++) {
if (box == 5) break; //如果box是5，就退出循环
document.write(box);
document.write('<br />');
}
for (var box = 1; box <= 10; box++) {
if (box == 5) continue; //如果box是5，就退出当前循环
document.write(box);
document.write('<br />');
}
找出“水仙花数”
所谓“水仙花数”是指一个3位数，其各位数字的立方和等于该数的本身。例如153就是一个水仙花数，因为153 = 13 + 53 + 33。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//定义一个空字符串，用来保存水仙花数
var str = "";
for (var i = 100; i < 1000; i++)
{
var a = i % 10; //提取个位数
var b = (i / 10) % 10 //提取十位数
b = parseInt(b); //舍弃小数部分
var c = i / 100; //提取百位数
c = parseInt(c); //舍弃小数部分
if (i == (a * a * a + b * b * b + c * c * c))
{
str = str + i + "、";
}
}
document.write("水仙花数有：" + str);
</script>
</head>
<body>
</body>
</html>
课程总结
JavaScript函数
学习目标
JavaScript函数介绍
什么是函数？在介绍什么函数之前，我们先看一段代码:
var sum1 = 0;
for (var i = 1; i <= 50; i++){
sum1 += i;
}
document.write("50以内所有整数之和为：" + sum1);
document.write("<br/>");
大家一看就知道上面这段代码实现的功能是：计算50以内所有整数之和。如果要分别计算“50以内所有整数之和”以及“100以内所有整数之和”，那应该怎么实现呢？不少同学很快就写下了以下代码：
var sum1 = 0;
for (var i = 1; i <= 50; i++){
sum1 += i;
}
document.write("50以内所有整数之和为：" + sum1);
document.write("<br/>");
var sum2 = 0;
for (var i = 1; i <= 100; i++){
sum2 += i;
}
document.write("100以内所有整数之和为：" + sum2);
那我现在提一个问题：如果要你分别实现“50以内、100以内、150以内、200以内、250以内”所有整数之和。那岂不是要重复写5次相同的代码？
为了减轻这种重复编码的负担，JavaScript引入了函数的概念。
JavaScript函数定义
在JavaScript中，函数的定义可以分为三种，分别是函数声明，函数表达式和Function构造函数。
1.函数声明
函数声明是直接使用function关键字接一个函数名，函数名后是接收函数的形参，示例如下：
//函数声明式
function sum(num1,num2){
return num1+num2;
}
2.函数表达式
函数表达式的形式类似于普通变量的初始值，只不过这个变量初始化的值是一个函数，示例如下：
//函数表达式
var sum = function(num1,num2){
return num1+num2;
}
3.Function()构造函数
使用new操作符，调用Function()构造函数，传入对应的参数，也可以定义一个函数，示例如下：
//Function()构造函数
var sum = new Function("num1","num2","return num1+num2");
4.函数声明和函数表达式和Function()构造函数声明的函数有什么区别?
1.使用函数声明的函数的函数必须要有名字，才能调用函数。
2.使用函数表达式声明的函数可以有名字，也可以没有。
3.Function()构造函数声明必须要用固定的写法。
4.函数声明的函数可以再程序任意地方调用，函数表达式则不可以。
函数的使用
1.没有返回值的函数
没有返回值的函数，指的是函数执行完就算了，不会返回任何值。
function 函数名(参数1 , 参数2 ,..., 参数n){ ……}
函数的参数，是可以省略的（即不写），当然也可以是1个、2个或n个。如果是多个参数，则参数之间用英文逗号（,）隔开。此外，函数参数的个数，一般取决于你实际开发的需要。
//定义函数 addSum(a,b) a和b被称为形参
function addSum(a,b){
var sum = a + b;
document.write(sum);
}
//调用函数 addSum(1,2,)1和2被称为实参
addSum(1, 2);
//函数的调用，其实就是把“实参”（即1和2）传递给“形参”（即a和b），然后把函数执行一遍。
2.有返回值的函数
有返回值的函数，指的是函数执行完了之后，会返回一个值，这个返回值可以供我们使用。
function 函数名(参数1 , 参数2 ,..., 参数n){ …… return 返回值;}
有返回值的函数”相对“没有返回值的函数”来说，只是多了一个return语句。return语句就是用来返回一个结果。
//定义函数
function addSum(a, b) {
var sum = a + b;
return sum;
}
//调用函数
var n = addSum(1, 2) + 100;
document.write(n);
课程总结
JavaScript全局变量与局部变量
学习目标
JavaScript全局变量与局部变量
在JavaScript中，变量有一定的作用域（也就是变量的有效范围）。根据作用域，变量可以分为以下2种。
1.全局变量
全局变量一般在主程序中定义，其有效范围是从定义开始，一直到整个程序结束为止。全局变量在任何地方都可以用。
2.局部变量
局部变量一般在函数中定义，其有效范围只限于在函数之中，函数执行完了就没了。局部变量只能在函数中使用，函数之外是不能使用函数之内定义的变量的。
var a = "十里";
//定义函数
function getMes(){
var b = a + "桃花";
document.write(b)
}
//调用函数
getMes();
变量a由于是在主程序中定义的，因此它是全局变量，也就是在程序任何地方（包括函数内）都可以使用。
var a = "十里";
//定义函
function getMes() {
var b = a + "桃花";
}
//调用函数
getMes();
//尝试使用函数内的变量b
var str = "三生三世" + b;
document.write(str);
为什么没有内容呢？这是因为变量b是局部变量，只能在函数之内使用，不能在函数之外使用。
如果我们想要在函数之外使用函数之内的变量，可以使用return语句返回该变量的值，实现代码如下：
var a = "十里";
//定义函数
function getMes(){
var b = a + "桃花";
return b;
}
var str = "三生三世" + getMes();
document.write(str);
课程总结
JavaScript函数调用的方式
学习目标
常见的调用方式
如果一个函数仅仅是定义而没有被调用的话，则函数本身是不会执行的。函数定义之后只有被调用才有意义。JavaScript函数调用方式很多，常见有4种。
1.直接调用，是常见的函数调用方式，一般用于“没有返回值的函数”。
语法：函数名(实参1, 实参2, ... , 实参n);
//定义函数
function getMes(){
document.write("前端学习javascript");
}
//调用函数
getMes();
2.在表达式中调用
在表达式中调用，一般用于“有返回值的函数”，然后函数的返回值会参与表达式的计算。
//定义函数
function addSum(a, b) {
var sum = a + b;
return sum;
}
//调用函数
var n = addSum(1, 2) + 100;
document.write(n);
3.在超链接中调用
在超链接中调用，指的是在a元素的href属性中使用“javascript:函数名”的形式来调用函数。当用户点击超链接时，就会调用该函数。
语法：<a href="javascript:函数名"></a>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function talk()
{
alert("她不爱我，说谎的时候不认真！");
}
</script>
</head>
<body>
<a href="javascript:talk()">对话</a>
</body>
</html>
4.在事件中调用
JavaScript是基于事件的一门语言，像鼠标移动是一个事件、鼠标单击也是一个事件，类似的事件很多。当一个事件产生的时候，我们就可以调用某个函数来针对这个事件作出响应。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function Mes()
{
alert("学习前端就是这么的简单");
}
</script>
</head>
<body>
<input type="button" onclick="Mes()" value="提交" />
</body>
</html>
课程总结
JavaScript函数嵌套
学习目标
JavaScript函数嵌套
嵌套函数，简单来说，就是在一个函数的内部定义另外一个函数。不过在内部定义的函数只能在内部调用，如果在外部调用，就会出错。
//定义阶乘函数
function func(a){
//嵌套函数定义，计算平方值的函数
function multi (x){
return x*x;
}
var m=1;
for(var i=1;i<=multi(a);i++){
m=m*i;
}
return m;
}
//调用函数
var sum =func(2)+func(3);
document.write(sum);
在这个例子中，我们使用了定义了一个函数func，这个函数有一个参数a，然后在func()内部定义了一个函数multi()。其中，multi()作为一个内部函数，只能在函数func()内部使用。对于func(2)， 我们把2作为实参传进去。
从上面我们可以看出，func(2)实现的是1×2×3×4，也就是4的阶乘。同理，func(3)实现的是1×2×…×9，也就是9的阶乘。
嵌套函数功能是非常强大的，并且我们可以通过嵌套函数来简单的理解一下闭包。详细的闭包知识在JavaScript高级部分会详细讲解。
课程总结
JavaScript内置函数
学习目标
JavaScript内置函数
在JavaScript中，函数还可以分为“自定义函数”和“内置函数”。自定义函数，指的是需要我们自己定义的函数，前面学的就是自定义函数。内置函数，指的是JavaScript内部已经定义好的函数，也就是说我们不需要自己写函数体，直接调用就行了，如下所示：
| 函数 | 说明 |
|---|---|
| parseInt() | 提取字符串中的数字，只限提取整数 |
| parseFloat() | 提取字符串中的数字，可以提取小数 |
| isFinite() | 判断某一个数是否是一个有限数值 |
| isNaN() | 判断一个数是否是NaN值 |
JavaScript的内置函数非常多，但是大部分都是用不上的。比较重要的是parseInt()和parseFloat()。
判断是否是闰年
闰年的判断条件有两个：
1.对于普通年，如果能被4整除，且不能被100整除的是闰年。
2.对于世纪年，能被400整除的是闰年。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//定义函数
function isLeapYear(year)
{
//判断闰年的条件
if ((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0))
{
return year + "年是闰年";
}
else
{
return year + "年不是闰年";
}
}
//调用函数
document.write(isLeapYear(2017));
</script>
</head>
<body>
</body>
</html>
课程总结
JavaScript对象
学习目标
JavaScript的自定义对象
1.使用new运算符创建对象
var people= new Object(); //new方式
people.name='Head'; //创建属性字段
people.age=18; //创建属性字段
2..new关键字可以省略
var people = Object(); //省略了new关键字
people.name='Head';
people.age=18;
3.使用字面量方式创建Object
var people = { //字面量方式
name : '曹老师', //创建属性字段
age : 28 //最后一个属性不要加逗号
};
4.使用字面量及传统赋值方式
var people ={};
people.name='head', //字面量声明为空对象
people.age=18; //点符号给属性赋
5.两种属性输出方式
alert(people.age); //点表示法输出
alert(people ['age']); //中括号表示法输出，注意引号
6.给对象创建方法
var people ={
run:function(){
return '跑步中！！！'; //对象中的方法
}
}
alert(people.run()); //调用对象中的方法
JavaScript中的内置对象
JavaScript基础部分我们主要学习内置对象包含以下五种：
- 字符串对象：String
- 数组对象：Array
- 日期对象：Date
- 数值对象：Math
- 正则对象：RegExp
课程总结
JavaScript字符串对象
学习目标
JavaScript字符串对象
1.length属性来获取字符串的长度。
var str = "I love cao teacher";
document.write("字符串长度是：" + str.length);
2.toLowerCase()方法将大写字符串转化为小写字符串,toUpperCase()方法将小写字符串转化为大写字符串。
var str = "Hello cao teacher";
document.write("正常：" + str + "<br/>");
document.write("小写：" + str.toLowerCase() + "<br/>");
document.write("大写：" + str.toUpperCase());
3.charAt()方法来获取字符串中的某一个字符。
var str = "Hello cao teacher";
document.write("第1个字符是：" + str.charAt(0) + "<br/>");
document.write("第7个字符是：" + str.charAt(6));
4.substring()方法来截取字符串的某一部分。
语法：字符串名.substring(start, end)
start和end都是整数，一般都是从0开始，其中end大于start。
var str1 = "曹老师讲前端，你爱我也爱！";
var str2 = str1.substring(5, 7);
document.write(str2);
5.replace()方法来用一个字符串替换另外一个字符串的某一部分。
字符串名.replace(原字符串, 替换字符串)
字符串名.replace(正则表达式, 替换字符串)
直接使用字符串替换：
var str = "I love javascript!";
var str_new = str.replace("javascript", "cao teacher");
document.write(str_new);
使用“正则表达式”替换
var str = "I am hero, you are red, all are red.";
var str_new = str.replace(/red/g, "teacher");
document.write(str_new);
6.split()方法把一个字符串分割成一个数组，这个数组存放的是原来字符串的所有字符片段。
var str = "HTML,CSS,JavaScript";
var arr = str.split(",");
document.write("数组第1个元素是：" + arr[0] + "<br/>");
document.write("数组第2个元素是：" + arr[1] + "<br/>");
document.write("数组第3个元素是：" + arr[2]);
7.indexOf()方法来找出“某个指定字符串”在字符串中首次出现的下标位置，也可以使用lastIndexOf()来找出“某个指定字符串”在字符串中最后出现的下标位置。
var str = "Hello cao teacher!";
document.write(str.indexOf("cao") + "<br/>");
document.write(str.indexOf("cao") + "<br/>");
document.write(str.indexOf("cao"));
课程总结
JavaScript数组对象
学习目标
数组是什么？
数组是一个数据的集合，可以通过Var声明一个变量，如果需要100个不同的数据，还采用Var的方法就太麻烦了，所以我们就有了数组的方式。
数组的创建方式
1.使用new关键字创建数组
var box = new Array(); //创建了一个数组
var box = new Array(10); //创建一个包含10个元素的数组
var box = new Array('曹老师','web','js'); //创建一个数组并分配好了元素
2.以上三种方法，可以省略new关键字。
var box = Array(); //省略了new关键字
3.使用字面量方式创建数组
var box = []; //创建一个空的数组
var box = ['曹老师','web','js']; //创建包含元素的数组
4.创建一个稍微复杂一点的数组
var box = [
{ //第一个元素是一个对象
name : '曹老师',
age : 30,
run : function () {
return 'run了';
}
},
['马云','李彦宏',new Object()],//第二个元素是数组
'江苏', //第三个元素是字符串
25+25, //第四个元素是数值
new Array(1,2,3) //第五个元素是数组
];
alert(box);
数组值的获取
数组都是有下标的，数组的下标从零开始，我们可以通过arr[0]的方法拿取数组中的第一个数据。
var box = ['曹老师','web','js']; //创建包含元素的数组
alert(box[2]); //获取第三个元素
box[2] = '学生'; //修改第三个元素
box[4] = '计算机编程'; //增加第五个元素
数组值的添加
我们可以通过arr[5] = "铁岭"的方法拿取数组中的第一个数据。如果数组下标相同新数据会覆盖原数据。
var box = ['曹老师','web','js']; //创建包含元素的数组
alert(box[2]); //获取第三个元素
box[2] = '学生'; //修改第三个元素
box[4] = '计算机编程'; //增加第五个元素
length属性来获取数组的长度
var box = ['曹老师','web','js'];
alert(box.length) //获取元素个数
box.length = 10; //强制元素个数
box[box.length] = 'JS技术'; //通过length给数组增加一个元素
课程总结
JavaScript数组对象操作方法
学习目标
slice()方法
- slice()方法来获取数组的某一部分
语法：slice(start, end);
规则：包含start但不包含end。其中，end可以省略。当end省略时，获取的范围为：start到结尾。和substring()的规则一样。
var arr = ["HTML", "CSS", "JavaScript", "jQuery", "Vue.js"];
document.write(arr.slice(1, 3));
unshift()方法
- unshift()方法在数组开头添加新元素,并且可以得到一个新的数组。
var arr = ["JavaScript", "jQuery"];
arr.unshift("HTML", "CSS");
document.write(arr);
push()方法
- push()方法在数组结尾添加新元素，并且可以得到一个新的数组。
var arr = ["HTML", "CSS"];
arr.push("JavaScript","jQuery");
document.write(arr);
shift()方法
- shift()方法来删除数组中的第一个元素，并且可以得到一个新的数组。
var arr = ["HTML", "CSS", "JavaScript", "jQuery"];
arr.shift();
document.write(arr);
pop()方法
- pop()方法来删除数组的最后一个元素，并且可以得到一个新数组。
var arr = ["HTML", "CSS", "JavaScript", "jQuery"];
arr.pop();
document.write(arr);
sort()方法
- sort()方法来对数组中所有元素进行大小比较，然后按从大到小或者从小到大进行排序。
//定义一个升序函数
function up(a, b) {
return a - b;
}
//定义一个降序函数
function down(a, b) {
return b - a;
}
//定义数组
var arr = [3, 9, 1, 12, 50, 21];
arr.sort(up);
document.write("升序：" + arr.join("、") + "<br/>");
arr.sort(down);
document.write("降序：" + arr.join("、"));
reverse()方法
- reverse()方法来实现数组中所有元素的反向排列，也就是颠倒数组元素的顺序。
var arr = [3, 1, 2, 5, 4];
arr.reverse();
document.write("反向排列后的数组：" + arr);
join()方法
- join()方法来将数组中的所有元素连接成一个字符串
var arr = ["HTML", "CSS", "JavaScript", "jQuery"];
document.write(arr.join() + "<br/>");
document.write(arr.join("*"));
课程总结
JavaScript数学对象
学习目标
JavaScript数学对象
凡是涉及动画开发、高级编程、算法研究等，都跟数学有极大的联系。在JavaScript中，我们可以使用Math对象的属性和方法来实现各种运算。
Math对象的属性
| 属性 | 说明 | 对应的数学形式 |
|---|---|---|
| PI | 圆周率 | π |
| LN2 | 2的自然对数 | ln(2) |
| LN10 | 10的自然对数 | ln(10) |
| LOG2E | 以2为底的e的对数 | log2e |
| LOG10E | 以10为底的e的对数 | log10e |
| SQRT2 | 2的平方根 | √2 |
| SQRT1_2 | 2的平方根的倒数 | 1/√2 |
在实际开发中，所有角度都是以“弧度”为单位的，例如180°就应该写成Math.PI，而360°就应该写成Math.PI*2，以此类推。对于角度，在实际开发中推荐这种写法：“度数 * Math.PI/180”，因为这种写法可以让我们一眼就能看出角度是多少。
例如：
120*Math.PI/180 //120°
150*Math.PI/180 //150°
Math对象中的方法
| 方法 | 说明 |
|---|---|
| max(a,b,…,n) | 返回一组数中的最大值 |
| min(a,b,…,n) | 返回一组数中的最小值 |
| sin(x) | 正弦 |
| cos(x) | 余弦 |
| tan(x) | 正切 |
| asin(x) | 反正弦 |
| acos(x) | 反余弦 |
| atan(x) | 反正切 |
| atan2(y, x) | 反正切（注意y、x顺序） |
| floor(x) | 向下取整 |
| ceil(x) | 向上取整 |
| random() | 生成随机数 |
| abs(x) | 返回x的绝对值 |
| sqrt(x) | 返回x的平方根 |
| log(x) | 返回x的自然对数（底为e） |
| pow(x,y) | 返回x的y次幂 |
最大值和最小值
var a = Math.max(3, 9, 1, 12, 50, 21);
var b = Math.min(3, 9, 1, 12, 50, 21);
document.write("最大值为：" + a + "<br/>");
document.write("最小值为：" + b);
向下取整：Floor()
document.write("Math.floor(3)等于" + Math.floor(3) + "<br/>");
document.write("Math.floor(0.4)等于" + Math.floor(0.4) + "<br/>");
向上取整：ceil()
document.write("Math.ceil(3)等于" + Math.ceil(3) + "<br/>");
document.write("Math.ceil(0.4)等于" + Math.ceil(0.4) + "<br/>");
document.write("Math.ceil(0.6)等于" + Math.ceil(0.6) + "<br/>");
随机数：random()
document.write("Math.random()");
随机生成个范围的”任意数“
Math.ceil(Math.random()*10); // 获取从 1 到 10 的随机整数，取 0 的概率极小。
Math.round(Math.random()); // 可均衡获取 0 到 1 的随机整数。
Math.floor(Math.random()*10); // 可均衡获取 0 到 9 的随机整数。
Math.round(Math.random()*10); // 基本均衡获取 0 到 10 的随机整数，其中获取最小值 0 和最大值 10 的几率少一半。
随机数生成某个范围内的“整数”
//生成从minNum到maxNum的随机数
function randomNum(minNum,maxNum){
switch(arguments.length){
case 1:
return parseInt(Math.random()*minNum+1,10);
break;
case 2:
return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
break;
default:
return 0;
break;
}
}
课程总结
JavaScript时间对象
学习目标
JavaScript时间对象
在JavaScript中，我们可以使用时间对象Date来处理时间。
var 日期对象名 = new Date();
获取时间的getXxx()
| 方法 | 说明 |
|---|---|
| getFullYear() | 获取年份，取值为4位数字 |
| getMonth() | 获取月份，取值为0（一月）到11（十二月）之间的整数 |
| getDate() | 获取日数，取值为1~31之间的整数 |
| getHours() | 获取小时数，取值为0~23之间的整数 |
| getMinutes() | 获取分钟数，取值为0~59之间的整数 |
| getSeconds() | 获取秒数，取值为0~59之间的整数 |
设置时间的setXxx()
| 方法 | 说明 |
|---|---|
| setFullYear() | 可以设置年、月、日 |
| setMonth() | 可以设置月、日 |
| setDate() | 可以设置日 |
| setHours() | 可以设置时、分、秒、毫秒 |
| setMinutes() | 可以设置分、秒、毫秒 |
| setSeconds() | 可以设置秒、毫秒 |
获取年月日
在JavaScript中，我们可以使用getFullYear()、getMonth()和getDate()方法分别来获取当前时间的年、月、日。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var d = new Date();
var myYear = d.getFullYear();
var myMonth = d.getMonth() + 1;
var myDay = d.getDate();
document.write("今天是" + myYear + "年" + myMonth + "月" + myDay + "日");
</script>
</head>
<body>
</body>
</html>
细心的小伙伴会发现，var myMonth = d.getMonth() + 1;使用了“+1”。其实，getMonth()方法返回值是0（一月）到11（十二月）之间的整数，所以必须加上1，这样月份才正确。
设置年、月、日
在JavaScript中，我们可以使用setFullYear()、setMonth()和setDate()方法来设置对象的年、月、日。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var d = new Date();
d.setFullYear(1992, 09, 01);
document.write("我设置的时间是：<br/>" + d);
</script>
</head>
<body>
</body>
</html>
获取时、分、秒
在JavaScript中，我们可以使用getHours()、getMinutes()、getSeconds()方法分别获取当前的时、分、秒。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var d = new Date();
var myHours = d.getHours();
var myMinutes = d.getMinutes();
var mySeconds = d.getSeconds();
document.write("当前时间是：" + myHours + ":" + myMinutes + ":" + mySeconds);
</script>
</head>
<body>
</body>
</html>
设置时、分、秒
在JavaScript中，我们可以使用setHours()、setMinutes()和setSeconds()来设置时、分、秒。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var d = new Date();
d.setHours(12, 10, 30);
document.write("我设置的时间是：<br/>" + d);
</script>
</head>
<body>
</body>
</html>
课程总结
JavaScript正则对象
学习目标
正则对象RegExp
当检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。简单的模式可以是一个单独的字符，复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。
- javaScript创建正则表达式
//1.对象的方式创建
var box = new RegExp('box'); //第一个参数字符串
var box = new RegExp('box', 'ig'); //第二个参数可选模式修饰符
//2.直接创建
var box = /box/; //直接用两个反斜杠
var box = /box/ig; //在第二个斜杠后面加上模式修饰符
模式修饰符的可选参数
| 参 数 | 含 义 |
|---|---|
| i | 忽略大小写 |
| g | 全局匹配 |
| m | 多行匹配 |
2.测试正则表达式
RegExp对象包含两个方法：test()和exec()，功能基本相似，用于测试字符串匹配。
test()方法在字符串中查找是否存在指定的正则表达式并返回布尔值，如果存在则返回true，不存在则返回false。
/*使用new运算符的test方法示例*/
var pattern = new RegExp('box', 'i'); //创建正则模式，不区分大小写
var str = 'This is a Box!'; //创建要比对的字符串
alert(pattern.test(str)); //通过test()方法验证是否匹配
exec()方法也用于在字符串中查找指定正则表达式，如果exec()方法执行成功，则返回包含该查找字符串的相关信息数组。如果执行失败，则返回null。
/*使用new运算符的test方法示例*/
var pattern = new RegExp('box', 'i'); //创建正则模式，不区分大小写
var str = 'This is a Box!'; //创建要比对的字符串
alert(pattern.exec(str)); //通过test()方法验证是否匹配
3.常用正则
//1.检查邮政编码
var pattern = /[1-9][0-9]{5}/; //共6位数字，第一位不能为0
var str = '224000';
alert(pattern.test(str));
//2.检查手机号码
var pattern = /^1[34578][0-9]{9}$/;
var str = '15123456789';
alert(pattern.test(str));
//3.检查邮箱
var pattern = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
var str = '151234@qq.com';
alert(pattern.test(str));
//更多正则匹配可以自行搜索。
字符类：单个字符和数字
| 元字符/元符号 | 匹配情况 |
|---|---|
| . | 匹配除换行符外的任意字符 |
| [a-z0-9] | 匹配括号中的字符集中的任意字符 |
| [^a-z0-9] | 匹配任意不在括号中的字符集中的字符 |
| \d | 匹配数字 |
| \D | 匹配非数字，同[^0-9]相同 |
| \w | 匹配字母和数字及_ |
| \W | 匹配非字母和数字及_ |
字符类：空白字符
| 元字符/元符号 | 匹配情况 |
|---|---|
| \0 | 匹配null字符 |
| \b | 匹配空格字符 |
| \f | 匹配进纸字符 |
| \n | 匹配换行符 |
| \r | 匹配回车字符 |
| \t | 匹配制表符 |
| \s | 匹配空白字符、空格、制表符和换行符 |
| \S | 匹配非空白字符 |
字符类：锚字符
| 元字符/元符号 | 匹配情况 |
|---|---|
| ^ | 行首匹配 |
| $ | 行尾匹配 |
| \A | 只有匹配字符串开始处 |
| \b | 匹配单词边界，词在[]内时无效 |
| \B | 匹配非单词边界 |
| \G | 匹配当前搜索的开始位置 |
| \Z | 匹配字符串结束处或行尾 |
| \z | 只匹配字符串结束处 |
字符类：重复字符
| 元字符/元符号 | 匹配情况 |
|---|---|
| x? | 匹配0个或1个x |
| x* | 匹配0个或任意多个x |
| x+ | 匹配至少一个x |
| (xyz)+ | 匹配至少一个(xyz) |
| x{m,n} | 匹配最少m个、最多n个x |
课程总结
DOM基础
学习目标
DOM是什么？
DOM，全称“Document Object Model（文档对象模型）”，它是由W3C定义的一个标准。
在实际开发中，我们有时候需要实现鼠标移到某个元素上面时就改变颜色，或者动态添加元素或者删除元素等。其实这些效果就是通过DOM提供的方法来实现的。
DOM结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>曹老师</h1>
<p>曹老师带大家学前端</p>
<p>曹老师带大家学JS</p>
</body>
</html>
是不是很像一棵树呢？其实，这也叫做“DOM树”。在这棵树上，html元素是树根，也叫根元素。
接下来深入一层，我们发现有head和body这两个分支，它们位于同一层次上，并且有着共同的父节点（即html），所以它们是兄弟节点。
每一个元素就是一个节点，而每一个节点就是一个对象。我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作。
DOM节点类型
在JavaScript中，节点也是分为很多类型的。DOM节点共有12种类型，不过常见的只有3种
1.元素节点
2.属性节点
3.文本节点
<div id="wrapper">曹老师带你学前端</div>
div 元素节点
ID 属性节点
曹老师带你学前端 文本节点
在JavaScript中，我们可以使用nodeType属性来判断一个节点的类型。不同节点的nodeType属性值如下：
| 节点类型 | nodeType值 |
|---|---|
| 元素节点 | 1 |
| 属性节点 | 2 |
| 文本节点 | 3 |
1.一个元素就是一个节点，这个节点称之为“元素节点”。
2.属性节点和文本节点看起来像是元素节点的一部分，但实际上，它们是独立的节点，并不属于元素节点。
3.只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点。
课程总结
DOM元素节点获取的方式
学习目标
元素节点获取的方式
获取元素，准确来说，就是获取“元素节点。
| 方法 | 说明 |
|---|---|
| getElementById() | 获取特定ID元素的节点 |
| getElementsByTagName() | 获取相同元素的节点列表 |
| getElementsByClassName() | 通过类名来获取元素 |
| querySelector()和querySelectorAll() | 选取满足选择条件的第1个元素和全部元素 |
| getElementsByName() | 获取相同名称的节点列表 |
| document.title和document.body | 获取title和body元素 |
获取特定ID元素的节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oTask = document.getElementById("task");
oTask.style.color = "red";
}
</script>
</head>
<body>
<div id="task">JavaScript</div>
</body>
</html>
通过标签名来选中元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oUl = document.getElementById("list");
var oLi = oUl.getElementsByTagName("li");
oLi[2].style.color = "red";
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
</body>
</html>
通过类名来获取元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oLi = document.getElementsByClassName("select");
oLi[0].style.color = "red";
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li class="select">JavaScript</li>
<li class="select">jQuery</li>
<li class="select">Vue.js</li>
</ul>
</body>
</html>
使用CSS选择器的语法来获取所需要的元素
querySelector()表示选取满足选择条件的第1个元素，querySelectorAll()表示选取满足条件的所有元素。它们的写法跟CSS选择器的写法是完全一样的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oDiv = document.querySelectorAll(".test");
oDiv[1].style.color = "red";
}
</script>
</head>
<body>
<div>JavaScript</div>
<div class="test">JavaScript</div>
<div class="test">JavaScript</div>
<div>JavaScript</div>
<div class="test">JavaScript</div>
</body>
</html>
表单name元素的获取
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oInput = document.getElementsByName("status");
oInput[2].checked = true;
}
</script>
</head>
<body>
你的最高学历:
<label><input type="radio" name="status" value="本科" />本科</label>
<label><input type="radio" name="status" value="硕士" />硕士</label>
<label><input type="radio" name="status" value="博士" />博士</label>
</body>
</html>
获取title和body元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
document.title = "梦想是什么？";
document.body.innerHTML = "<strong style='color:red'>梦想就是一种让你感到坚持就是幸福的东西。</strong>";
}
</script>
</head>
<body>
</body>
</html>
课程总结
DOM元素节点创建方式
学习目标
DOM元素节点创建方式
在JavaScript中，使用createElement()来创建一个元素节点。
使用createTextNode()来创建一个文本节点。
然后可以将元素节点与文本节点“组装”成为我们平常所看到的“有文本内容的元素”。
元素节点创建的方式
这种方式又被称为“动态DOM操作”。所谓的“动态DOM”，指的是使用JavaScript创建的元素，这个元素一开始在HTML中是不存在的。
| 方法 | 说明 |
|---|---|
| write() | 这个方法可以把任意字符串插入到文档中 |
| createElement() | 创建一个元素节点 |
| appendChild() | 将新节点追加到子节点列表的末尾 |
| createTextNode() | 创建一个文件节点 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oDiv = document.getElementById("content");
var oStrong = document.createElement("strong");
var oTxt = document.createTextNode("曹老师带大家学前端");
//将文本节点插入strong元素
oStrong.appendChild(oTxt);
//将strong元素插入div元素（这个div在HTML已经存在）
oDiv.appendChild(oStrong);
}
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
创建复杂的带属性的节点
<input id="submit" type="button" value="提交"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oInput = document.createElement("input");
oInput.id = "submit";
oInput.type = "button";
oInput.value = "提交";
document.body.appendChild(oInput);
}
</script>
</head>
<body>
</body>
</html>
动态创建图片：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oImg = document.createElement("img");
oImg.className = "pic";
oImg.src = "img/haizei.png";
oImg.style.border = "1px solid silver";
document.body.appendChild(oImg);
}
</script>
</head>
<body>
</body>
</html>
创建多个元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table {border-collapse:collapse;}
tr,td
{
width:80px;
height:20px;
border:1px solid gray;
}
</style>
<script>
window.onload = function ()
{
//动态创建表格
var oTable = document.createElement("table");
for (var i = 0; i < 3; i++)
{
var oTr = document.createElement("tr");
for (var j = 0; j < 3; j++)
{
var oTd = document.createElement("td");
oTr.appendChild(oTd);
}
oTable.appendChild(oTr);
}
//添加到body中去
document.body.appendChild(oTable);
}
</script>
</head>
<body>
</body>
</html>
课程总结
DOM元素节点删除方式
学习目标
DOM元素节点删除方式
在JavaScript中，我们可以使用removeChild()方法来删除父元素下的某个子元素。
语法:
A.removeChild(B);
说明：
A表示父元素，B表示父元素内部的某个子元素。
删除最后一个子元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
var oUl = document.getElementById("list");
//删除最后一个子元素
oUl.removeChild(oUl.lastElementChild);
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除" />
</body>
</html>
分析：
删除最后一个元素:oUl.removeChild(oUl.lastElementChild);
删除第一个元素:oUl.removeChild(oUl.firstElementChild);
删除整个列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
var oUl = document.getElementById("list");
document.body.removeChild(oUl);
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除" />
</body>
</html>
课程总结
DOM元素节点复制方式
学习目标
DOM元素节点复制方式
在JavaScript中，我们可以使用cloneNode()方法来实现复制元素。
复制元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
var oUl = document.getElementById("list");
document.body.appendChild(oUl.cloneNode(1));
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<input id="btn" type="button" value="复制" />
</body>
</html>
课程总结
DOM元素节点替换方式
学习目标
DOM元素节点替换方式
在JavaScript中，我们可以使用replaceChild()方法来实现替换元素。
语法：
A.replaceChild(new,old);
说明：
A表示父元素，new表示新子元素，old表示旧子元素。
替换元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload=function(){
var ad = document.getElementById("ad");
var aLi = document.getElementById("ali");
var div = document.createElement("div");
ad.replaceChild(div,aLi);
}
</script>
</head>
<body>
<div id="ad">
<li id="ali">ad中的li</li>
<li>ad中的li</li>
<li>ad中的li</li>
</div>
</body>
</html>
课程总结
DOM进阶获取HTML属性值
学习目标
DOM进阶获取HTML属性值
HTML属性操作，指的是使用JavaScript来操作一个元素的HTML属性。像下面有一个input元素，指的就是操作它的id、type、value等，其他元素也类似。
<input id="btn" type="button" value="提交"/>
在JavaScript中，操作HTML元素属性的方式有两种：
1.一种是使用“对象属性”；
2.一种是使用“对象方法”。
不管是用“对象属性”方式，还是用“对象方法”方式，都涉及以下2种操作。
1.获取HTML属性值
2.设置HTML属性值
获取HTML属性值
获取HTML元素的属性值，一般都是通过属性名，来找到该属性对应的值。
语法：
obj.attr
说明：
obj是元素名，它一个DOM对象。所谓的DOM对象，指的是getElementById()、getElementsByTagName()等方法获取到的元素节点。
attr是属性名，对于一个对象来说，当然是通过点运算符（.）来获取它的属性值。
获取静态HTML中的属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
alert(oBtn.id);
};
}
</script>
</head>
<body>
<input id="btn" class="myBtn" type="button" value="获取"/>
</body>
</html>
获取动态DOM中的属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
//动态创建一个按钮
var oInput = document.createElement("input");
oInput.id = "submit";
oInput.type = "button";
oInput.value = "提交";
document.body.appendChild(oInput);
//为按钮添加点击事件
oInput.onclick = function ()
{
alert(oInput.id);
};
}
</script>
</head>
<body>
</body>
</html>
获取文本框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
var oTxt = document.getElementById("txt");
alert(oTxt.value);
};
}
</script>
</head>
<body>
<input id="txt" type="text"/>
<input id="btn" type="button" value="获取"/>
</body>
</html>
举例：获取单选框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oFruit = document.getElementsByName("fruit");
oBtn.onclick = function ()
{
//使用for循环遍历所有的单选框
for(var i=0;i<oFruit.length;i++)
{
//判断当前遍历的单选框是否选中（也就是checked是否为true）
if(oFruit[i].checked)
{
alert(oFruit[i].value);
}
}
};
}
</script>
</head>
<body>
<div>
<label><input type="radio" name="fruit" value="苹果" checked/>苹果</label>
<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
<label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
</div>
<input id="btn" type="button" value="获取" />
</body>
</html>
举例：获取复选框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oFruit = document.getElementsByName("fruit");
var str = "";
oBtn.onclick = function ()
{
for(var i=0;i<oFruit.length;i++)
{
if(oFruit[i].checked)
{
str += oFruit[i].value;
}
}
alert(str);
};
}
</script>
</head>
<body>
<div>
<label><input type="checkbox" name="fruit" value="苹果" />苹果</label>
<label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
<label><input type="checkbox" name="fruit" value="西瓜" />西瓜</label>
</div>
<input id="btn" type="button" value="获取" />
</body>
</html>
举例：获取下拉菜单的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oSelect = document.getElementById("select");
oBtn.onclick = function ()
{
alert(oSelect.value);
};
}
</script>
</head>
<body>
<select id="select">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="杭州">杭州</option>
</select>
<input id="btn" type="button" value="获取" />
</body>
</html>
课程总结
DOM进阶CSS属性操作
学习目标
DOM进阶
CSS属性操作，指的是使用JavaScript来操作一个元素的CSS样式。在JavaScript中，CSS属性操作同样有2种。
1.获取CSS属性值。
2.设置CSS属性值。
获取CSS属性值
在JavaScript中，我们可以使用getComputedStyle()方法来获取一个CSS属性的取值。
语法：
getComputedStyle(obj).attr
说明：
obj表示DOM对象。
attr表示CSS属性名。backgroundColor
css3兼容性属性名 webkitBoxShadow
获取css属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#box
{
width:100px;
height:100px;
background-color:hotpink;
}
</style>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oBox = document.getElementById("box");
oBtn.onclick = function ()
{
alert(getComputedStyle(oBox).backgroundColor);
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="获取颜色" />
<div id="box"></div>
</body>
</html>
设置CSS属性值
在JavaScript中，想要设置一个CSS属性的值，我们有2种方式来实现。
1.style对象
使用style对象来设置一个CSS属性的值。
语法：
obj.style.attr = "值";
说明：
obj表示DOM对象。
attr表示CSS属性名，采用的同样是“驼峰”型。
设置一个CSS属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#box
{
width: 100px;
height: 100px;
background-color: hotpink;
}
</style>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oBox = document.getElementById("box");
oBtn.onclick = function ()
{
oBox.style.backgroundColor = "lightskyblue";
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="设置" />
<div id="box"></div>
</body>
</html>
2.cssText属性
在JavaScript中，我们可以使用cssText属性来同时设置多个CSS属性，这也是在元素的style属性来添加的。
语法：
obj.style.cssText = "值";
说明：
obj表示DOM对象，cssText的值是一个字符串，例如：
oDiv.style.cssText = "width:100px;height:100px;border:1px solid gray;";
注意，这个字符串中的属性名不再使用骆驼峰型写法，而是使用平常的CSS写法，例如background-color应该写成background-color，而不是backgroundColor。
设置一个CSS属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#box
{
width: 100px;
height: 100px;
background-color: hotpink;
}
</style>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oBox = document.getElementById("box");
oBtn.onclick = function ()
{
oBox.style.backgroundColor = "lightskyblue";
oBox.style.cssText = "width:100px;height:100px;border:3px double green";
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="设置" />
<div id="box"></div>
</body>
</html>
课程总结
DOM进阶-DOM遍历
学习目标
DOM进阶-DOM遍历
DOM遍历，可以简单理解为“查找元素”。
举个例子，如果你使用getElementById()等方法获取一个元素，然后又想得到该元素的父元素、子元素，甚至是下一个兄弟元素，这就是DOM遍历。
在JavaScript中，对于DOM遍历，可以分为以下3种情况。
1.查找父元素。
2.查找子元素。
3.查找兄弟元素。
查找父元素
在JavaScript中，我们可以使用parentNode属性来获得某个元素的父元素。
语法：
obj.parentNode
说明：
obj是一个DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取的元素。
某个元素的父元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table{border-collapse:collapse;}
table,tr,td{border:1px solid gray;}
</style>
<script>
window.onload = function ()
{
var oTd = document.getElementsByTagName("td");
//遍历每一个td元素
for (var i = 0; i < oTd.length; i++)
{
//为每一个td元素添加点击事件
oTd[i].onclick = function ()
{
//获得当前td的父元素（即tr）
var oParent = this.parentNode;
//为当前td的父元素添加样式
oParent.style.color = "white";
oParent.style.backgroundColor = "red";
};
}
}
</script>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小红</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小杰</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>
</body>
</html>
查找子元素
在JavaScript中，我们可以使用以下两组方式来获得父元素中的所有子元素或某个子元素。
1.childNodes、firstChild、lastChild 获取空白节点
2.children、firstElementChild、lastElementChild 不获取空白节点
childNodes与children的比较:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oUl = document.getElementById("list");
var childNodesLen = oUl.childNodes.length;
var childrenLen = oUl.children.length;
alert("childNodes的长度为：" + childNodesLen + "\n" + "children的长度为：" + childrenLen);
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oUl = document.getElementById("list");
oBtn.onclick = function ()
{
oUl.removeChild(oUl.lastChild);
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除" />
</body>
</html>
当我们点击删除按钮时，会发现一个很奇怪的现象：需要点击两次才可以删除一个li元素！
为什么会这样呢？
因为两个元素之间的“换行空格”其实也是一个节点。因此在删除节点的时候，第1次点击删除的是“文本节点”，第2次点击删除的才是li元素。
解决办法有两个。
1.将li元素间的“换行空格”去掉。
2.使用nodeType来判断：我们知道，元素节点的nodeType属性值为1，文本节点的nodeType属性值为3。然后使用if判断，如果oUl.lastChild.nodeType值为3，则执行removeChild()两次，第1次删除“空白节点”，第2次删除元素。如果oUl.lastChild.nodeType值不为3，则只执行removeChild()一次。
改进后的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oUl = document.getElementById("list");
oBtn.onclick = function ()
{
if (oUl.lastChild.nodeType == 3) {
oUl.removeChild(oUl.lastChild);
oUl.removeChild(oUl.lastChild);
} else {
oUl.removeChild(oUl.lastChild);
}
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除" />
</body>
</html>
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oUl = document.getElementById("list");
oBtn.onclick = function ()
{
oUl.removeChild(oUl.lastElementChild);
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除" />
</body>
</html>
这里我们使用oUl.removeChild(oUl.lastElementChild);一句代码就可以轻松搞定。此外，firstElementChild获取的是第一个子元素节点，lastElementChild获取的是最后一个子元素节点。如果我们想要获取任意一个子元素节点，可以使用children[i]的方式来实现。
查找兄弟元素
在JavaScript中，我们可以使用以下2组方式来获得兄弟元素。
1.previousSibling、nextSibling
2.previousElementSibling、nextElementSibling
previousSibling查找前一个兄弟节点，nextSibling查找后一个兄弟节点。previousElementSibling查找前一个兄弟元素节点，nextElementSibling查找后一个兄弟元素节点。
跟查找子元素的两组方式一样，previousSibling和nextSibling查找出来的可能是文本节点（一般是空白节点），因此如果你希望只操作元素节点，建议使用previousElementSibling和nextElementSibling。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oUl = document.getElementById("list");
oBtn.onclick = function ()
{
var preElement = oUl.children[2].previousElementSibling;
oUl.removeChild(preElement);
};
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除" />
</body>
</html>
课程总结
innerHTML和innerText
学习目标
innerHTML和innerText
如果想要创建一个动态DOM元素，我们都是将元素节点、属性节点、文本节点一个个使用appendChild()等方法拼凑起来。如果插入的元素比较简单，这种方法还可以。要是插入的元素非常复杂的话，就不太适合了。
在JavaScript中，我们可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”，也可以使用innerText属性获取和设置一个元素的“内部文本”。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oImg = document.createElement("img");
oImg.className = "pic";
oImg.src = "images/haizei.png";
oImg.style.border = "1px solid silver";
document.body.appendChild(oImg);
}
</script>
</head>
<body>
</body>
</html>
分析：
像上面这个例子，如果我们用innerHTML来实现，就非常简单了，代码如下：
document.body.innerHTML = '<img class="pic" src="./haizei.png" style="border:1px solid silver"/>';
举例：获取innerHTML和innerText
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oP = document.getElementById("content");
document.getElementById("txt1").value = oP.innerHTML;
document.getElementById("txt2").value = oP.innerText;
}
</script>
</head>
<body>
<p id="content"><strong style="color:hotpink;">学习前端好榜样</strong></p>
innerHTML是：<input id="txt1" type="text"><br />
innerText是：<input id="txt2" type="text">
</body>
</html>
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oDiv = document.getElementsByTagName("div")[0];
oDiv.innerHTML = '<span>前端开发</span>\
<span style="color:hotpink;">JavaScript</span>\
<span style="color:deepskyblue;">教程</span>';
}
</script>
</head>
<body>
<div></div>
</body>
</html>
课程总结
事件基础和调用
学习目标
事件介绍
在之前的学习中，我们接触过鼠标点击事件（即onclick）。那事件究竟是什么呢？举个例子，当我们点击一个按钮时，会弹出一个对话框。其中“点击”就是一个事件，“弹出对话框”就是我们在点击这个事件里面做的一些事情。
在JavaScript中，一个事件应该有3部分：
1.事件主角：是按钮呢？还是div元素呢？还是其他？
2.事件类型：是点击呢？还是移动呢？还是其他？
3.事件过程：这个事件都发生了些什么？
在JavaScript中，事件一般是用户对页面的一些“小动作”引起的，例如按下鼠标、移动鼠标等，这些都会触发相应的一个事件。JavaScript常见的事件共有以下5种：
1.鼠标事件
2.键盘事件
3.表单事件
4.编辑事件
5.页面事件
事件调用方式
在JavaScript中，调用事件的方式有两种：
1.在script标签中调用
2.在元素中调用
在script标签中调用
在script标签中调用事件，指的是在< script >< /script >标签内部调用事件。
语法：
obj.事件名 = function()
{
……
};
说明：obj是一个DOM对象.
由于上面是一个赋值语句，而语句一般都是要以英文分号结束的，所以最后需要添加一个英文分号（;）。虽然没加上也不会报错，不过为了规范，还是加上比较好。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
//获取元素
var oBtn = document.getElementById("btn");
//为元素添加点击事件
oBtn.onclick = function ()
{
alert("事件基础学习");
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="弹出" />
</body>
</html>
在元素中调用事件
在元素中调用事件，指的是直接在HTML属性中来调用事件，这个属性又叫做“事件属性”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function alertMes()
{
alert("曹老师带你学习事件");
}
</script>
</head>
<body>
<input type="button" onclick="alertMes()" value="弹出" />
</body>
</html>
事实上，上面这个例子还可以写成下面这种形式，两者是等价的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="button" onclick="alert('曹老师带你学前端')" value="弹出" />
</body>
</html>
在script标签中调用事件，我们需要使用getElementById()、getElementsByTagName()等方法来获取想要的元素，然后才能对其进行事件操作。
在元素属性中调用事件，我们是不需要使用getElementById()、getElementsByTagName()等方法来获取想要的元素的，因为系统已经知道事件的主角是哪个元素了。
在实际开发中，我们更倾向于在script标签中调用事件，因为这种方式可以使得结构（HTML）与行为（JavaScript）分离，代码更具有可读性和维护性。
课程总结
鼠标事件
学习目标
鼠标事件介绍
事件操作是JavaScript核心之一，也是学习的重中之重，因为JavaScript本身就是一门基于事件的编程语言。
| 事件 | 说明 |
|---|---|
| onclick | 鼠标单击事件 |
| onmouseover | 鼠标移入事件 |
| onmouseout | 鼠标移出事件 |
| onmousedown | 鼠标按下事件 |
| onmouseup | 鼠标松开事件 |
| onmousemove | 鼠标移动事件 |
鼠标单击
单击事件onclick，单击事件不只是按钮才有，任何元素我们都可以为它添加单击事件！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#btn
{
display: inline-block;
width: 80px;
height: 24px;
line-height: 24px;
font-family:微软雅黑;
font-size:15px;
text-align: center;
border-radius: 3px;
background-color: deepskyblue;
color: White;
cursor: pointer;
}
#btn:hover {background-color: dodgerblue;}
</style>
<script>
window.onload = function ()
{
var oDiv = document.getElementById("btn");
oDiv.onclick = function ()
{
alert("玩我么？");
};
};
</script>
</head>
<body>
<div id="btn">调试代码</div>
</body>
</html>
鼠标移入和鼠标移出
当用户将鼠标移入到某个元素上面时，就会触发onmouseover事件。如果将鼠标移出某个元素时，就会触发onmouseout事件。onmouseover和onmouseout这两个平常都是形影不离的。
onmouseover和onmouseout分别用于控制鼠标“移入”和“移出”这两种状态。例如在下拉菜单导航中，鼠标移入会显示二级导航，鼠标移出则会收起二级导航。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oP = document.getElementById("content");
oP.onmouseover = function ()
{
this.style.color = "red";
};
oP.onmouseout = function ()
{
this.style.color = "black";
};
};
</script>
</head>
<body>
<p id="content">前端学习</p>
</body>
</html>
鼠标按下和鼠标松开
当用户按下鼠标时，会触发onmousedown事件。当用户松开鼠标时，则会触发onmouseup事件。
onmousedown表示鼠标按下的一瞬间所触发的事件，而onmouseup表示鼠标松开的一瞬间所触发的事件。当然我们都知道，只有“先按下”才能“再松开”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oTitle = document.getElementById("title");
var oBtn = document.getElementById("btn");
oBtn.onmousedown = function ()
{
oTitle.style.color = "red";
};
oBtn.onmouseup = function ()
{
oTitle.style.color = "black";
};
};
</script>
</head>
<body>
<h1 id="title">前端学习课程</h1>
<hr />
<input id="btn" type="button" value="button" />
</body>
</html>
课程总结
键盘事件
学习目标
键盘事件介绍
在JavaScript中，常用的键盘事件共有2种。
1.键盘按下：onkeydown
2.键盘松开：onkeyup
onkeydown表示键盘按下一瞬间所触发的事件，而onkeyup表示键盘松开一瞬间所触发的事件。对于键盘来说，都是先有“按下”，才有“松开”，也就是onkeydown发生在onkeyup之前。
统计输入字符的长度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oTxt = document.getElementById("txt");
var oNum = document.getElementById("num");
oTxt.onkeyup = function ()
{
var str = oTxt.value;
oNum.innerHTML = str.length;
};
};
</script>
</head>
<body>
<input id="txt" type="text" />
<div>字符串长度为：<span id="num">0</span></div>
</body>
</html>
飞机移动小游戏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#player{
position: absolute;
top:600px;
left:600px;
}
</style>
<script>
window.onload = function ()
{
var player = document.getElementById("player");
window.document.onkeydown=function(ent){
var event = ent || window.event;
//alert(event.keyCode);
switch(event.keyCode){
case 87: //w
case 38: //上
player.style.top=player.offsetTop-10+"px";
break;
case 83: //s
case 40: //下
player.style.top=player.offsetTop+10+"px";
break;
}
}
};
</script>
</head>
<body>
<img src="me.png" alt="飞机" id="player">
</body>
</html>
课程总结
表单事件
学习目标
表单事件介绍
在JavaScript中，常用的表单事件有3种。
1.onfocus和onblur
2.onselect
3.onchange
onfocus和onblur
onfocus表示获取焦点时触发的事件，而onblur表示失去焦点时触发的事件，两者是相反操作。
例如用户准备在文本框中输入内容时，此时它会获得光标，就会触发onfocus事件。当文本框失去光标时，就会触发onblur事件。
并不是所有的HTML元素都有焦点事件，具有“获取焦点”和“失去焦点”特点的元素只有2种。
1.表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表）
2.超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#search{color:#bbbbbb;}
</style>
<script>
window.onload = function ()
{
//获取元素对象
var oSearch = document.getElementById("search");
//获取焦点
oSearch.onfocus = function ()
{
if (this.value == "百度一下，你就知道")
{
this.value = "";
}
};
//失去焦点
oSearch.onblur = function ()
{
if (this.value == "")
{
this.value = "百度一下，你就知道";
}
};
}
</script>
</head>
<body>
<input id="search" type="text" value="百度一下，你就知道"/>
</body>
</html>
onselect
在JavaScript中，当我们选中“单行文本框”或“多行文本框”中的内容时，就会触发onselect事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oSearch = document.getElementById("search");
oSearch.onclick = function ()
{
this.select();
};
}
</script>
</head>
<body>
<input id="search" type="text" value="百度一下，你就知道" />
</body>
</html>
onchange
在JavaScript中，onchange事件常用于“具有多个选项的表单元素”。
1.单选框选择某一项时触发。
2.复选框选择某一项时触发。
3.下拉列表选择某一项时触发。
单选框：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oFruit = document.getElementsByName("fruit");
var oP = document.getElementById("content");
for (var i = 0; i < oFruit.length; i++)
{
oFruit[i].onchange = function ()
{
if (this.checked)
{
oP.innerHTML = "你选择的是：" + this.value;
}
};
}
}
</script>
</head>
<body>
<div>
<label><input type="radio" name="fruit" value="苹果" />苹果</label>
<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
<label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
</div>
<p id="content"></p>
</body>
</html>
复选框的全选与反选：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oSelectAll = document.getElementById("selectAll");
var oFruit = document.getElementsByName("fruit");
oSelectAll.onchange = function ()
{
//如果选中，即this.checked返回true
if (this.checked) {
for (var i = 0; i < oFruit.length; i++)
{
oFruit[i].checked = true;
}
} else {
for (var i = 0; i < oFruit.length; i++)
{
oFruit[i].checked = false;
}
}
};
}
</script>
</head>
<body>
<div>
<p><label><input id="selectAll" type="checkbox"/>全选/反选：</label></p>
<label><input type="checkbox" name="fruit" value="苹果" />苹果</label>
<label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
<label><input type="checkbox" name="fruit" value="西瓜" />西瓜</label>
</div>
</body>
</html>
下拉列表：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oList = document.getElementById("list");
oList.onchange = function ()
{
var link = this.options[this.selectedIndex].value;
window.open(link);
};
}
</script>
</head>
<body>
<select id="list">
<option value="http://wwww.baidu.com">百度</option>
<option value="http://www.sina.com.cn">新浪</option>
<option value="http://www.qq.com">腾讯</option>
<option value="http://www.sohu.com">搜狐</option>
</select>
</body>
</html>
课程总结
编辑事件
学习目标
编辑事件介绍
在JavaScript中，常用的编辑事件有3种：
1.oncopy
2.onselectstart
3.oncontextmenu
oncopy
在JavaScript中，我们可以使用oncopy事件来防止页面内容被复制。
语法：
document.body.oncopy = function ()
{
return false;
}
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
document.body.oncopy = function ()
{
return false;
}
}
</script>
</head>
<body>
<div>我是不能被复制的</div>
</body>
</html>
onselectstart
在JavaScript中，我们可以使用onselectstart事件来防止页面内容被选取。
语法：
document.body.onselectstart=function()
{
return false;
}
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
document.body.onselectstart = function ()
{
return false;
}
}
</script>
</head>
<body>
<div>防止页面内容被选取。</div>
</body>
</html>
oncontextmenu
在JavaScript中，我们可以使用oncontextmenu事件来禁止鼠标右键。
语法：
document.oncontextmenu = function ()
{
return false;
}
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
document.oncontextmenu = function () {
return false;
}
}
</script>
</head>
<body>
<div>禁用鼠标右键</div>
</body>
</html>
课程总结
页面事件
学习目标
页面事件onload
在JavaScript中，onload表示文档加载完成后再执行的一个事件。
语法：
window.onload = function(){
……
}
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
alert("JavaScript");
};
</script>
</head>
<body>
<input id="btn" type="button" value="提交" />
</body>
</html>
正确的解决方法就是使用window.onload，实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
alert("JavaScript");
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="提交" />
</body>
</html>
为什么不需要加上window.onload也可以获取到元素呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function change()
{
var oTitle = document.getElementById("title");
oTitle.style.color = "white";
oTitle.style.backgroundColor = "hotpink";
}
</script>
</head>
<body>
<h3 id="title">等待加载过程</h3>
<input type="button" value="改变样式" onclick="change()" />
</body>
</html>
onbeforeunload
在JavaScript中，onbeforeunload表示离开页面之前触发的一个事件。
语法：
window.onbeforeunload = function(){
……
}
说明：
与window.onload相对的应该是window.onunload，不过一般情况下我们极少用到window.onunload，而更倾向于使用window.onbeforeunload。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
alert("欢迎来到曹老师的前端课程");
}
window.onbeforeunload = function (e)
{
e.returnValue = "记得下来再来喔！";
}
</script>
</head>
<body>
</body>
</html>
课程总结
页面事件进阶
学习目标
页面事件介绍
在JavaScript中，想要给元素添加一个事件，其实我们有以下2种方式。
1.事件处理器
2.事件监听器
事件处理器
在前面的学习中，如果想要给元素添加一个事件，我们都是通过操作HTML属性的方式来实现，这种方式其实也叫“事件处理器”，例如：
oBtn.onclick = function(){……};
事件处理器的用法非常简单，代码写出来也很易读。不过这种添加事件的方式是有一定缺陷的。先来看一个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
alert("第1次");
};
oBtn.onclick = function () {
alert("第2次");
};
oBtn.onclick = function () {
alert("第3次");
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="按钮"/>
</body>
</html>
在这个例子中，我们一开始的目的是想给按钮添加3次onclick事件，但JavaScript最终只会执行最后一次onclick。从上面也可以看出来了，事件处理器是没办法为一个元素添加多个相同事件的。
事件监听器
绑定事件
所谓的“事件监听器”，指的是使用addEventListener()方法来为一个元素添加事件，我们又称之为“绑定事件”。
语法：
obj.addEventListener(type , fn , false)
说明：
obj是一个DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取到的元素节点。
type是一个字符串，指的是事件类型。例如单击事件用click，鼠标移入用mouseover等。一定要注意，这个事件类型是不需要加上“on”前缀的。
fn是一个函数名，或者一个匿名函数。
false表示事件冒泡阶段调用。
此对于addEventListener()的兼容性我们不需要考虑IE浏览器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.addEventListener("click", function () {
alert("第1次");
}, false);
oBtn.addEventListener("click", function () {
alert("第2次");
}, false);
oBtn.addEventListener("click", function () {
alert("第3次");
}, false);
}
</script>
</head>
<body>
<input id="btn" type="button" value="按钮"/>
</body>
</html>
多次调用window.onload
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//第1次调用window.onload
window.onload = function ()
{
var oBtn1 = document.getElementById("btn1");
oBtn1.onclick = function ()
{
alert("第1次");
};
}
//第2次调用window.onload
window.onload = function ()
{
var oBtn2 = document.getElementById("btn2");
oBtn2.onclick = function ()
{
alert("第2次");
};
}
//第3次调用window.onload
window.onload = function ()
{
var oBtn3 = document.getElementById("btn3");
oBtn3.onclick = function ()
{
alert("第3次");
};
}
</script>
</head>
<body>
<input id="btn1" type="button" value="按钮1" /><br/>
<input id="btn2" type="button" value="按钮2" /><br />
<input id="btn3" type="button" value="按钮3" />
</body>
</html>
事件解绑
在JavaScript中，我们可以使用removeEventListener()方法为元素解绑（或解除）某个事件。解绑事件与绑定事件是相反的操作。
语法：
obj.removeEventListener(type , fn , false);
说明：
obj是一个DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取到的元素节点。
type是一个字符串，指的是事件类型。例如，单击事件用click，鼠标移入用mouseover等。一定要注意，这里我们是不需要加上on前缀的。
对于removeEventListener()方法来说，fn必须是一个函数名，而不能是一个函数。
举例： 解除“事件监听器”添加的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oP = document.getElementById("content");
var oBtn = document.getElementById("btn");
//为p添加事件
oP.addEventListener("click", changeColor, false);
//点击按钮后，为p解除事件
oBtn.addEventListener("click", function () {
oP.removeEventListener("click", changeColor, false);
}, false);
function changeColor()
{
this.style.color = "hotpink";
}
}
</script>
</head>
<body>
<p id="content">曹老师带你学前端</p>
<input id="btn" type="button" value="解除" />
</body>
</html>
举例：解除“事件处理器”添加的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oP = document.getElementById("content");
var oBtn = document.getElementById("btn");
//为P元素添加事件
oP.onclick = changeColor;
//点击按钮后，为p元素解除事件
oBtn.addEventListener("click", function () {
oP.onclick = null;
}, false);
function changeColor()
{
this.style.color = "hotpink";
}
}
</script>
</head>
<body>
<p id="content">曹老师带你学前端</p>
<input id="btn" type="button" value="解除" />
</body>
</html>
课程总结
Event对象
学习目标
Event对象
当一个事件发生的时候，这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是event对象。每一个事件，都有一个对应的event对象。给大家打个比喻，我们都知道飞机都有黑匣子，对吧？每次飞机出事（一个事件）后，我们都可以从黑匣子（event对象）中获取到详细的信息。
在JavaScript中，我们可以通过event对象来获取一个事件的详细信息。
| 属性 | 说明 |
|---|---|
| type | 事件类型 |
| keyCode | 键码值 |
| shiftKey | 是否按下shift键 |
| ctrlKey | 是否按下Ctrl键 |
| altKey | 是否按下Alt键 |
type
在JavaScript中，我们可以使用event对象的type属性来获取事件的类型。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function (e)
{
alert(e.type);
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="按钮" />
</body>
</html>
几乎所有的同学都会有一个疑问：“这个e是什么？为什么写个e.type就可以获取到事件的类型呢？”
实际上，每次调用一个事件的时候，JavaScript都会默认给这个事件函数加上一个隐藏的参数，这个参数就是event对象。一般来说，event对象是作为事件函数的第1个参数传入的。
其实e仅仅是一个变量名，它存储的是一个event对象。也就是说，e可以换成其他名字，如ev、event、a等都可以，大家可以测试一下。
event对象在IE8及以下版本还有一定的兼容性，可能还需要采取“var e=e||window.event;”来处理。不过随着IE退出历史舞台，这些兼容性问题我们慢慢可以不用管了，这里简单了解一下就行。
keyCode
在JavaScript中，如果我们想要获取按下了键盘中的哪个键，可以使用event对象的keyCode属性来获取。
语法：
event.keyCode
说明：
event.keyCode返回的是一个数值，常用的按键及对应的键码如表所示。
| 按键 | 键码 |
|---|---|
| W（上） | 87 |
| S（下） | 83 |
| A（左） | 65 |
| D（右） | 68 |
| ↑ | 38 |
| ↓ | 40 |
| ← | 37 |
| → | 39 |
如果是shift、ctrl和alt键，我们不需要通过keyCode属性来获取，而是可以通过shiftKey、ctrlKey和altKey属性获取。
禁止shfit、alt、ctrl键：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
document.onkeydown = function (e) {
if (e.shiftKey || e.altKey || e.ctrlKey) {
alert("禁止使用shift、alt、ctrl键！")
}
}
}
</script>
</head>
<body>
<p> 禁止使用shift、alt、ctrl键！</p>
</body>
</html>
获取“上下左右”方向键：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
window.document.body.onkeydown=function(eve){
switch(eve.keyCode){
case 37:
alert("上");
break;
case 38:
alert("右");
break;
case 39:
alert("下");
break;
case 40:
alert("左");
break;
}
}
}
</script>
</head>
<body>
</body>
</html>
课程总结
this
学习目标
this
在JavaScript中，this是非常复杂的。这一节我们只针对this在事件操作中的使用情况进行介绍，而对于this在其他场合（如面向对象开发等）的使用，我们在JavaScript进阶部分再详细讲解。
在事件操作中，可以这样理解：哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oDiv = document.getElementsByTagName("div")[0];
oDiv.onclick = function ()
{
this.style.color = "hotpink";
}
}
</script>
</head>
<body>
<div>曹老师讲授前端课程~</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oDiv = document.getElementsByTagName("div")[0];
oDiv.onclick = changeColor;
function changeColor()
{
this.style.color = "hotpink";
}
}
</script>
</head>
<body>
<div>this指向的问题</div>
</body>
</html>
this所在的函数是changeColor，然后changeColor函数被oDiv调用了，因此this指向的就是oDiv。事实上，上面两个例子是等价的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oDiv = document.getElementsByTagName("div")[0];
var oP = document.getElementsByTagName("p")[0];
oDiv.onclick = changeColor;
oP.onclick = changeColor;
function changeColor()
{
this.style.color = "hotpink";
}
}
</script>
</head>
<body>
<div>曹老师带你学习前端的this</div>
<p>曹老师带你学习前端的this</p>
</body>
</html>
哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oUl = document.getElementById("list");
var oLi = oUl.getElementsByTagName("li");
for (var i = 0; i < oLi.length; i++)
{
oLi[i].onclick = function ()
{
oLi[i].style.color = "hotpink";
}
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
一开始想要实现的效果是：点击哪一个li元素，就改变这个li元素的颜色。很多人自然而然就写下了上面这种代码。然后测试的时候，会发现完全没有效果。这是怎么回事呢？我们试着把oLi[i].style.color = "hotpink";这一句换成this.style.color = "hotpink";就有效果了。
那么为什么用oLi[i]就不正确，而必须要用this呢？其实这就是典型的闭包问题。
在事件函数中，想要使用当前元素节点，我们尽量使用this来代替oBtn、oLi[i]等等这种DOM对象的写法。
课程总结
window对象
学习目标
window对象介绍
在JavaScript中，一个浏览器窗口就是一个window对象。我们可以用这个对象的属性和方法来操作这个窗口。
window对象存放了这个页面的所有信息，为了更好分类处理这些信息，window对象下面又分为很多对象，如下图所示。
| 子对象 | 说明 |
|---|---|
| document | 文档对象，用于操作页面元素 |
| location | 地址对象，用于操作URL地址 |
| navigator | 浏览器对象，用于获取浏览器版本信息 |
| history | 历史对象，用于操作浏览历史 |
| screen | 屏幕对象，用于操作屏幕宽度高度 |
document对象也是window对象下的一个子对象。很多人以为一个窗口就是一个document对象，其实这个理解是错的。因为一个窗口不仅仅包括HTML文档，还包括浏览器信息、浏览历史、浏览地址等等。
window对象及下面这些location、navigator等子对象，由于都是操作浏览器窗口的，所以我们又称之为“BOM”，也就是Browser Object Module（浏览器对象模型）。
此外，你也可以把window下的子对象看成是它的属性，只不过这个属性也是一个对象，所以我们才称之为“子对象”。对象一般都有属性和方法，上表介绍的是window对象的属性。实际上，window对象也有非常多的方法，常用的如下表所示。
| 方法 | 说明 |
|---|---|
| alert() | 提示对话框 |
| confirm() | 判断对话框 |
| prompt() | 输入对话框 |
| open() | 打开窗口 |
| close() | 关闭窗口 |
| setTimeout() | 开启“一次性”定时器 |
| clearTimeout() | 关闭“一次性”定时器 |
| setInterval() | 开启“重复性”定时器 |
| clearInterval() | 关闭“重复性”定时器 |
对于window对象来说，无论是它的属性，还是方法，都可以省略window前缀。例如window.alert()可以简写为alert()，window.open()可以简写为open()。
课程总结
window对象窗口操作
学习目标
window对象窗口操作
在JavaScript中，窗口常见的操作有两种：一种是“窗口”；另外一种是“关闭窗口”。打开窗口和关闭窗口，在实际开发中经常用到。
打开窗口
在JavaScript中，我们可以使用window对象的open()方法来打开一个新窗口。
语法：
window.open(url, target)
说明：
window.open()可以直接简写为open()，不过我们一般都习惯加上window前缀。window.open()参数有很多，但是只有url和target这两个用得上。
url指的是新窗口的地址，如果url为空，则表示打开一个空白窗口。空白窗口很有用，我们可以使用document.write()往空白窗口输出文本，甚至输出一个HTML页面。
target表示打开方式，它的取值跟a标签中target属性的取值是一样的，常用取值有两个：_blank和_self。当target为_blank（默认值），表示在新窗口打开；当target为_self时，表示在当前窗口打开。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
window.open("http://www.baidu.com");
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="打开"/>
</body>
</html>
打开一个空白窗口：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
var opener = window.open();
opener.document.write("这是一个新窗口");
opener.document.body.style.backgroundColor = "lightskyblue";
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="打开" />
</body>
</html>
这段代码实现的效果是：打开一个新的空白窗口，然后往里面输出内容。可能很多人会对var opener = window.open();这句代码感到困惑：“为什么window.open()可以赋值给一个变量呢？”
实际上，window.open()就像函数调用一样，会返回（也就是return）一个值，这个值就是新窗口对应的window对象。也就是说，此时opener就是这个新窗口的window对象。既然我们可以获取到新窗口的window对象，那么想要在新窗口页面干点什么，如输出点内容、控制元素样式等，就很简单了。
关闭窗口
在JavaScript中，我们可以使用window.close()来关闭一个新窗口。
语法：
window.close()
说明：
window.close()方法是没有参数的。
关闭当前窗口:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
window.close();
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="关闭" />
</body>
</html>
关闭新窗口:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var btnOpen = document.getElementById("btn_open");
var btnClose = document.getElementById("btn_close");
var opener = null;
btnOpen.onclick = function ()
{
opener = window.open("http://www.baidu.com");
};
btnClose.onclick = function () {
opener.close();
}
}
</script>
</head>
<body>
<input id="btn_open" type="button" value="打开新窗口" />
<input id="btn_close" type="button" value="关闭新窗口" />
</body>
</html>
分析：
当我们点击【打开新窗口】按钮后，再点击【关闭新窗口】按钮，就会把新窗口关闭掉。window.close()关闭的是当前窗口，opener.close()关闭的是新窗口。从本质上来说，window和opener都是window对象，只不过window指向的是当前窗口，opener指向的是新窗口。对于这两个，小伙伴们一定要认真琢磨清楚。
此外，窗口最大化、最小化、控制窗口大小、移动窗口等，这些操作在实际开发中用得不多，大家暂时无需记忆。
课程总结
window对话框
学习目标
window对话框
在JavaScript中，对话框有3种： alert()、confirm()和prompt()。它们都是window对象的方法。前面我们说过，对于window对象的属性和方法，是可以省略window前缀的，例如window.alert()可以简写为alert()。
alert()
在JavaScript中，alert()对话框一般仅仅用于提示文字。这个方法在之前都用到烂了，这里我们就不用多说。对于alert()，只需记住一点就行：在alert()中实现文本换行，用的是\n。
语法：
alert("提示文字")
confirm()
在JavaScript中，confirm()对话框不仅提示文字，还提供确认。
语法：
confirm("提示文字")
说明：
如果用户点击【确定】按钮，则confirm()返回true。如果用户点击【取消】按钮，则confirm()返回false。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
if (confirm("确定要跳转到首页吗？")) {
window.location.href = "http://www.baidu.com";
}else{
document.write("你取消了跳转");
}
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="回到首页"/>
</body>
</html>
分析：
在弹出的confirm()对话框中，当我们点击【确定】按钮时，confirm()会返回true，然后当前窗口就会跳转到百度首页。当我们点击【取消】按钮时，confirm()会返回false，然后就会输出内容。
prompt()
在JavaScript中，prompt()对话框不仅提示文字，还返回一个字符串。
语法：
prompt("提示文字")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
var name = prompt("请输入你的名字");
document.write("欢迎来到<strong>" + name + "</strong>");
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="按钮"/>
</body>
</html>
课程总结
定时器
学习目标
定时器介绍
在浏览器网页的过程中，我们经常可以看到这样的动画：轮播效果中，图片每隔几秒就切换一次；在线时钟中，秒针每隔一秒转一次。
setTimeout()
在JavaScript中，我们可以使用setTimeout()方法来“一次性”地调用函数，并且可以使用clearTimeout()来取消执行setTimeout()。
语法：
setTimeout(code, time);
说明：
参数code可以是一段代码，可以是一个函数，也可以是一个函数名。
参数time是时间，单位为毫秒，表示要过多长时间才执行code中的代码。
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
setTimeout('alert("欢迎来到曹老师的学习课程");', 2000);
}
</script>
</head>
<body>
<p>2秒后提示欢迎语。</p>
</body>
</html>
code是一段函数：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
setTimeout(function () {
alert("欢迎！");
}, 2000);
}
</script>
</head>
<body>
<p>2秒后提示欢迎语。</p>
</body>
</html>
code是一个函数名：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
setTimeout(alertMes, 2000);
}
function alertMes(){
alert("欢迎来到曹老师的前端课堂");
}
</script>
</head>
<body>
<p>2秒后提示欢迎语。</p>
</body>
</html>
这里setTimeout()第一个参数是一个函数名，这个函数名是不需要加括号()的！下面两种写法是等价的：
setTimeout(alertMes, 2000)
setTimeout("alertMes()", 2000)
很多人都容易搞混这两个写法，如写成setTimeout(alertMes(), 2000)或者setTimeout("alertMes", 2000)，我们一定要注意这一点。一般情况下，我们只需要掌握setTimeout(alertMes, 2000)这一种写法就可以了，原因有2个：一是这种写法性能更高；二是可以避免两种写法造成记忆混乱。
clearTimeout()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{width:100px;height:100px;border:1px solid silver;}
</style>
<script>
window.onload = function ()
{
//获取元素
var oBtn = document.getElementsByTagName("input");
//timer存放定时器
var timer = null;
oBtn[0].onclick = function ()
{
timer = setTimeout(function () {
alert("欢迎来到曹老师的前端课程");
}, 2000);
};
oBtn[1].onclick = function ()
{
clearTimeout(timer);
};
}
</script>
</head>
<body>
<p>点击“开始”按钮，2秒后提示欢迎语。</p>
<input type="button" value="开始"/>
<input type="button" value="暂停"/>
</body>
</html>
setInterval()
在JavaScript中，我们可以使用setInterval()方法来“重复性”地调用函数，并且可以使用clearInterval()来取消执行setInterval()。
语法：
setInterval(code, time);
说明：
参数code可以是一段代码，可以是一个函数，也可以是一个函数名。
参数time是时间，单位为毫秒，表示要过多长时间才执行code中的代码。
此外，setInterval()跟setTimeout()语法是一样的，唯一不同的是：setTimeout()只执行一次；而setInterval()可以重复执行无数次。对于setInterval()来说，下面3种方式都是正确的，这个跟setTimeout()一样：
//方式1
setInterval(function(){…}, 2000)
//方式2
setInterval(alertMes, 2000)
//方式3
setInterval("alertMes()", 2000)
clearInterval()
在JavaScript中，我们可以使用setInterval()方法来“重复性”地调用函数，并且可以使用clearInterval()来取消执行setInterval()。
setInterval("console.log(1)",1000);
function ae(){
alert(1);
}
setInterval(ae,1000);
var timere = setInterval(function(){
alert(1);
},2000);
console.log(timere);
clearInterval(timere); //会结束掉循环
倒计时效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//定义全局变量，用于记录秒数
var n = 5;
window.onload = function ()
{
//设置定时器，重复执行函数countDown
setInterval(countDown, 1000);
}
//定义函数
function countDown()
{
//判断n是否大于0，因为倒计时不可能有负数
if (n > 0) {
n--;
document.getElementById("num").innerHTML = n;
}
}
</script>
</head>
<body>
<p>倒计时：<span id="num">5</span></p>
</body>
</html>
课程总结
window对象-location对象
学习目标
window对象-location对象介绍
在JavaScript中，我们可以使用window对象下的location子对象来操作当前窗口的URL。所谓URL，指的就是页面地址。对于location对象，我们只需要掌握以下3个属性，如表所示。
| 属性 | 说明 |
|---|---|
| href | 当前页面地址 |
| search | 当前页面地址“？”后面的内容 |
| hash | 当前页面地址“#”后面的内容 |
window.location.href
在JavaScript中，我们可以使用location对象的href属性来获取或设置当前页面的地址。
语法：
window.location.href
说明：
window.location.href可以直接简写为location.href，不过我们一般都习惯加上window前缀。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var url = window.location.href;
document.write("当前页面地址是：" + url);
</script>
</head>
<body>
</body>
</html>
设置当前页面地址:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
setTimeout(function () {
window.location.href = "http://www.baidu.com";
}, 2000);
</script>
</head>
<body>
<p>2秒后跳转</p>
</body>
</html>
window.location.search
在JavaScript中，我们可以使用location对象的search属性来获取和设置当前页面地址“?”后面的内容。
语法：
window.location.search
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
document.write(window.location.search);
</script>
</head>
<body>
</body>
</html>
此时页面是空白的，我们在浏览器地址后面多加上?id=1（要自己手动输入），再刷新页面，就会出现结果了，浏览器预览效果如图所示。
地址“?”后面这些内容，也叫querystring（查询字符串），一般用于数据库查询，而且是大量用到。
window.location.hash
在JavaScript中，我们可以使用location对象的hash属性来获取和设置当前页面地址井号（#）后面的内容。井号（#）一般用于锚点链接，这个相信大家见过不少了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
document.write(window.location.hash);
</script>
</head>
<body>
</body>
</html
此时页面是空白的，我们在浏览器地址后面多加上#imgId（要自己手动输入），再刷新页面，就会出现结果了，在实际开发中，window.location.hash用得还是比较少，我们了解一下就行。
课程总结
window对象-navigator对象
学习目标
window对象-navigator对象
在JavaScript中，我们可以使用window对象下的子对象navigator来获取浏览器的类型。
语法：
window.navigator.userAgent
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
alert(window.navigator.userAgent);
</script>
</head>
<body>
</body>
</html>
不同浏览器，会弹出相应的版本号信息。不过这3种浏览器都含有独一无二的字符：IE含有“MSIE”；Chrome含有“Chrome”；而Firefox含有“Firefox”。根据这个特点，我们可以判断当前浏览器是什么类型的浏览器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
if (window.navigator.userAgent.indexOf("MSIE") != -1) {
alert("这是IE");
}else if (window.navigator.userAgent.indexOf("Chrome") != -1) {
alert("这是Chrome");
}else if (window.navigator.userAgent.indexOf("Firefox") != -1) {
alert("这是Firefox");
}
</script>
</head>
<body>
</body>
</html>
这里注意一下，对于IE浏览器来说，上面代码只能识别IE10及以下版本，如果想要识别所有的IE浏览器，我们应该使用下面代码来进行判断：
if (!!window.ActiveXObject || "ActiveXObject" in window){
alert("这是IE");
}
判断浏览器类型也是经常用到的，特别是在处理不同浏览器兼容性上，我们就需要根据浏览器的类型来加载对应的JavaScript处理代码。不过现在浏览器更新迭代非常快，随着IE逐渐退出历史舞台，很多时候我们已经不再需要考虑浏览器之间的兼容性了。
课程总结
window对象-document对象
学习目标
window对象-document对象
我们知道，document对象其实是window对象下的一个子对象，它操作的是HTML文档里所有的内容。事实上，浏览器每次打开一个窗口，就会为这个窗口生成一个window对象，并且会为这个窗口内部的页面（即HTML文档）自动生成一个document对象，然后我们就可以通过document对象来操作页面中所有的元素了。
window对象是浏览器为每个窗口创建的一个对象。通过window对象，我们可以操作窗口如打开窗口、关闭窗口、浏览器版本等，这些又被统称为“BOM（浏览器对象模型）”。
document对象是浏览器为每个窗口内的HTML页面创建的一个对象。通过document对象，我们可以操作页面的元素，这些操作又被统称为“DOM（文档对象模型）”。
由于window对象是包括document对象的，所以我们可以“简单”地把BOM和DOM的关系理解成：BOM包含DOM。只不过对于文档操作来说，我们一般不把它看成是BOM的一部分，而是看成独立的，也就是DOM。
我们已经在大量使用document对象的属性和方法了，如document.write()、document.getElementById()、document.body等。在这里就不在介绍。
课程总结
window对象-document属性
学习目标
window对象-document对象介绍
document对象的属性非常多，但是大多数都是没什么用的，下表只列出比较常用的属性。
| 属性 | 说明 |
|---|---|
| document.title | 获取文档的title |
| document.body | 获取文档的body |
| document.forms | 获取所有form元素 |
| document.images | 获取所有img元素 |
| document.links | 获取所有a元素 |
| document.cookie | 文档的cookie |
| document.URL | 当前文档的URL |
| document.referrer | 返回使浏览者到达当前文档的URL |
在上表中，有以下几点需要大家注意。
1.document.title和document.body这两个我们在之前已经讲过了，这里不再赘述。
2.document.forms、document.images、document.links这3个分别等价于下面3个，所以我们一般用document.getElementsByTagName来获取就行了，不需要去记忆。
1.document.getElementsByTagName("form")
2.document.getElementsByTagName("img")
3.document.getElementsByTagName("a")
3.cookie一般结合后端技术操作中用得比较多，document.cookie单纯在前端中用得也不是非常多，我们简单看一下就行。
document.URL
在JavaScript中，我们可以使用document对象的URL属性来获取当前页面的地址。
语法：
document.URL
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var url = document.URL;
document.write("当前页面地址是：" + url);
</script>
</head>
<body>
</body>
</html>
document.URL和window.location.href都可以获取当前页面的URL，不过它们也有区别：document.URL只能获取不能设置；window.location.href既可以获取也可以设置。
document.referrer
在JavaScript中，我们可以使用document对象的referrer属性来获取用户在访问当前页面之前所在页面的地址。例如我从页面A的某个链接进入页面B，如果在页面B中使用document.referrer，就可以获取到页面A的地址。
document.referrer非常酷，因为我们可以通过它来统计用户都是通过什么方式来到你的网站的。
我们可以建立两个页面，然后在第1个页面设置一个超链接指向第2个页面。当我们从第1个页面超链接进入第2个页面时，在第2个页面使用document.referrer就可以获取第1个页面的地址了。
课程总结
window对象-document对象方法
学习目标
window对象-document对象方法
document对象的方法也非常多，但是也是很多没用的，表中只列出比较常用的方法。
| 方法 | 说明 |
|---|---|
| document.getElementById() | 通过id获取元素 |
| document.getElementsByTagName() | 通过标签名获取元素 |
| document.getElementsByClassName() | 通过class获取元素 |
| document.getElementsByName() | 通过name获取元素 |
| document.querySelector() | 通过选择器获取元素，只获取第1个 |
| document.querySelectorAll() | 通过选择器获取元素，获取所有 |
| document.createElement() | 创建元素节点 |
| document.createTextNode() | 创建文本节点 |
| document.write() | 输出内容 |
| document.writeln() | 输出内容并换行 |
课程总结
