>### A.今天学什么？
#### 1.javascript了解
- ##### 1.1javascript输出方式
- console.log(); --- console控制台输出
- alert(); --- alert弹窗输出
```
// script
// 1.输出方式
// console 输出
// console.log("hello world");
// 弹窗输出
alert("hello world");
```
- ##### 1.2变量的声明
- javascript是弱类型语言，声明变量时，不需要声明它的类型
- 1.2.1先声明再赋值
- 1.2.2声明的同时赋值
```
// script
// 2.变量的声明
// javascript是弱类型语言，声明变量时，不需要声明它的类型
var a = 10;
// 2.1先声明再赋值
var b;
b = 10;
// 2.2声明的同时赋值
var c = 10;
```
- ##### 1.3JavaScript的声明提前
- js在运行的时候将所有声明的变量，集中到作用域的顶部创建，赋值留在原地;ES6不支持声明提前
```
// script
// 3.声明提前
// js在运行的时候将所有声明的变量，集中到作用域的顶部创建，赋值留在原地
// ES6不支持声明提前
console.log(d);
var d = 10;
/*console.log(d1); ES6 会报错
let d1 = 10;*/
// 3.1js中如果一个变量只声明没有赋值，那么输出undefined
var e;
console.log(e);
```
- ##### 1.4基本类型
- number
- String
- boolean
- undefined
- 等等
- 如何判断变量的类型 -- typeof
```
// script
// 4.基本类型
// 4.1number
var num = 10;
var num2 = 10.2;
// 4.2如何判断一个变量的类型 typeof
console.log(typeof num);
// 4.3 String
var str = "hello world";
console.log(typeof str);
// 4.4 boolean
var boolean = true;
console.log(typeof boolean);
// 4.5 undefined
var un;
console.log(typeof un);
```
- ##### 1.5数组
- 数组的声明 -- var list = [1,2,3];
- 读取数组的值 -- 通过下标，从0开始
- 获取数组长度 length
- 像数组尾部添加一个值 list[list.length] = xx;
```
// script
// 5.数组
// 5.1声明一个数组
var list = [1,2,3];
// 5.2读取数组的值--通过下标，从0开始和java一样
console.log(list[1]);
// 5.3获取数组长度 -- length
console.log(list.length);
// 5.4向数组的尾部添加一个值
list[list.length] = 4;
console.log(list);
console.log(list.length);
```
- ##### 1.6对象
- 创建对象 var obj = { 属性:属性值 }
- 获取对象属性 obj.属性名
- 给对象添加属性 obj.新属性名 = 属性值
```
// script
// 6.对象
// 6.1创建对象
var obj = {
name:"依然",
age:21
};
// 6.2读取对象属性，语法：obj.属性名
console.log(obj.name);
// 6.3给对象添加属性
obj.sex = "男";
console.log(obj.sex);
```
- ##### 1.7函数
- 创建函数 function 函数名(参数){函数体}
- 调用函数 函数名()
- 有返回值的函数 直接在函数体中return
```
// script
// 7.函数
// function 函数名(){}
// 7.1没有返回值的函数
function funcName1() {
console.log("没有返回值的函数")
}
// 7.2调用函数
funcName1();
// 7.2有返回值的函数
function funcName2() {
return 10000;
}
var salary = funcName2();
console.log(salary);
```
- ##### 1.8全局变量和局部变量
- 全局变量--在函数外声明的变量
- 局部变量--在函数内声明的变量
- 函数外无法访问到函数内声明的变量
```
// script
// 8.全局变量和局部变量
// 全局变量-在函数外声明的变量
var var1 = 10;
function fn() {
// 局部变量-在函数内声明的变量
var var2 = 20;
}
// console.log(var2); 报错
```
- ##### 1.9数据类型的转换
- 1.9.1number的强制转换
- String boolean --> 数字：Number()
- true-->1，false-->0
- NaN不是一个数字
- Number()这个方法只能识别纯数字的字符串
- 1.9.2自动转换
- 算术计算中的自动转换，+ - * / %等
- 在算数计算中，js会将参与计算的值先转换为number再进行计算
- 底层：var jc = Number(ja) - Number(jb);
- 特殊情况：在 + 运算中，倘若有一边为字符串，则结果为字符串拼接
```
// script
// 9.数据类型的转换
// 9.1 number的强制转换
// String boolean --> 数字：Number()
// true-->1，false-->0
// NaN不是一个数字
// Number()这个方法只能识别纯数字的字符串
var str1 = "10";
var boolean1 = true;
console.log(typeof Number(str1));
console.log(Number(boolean1));
console.log(Number(false));
console.log(Number("a")); // NaN
// 9.2自动转换
// 算术计算中的自动转换，+ - * / %等
// 在算数计算中，js会将参与计算的值先转换为number再进行计算
var ja = "10";
var jb = true;
var jc= ja-jb; // ja被自动转换为10 true被自动转换为1
// 底层 var jc = Number(ja) - Number(jb);
console.log(jc);
// 特殊：在 + 运算中，倘若有一边为字符串，则结果为字符串拼接
console.log(ja+jb); // "10true"
```
- ##### 1.10比较运算的自动转换
- 默认先将所有的类型转为数字类型，再进行比较
- 比较运算的结果返回boolean
```
// script
// 10.比较运算的自动转换
// 默认先将所有的类型转为数字类型，再进行比较
// 比较运算的结果返回boolean
console.log("10">true); // true
// 底层 Number("10") > Number(true)
```
- ##### 1.11字符串转number型-parseInt、parsFloat
- 只能转数字开头的字符串
- parseInt -- 将字符串转为整数，小数点后省略，而不会约等
- parseFloat -- 将字符串转为浮点型
```
// script
// 11.字符串转number型-parseInt、parsFloat
// 只能转数字开头的字符串
// parseInt -- 将字符串转为整数，小数点后省略，而不会约等
console.log(parseInt("12px")); // 12
console.log(parseInt("12.53px")); // 12
console.log(parseInt("p33")); // NaN
// parseFloat -- 将字符串转为浮点型
console.log(parseFloat("12px")); // 12
console.log(parseFloat("12.53px")); // 12.53
console.log(parseFloat("p33")); // NaN
```
- ##### 1.12将任意类型转为字符串类型
- 方法一：.toString()
- 方法二：String()
```
// script
// 12.将任意类型转为字符串类型
// 方法一：.toString()
var toStr = 10;
console.log(toStr.toString());
console.log(typeof toStr.toString());
// 方法二：String()
console.log(typeof String(toStr));
```
- ##### 1.13将任意类型转为boolean型
- 语法：Boolean()
- 在js中只有五种值为false，其他都为true
- "",NaN,0,undefined,null
```
// script
// 13.将任意类型转为boolean型
// 语法：Boolean()
// 在js中只有五种值为false，其他都为true： "",NaN,0,undefined,null
var toBlist = [1,2,3];
var toBobj = {name:"依然"};
console.log(Boolean(toBlist)); // true
console.log(Boolean(toBobj)); // true
console.log(Boolean("")); // false
console.log(Boolean(NaN)); // false
```
- ##### 1.14NaN不等于 不大于 不小于任何值，包括自己
- isNaN()，判断一个变量是否为NaN
- ##### 1.15++ --
- ++在后，先运算，后自增
- ++在前，先自增，后运算
```
// script
// 15.++ --
// ++在后，先运算，后自增
// ++在前，先自增，后运算
var a15 = 10;
var b15 = a15++ +1;
console.log(a15); // 11
console.log(b15); // 11
```
- ##### 1.16 if判断
- 还有switch等，和java一样
```
// script
// 16.if判断
// 还有switch等，和java一样
var a16 = 16;
if (a16>=18){
alert("可以去网吧了");
}
else if(a16>=16){
alert("在香港可以去网吧");
}
else{
alert("去哪都上不了网吧");
}
```
- ##### 1.17for循环
- 还有while循环等，和java大致相同，区别在于ES6之前，在for(){}，内部定义的变量，在外部也可以访问，并不算局部变量。
- for循环的另一种遍历方式for(var i in list){}，这里和python的for循环遍历有些相似，但是遍历出的 i 并不是list中的值，而是这些值的索引。
```
// script
// 17.for循环
// 还有while循环等
var arr17 = [1,2,3,4];
// 第一种遍历方式
for (var i=0;i<arr17.length;i++){
console.log(arr17[i]);
}
// 第二种遍历方式，这里的key并不是数组中的值，而是它们的下标，比较奇怪
/*for(var key in arr17){
console.log(arr17[key]);
}*/
// 遍历对象
// 这里遍历出的key为属性名
var obj17 = {name:"依然",age:21};
for (var key in obj17){
console.log(key);
console.log(obj17[key]);
}
```
- ##### 1.18块级作用域
- ES6之前没有块级作用域的概念，在内部定义变量，在外面一样可以访问
- 使用 let x = xx; 定义变量，这为ES6的定义方法，支持块作用域
```
// 18.块级作用域-- ES6之前没有块级作用域的概念，只要不在内部定义变量，在外面都可以访问
// ES5
for (var i18=0;i18<10;i18++){
console.log("hello");
var i188 = 100;
}
console.log(i18); // 18
console.log(i188); // 100 这是能访问的
// ES6
/*for (let let18=0;let18<10;let18++){
console.log("hello");
}
console.log(let18); // 报错*/
/*{ let name18="依然"; }
console.log(name18); 报错，name18未定义 */
```
#### 2.DOM-文档对象模型
- ##### 2.1初步了解DOM
- 获得p标签，document.getElementById("idName");
- script不可以写在标签前，因为js默认顺序加载。否则会无效
```
// html+script
<body>
<p id="text" class="p-text">hello world</p>
<script>
// 如果不使用
// 1.如何获取一个节点 - id获取
var text = document.getElementById("text");
// 2.修改元素的内容 obj.innerHTML
text.innerHTML = "改变了";
</script>
</body>
```
- ##### 2.2如何将script放在body之前，能够获取到标签
- window.onload = function(){js语句}
- 将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。
```
// html文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dom示例2</title>
<script type="text/javascript">
// 将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。
window.onload = function () {
var p = document.getElementById("p");
var btn = document.getElementById("btn");
btn.onclick = function () {
p.innerHTML = "改变了";
}
};
</script>
</head>
<body>
<p id="p" class="">hello world</p>
<button id="btn">change</button>
</body>
</html>
```
- ##### 2.3通过标签名获得标签对象
- document.getElementsByTagName("标签名");
- 通过标签名获取会得到一个集合，假数组，不用深究
```
// body
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<button id="btn">btn</button>
<script>
// 通过标签名获取会得到一个集合，假数组，不用深究
// 不常用
var ps = document.getElementsByTagName("p");
console.log(ps);
// ps[1].innerHTML = "change";
var btn = document.getElementById("btn");
btn.onclick = function () {
for (var i=0;i<ps.length;i++){
ps[i].innerHTML = "change"+i;
}
}
</script>
</body>
```
- ##### 2.4通过class样式名获取标签对象
- document.getElementsByClassName("样式名");
- 得到的结果也是一个集合。可以看到方法中getElements，s就代表了复数形式。
```
// body
<body>
<!-- p.one{hello world}*4 -->
<p class="one">hello world</p>
<p class="one">hello world</p>
<p class="one">hello world</p>
<p class="one">hello world</p>
<script>
// 利用class名获取，也是一个集合
var ps = document.getElementsByClassName("one");
console.log(ps);
</script>
</body>
```
- ##### 2.4通过选择器获取标签对象
- document.querySelectorAll("选择器"); 获得的结果不论有几个都是一个集合
- querySelectorAll可以获取多个对象，如果使用id选择器，虽然只有一个对象，但是也是一个集合
- document.querySelector("选择器"); 获得的结果不管能匹配多少个都只得到一个。
- 例如，使用.className选择器获取时，有多个结果匹配，但是只会获得第一个匹配的标签对象
```
// body
<body>
<div class="one">hello world</div>
<div class="one" id="two"></div>
<script>
// 通过选择器获取
// querySelector只能获得一个对象
var div = document.querySelector("#two");
console.log(div); // 只有1个，其中有id为two的标签
var div1 = document.querySelector(".one");
console.log(div1); // 只有一个，是第一个class为one的标签，第二个不会被获取
// querySelectorAll可以获取多个对象，如果使用id选择器，虽然只有一个对象，但是也是一个集合
var divs = document.querySelectorAll("#two");
console.log(divs); // 集合，其中有一个标签对象，该标签对象的id为two
var divs1 = document.querySelectorAll(".one");
console.log(divs1); // 集合，其中有2个标签对象，它们的class中都含有one
</script>
</body>
```
