JavaScript 1
这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天 JavaScript 是 web 开发者必学的三种语言之一：
- HTML 定义网页的内容
- CSS 规定网页的布局
- JavaScript 对网页行为进行编程
改变html内容
“查找” id="demo" 的 HTML 元素，并把元素内容（innerHTML）更改为 "Hello JavaScript"：
document.getElementById("demo").innerHTML = "Hello JavaScript";
改变html属性
< button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯< /button>
每一个元素都有一个id，比如
<img id="xx">
getelementbyid（'xx'）.src就可以改变图片
当然也可以.style 来去对某个id的元素改变属性
隐藏HTML元素
可通过改变display样式来隐藏html元素
document.getElementById("demo").style.display="none";
再来显示：
document.getElementById("demo").style.display="block";
script标签
在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。
JavaScript函数可以被放置在页面的head部分，点击按钮时调用这个函数
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
<button type="button" onclick="myFunction()">试一试</button>
当然也可以放在body部分
提示： 把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。
外部脚本
<script src="myScript.js"></script>
可以在head或body中放置外部脚本引用
该脚本的表现与它被置于 <script> 标签中是一样的。
注释： 外部脚本不能包含 <script> 标签。
在外部文件中放置脚本有如下优势：
- 分离了 HTML 和代码
- 使 HTML 和 JavaScript 更易于阅读和维护
- 已缓存的 JavaScript 文件可加速页面加载
使用方法
显示方案
- 使用
window.alert()写入警告框 - 使用
document.write()写入 HTML 输出 - 使用
innerHTML写入 HTML 元素 - 使用
console.log()写入浏览器控制台
如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。
id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：
- 使用innerHTML
- 使用document.write（） 括号里面直接写内容即可
- window.alert() 使用警告框来显示数据
- 使用 console.log（）方法显示数据 就是按了F12后会在控制台输出
提示： document.write() 方法仅用于测试。
JavaScript语法
关键词 var关键词告知浏览器创建新的变量
对大小写敏感
JavaScript中不能使用连字符，它是为减法预留的
可以使用下划线和驼峰式大小写
提示： 在脚本的开头声明所有变量是个好习惯！
作用域
通过 var 关键词声明的变量没有块作用域。
在块 {} 内声明的变量可以从块之外进行访问。
可以使用 let 关键词声明拥有块作用域的变量。
在块 {} 内声明的变量无法从块外访问：
{
let x = 10;
}
// 此处不可以使用 x
使用 let 关键字重新声明变量可以解决这个问题。
在块中重新声明变量不会重新声明块外的变量：
新关键词
let和const
通过const定义的变量与let变量类似，但不能重新赋值
const PI = 3.141592653589793;
const必须在声明时赋值
常量不可以改，但是可以改变常量对象
const car = { .... ... ... }
... = ......
也可以添加属性
// 您可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};
// 您可以更改属性：
car.color = "White";
// 您可以添加属性：
car.owner = "Bill";
但是您无法重新为常量对象赋值：
- 实例
const car = {type:"porsche", model:"911", color:"Black"};
car = {type:"Volvo", model:"XC60", color:"White"}; // ERROR
const cars = ["Audi", "BMW", "porsche"];
// 您可以更改元素：
cars[0] = "Honda";
// 您可以添加元素：
cars.push("Volvo");
但是您无法重新为常量数组赋值：
- 实例
const cars = ["Audi", "BMW", "porsche"];
cars = ["Honda", "Toyota", "Volvo"]; // ERROR
JavaScript运算符
JavaScript数据类型
当数值和字符串相加时，JavaScript将把数值视作字符串
动态类型
JavaScript拥有动态类型，相同变量可用作不同类型
var x; // 现在 x 是 undefined
var x = 7; // 现在 x 是数值
var x = "Bill"; // 现在 x 是字符串值
- JavaScript只有一种数值类型，用不用小数点都可以
- 超大或超小的数值可以用科学计数法来写
- JavaScript布尔值：True 和 false
JavaScript对象
用花括号写
对象属性时 name：value对。由逗号分隔
typeof 运算符
使用 typeof来确定JavaScript变量类型
typeof 运算符对数组返回 "object"，因为在 JavaScript 中数组属于对象。
在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined。
空值与 undefined 不是一回事。
空的字符串变量既有值也有类型。
对象的属性与方法
对象的方法：
在这个对象的声明里面，一个属性的值就是一个方法的返回值
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
两种方式访问属性：
person.lastName;
person["lastName"];
如果通过关键词 "new" 来声明 JavaScript 变量，则该变量会被创建为对象：
var x = new String(); // 把 x 声明为 String 对象
var y = new Number(); // 把 y 声明为 Number 对象
var z = new Boolean(); // 把 z 声明为 Boolean 对象
请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。
JavaScript事件
HTML 事件可以是浏览器或用户做的某些事情。
下面是 HTML 事件的一些例子：
- HTML 网页完成加载
- HTML 输入字段被修改
- HTML 按钮被点击
JavaScript可以向HTML元素添加事件处理程序。
使用单引号：
<element event='一些 JavaScript'>
使用双引号：
<element event="一些 JavaScript">
常见的html事件：
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素已被改变 |
| onclick | 用户点击了 HTML 元素 |
| onmouseover | 用户把鼠标移动到 HTML 元素上 |
| onmouseout | 用户把鼠标移开 HTML 元素 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已经完成页面加载 |
JavaScript 能够做什么？
事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作：
- 每当页面加载时应该做的事情
- 当页面被关闭时应该做的事情
- 当用户点击按钮时应该被执行的动作
- 当用户输入数据时应该被验证的内容
- 等等
让 JavaScript 处理事件的不同方法有很多：
- HTML 事件属性可执行 JavaScript 代码
- HTML 事件属性能够调用 JavaScript 函数
- 您能够向 HTML 元素分配自己的事件处理函数
- 您能够阻止事件被发送或被处理
- 等等
JavaScript字符串
字符串长度 length
var x ="123asdf";
var sln = x.length;
- 使用转义字符
| 代码 | 结果 | 描述 |
|---|---|---|
| ' | ' | 单引号 |
| " | " | 双引号 |
| \ | \ | 反斜杠 |
indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：
如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
- 第二个参数为检索起始位置
var pos = str.indexOf("China", 18);
lastIndexOf() 方法向后进行检索（从尾到头），这意味着：假如第二个参数是 50，则从位置 50 开始检索，直到字符串的起点。
search() 方法搜索特定值的字符串，并返回匹配的位置：
search() 方法返回字符串中指定文本第一次出现的位置
两种方法，indexOf() 与 search()，是相等的。
这两种方法是不相等的。区别在于：
- search() 方法无法设置第二个开始位置参数。
- indexOf() 方法无法设置更强大的搜索值（正则表达式）。
正则表达式！！！！
提取部分字符串
有三种提取部分字符串的方法：
- slice(start, end)
- substring(start, end)
- substr(start, length)
slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。
substring() 类似于 slice()。
不同之处在于 substring() 无法接受负的索引。
substr() 类似于 slice()。
不同之处在于第二个参数规定被提取部分的长度。
替换字符串内容
replace() 方法用另一个值替换在字符串中指定的值：
str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3School");
replace() 方法不会改变调用它的字符串。它返回的是新字符串。
默认地，replace() 只替换首个匹配：
默认地，replace() 对大小写敏感。因此不对匹配 MICROSOFT：
如需执行大小写不敏感的替换，请使用正则表达式 /i（大小写不敏感）：
如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）：
转化大小写
通过 toUpperCase() 把字符串转换为大写：
var text1 = "Hello World!"; // 字符串
var text2 = text1.toUpperCase(); // text2 是被转换为大写的 text1
通过 toLowerCase() 把字符串转换为小写：
var text1 = "Hello World!"; // 字符串
var text2 = text1.toLowerCase(); // text2 是被转换为小写的 text1
concat() 连接两个或多个字符串：
所有字符串方法都会返回新字符串。它们不会修改原始字符串。
正式地说：字符串是不可变的：字符串不能更改，只能替换。
trim() 方法删除字符串两端的空白符：
示例：
var str = " Hello World! ";
alert(str.trim());
也可以自己使用replace方法加上一个正则表达式去替换
也可以把这个trim函数加到JavaScript string.prototype中
charAt() 方法返回字符串中指定下标（位置） 的字符串：
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：
把字符串转换为数组
可以通过 split() 将字符串转换为数组：
var txt = "a,b,c,d,e"; // 字符串
txt.split(","); // 用逗号分隔
txt.split(" "); // 用空格分隔
txt.split("|"); // 用竖线分隔
搜索字符串的方法
- String.indexOf()
- String.lastIndexOf()
- String.startsWith()
- String.endsWith()
indexOf() 方法返回指定文本在字符串中第一次出现（的位置）的索引：
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：
如果未找到文本，indexOf() 和 lastIndexOf() 都返回 -1：
这两种方法都接受第二个参数作为搜索的开始位置：
search() 方法在字符串中搜索指定值并返回匹配的位置：
match() 方法根据正则表达式在字符串中搜索匹配项，并将匹配项作为 Array 对象返回。
如果正则表达式不包含 g 修饰符（执行全局搜索），match() 方法将只返回字符串中的第一个匹配项。若未找到匹配项，则为 null。
对 "ain" 执行不区分大小写的全局搜索：
let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/gi) // 返回数组 [ain,AIN,ain,ain]
如果字符串包含指定值，includes() 方法返回 true。
let text = "Hello world, welcome to the universe.";
text.includes("world") // 返回 true
如果字符串以指定值开头，则 startsWith() 方法返回 true，否则返回 false：
let text = "Hello world, welcome to the universe.";
text.startsWith("world", 5) // 返回 false
text.startsWith("world", 6) // 返回 true
如果字符串以指定值结尾，则 endsWith() 方法返回 true，否则返回 false：
JavaScript字符串模板
同义词：
- Template Literals
- Template Strings
- String Templates
- Back-Tics 语法
模板字面量使用反引号 (``) 而不是引号 ("") 来定义字符串：
通过使用模板字面量，您可以在字符串中同时使用单引号和双引号：
模板字面量允许多行字符串：
插值
模板字面量提供了一种将变量和表达式插入字符串的简单方法。
该方法称为字符串插值（string interpolation）。
语法：
${...}
模板字面量允许字符串中的变量：
let firstName = "Bill";
let lastName = "Gates";
let text = `Welcome ${firstName}, ${lastName}!`;
模板字面量允许字符串中的表达式：
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
完整的字符串参考：JavaScript String 参考手册 (w3school.com.cn)
html模板
< script>
let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
html += `<li>${x}</li>`;
}
html += `</ul>`;
//以上的工作都是在完成一个html变量的构建
document.getElementById("demo").innerHTML = html;
数值
始终是64位浮点数
JavaScript 数值始终以双精度浮点数来存储，根据国际 IEEE 754 标准。
- 常见错误
常见的错误是认为结果应该是 102030：
实例
var x = 10;
var y = 20;
var z = "30";
var result = x + y + z;
在所有数字运算中，JavaScript 会尝试将字符串转换为数字
NaN 属于 JavaScript 保留词，指示某个数不是合法数。
尝试用一个非数字字符串进行除法会得到 NaN（Not a Number）：
如：
var x = 100 / "Apple"; // x 将是 NaN（Not a Number）
可使用全局 JavaScript 函数 isNaN() 来确定某个值是否是数：
var x = 100 / "Apple";
isNaN(x);
Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。
typeof Infinity; // 返回 "number"
JavaScript数字方法
toString() 以字符串返回数值。
toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字。
toFixed() 返回字符串值，它包含了指定位数小数的数字：
toFixed(2)非常适合处理金钱。
toPrecision() 返回字符串值，它包含了指定长度的数字：
valueOf() 以数值返回数值：
变量转换为数值
这三种 JavaScript 方法可用于将变量转换为数字：
- Number() 方法
- parseInt() 方法
- parseFloat() 方法
这些方法并非数字方法，而是全局 JavaScript 方法。
| NUMBER() | 返回数字，由其参数转换而来。 |
|---|---|
| parseFloat() | 解析其参数并返回浮点数。 |
| parseInt() | 解析其参数并返回整数。 |
Number() 还可以把日期转换为数字：
Number(new Date("2019-04-15")); // 返回 1506729600000
如果无法转换数字，则返回 NaN。
parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字：
parseInt("10.33"); // 返回 10
parseFloat() 解析一段字符串并返回数值。允许空格。只返回首个数字：
parseFloat("10.33"); // 返回 10.33
| 属性 | 描述 |
|---|---|
| MAX_VALUE | 返回 JavaScript 中可能的最大数。 |
| MIN_VALUE | 返回 JavaScript 中可能的最小数。 |
| NEGATIVE_INFINITY | 表示负的无穷大（溢出返回）。 |
| NaN | 表示非数字值（"Not-a-Number"）。 |
| POSITIVE_INFINITY | 表示无穷大（溢出返回）。 |
数组
数组元素可以是对象
数组是对象，通过数字访问其元素，对象通过名称访问其“成员”
- 数组属性和方法
var x = cars.length; // length 属性返回元素的数量
var y = cars.sort(); // sort() 方法对数组进行排序
遍历数组的最安全方法是使用 "for" 循环：
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
也可以使用 Array.foreach() 函数：
var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
text += "<li>" + value + "</li>";
}
向数组添加新元素的最佳方法是使用 push() 方法：
也可以使用 length 属性向数组添加新元素：
假如您使用命名索引，JavaScript 会把数组重定义为标准对象。
之后，所有数组的方法和属性将产生非正确结果。
var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length; // person.length 将返回 0
var y = person[0]; // person[0] 将返回 undefined
- 数组和对象的区别
在 JavaScript 中，数组使用数字索引。
在 JavaScript 中，对象使用命名索引。
数组是特殊类型的对象，具有数字索引。
没有必要使用 JavaScript 的内建数组构造器 new Array()。
新方法 Array.isArray()： 判断是否是一个数组
创建您自己的 isArray() 函数以解决此问题：
function isArray(x) {
return x.constructor.toString().indexOf("Array") > -1;
}
JavaScript 数组的力量隐藏在数组方法中。
toString()把数组转换为数组值（逗号分隔）的字符串
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
join() 方法也可将所有数组元素结合为一个字符串。
似 toString()，但是可以规定分隔符：
var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
pop() 方法从数组中删除最后一个元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop(); // 从 fruits 删除最后一个元素（"Mango"）
pop() 方法返回“被弹出”的值：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop(); // x 的值是 "Mango"
push() 方法（在数组结尾处）向数组添加一个新的元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi"); // 向 fruits 添加一个新元素
push() 方法返回新数组的长度：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi"); // x 的值是 5
位移与弹出等同，但处理首个元素而不是最后一个。
shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。
unshift() 方法返回新数组的长度。
删除元素
使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。
splice() 方法可用于向数组添加新项：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
第一个参数（2）定义了应添加新元素的位置（拼接）。
第二个参数（0）定义应删除多少元素。
其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
concat() 方法通过合并（连接）现有数组来创建一个新数组：
- 裁剪数组
slice() 方法用数组的某个片段切出新数组。
- toString
如果需要原始值，则 JavaScript 会自动把数组转换为字符串。下面两个例子将产生相同的结果：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); document.getElementById("demo").innerHTML = fruits;
- 数组排序
sort() 方法以字母顺序对数组进行排序：
reverse() 方法反转数组中的元素。
您可以使用它以降序对数组进行排序：
默认地，sort() 函数按照字符串顺序对值进行排序。该函数很适合字符串（"Apple" 会排在 "Banana" 之前）。
不过，如果数字按照字符串来排序，则 "25" 大于 "100"，因为 "2" 大于 "1"。
正因如此，sort() 方法在对数值排序时会产生不正确的结果。
我们通过一个比值函数来修正此问题：
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
- 比值函数
比较函数的目的是定义另一种排序顺序。
比较函数应该返回一个负，零或正值，这取决于参数：
function(a, b){return a-b}
当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。
以随即顺序排序：
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});
您可以使用 Math.max.apply 来查找数组中的最高值：
function myArrayMax(arr) {
return Math.max.apply(null, arr);
}
您可以使用 Math.min.apply 来查找数组中的最低值：
function myArrayMin(arr) {
return Math.min.apply(null, arr);
}
数组迭代
forEach() 方法为每个数组元素调用一次函数（回调函数）。
Array.map()
map() 方法通过对每个数组元素执行函数来创建新数组。
map() 方法不会对没有值的数组元素执行函数。
map() 方法不会更改原始数组。
这个例子将每个数组值乘以2：
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
当回调函数仅使用 value 参数时，可以省略索引和数组参数：
实例
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
filter() 方法创建一个包含通过测试的数组元素的新数组。
还有许多方法：
JavaScript 数组迭代 (w3school.com.cn)
数组const
关键字 const 有一定误导性。
它不定义常量数组。它定义的是对数组的常量引用。
因此，我们仍然可以更改常量数组的元素。
日期
| 类型 | 实例 |
|---|---|
| ISO 日期 | "2018-02-19" （国际标准） |
| 短日期 | "02/19/2018" 或者 "2018/02/19" |
| 长日期 | "Feb 19 2018" 或者 "19 Feb 2019" |
| 完整日期 | "Monday February 25 2015" |
日期有一大堆gettime，getyear的方法
JavaScript math
| ABS(X) | 返回 X 的绝对值 |
|---|---|
| acos(x) | 返回 x 的反余弦值，以弧度计 |
| asin(x) | 返回 x 的反正弦值，以弧度计 |
| atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |
| atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度 |
| ceil(x) | 对 x 进行上舍入 |
| cos(x) | 返回 x 的余弦 |
| exp(x) | 返回 Ex 的值 |
| floor(x) | 对 x 进行下舍入 |
| log(x) | 返回 x 的自然对数（底为e） |
| max(x,y,z,...,n) | 返回最高值 |
| min(x,y,z,...,n) | 返回最低值 |
| pow(x,y) | 返回 x 的 y 次幂 |
| random() | 返回 0 ~ 1 之间的随机数 |
| round(x) | 把 x 四舍五入为最接近的整数 |
| sin(x) | 返回 x（x 以角度计）的正弦 |
| sqrt(x) | 返回 x 的平方根 |
| tan(x) | 返回角的正切 |
JavaScript 随机
Math.random() 返回 0（包括） 至 1（不包括） 之间的随机数：
Math.random() 总是返回小于 1 的数。
Math.random() 与 Math.floor() 一起使用用于返回随机整数。
Math.floor(Math.random() * 10); // 返回 0 至 9 之间的数
这个 JavaScript 函数始终返回介于 min（包括）和 max（不包括）之间的随机数：
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min) ) + min;
}
