[TOC]

JavaScript 是属于 HTML 和 web 的编程语言
web 开发三大语言

html
css
javascript

JavaScript 的功能

JavaScript 可以改变 HTML 内容

<!DOCTYPE html>
<html>
<body>

<h2>我的第一段 JavaScript</h2>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
点击这里来显示日期和时间
</button>

<p id="demo"></p>

</body>
</html>

JavaScript 可以改变 HTML 的属性

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 能做什么？</h2>

<p>JavaScript 能够改变 HTML 属性值。</p>

<p>在本例中，JavaScript 改变了图像的 src 属性值。</p>

<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>

<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">

<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>

</body>
</html>

JavaScript 可以改变 HTML 样式（CSS）

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 能够做什么</h2>

<p id="demo">JavaScript 能够改变 HTML 元素的样式。</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">
点击我！
</button>


</body>
</html>

JavaScript 可以隐藏和显示 HTML 元素

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 能够做什么</h2>

<p id="demo">JavaScript 能够隐藏 HTML 元素。</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">
点击我！
</button>
</body>
</html>




<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 能够做什么</h2>

<p>JavaScript 能够显示隐藏的 HTML 元素。</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">
点击我！
</button>

</body>
</html>

JavaScript 简介


- toExponential()
   - 返回字符串
   - 表示已被四舍五入并使用指数计算法的数字
   - 参数定义小数点后的字符数
- toFixed()
   - 返回字符串
   - 返回包含了制定位数小数的数字
- toPrecision()
   - 返回字符串，
   - 包含了指定长度的数字
```javascript
var x = 9.656;
x.toPrecision();        // 返回 9.656
x.toPrecision(2);       // 返回 9.7
x.toPrecision(4);       // 返回 9.656
x.toPrecision(6);       // 返回 9.65600

valueOf()

以数值返回数值

var x = 123;
x.valueOf();            // 从变量 x 返回 123
(123).valueOf();        // 从文本 123 返回 123
(100 + 23).valueOf();   // 从表达式 100 + 23 返回 123

number()

将其他可以转换成数字的数据类型转换成数字

x = true;
Number(x);        // 返回 1
x = false;     
Number(x);        // 返回 0
x = new Date();
Number(x);        // 返回 1404568027739
x = "10"
Number(x);        // 返回 10
x = "10 20"
Number(x);        // 返回 NaN
Number(new Date("2019-04-15"));    // 返回 1506729600000

parseInt()

解析一段字符串并返回注释，允许空格

只返回首个数字

parseInt("10");         // 返回 10
parseInt("10.33");      // 返回 10
parseInt("10 20 30");   // 返回 10
parseInt("10 years");   // 返回 10
parseInt("years 10");   // 返回 NaN

parseFloat()

解析一段字符串并返回数值

允许空格，只返回收个数字

parseFloat("10");        // 返回 10
parseFloat("10.33");     // 返回 10.33
parseFloat("10 20 30");  // 返回 10
parseFloat("10 years");  // 返回 10
parseFloat("years 10");  // 返回 NaN

数字的属性

属性	描述
MAX_VALUE	返回 JavaScript 中可能的最大数。
MIN_VALUE	返回 JavaScript 中可能的最小数。
NEGATIVE_INFINITY	表示负的无穷大（溢出返回）。
NaN	表示非数字值（”Not-a-Number”）。
POSITIVE_INFINITY

JavaScript 数组

介绍

是一种特殊变量，可以存放一个以上的值
数组是对象，数组元素也是对象

创建

避免 new Array 一个数组 ```javascript var array_name = [item1, item2, …];

var cars = new Array(“Saab”, “Volvo”, “BMW”);

<a name="qDKoz"></a>
## 访问和修改
同 Python 列表
```javascript
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组</h1>

<p>使用数字索引（从 0 开始）访问 JavaScript 数组元素。</p>

<p id="demo"></p>

<script>
var cars = ["Audi", "BMW", "porsche"];
document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

完整访问数组

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组</h1>

<p id="demo"></p>

<script>
var cars = ["Audi", "BMW", "porsche"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

数组属性和方法

length

使用 length 访问数组最后一个元素

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组</h1>

<p>使用数字索引（从 0 开始）访问 JavaScript 数组元素。</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length-1];
document.getElementById("demo").innerHTML = last;
</script>

</body>
</html>

for
- 遍历数组元素 ```javascript <!DOCTYPE html>

JavaScript 数组

遍历数组的最佳方法是使用标准的 for 循环：


- Array.foreach()
```javascript
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组</h1>

<p>Array.forEach() 为每个数组元素调用函数。</p>

<p>Internet Explorer 8 以及更早的版本不支持 Array.forEach()。</p>

<p id="demo"></p>

<script>
var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
document.getElementById("demo").innerHTML = text;

function myFunction(value) {
  text += "<li>" + value + "</li>";
} 
</script>

push()
- 向数组添加新元素 ```javascript <!DOCTYPE html>

JavaScript 数组

push 方法向数组追加新元素。


- length 添加新元素
```javascript
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组</h1>

<p>length 属性提供了一种在不使用 push() 方法的情况下将新元素附加到数组的简便方法。</p>

<button onclick="myFunction()">试一试</button>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  fruits[fruits.length] = "Lemon";
  document.getElementById("demo").innerHTML = fruits;
}
</script

Array.isArray（）
- 判断是否是数组
toString()
- 将数组转换成字符串
```javascript <!DOCTYPE html>

JavaScript 数组方法

toString()

toString() 方法以逗号分隔的字符串返回数组：

//Banana,Orange,Apple,Mango


- join（）
   - 以某个连接符将数组转换成字符串
```javascript
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组方法</h1> 

<h2>join()</h2>

<p>join() 方法将数组元素连接成一个字符串。</p>

<p>在这个例子中我们使用“*”作为元素之间的分隔符：</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>

//Banana * Orange * Apple * Mango

pop（） ```javascript <!DOCTYPE html>

JavaScript 数组方法

pop()

pop() 方法从数组中删除最后一个元素。

pop() 方法的返回值是已删除的项目。

<* Banana,Orange,Apple,Mango

Mango

Banana,Orange,Apple *>


- shift（）
   - 删除第一个元素<br />
   - 返回被删除的元素
```javascript
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组方法</h1> 

<h2>shift()</h2>

<p>shift() 方法返回被移出的元素。</p>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
document.getElementById("demo2").innerHTML = fruits.shift();
document.getElementById("demo3").innerHTML = fruits;

unshift（）
- 在开头向数组添加新元素，并反向位移旧元素
- 返回新数组的元素 ```javascript <!DOCTYPE html>

JavaScript 数组方法

unshift()

unshift() 方法将新元素添加到数组的开头。

//Banana,Orange,Apple,Mango //Lemon,Banana,Orange,Apple,Mango


- delete
   - 根据索引删除数组元素，但不改签其他数组元素的索引，被删除部分为 undefined
```javascript
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组方法</h1> 

<p>删除元素会在数组中留下未定义的孔。</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML =
"第一种水果是：" + fruits[0];
delete fruits[0];
document.getElementById("demo2").innerHTML =
"第一种水果是：" + fruits[0];
</script>

</body>
</html>

splice（）
- 向数组添加新项
- fruits.splice(2, 0, “Lemon”, “Kiwi”); 其中，2 代表新增多少元素，0 代表删除多少元素
- 返回一个被删除项目的数组 ```javascript <!DOCTYPE html>

JavaScript 数组方法

splice()

splice() 方法将新元素添加到数组中。

<*原数组： Banana,Orange,Apple,Mango

新数组： Banana,Orange,Lemon,Kiwi,Apple,Mango *>


   - 删除一个元素，第一个
```javascript
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组方法</h1> 

<h2>splice()</h2>

<p>splice() 方法可用于删除数组元素。</p>

<button onclick="myFunction()">试一试</button>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
  fruits.splice(0, 1);
  document.getElementById("demo").innerHTML = fruits;
}
</script>

concat
- 合并两个数组
- 返回新数组
- 两个参数可以合并三个数组（合并多个数组） ```javascript <!DOCTYPE html>

JavaScript 数组方法

concat()

concat() 方法用于合并（连接）数组：

<!DOCTYPE html>

JavaScript 数组方法

concat()

concat() 方法也可以将值合并到数组：


- slice()
```javascript
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组方法</h1> 

<h2>slice()</h2>

<p>当给 slice() 方法赋予两个参数时，它从 <i>start</i> 参数中选择数组元素，直到（但不包括）<i>end</i> 参数：</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>

</body>
</html>

toString()
- 将数组转换成字符串 ```javascript <!DOCTYPE html>

JavaScript 数组方法

toString()

toString() 方法以逗号分隔的字符串返回数组：


- sort()
   - 以字母顺序对数组进行排序
   - 但由于 25 大于 100，会造成排序不正确
   - 解决该问题：**比值参数**
```javascript
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组排序</h1>

<p>单击按钮以升序对数组进行排序。</p>

<button onclick="myFunction()">试一试</button>

<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  

function myFunction() {
  points.sort(function(a, b){return a - b});
  document.getElementById("demo").innerHTML = points;
}
</script>

---------------------------------------------------

  <!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组排序</h1>

<p>单击按钮可按降序对数组进行排序。</p>

<button onclick="myFunction()">试一试</button>

<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;

function myFunction() {
  points.sort(function(a, b){return b - a});
  document.getElementById("demo").innerHTML = points;
}
</script>

</body>

比值函数

比较函数的目的是定义另一种排序方式，
比较函数会返回一个值：0、整数或者负数，这取决于参数

当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。
实例：
当比较 40 和 100 时，sort() 方法会调用比较函数 function(40,100)。
该函数计算 40-100，然后返回 -60（负值）。
排序函数将把 40 排序为比 100 更低的值。
您可以使用下面的代码片段来测试数值和字母排序：
<button onclick="myFunction1()">以字母顺序排序</button>
<button onclick="myFunction2()">以数字顺序排序</button>

<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;

function myFunction1() {
        points.sort();
        document.getElementById("demo").innerHTML  = points;
}
function myFunction2() {
        points.sort(function(a, b){return  a - b});
        document.getElementById("demo").innerHTML = points;
}
</script>

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组排序</h1>

<p>请反复点击按钮，对数组进行随机排序。</p>

<button onclick="myFunction()">试一试</button>

<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  

function myFunction() {
  points.sort(function(a, b){return 0.5 - Math.random()});
  document.getElementById("demo").innerHTML = points;
}
</script>

查找最大值或者最小值

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组排序</h1>

<p>最低值是：<span id="demo"></span></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
document.getElementById("demo").innerHTML = points[0];
</script>

</body>
</html>

reverse()
- 反转数组中的元素
Math.max（）
- 查找数组的最高值 ```javascript <!DOCTYPE html>

JavaScript 数组排序

最高值是：


- Math.min（）

按照年份对汽车进行排序
```javascript
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组排序</h1>

<p>点击按钮按年份对汽车进行排序：</p>

<button onclick="myFunction()">排序</button>

<p id="demo"></p>

<script>
var cars = [
  {type:"BMW", year:2017},
  {type:"Audi", year:2019},
  {type:"porsche", year:2018}
];

displayCars();

function myFunction() {
  cars.sort(function(a, b){return a.year - b.year});
  displayCars();
}

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}
</script>

</body>
</html>

根据车型对汽车进行排序（字符串排序）

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组排序</h1>

<p>点击按钮按车型对汽车进行排序：</p>

<button onclick="myFunction()">排序</button>

<p id="demo"></p>

<script>
var cars = [
  {type:"BMW", year:2017},
  {type:"Audi", year:2019},
  {type:"porsche", year:2018}
];

displayCars();

function myFunction() {
  cars.sort(function(a, b){
    var x = a.type.toLowerCase();
    var y = b.type.toLowerCase();
    if (x < y) {return -1;}
    if (x > y) {return 1;}
    return 0;
  });
  displayCars();
}

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + "

Array.forEach()
- 为每个元素低啊用一次函数（回调函数）
- 参数：项目值、项目索引、数组本身 ```javascript <!DOCTYPE html>

JavaScript Array.forEach()

为每个元素调用一次函数。


- Array.map()
   - 通过对么个元素执行函数来创建新数组
   - 不贵对没有值的数组元素执行函数
   - 不会更改原始数组
   - 参数：项目值、项目索引、数组本身
   - 当回调函数仅使用 value 值时，可以省略其他参数
```javascript
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Array.map()</h1>

<p>通过对每个数组元素执行函数来创建新数组。</p>

<p id="demo"></p>

<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

document.getElementById("demo").innerHTML = numbers2;

function myFunction(value, index, array) {
  return value * 2;
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Array.map()</h1>

<p>通过对每个数组元素执行函数来创建新数组。</p>

<p id="demo"></p>

<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

document.getElementById("demo").innerHTML = numbers2;

function myFunction(value) {
  return value * 2;
}
</script>

</body>
</html>

Array.filter
- 创建一个通过测试的元素的新数组
- 三个参数：项目值、项目索引、数组本身
- 当回调函数仅使用 value 值时，可以省略其他参数 ```javascript <!DOCTYPE html>

JavaScript Array.filter()

使用通过测试的所有数组元素创建一个新数组。


- Array.reduce（）
   - 在每个数组元素上运行函数，以生成（减少它）单个值
   - 在数组中从左到右工作
   - 不会减少原始数据
   - 参数：总数（初始值\先前返回的值）、项目值、项目索引、数组本身
   - reduce 方法只能接收一个初始值
```javascript
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Array.reduce()</h1>

<p>此例确定数组中所有数字的总和：</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);

document.getElementById("demo").innerHTML = "总和是：" + sum;

function myFunction(total, value, index, array) {
  return total + value;
}
</script>

</body>

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Array.reduce()</h1>

<p>此例确定数组中所有数字的总和：</p>

<p id="demo"></p>

<script>
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction, 100);

document.getElementById("demo").innerHTML = "总和是：" + sum;

function myFunction(total, value) {
  return total + value;
}
</script>

</body>
</html>

Array.reduceRight（）
- 方法同 reduce
- 数组中从右到左
Array.every()
- 检测所有元素是够通过测试，当所有都满足时，返回 true，只要有一个不满足返回 false
- 三个参数：项目值、索引本身、数组本身 ```javascript <!DOCTYPE html>

JavaScript Array.every()

every() 方法检查所有数组值是否通过测试。


- Array.some（）
   - 检测所有元素是够通过测试，只要有一个满足时，返回 true，当所有都不满足时，返回 false
   - 三个参数：项目值、索引本身、数组本身
- Array.indexOf()
   - 在数组中搜索元素并返回其索引
   - array.indexOf(_item_, _start_)
   - 如果未找到，则返回-1
- Array.lastIndex()
   - 从数组的结尾开始查询
   - 默认从左向右，如若给到负值将从结尾开始的给定位置开始，并搜索到开头。
- Array.find()
   - 返回通过测试函数的第一个元素的值
   - 三个参数：项目值，项目索引，数组本身
```javascript
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Array.find()</h1>

<p id="demo"></p>

<script>
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

document.getElementById("demo").innerHTML = "大于 18 的第一个值是：" + first;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Array.findIndex()
- 返回通过测试函数的第一个数组元素的索引
- 三个参数：项目值，项目索引和数组本身
  关联数组
  具有命名索引的数组被称为关联数组（散列）
  但 JavaScript 不支持关联数组

数组和对象的区别

数组
- 使用数字索引
- 数组是特殊类型的对象
对象
- 使用命名索引

网络编程

JavaScript——part1

JavaScript 的功能

JavaScript 可以改变 HTML 内容

JavaScript 可以改变 HTML 的属性

JavaScript 可以改变 HTML 样式（CSS）

JavaScript 可以隐藏和显示 HTML 元素

JavaScript 简介

数字的属性

JavaScript 数组

介绍

创建

数组属性和方法

JavaScript 数组

JavaScript 数组

JavaScript 数组方法

toString()

JavaScript 数组方法

pop()

JavaScript 数组方法

unshift()

JavaScript 数组方法

splice()

JavaScript 数组方法

concat()

JavaScript 数组方法

concat()

JavaScript 数组方法

toString()

比值函数

JavaScript 数组排序

JavaScript Array.forEach()

JavaScript Array.filter()

JavaScript Array.every()

关联数组

数组和对象的区别