4.3.1 变量声明

JavaScript在声明变量时统一使用无类型（untyped）的"var"关键字

举例：var pi=3.14var来声明一个变量，这是一个固定的写法，是js的语法JavaScript并没有避开数据类型，它的数据类型是根据所赋值的类型来确定的JavaScript 对大小写敏感

命名规范：

只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字

与Java类似，直接写Java中的变量名即可。按照Java的规范来。

4.3.2 变量类型

StringNumberBoolean数组

var cars=["Audi","BMW","Volvo"]; 对象

var person={firstname:"Bill", lastname:"Gates", id:5566};

4.4 js中的方法

js方法的定义: function 方法名(){// 方法体}

示例：

// 无参的方法

function f(){ -- -->

console.log(123)

}

// 有参的方法

function f1(para1){

console.log(para1);

}

// 如果只定义方法，不调用，方法不会被执行。

f()// 调用上述方法

4.5 运算符

4.5.1 算术运算符

+,-,*,/,%,++,--

=, +=, -=, *=, /=, %=

与Java差异点：

对待减法，如果是字符串-数字，会返回NaN。但是如果字符串是 123这类的数字。可以正常的运行

var str = "str"

var num = 10;

console.log(str + num)

console.log(str - num) //NaN: not a number

// 如果是字符串-数字。 会尝试将字符串转为数字，然后再减。 "123"-->123 "Str"--> NaN

var num1 = "10"

var num2 = 5

console.log(num1 - num2) // 5

console.log(num1 * num2) // 50

console.log(num1 / num2) // 2

4.5.2 逻辑运算符

> , <, >=, <=, ? : 三元

&& , ||, !

==, ===, !=, !==

var a = "10"

var b = 10

a == b --> true

a === b --> false

== : 只判断值是否相等

=== : 不仅仅判断值, 还要判断类型

!= : 只判断值是否不相等

!== : 不仅仅判断值, 还要判断类型

4.6 逻辑分支语句

if

在js中很多东西都可以充当if-else的条件但是有些东西默认表现为假: 0, 空字符串, null, NaN, false, undefined

switch

while

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

for

一般我们使用普通的fori循环用来遍历数组, 一般我们使用foreach循环遍历对象

var obj = { name: "", age: 18, address: "hubei"};

for (var objKey in obj) {

console.log(objKey + "---" + obj[objKey]);

}

var array = [1, 2, "hello", "java", true];

for (let i = 0; i < array.length; i++) {

console.log(array[i])

}

4.7 核心对象/类型

4.7.1 Number

toString() 以字符串返回数值

toFixed() 返回字符串值，它包含了指定位数小数的数字(四舍五入)

toPrecision() 返回字符串值，它包含了指定长度的数字

parseInt() 允许空格。只返回首个数字

“1000” 返回的是1000“100str” 返回的是100“str1000” 返回的是NaN" 100str" 返回的是100

// toString() 以字符串返回数值

var ii = 123

console.log(typeof ii)

console.log(typeof ii.toString())

// toFixed() 返回字符串值，它包含了指定位数小数的数字(四舍五入)：

var x = 9.6544;

x.toFixed(2); // 返回 9.65

// toPrecision() 返回字符串值，它包含了指定长度的数字(四舍五入)：

var x = 9.656;

x.toPrecision(); // 返回 9.656

x.toPrecision(2); // 返回 9.7

// parseInt() 允许空格。只返回首个数字：

parseInt("10"); // 返回 10

parseFloat() 允许空格。只返回首个数字：

parseFloat("10.33"); // 返回 10.33

4.7.2 String

length 属性返回字符串的长度

indexOf() 返回字符串中指定文本首次出现的索引（位置）

不存在返回-1

// 头一个China返回的下标

str.indexOf("China");

// 从28开始，找往后的China的下标

str.indexOf("China", 28);

slice() 提取字符串的某个部分并在新字符串中返回被提取的部分

split() 将字符串转换为数组

// length 属性返回字符串的长度

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

var sln = txt.length;

indexOf()方法返回字符串中指定文本首次出现的索引（位置）：

var str = "The full name of China is the People's Republic of China.";

var pos = str.indexOf("China");

var pos = str.indexOf("China", 28);

indexOf() 不存在返回 -1。

slice() 提取字符串的某个部分,并以新字符串中返回被提取的部分。

var str = "Apple, Banana, Mango";

var res = str.slice(7,13);//裁剪字符串中位置 7 到位置 13 的片段。包左不包右

split() 将字符串转换为数组

var txt = "a,b,c,d,e"; // 字符串

txt.split(","); // 用逗号分隔

txt.split(" "); // 用空格分隔

txt.split("|"); // 用竖线分隔

如果分隔符是 ""，被返回的数组将是间隔单个字符的数组：

4.7.3 Array

toString() 返回数组转换的数组值（逗号分隔）的字符串。pop() 方法从数组中删除最后一个元素,返回删除的元素push() 方法（在数组结尾处）向数组添加一个新的元素,返回数组长度splice()

删除指定位置开始的指定个元素。fruits.splice(2, 2);方法可用于向数组添加新项, 返回([])。fruits.splice(2, 0, "Lemon", "Kiwi"); sort() 方法以字母顺序对数组进行排序,返回值和原数组是经过排序的数组reverse() 方法反转数组中的元素。返回值和原数组都变为经过反转数组

// toString() 返回数组转换的数组值（逗号分隔）的字符串。

var fruits = ["Banana", "Orange", "Apple", "Mango"];

console.log(fruits.toString()); //Banana,Orange,Apple,Mango

// pop() 方法从数组中删除最后一个元素,返回删除的元素

fruits.pop(); // 从 fruits 删除最后一个元素（"Mango"）

var x = fruits.pop(); // x 的值是 "Mango"

// push() 方法（在数组结尾处）向数组添加一个新的元素,返回数组长度

fruits.push("Kiwi"); // 向 fruits 添加一个新元素

// splice() 方法可用于向数组添加新项, 返回([])

fruits.splice(2, 0, "Lemon", "Kiwi");

// 第一个参数:添加新元素的起始位置。第二个参数:定义应删除多少元素。

// 其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

// sort() 方法以字母顺序对数组进行排序,返回值和原数组是经过排序的数组

fruits.sort(); // 对 fruits 中的元素进行排序

// reverse() 方法反转数组中的元素。返回值和原数组都变为经过反转数组

fruits. reverse(); // 对 fruits 中的元素进行排序

4.7.4 Math

Math.ceil(x)返回大于等于x的最小整数

Math.floor(x)返回小于等于x的最大整数

Math.random() 返回 0 ~ 1 之间的随机数

Math.round(x) 把一个数四舍五入为最接近的整数

Math.max(x,y,z,...,n)返回最高值

Math.min(x,y,z,...,n)返回最低值

5 DOM

5.1 DOM的加载顺序

DOM:文档对象模型（Document Object Model，简称DOM）

DOM的加载顺序: 指的就是浏览器获得了一份html代码之后, 从获得代码到显示的过程

解析HTML结构(从上向下的过程)， 一边解析, 一边构建dom树结点/节点加载外部脚本和样式表文件，异步加载外部的css和js文件解析并执行脚本代码构造HTML DOM模型完成。 DOM构建完毕 --> 立即显示页面加载图片等外部文件页面加载完毕

浏览器，解析完网页之后，在内存上生成了一棵树（DOM）对今后修改网页有什么好处？

就是浏览器会生成一份内存上的映射，一份HTML代码，最终在chrome上的内存映射。 是一个树状结构的。我们今后需要修改HTML页面，就只用操作这个内存映射就可以了。

5.2 在DOM树中获取结点

getElementById(): 根据id获取一个结点getElementsByName(): 根据name属性, 获取所有对应name结点的集合getElementsByTagName(): 根据标签名, 获取所有对应标签结点的集合

注意：

getElementById() 返回的是一个节点。getElementsByName(),getElementsByTagName() 返回的是一个集合

5.3 添加结点

appendChild: 给某个结点添加一个孩子(孩子也应该是一个结点。注意类型 )比如要添加一个li类型的节点，需要使用以下方式: document.createElement("li")要添加文本类型的节点： document.createTextNode("zs")

<ul id="ul1">code>

<li>zs</li>

<li>ls</li>

<li>wu</li>

<li>zl</li>

</ul>

<input id="inputstr">code>

<button onclick="addli()">添加</button>code>

<script>

function addli(){ -- -->

var inputNode = document.getElementById("inputstr")

var inputStr = inputNode.value

var ulNode = document.getElementById("ul1")

// 创建一个文本结点

var textNode = document.createTextNode(inputStr)

// 创建一个li类型的结点对象

// document.createElement创建一个指定类型的结点

var liNode = document.createElement("li")

liNode.appendChild(textNode)

// appendChild 给某个结点添加孩子

// 参数是一个孩子'结点'

ulNode.appendChild(liNode)

inputNode.value = ""

}

</script>

5.4 删除结点