### js引入方式
- 内部方式:写在script标签中
```html
```
- 外部方式:在script标签中使用src引入
```html
```
- 写在标签中的事件属性中
```html
hello world
") ``` ### 1.1输出欢迎信息 ## 数据类型 > 1.了解js中的数据类型 > > 2.掌握基础数据类型的5种形式 > > 3.了解不同的数字表示方式及不同的进制的数字表示方式 > > 4.了解字符串类型中转义字符的使用 ### 数据类型概述 程序的运行就是对数据的处理,JavaScript中可以处理的数据分为`对象类型（引用类型）`和`原始类型（基础类型）`。 原始数据类型包含5中数据类型：数字类型Number、字符串类型String、布尔类型Boolean、null类型、undefined类型。 ### 数字类型Number - 数字表示方式 js中可以使用多种数字表示方式：十进制数字、八进制数字、十六进制数字、浮点数 ```javascript // 不同进制的数字表示方式 console.log(10); // 十进制数字10 console.log(0x10); // 十六进制数字10 == 16 console.log(010); // 八进制数字10 == 8 // 浮点型的数字表示方式 console.log(3.14); // 3.14 console.log(3.14e5); // 3.14*10^5 ==314000 console.log(3.14e-5); // 3.14/10^5 ==0.000314 ``` - 补充 > js中对于小数的计算存在误差，实际编程时要注意。 ### 字符串类型String - 字符串 从语法上来说，用双引号`""`或者单引号`''`,包含的内容就是一个字符串。 字符串是一组字符组成的文本。 ```javascript console.log("hello world") // console.log('hello world') // console.log("214") //这个写法就是字符串214 ``` - 转义字符 在字符串中使用反斜杠有特殊用途，反斜杠后边加上一个字符就不再表示这个字符原始含义，比如`\n`就代表换行。`\'`、`\"`会让引号失去表示字符串的作用。 ```javascript console.log("我是一个超级英雄") console.log("我是一个\n超级英雄") //使用\n表示换行 //console.log("我是一个"超级英雄"") //报错 console.log("我是一个\"超级英雄\"") //使用\" 让双引号失去组成字符串的作用 ``` | 转义字符 | 作用 | | -------- | --------------------- | | `\n` | 换行符==enter | | `\t` | 制表符==tab | | `\r` | 回车符==enter（失效） | | `\"` | 双引号字符 | | `\'` | 单引号字符 | | `\\` | 反斜杠字符 | ### 布尔值Boolean 布尔值用来在js中表示真假。这个类型只有两个值`true`、`false`。 - 布尔值一般都是在条件语句中作为判断的条件来使用。 ```javascript if(true){ console.log("条件是真，代码执行") } if(false){ console.log("条件是假，代码不会执行") } ``` - js中一些运算的结果用布尔值表示，如比较运算。 ```javascript console.log(1>2) //false console.log(1==2) //false console.log(1<2) //true ``` ### null与undefined - null类型只有一个值null，表示空（没有） - undefined类型只有一个值undefined，表示空（没有） 我们暂时不讨论null和undefined的使用，在以后的学习中会逐渐了解他们的具体使用场景。 ### 获取数据类型 js中使用typeof可以获取数据的类型。获取的结果是字符串形式。 ```javascript console.log(typeof 123) // "number" console.log(typeof "123") //"string" console.log(typeof true) //boolean console.log(typeof null) ////"object" console.log(typeof undefined) //"undefined" ``` - 测试 ```javascript console.log(typeof typeof 123) //????? ``` ## 变量 > 1.了解什么是变量 > > 2.掌握变量的使用方式 #### 什么是变量 - 变量是js中存储数据的标识符，用来表示计算机的内存地址。通过变量可以方便的使用数据。 - 变量用来存储数据
#### 变量的使用
变量的使用可以分为：声明、赋值、调用三种方式
- 变量的声明
```javascript
/* 变量的命名规则:
可以包含数字、字母、下划线_ 、$
不能以数字开头
不能使用关键字及保留字 js中已经有特殊作用的词
区分大小写
*/
var a;
var b;
```
- 变量的赋值
```javascript
var a;
var b;
a=10;
b=20;
```
- 声明及赋值的灵活使用
```javascript
// 同时声明和赋值
var c = 30;
// 同时声明多个变量
var d,e,f;
d=10;
e=20;
f=30;
// 同时声明多个变量并赋值
var g=10,h,i=20;
```
- 变量的调用
```javascript
// 变量的调用
console.log(a)
console.log(a+b)
// 变量的重新赋值
console.log(c)
c = "c的新值"
console.log(c)
```
#### 练习:
- 交换两个变量的值
```javascript
// 声明变量aa bb
var aa = 10;
var bb = 20;
// 编写代码 实现将aa bb变量中的值互换
```
- 下面哪些变量是合法的
```tex
a
1
age18
18age
name
$name
_sex
&sex
theworld theWorld
```
- 完成功能要求
```tex
定义一个变量存储自己的名字
定义一个变量存储自己的年龄
在浏览器中输出： 我是xxx，我今年xxx岁了。我是一名"高级"端工程师。
```
- 扩展prompt()实现上边的案例
## 关键字与保留字
关键字和保留字是js中已有特殊作用或者可能有特殊作用的字，我们不能用他们作为变量名。
``` html
关键字：是指 JS本身已经使用了的字，不能再用它们充当变量名、方法名。
包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。
```
```html
保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。
包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。
```
### 1.2使用变量存储用户信息并输出
## 数据类型转换
> 1.掌握字符串转数字的两个方法
>
> 2.掌握强制类型转换的方法
>
> 3.了解toString()的使用
>
> 4.了解特殊场景下数字转换的字符串的操作
js中数据的使用非常灵活，在实际开发时根据需要，可以更改数据的类型。
#### 字符串转数字
- parseInt() `parseInt(string, radix);`
- parseInt()可将字符串转化成整数数字
- 纯数字字符串可以转化为数字
- 以数字开头的字符串，可以截取整数部分
- 其他情况结果都是NaN
```javascript
"123"
"123hello"
"12.5"
"hello2020"
"12.3hello"
```
- parseFloat() `parseFloat(string)`
- parseFloat()可将字符串转化成浮点型数字
- 纯数字字符串可以转化为数字（可以保留小数）
- 以数字开头的字符串，可以截取数值部分（可以保留小数）
- 其他情况结果都是NaN
```javascript
"123"
"123hello"
"12.5"
"hello2020"
"12.3hello"
```
##### 练习
> 1.使用prompt完成类型转换案例。
>
> 页面打开，弹出输入框
>
> 输入数据
>
> 输入数据之后，提示：“你输入的原始数据是xxx，转换为数字是xxx”
>
#### 强制转换
除了parseInt和parseFloat可以将字符串转换为数字，js还提供了其他的方法实现数据类型的转换。
- Number()
- 将其他类型的数据转换为数字类型
- 字符串：只有纯数字字符串可以转换为数字，其他字符串得到NaN
- 布尔值：true==1 false==0
- null==0
- undefined==NaN
- String()
- 将其他类型的数组转换为字符串
- Boolean()
- 将其他类型的数据转换为布尔值
- 只有五个数据可以转换为false：数字`0`、空字符串`""`、`null`、`undefined`、NaN
- 其他都是true
#### toString()
- 所有的数据都可以调用toString()，进行字符串类型的转换。
- 数字在调用toString()时，可以添加一个2~36的参数，在转换字符串时可以实现进制转换
```
//声明变量a 赋值为15
var a = 15;
//将数字15转换为字符串并进行进制转换
console.log(a.toString(2)) //1111
console.log(a.toString(16)) //f
console.log(a.toString(8)) //17
```
#### 特殊数字转字符串
（1）toFixed方法根据小数点后的指定位数将数字转换为字符串，他从不使用指数记数法；`四舍五入`
（2）toExponential方法使用指数记数法将数字转换为指数形式的字符串，其中小数点前只有一位，小数点后的位数则由参数指定(也就是说有效数字位数比指定的位数要多一位)；
（3）toPrecision方法根据指定的有效数字位数将数字转换成字符串。如果有效数字的位数少于数字整数部分的位数，则转换成指数形式。
```javascript
var n=123456.789;
n.toFixed(0); //返回字符串"123457"
n.toFixed(2); //返回字符串"123456.79"
n.toFixed(5); //返回字符串"123456.78900"
n.toExponential(1); //返回字符串"1.2e+5"
n.toExponential(3); //返回字符串"1.235e+5"
n.toPrecision(4); //返回字符串"1.235e+5"
n.toPrecision(7); //返回字符串"123456.8"
n.toPrecision(10); //返回字符串"123456.7890"
```
### 1.3 制作进制转换小工具
## DOM概述
> 1.了解js的组成
>
> 2.了解DOM的基本概念
>
> 3.掌握获取标签的四种方式
>
> 4.了解js中body、html、window的特殊使用
### js语法组成
js的语法由三部分构成：ECMAScript、DOM、BOM。
- ECMAScript：规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。（变量、数据类型、运算符....）
- DOM:**文档对象模型（DocumentObject Model，简称DOM）**，是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）
- BOM:浏览器对象模型**(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
### DOM概述
根据DOM规定，HTML文档中每个成分都是一个节点。
- 整个文档是文档节点
- 每个HTML标签是一个元素节点
- 包含在标签HTML中的元素是文本节点
- 每一个HTML属性是一个属性节点
- 注释属于文本节点
节点之间的关系如下图所示：DOM树结构
### 获取元素
DOM中定义了许多方式来选取元素、查询文档的一个或多个元素，以下是几种常用方式：
- 使用id获取元素 `document.getElementById("yuanyuan")`
- 使用类名class获取元素`document.getElementsByClassName("yuanyuan")[0]`
- 使用标签名称获取元素`document.getElementsByTagName("div")[0]`
- 使用name属性获取元素`document.getElementsByName("yuanyuan")[0]`
### body-html-window
- js中可以不用获取body和html直接使用。
```javascript
// 页面中的body标签
document.body
// 页面中的html标签
document.documentElement
```
- window是浏览器的顶级对象,当要给整个页面添加事件时使用window。
```javascript
window.onclick = function(){
alert("页面中发生了点击事件")
}
```
## DOM事件
> 了解事件
>
> 掌握事件三要素及事件的基本操作
DOM中的事件是指在HTML标签上发生的各种事情，我们可以在发生事件时实现一些效果。
事件操作有三个要素：事件源、事件类型、事件处理程序。
案例：
- 点击按钮弹出提示框
## DOM操作
> 1.掌握标签内容的获取及设置
>
> 2.掌握标签属性的获取及设置
>
> 3.掌握标签样式的获取及设置
### 标签内容
操作元素的内容的方式有两种：innerHTML、innerText。
- innerTHML:获取或设置元素的所有的HTML内容。（可以识别html结构）
- innerText：获取或设置元素的纯文本。（不识别html结构）
案例：
- 点击按钮获取标签内容，点击按钮修改标签内容
### 标签属性
js中的属性操作分为两种方式
- 第一种是直接操作html标准属性，比如：id，id，src，href，title...,这些标签的原有属性
- 使用getAttribute(),setAttribute()操作任意的元素属性。
```javascript
// 获取div的id值，并输出
console.log(div.id)
// 修改新的id值
div.id = "new"
// 获取div的id值,并输出
console.log(div.getAttribute("id"))
// 修改新的id值
div.setAttribute("id","news")
```
案例：
- 点击按钮，修改图片
- 仿京东显示隐藏密码D
### 标签样式
js可以直接操作元素的样式。
```javascript
// 获取标签的样式 width ，并输出
console.log(div.style.width)
// 设置标签的样式 width=300px
div.style.width="300px"
```
案例：
- 关闭淘宝二维码案例D
- 开关灯效果D
### 2.1创建新闻列表
## DOM事件详情
> 1、掌握事件对象的使用
>
> 2、了解常见的鼠标事件
>
> 3、了解常见的键盘事件
>
> 4、了解常见的表单事件
>
> 5、了解页面加载事件
### 事件对象
事件发生后，跟事件相关的一系列信息数据的集合都放到一个对象数据中，这个对象数据就是事件对象。
比如：
- 发生事件的标签 `e.target`
- 鼠标事件发生的位置 `e.pageX` `e.pageY`
- 键盘事件点击的标签 `e.keyCode`
在绑定事件处理函数时，放入一个参数。事件函数执行时，这个参数就用来接收事件对象，通过这个参数就可以调用事件对象中的数据。
```javascript
div.onclick = function(e){
//输出事件对象
console.log(e)
//输出事件对象中存储的 事件源标签
console.log(e.target)
}
```
案例：
- 鼠标点哪，仙女飞到哪
### 鼠标事件
| **属 性** | **描 述** |
| ------------ | -------------------------------------- |
| onclick | 当用户单击某个对象时会触发的事件 |
| ondblclick | 当用户双击某个对象时会触发的事件 |
| onmousedown | 鼠标按钮在某个元素上被按下时触发的事件 |
| onmouseenter | 当鼠标指针移动到元素上时触发的事件 |
| onmouseleave | 当鼠标指针移出元素时触发的事件 |
| onmousemove | 当鼠标在元素上移动时触发的事件 |
| onmouseover | 当鼠标移到某元素之上时触发的事件 |
| onmouseout | 当鼠标从某元素中移开时触发的事件 |
| onmouseup | 当鼠标键在某元素上被松开时触发的事件 |
案例：
- 鼠标移入移出事件
- 仙女跟着鼠标飞D
### 键盘事件
| **属 性** | **描 述** |
| ---------- | ------------------------------ |
| onkeydown | 某个键盘按键被按下时触发 |
| onkeyup | 某个键盘按键被松开时触发 |
| onkeypress | 某个键盘按键被按下并松开时触发 |
- 基本案例
### 表单事件
| **属 性** | **描 述** |
| ---------- | ------------------------ |
| onblur | 元素失去焦点时触发 |
| onfocus | 元素获取焦点时触发 |
| onchange | 表单元素的内容改变时触发 |
| oninput | 元素获取用户输入时触发 |
| onsubmit | 表单提交时触发 |
案例：
- 显示隐藏文本框内容——焦点事件属性操作D
### 加载事件
以上学习的事件都是对应用户操作，而有些事件不用用户操作也会自动发生。如：在页面加载完成之后，就会自动发生onload事件。
```javascript
window.onload = function(){
alert("页面加载完成后，自动发生了onload事件")
}
```
### 2.2计算商品总价
## 函数基础
> 1.了解函数的概念及作用
>
> 2.掌握函数的定义与调用
>
> 3.掌握函数的参数的使用
>
> 4.掌握实参列表arguments的使用
>
> 5.掌握函数返回值的使用
函数是一个代码结构，用来封装具有特定功能的代码，函数可以重复调用。
### 函数的定义
> 函数是一种JavaScript代码结构，用来封装某些编程上的功能。函数在使用时只需要定义一次，但是可以被调用多次。
函数的声明有两种形式
- 标准的声明方式
```javascript
function a(){
//写代码
}
```
- 函数表达式
```javascript
var a = function(){
//写代码
}
```
### 函数的调用
```javascript
function a(){
//写代码
}
//调用函数 一定要有小括号
a()
```
### 函数的参数
- 函数可以声明参数（形参） 使用形参写流程
- 形参默认值是undefined
- 调用的时候，要传入实参
```javascript
// 使用形参，设计代码流程
var a = function(num1,num2){
console.log(num1 + num2)
}
// 传入实参 实参与形参 是按照顺序一对一
a(100,200)
```
#### 练习
- 求1-n之间所有数的和
- 求n-m之间所有数额和
- 圆的面积
- 求2个数中的最大值
- 求3个数中的最大值
### arguments
当函数中使用参数较多时，或者程序需要的参数个数不确定。使用`形参+实参`的方式就很难实现。
函数中有一个关键字`arguments`,用来接收所有的实参。
```javascript
// 设计一个函数用来实现计算任意个数数字的和
function sum(){
//演示arguments的使用
//console.log(arguments)
var total = 0;
for(var i in arguments){
sum += arguments[i]
}
console.log(sum)
}
sum(1,2,3,4,5)
```
- arguments 是已数组的形式，接收所有的实参。循环数组就可以得到每一个实参。
#### 练习
- 使用函数，输出任意个数数字的最大值
- 使用函数，输出任意范围内和7相关的数字
### 函数的返回值
> 函数执行时，除了会把函数中的代码执行一遍，还会得到一个结果。
```javascript
// 定义一个函数
var fun = function(){
var a = 1;
var b = 2;
var c = a +b;
console.log(c)
return "我是返回值"
// 执行函数，将函数的结果赋值给变量
var res = fun()
// 输出函数执行之后的结果
console.log(res)
```
> - 函数执行默认的结果是：undefined
> - 函数中使用 return 关键字设置函数的返回值 这个返回值就是函数执行之后的结果。
> - return 除了可以设置函数返回值，还会结束函数执行，所有return只能放最后。
#### 练习
- 使用函数，获得一个数组中的最大值
### 5.1 彩票中奖
## 函数补充
> 1.了解作用域及作用域链
>
> 2.了解常用的系统函数
>
> 3.了解匿名函数
>
> 4.了解自执行函数
>
### 变量作用域
在JavaScript中，变量的作用域是定义这个变量的区域，变量分为两类：
- 局部变量：在函数中声明的变量，就是局部变量，只能在定义的函数使用。
- 全局变量：没有在函数中定义的变量就是全局变量，全局变量可以在任意位置使用。
> 只有函数可以限定作用域 （ES5）
>
> 变量未声明直接赋值，默认为全局变量
```javascript
var a = "全局变量"
function test(){
var b = "局部变量"
console.log(a) // "全局变量"
console.log(b) // "局部变量"
}
console.log(a) // "全局变量"
console.log(b) // 报错，因为局部变量只能在函数中使用
```
### 作用域链
在嵌套的函数结构中，内层函数在使用变量时，优先使用自己内部的变量，自己没有就会逐层向外查找。
```javascript
// 练习
function f1() {
var num = 123;
function f2() {
console.log( num );
}
f2();
}
var num = 456;
f1();
```
### 常用系统函数
escape() 函数可对字符串进行编码，将字符转换成ASCII码值。
- 字母、数字不会被转码
- `* @ - _ + . / 。`这些符号也不会转码
unescape() 对 escape() 编码的字符串进行解码
```javasc
var str = "*那个叫孙晨的老师很nice"
// 对字符串进行编码
var str1 = escape(str);
// 解码
var str2 = unescape(str1)
console.log(str1) // *%u90A3%u4E2A%u53EB%u5B59%u6668%u7684%u8001%u5E08%u5F88nice
console.log(str2) // *那个叫孙晨的老师很nice
```
eval() 函数可解析字符串，并执行其中的的 JavaScript 代码。
```javascript
// 执行字符串中的代码
eval("console.log(123)")
```
### 匿名函数
- 没有名字的函数，就是匿名函数。我们在使用函数表达式时，使用的就是匿名函数。
```javascript
var a = function(){} // 使用变量的名称作用函数的名称使用
```
- 函数表达式中函数原有的名字会被忽略，只能使用变量作为函数名调用函数。
```javascript
var a = function test(){
console.log(1)
}
// test() //报错
a() //执行
```
### 自执行函数
我们正常使用函数都是先声明，再调用。有时候我们也会用到在声明时直接就调用函数，这时就需要使用自执行函数。
```javascript
// 自执行函数的语法
(function(){
console.log(1)
}())
```
- 自执行函数使用匿名函数
- 自执行函数的名称也会被系统自动忽略
```javascript
(function test(){
console.log(1)
}())
test() //报错
```
## 预解析
> 1.了解js执行时的预解析
JavaScript的代码在正式执行之前，会先进行预解析，按照一定的规则调整代码的顺序。然后再逐行执行代码。
预解析的规则如下：
- 1函数声明整体提升
- 2变量声明提升
- 3.（函数中）将实参赋值给形参
> 练习1
```javascript
var a = 25;
function abc (){
alert(a);
var a = 10;
}
abc();
console.log(a);
function a() {
console.log('aaaaa');
}
var a = 1;
console.log(a);
```
> 练习2
```javascript
var num = 10;
fun();
function fun() {
console.log(num);
var num = 20;
}
```
> 练习3
```javascript
var a = 18;
f1();
function f1() {
var b = 9;
console.log(a);
console.log(b);
var a = '123';
}
```
> 练习4
```javascript
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
var a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}
```
### 5.2 计算器
## BOM-window对象
> 1.了解BOM与window对象
>
> 2.掌握window对象的常用属性
>
> 3.掌握window对象的事件处理
>
> 4.掌握window对象的常用方法
>
> 5.掌握window对象的子对象：document、location、screen、history
### BOM与window对象
在DOM章节，已经给大家讲解过javascript代码可以分为三大组成部分。
BOM（Browser Object Model，浏览器对象模型）是JavaScript向程序员提供的一种操作Web浏览器的手段。
- 页面的打开、刷新、关闭
- 浏览器历史记录操作
- 浏览器地址栏操作
- 割了...
BOM以Window对象为依托，Window对象是一个全局对象、是所有对象的顶级对象，在JavaScript中有着举足轻重的作用。
window对象还是JavaScript的全局对象，因此所有的全局变量和函数都可以看成是Window对象的属性和方法。window调用属性时，window一般省略不写。
同时，Window对象作为对象的一种，也有着自己的方法和属性。
### window对象的常用属性
| **属 性** | **描 述** |
| --------------- | ------------------------------------------------- |
| closed | 返回窗口是否已被关闭 |
| defaultStatus | 设置或返回窗口状态栏中的默认文本 |
| **innerHeight** | 返回窗口的文档显示区的高度 |
| **innerWidth** | 返回窗口的文档显示区的宽度 |
| length | 设置或返回窗口中的框架数量 |
| name | 设置或返回窗口的名称 |
| opener | 返回对创建此窗口的窗口的引用 |
| **outerHeight** | 返回窗口的外部高度 window.innerHeight |
| **outerWidth** | 返回窗口的外部宽度 |
| pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的 X 位置 |
| pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的 Y 位置 |
| parent | 返回父窗口 |
| self | 返回对当前窗口的引用。等价于 Window 属性 |
| status | 设置窗口状态栏的文本 |
```html
```
### window对象的事件处理
window对象作为整个浏览器的最顶层对象，支持页面中的所有事件。
页面的整体事件，如页面加载，页面大小改变，页面滚动条滚动等等这些事件就添加给window。
| onload | 页面文档加载完毕后触发 |
| -------------- | ------------------------------------------------------------ |
| onresize | 对象尺寸发生改变时触发 |
| onscoll | 对象滚动条被卷动时触发 |
| onerror | 窗口中的脚本发生错误时被激发 |
| onunload | web页面被卸载时触发（窗口关闭或转到其他页面）只有高版本IE |
| onbeforeunload | web页面被卸载前出发（窗口关闭或转到其他页面） 大部分浏览器能用 |
```javascript
// window支持所有的标签事件
window.onclick = function(){
console.log("鼠标点击")
}
// 整个页面的事件 使用window处理
// onload 页面加载之后
window.onload = function(){
console.log("页面打开之后，就会触发onload事件。")
}
// 页面大小改变
window.onresize = function(){
alert("页面大小改变，触发onresize事件")
}
// 页面关闭事件：关闭页面、刷新页面、跳转新页面 （理想很丰满，现实很骨感===这个事件几乎不管用）
window.onunload = function(){
alert("还有大奖没领，确定要退出吗")
return false;
}
// 页面被关闭前触发：关闭页面、刷新页面、跳转新页面
window.onbeforeunload = function(){
alert("确定要退出吗")
return "确定要退出吗";
}
```
### window对象的常用方法
window对象中有一系列的方法用来控制窗口的行为：
| 方法 | 作用 |
| ---------------- | ------------------------------------------------------------ |
| alert( ) | 显示带有一段消息和一个确认按钮的警告框 |
| prompt( ) | 显示可提示用户输入的对话框 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框 |
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口 |
| close() | 关闭浏览器窗口 |
| moveBy() | 可相对窗口的当前坐标把它移动指定的像素 |
| moveTo() | 把窗口的左上角移动到一个指定的坐标 |
| resizeBy( ) | 以窗口的原始大小为基准，横向扩大或缩小指定像素，纵向扩大或缩小指定像素 |
| resizeTo( ) | 把窗口的大小调整到指定的宽度和高度 |
| scrollBy( ) | 按照指定的像素值来滚动内容 |
| scrollTo( ) | 把内容滚动到指定的坐标 |
| clearInterval( ) | 取消由 setInterval( )方法设置的timeout |
| clearTimeout() | 取消由 setTimeout() 方法设置的timeout |
| setInterval( ) | 按照指定的周期（以毫秒计）来调用函数或计算表达式 |
| setTimeout( ) | 在指定的毫秒数后调用函数或计算表达式 |
- 三个弹框的使用
```javascript
```
- 页面的打开、关闭、大小设置、位置设置
```html
```
**打开新页面时，可以设置的特征有：**
| 属性 | 作用 |
| ------------------------- | ------------------------------------------------------------ |
| channelmode=yes\|no\|1\|0 | 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器 |
| directories=yes\|no\|1\|0 | 是否添加目录按钮。默认是肯定的。仅限IE浏览器 |
| fullscreen=yes\|no\|1\|0 | 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器 |
| height=pixels | 窗口的高度。最小.值为100 |
| left=pixels | 该窗口的左侧位置 |
| location=yes\|no\|1\|0 | 是否显示地址字段.默认值是yes |
| menubar=yes\|no\|1\|0 | 是否显示菜单栏.默认值是yes |
| resizable=yes\|no\|1\|0 | 是否可调整窗口大小.默认值是yes |
| scrollbars=yes\|no\|1\|0 | 是否显示滚动条.默认值是yes |
| status=yes\|no\|1\|0 | 是否要添加一个状态栏.默认值是yes |
| titlebar=yes\|no\|1\|0 | 是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes |
| toolbar=yes\|no\|1\|0 | 是否显示浏览器工具栏.默认值是yes |
| top=pixels | 窗口顶部的位置.仅限IE浏览器 |
| width=pixels | 窗口的宽度.最小.值为100 |
- 定时器的使用:延时定时器
```javascript
```
- 定时器的使用：循环定时器
```javascript
```
## window对象的子对象
> 1. 掌握document对象的部分属性及方法
> 2. 掌握screen对象的部分属性及方法
> 3. 掌握history对象的部分属性及方法
> 4. 掌握location对象的部分属性及方法
window对象时JavaScript的全局对象，也是浏览器中所有对象的顶层对象。
### document对象
document是window的直接子对象，document中的属性和方法是用来直接操作页面的，也就是我们所说的DOM操作
除了之前讲过的DOM操作，document还有一些其他属性。
```javascript
1
```
### screen对象
screen对象用来描述显示器信息，宽高、分辨率。这个都是只读的，只能获取不能设置
```javascript
```
### history对象
history对象也称为历史记录对象，用来操作浏览器的历史记录。
```javascript
```
### location对象
- location对象，用来获取和修改页面的url。修改url，会是页面跳转或者是发送请求到服务器。
```javascript
```
- location的常用方式，修改url跳转页面
```javascript
//常用方式：使用location对象 更改url，发送心得请求
location.href = "https://www.baidu.com";//跳转到新地址
location.assign("https://www.baidu.com");//跳转到新地址
location.replace("https://www.baidu.com");//跳转到新地址,不会产生新的历史记录
location.reload();//刷新当前页面
```
## AJAX
> 1.了解ajax的作用及特点
>
> 2.了解ajax请求对象
>
> 3.掌握基本的ajax的程序
>
> 4.掌握get请求方式的使用
>
> 5.掌握post请求方式的使用
>
> 6.掌握ajax中处理json数据
### 请求概述
web的设计目的，就是将文件（数据）放在公共的服务器中，让所有网络中的用户，可以通过浏览器访问这些资源。
没有ajax之前，浏览器向服务器发起请求的方式有：
- 在url地址栏输入 地址，回车，刷新
- 页面中具有`src`或`href`的标签。a、img、link、script...
- 表单提交
### ajax的作用及特点
> AJAX(Asynchronous JavaScript and XML),异步的JavaScript和XML。是一种用于创建快速动态网页 的技术。通过服务器进行数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载 整个网页页面。
>
> 简单来说，ajax是一种实现前后端数据交互的方式，请求是异步的方式，并且可以在不刷新整个页面的情况下更新页面内容。
>
> 使用ajax实现页面的更新一般需要同时使用JavaScript、css、DOM与XMLHttpRequest。
### js中的异步与同步
js中的代码执行分为同步代码与异步代码，正常情况下js都是以同步方式执行。
- 同步：上一行代码执行完毕，才能读取并执行下一行代码。
- 异步：读完代码后，不用等到执行，就可以接着读取下一行代码。
- 定时器、ajax
```javascript
console.log(1)
console.log(2)
console.log(3)
//1 2 3
```
```javascript
console.log(1)
setTimeout(function(){
console.log(2)
},2000)
console.log(3)
//1 3 2
```
### ajax请求对象
使用ajax发送请求的关键是使用内置的请求对象。
```javascript
//使用内置的构造函数，创建请求对象
var xhr = new XMLHttpRequest()
```
如何开发时需要考虑IE5、IE76，在创建请求对象时，需要设计兼容代码。
```javascript
var xhr;
//如果window.ActiveXObject 存在 运行环境就是低版本的IE浏览器
if(window.ActiveXObject)
{
//使用内置构造函数 创建请求对象
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
// 不存在 运行环境就不是低版本的IE浏览器
//使用内置构造函数 创建请求对象
xhr=new XMLHttpRequest();
}
```
- 请求对象的属性和方法
| **属性**/**方法** | **说** **明** |
| ----------------------- | ------------------------------------------------------------ |
| about() | 取消请求 |
| getAllResponseHeaders() | 获取响应的所有http头 |
| getResponseHeader() | 获取指定http头 |
| open(method,url) | 创建请求，method请求类型，(GET,POST) |
| send() | 发送请求 |
| setRequestHeader() | 指定请求的Http头 |
| readyState属性 | 0：未初始化。未调用 open() 方法1：启动。已经调用 open() 方法，未调用 send() 方法2：发送。已经调用 send() 方法，未接收到响应3：接收。已经接收到部分数据4：完成。已经接收到全部数据，可以在客户端使用 |
| status | 服务器返回的 HTTP 请求响应值：
200 表示请求成功
202 表示请求被接收但未处理完成
400 表示错误的请求
404 表示资源未找到
500 表示内部服务器错误 |
| responseText | 服务器返回文本 |
| responseXML | 服务器返回XML,可以当作DOM处理 |
### ajax基本使用
使用ajax发送一个请求：点击p标签发送请求，并将服务器发回的响应数据显示在p标签中。
```html
点击发送请求
``` ### get请求 > 我们在前边的演示代码中，设置请求类型时写的是“GET”。 > > 浏览器向服务器发送请求的使用的是`http协议`,http协议中规定的请求类型有9种，最常用的方式为"GET"与"POST"。 > > 在未指明请求类型时，页面中的请求使用的都是"GET"类型。 - GET请求的特点 - 请求的数据会被自动缓存 - 请求的记录会在历史记录中 - 请求可被设置为书签 - 一般不用来处理敏感数据 - 请求是有长度限制 - 一般用来获取数据 - ajax使用get发送请求 ```html点击发送请求
``` ### post请求 - post请求的特点 - 请求的数据不会缓存 - 请求的记录不会在历史记录中 - 请求可被设置为书签 - 请求是有长度限制 - ajax使用post发送请求 ```html点击发送请求
``` ### 8.1 用户注册 ## AJAX处理响应数据 使用ajax与服务器进行数据交互时，服务器返回的数据类型一般是XML或者是JSON。 - XML数据处理：`这是一种古老的数据交互方式，现在几乎已经绝迹` - JSON数据处理：正在使用的前后段数据交互方式 > 我们在使用hbuilder打开网页时，就是通过hbuilder内置的服务器打开的页面。所以接下来的案例，我们直接使用hbuilder内置的服务器进行演示。 ### 8.2热映电影列表 # jQuery ## DOM复习 点击显示div并设置内容 JavaScript的原生DOM操作包含了`标签获取`、`操作标签内容`、`操作标签属性`、`操作标签事件`、`操作标签样式`。 使用以下代码完成： - 点击显示按钮1显示所有div - 点击按钮2给所有div添加内容，多次点击可以连续添加 - 点击div弹出，将div的内容设置为标签提示信息（title） ```html元素的