js的基础

内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。

HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。

CSS 是一种样式规则语言，可将样式应用于 HTML 内容， 例如设置背景颜色和字体，在多个列中布局内容。

JavaScript 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。

客户端（client-side）JavaScript 语言的核心包含一些普遍的编程特性

javaScript 语言核心之上所构建的功能更令人兴奋。

应用程序接口（Application Programming Interfaces（API））将为你的代码提供额外的超能力。

API 是已经建立好的一套代码组件，可以让开发者实现原本很难甚至无法实现的程序

浏览器 API 内建于 web 浏览器中，它们可以将数据从周边计算机环境中筛选出来，还可以做实用的复杂工作

浏览器的安全：每个浏览器标签页就是其自身用来运行代码的独立容器（这些容器用专业术语称为“运行环境”）。大多数情况下，每个标签页中的代码完全独立运行，而且一个标签页中的代码不能直接影响另一个标签页（或者另一个网站）中的代码。

解释（interpret）在解释型语言中，代码自上而下运行，且实时返回运行结果。代码在由浏览器执行前，不需要将其转化为其他形式。代码将直接以文本格式（text form）被接收和处理。

编译(compile) 编译型语言需要先将代码转化（编译）成另一种形式才能运行。比如 C/C++ 先被编译成汇编语言，然后才能由计算机运行。程序将以二进制的格式运行，这些二进制内容是由程序源代码产生的。

客户端代码是在用户的电脑上运行的代码，在浏览一个网页时，它的客户端代码就会被下载，然后由浏览器来运行并展示。这就是客户端 JavaScript。

而服务器端代码在服务器上运行，接着运行结果才由浏览器下载并展示出来。

js代码的应用：

script>
  // 在此编写 JavaScript 代码
</script>

<script src="script.js" async></script>

js代码的注释：

// 我是一条注释

/*
  我也是
  一条注释
*/

可以使用等号（=）和一个值来为变量赋值。

let和var的区别：

var 时，可以根据需要多次声明相同名称的变量，但是 let 不能。 以下将有效：

var myName = 'Chris';
var myName = 'Bob';

但是以下内容会在第二行引发错误：

let myName = 'Chris';
let myName = 'Bob';

你必须这样做：

let myName = 'Chris';
myName = 'Bob';

存储数字，不论这些数字是像30（也叫整数）这样，或者像2.456这样的小数（也叫做浮点数）。与其他编程语言不同，在 JavaScript 中你不需要声明一个变量的类型。当你给一个变量数字赋值时，不需要用引号括起来。 

let myAge = 17;

字符串是文本的一部分。当你给一个变量赋值为字符串时，你需要用单引号或者双引号把值给包起来，否则JavaScript将会把这个字符串值理解成别的变量名。如果你声明一个变量并给它一个带引号的值，浏览器就会知道它是一个字符串，就算是有数字也是字符串

let text = 'fjdfjsd';

Boolean 的值有2种：true或false。它们通常被用于在适当的代码之后，测试条件是否成立。

let iAmAlive = true;
let test = 6 < 3;
使用“小于”操作符（<）来测试6小于3。返回false

数组：Array

数组是一个单个对象，其中包含很多值，方括号括起来，并用逗号分隔。尝试在您的控制台输入以下行:

let myNameArray = ['Chris', 'Bob', 'Jim'];
let myNumberArray = [10,15,40];

当数组被定义后，您可以使用如下所示的语法来访问各自的值，例如下行:

myNameArray[0]; // should return 'Chris'
myNumberArray[2]; // should return 40

此处的方括号包含一个索引值，该值指定要返回的值的位置。 计算机从0开始计数

Object 是一个构造函数，用于创建对象。

在 Object 中声明的属性只有两个：

Object.length —— 值为1

Object.prototype —— 指向 Object 函数的原型对象

函数（Function）函数是可复用的代码块，可以一次编写，反复运行，从而节省了大量的重复代码。

function checkGuess() {
  alert('我是一个占位符');
}

运算符：+ - * /

运算符 名称 示例

运算符	名称	作用	示例
+	加法	两个数相加。	6 + 9
-	减法	从左边减去右边的数。	20 - 15
*	乘法	两个数相乘。	3 * 7
/	除法	用右边的数除左边的数	10 / 5
%	求余(有时候也叫取模)	在你将左边的数分成同右边数字相同的若干整数部分后，返回剩下的余数	8 % 3 (返回 2，8除以3的倍数，余下2 。)
**	幂	取底数的指数次方，即指数所指定的底数相乘。它在EcmaScript 2016 中首次引入。	5 ** 5 (返回 3125，相当于 5 * 5 * 5 * 5 * 5 。)

加法还可以将文本字符串连接在一起

复合运算符：

name += ' says hello!';

这等价于：

name = name + ' says hello!';

条件运算符：运算符 名称 作用 示例

=== 严格等于 测试左右值是否相同                  5 === 2 + 4

!== 严格不等于 测试左右值是否不相同                  5 !== 2 + 3

< 小于 测试左值是否小于右值。                  10 < 6

> 大于 测试左值是否大于右值                  10 > 20

<= 小于或等于 测试左值是否小于或等于右值。                  3 <= 2

= 大于或等于 测试左值是否大于或等于正确值。              5 >= 4

代码中使用==和!=来判断相等和不相等，这些都是JavaScript中的有效运算符，但它们与===/!==不同，前者测试值是否相同， 但是数据类型可能不同，而后者的严格版本测试值和数据类型是否相同

条件语句：

     if(条件){
        条件语句
    }

     for (var i = 0; i <= 10; i++) {
        document.write('a');
    }

    var i = 1;
    var count = 0;
    for (; i;) {
        document.write('a');
        count++;
        if (count == 10) {
            i = 0;
        }
    }

    for (var i = 0; i < 100; i++) {
        if (i % 3 == 0 || i % 5 == 0 || i % 7 == 0) {
            document.write(i + ' ');
        }
    }

    var i = 100;
    for (; i--;) {
        document.write(i + " ");
    }//到 0 就自动停止了，if 条件判断的


    var i = 0;
    while (i < 100) {
        if (i % 7 == 0) {
            document.write(i + " ");
        }
        i++;
    }

    var i = 0;
    do {
        document.write('a');
        i++;
    } while (i < 10)

事件(event):

侦听事件发生的结构称为事件监听器（Event Listener），响应事件触发而运行的代码块被称为事件处理器（Event Handler）。

---

 JavaScript 代码的错误:

语法错误和逻辑错误

• 语法错误：代码中存在拼写错误，将导致程序完全或部分不能运行，通常你会收到一些出错信息。只要熟悉语言并了解出错信息的含义，你就能够顺利修复它们。
• 逻辑错误：有些代码语法虽正确，但执行结果和预期相悖，这里便存在着逻辑错误。这意味着程序虽能运行，但会给出错误的结果。由于一般你不会收到来自这些错误的提示，它们通常比语法错误更难修复。

常见错误：

1.这个错误通常意味着你漏写了一行代码最后的分号，但是此类错误有时候会更加隐蔽。

2.语法错误：参数表末尾缺少括号。

3.语法错误：属性id后面缺少冒号。

4.语法错误：函数末尾缺少花括号。

5.语法错误：得到一个string而非表达式。

6.语法错误：字符串不能正常结束。这个错误通常意味着字符串两端的引号漏写了一个。如果你漏写了字符串开始的引号，将得到第一条出错信息，这里的 'string' 将被替换为浏览器发现的意外字符。如果漏写了末尾的引号将得到第二条。

---

变量的设置

变量是用来存储数值的，那么有一个重要的概念需要区分。变量不是数值本身，它们仅仅是一个用于存储数值的容器。你可以把变量想象成一个个用来装东西的纸箱子。

变量的声明：要想使用变量，你需要做的第一步就是创建它 -- 更准确的说，是声明一个变量。声明一个变量的语法是在 var 或 let 关键字之后加上这个变量的名字：var a；let a；

一个变量没有定义和没有赋值是不一样的，两回事。

初始化变量：在变量名之后跟上一个“=”，然后是数值。

myName = 'Chris';
myAge = 37;

这样在声明变量的时候给变量初始化:

let myName = 'Chris';

这可能是大多数时间你都会使用的方式， 因为它要比在单独的两行上做两次操作要快。

---

数字类型：

• 整数 就是整数,例如 10, 400, 或者 -5
• 浮点数 (浮点) 有小数点或小数位，例如 12.5，和 56.7786543
• 双精度双精度是一种特定类型的浮点数，它们具有比标准浮点数更高的精度（这意味着它们精确到更大的小数位数）
• 二进制 — 计算机的最基础语言; 0 and 1
• 八进制 — 基数8，每列使用0-7
• 十六进制 — 基数16，每列使用0-9，然后使用a-f。 在CSS中设置颜色时，可能会遇到这些数字

数字的运算：

let num1 = 10;
let num2 = 50;
9 * num1;
num1 ** 3;
num2 / num1;

运算符优先级从高到底的顺序：算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

自增自减运算符：增量（++）和递减（ -- ）

赋值运算符：

运算符	名称	作用	示例	等价于
+=	加法赋值	右边的数值加上左边的变量，然后再返回新的变量。	x = 3; x += 4;	x = 3; x = x + 4;
-=	减法赋值	左边的变量减去右边的数值，然后再返回新的变量。	x = 6; x -= 3;	x = 6; x = x - 3;
*=	乘法赋值	左边的变量乘以右边的数值，然后再返回新的变量。	x = 2; x *= 3;	x = 2; x = x * 3;
/=	除法赋值	左边的变量除以右边的数值，然后再返回新的变量。	x = 10; x /= 5;	x = 10; x = x / 5;

比较运算符

<button>Start machine</button>
<p>The machine is stopped.</p>

const btn = document.querySelector('button');
const txt = document.querySelector('p');
btn.addEventListener('click', updateBtn);
function updateBtn() {
  if (btn.textContent === 'Start machine') {
    btn.textContent = 'Stop machine';
    txt.textContent = 'The machine has started!';
  } else {
    btn.textContent = 'Start machine';
    txt.textContent = 'The machine is stopped.';
  }
}

这种在两个状态之间来回交换的行为通常被称为 切换 (toggle)。它在一个状态和另一个状态之间切换 - 点亮，熄灭等

---

js中的字符串：

创建一个字符串：

let string = 'The revolution will not be televised.';
string;

如果漏掉其中一个引号，你就会得到一个错误

如果您之前定义了变量字符串，下面的操作将会起作用

let badString = string;
badString;

现在将 string 的值赋值给 badString，赋值之后，两个字符串的值相等。

单引号和双引号是一样的

在JavaScript中，您可以选择单引号或双引号来包裹字符串。

下面两种方式都可以:

let sgl = 'Single quotes.';
let dbl = "Double quotes";
sgl;
dbl;

浏览器会认为字符串没有被关闭，因为在字符串中您没有使用其他类型的引号。

let sglDbl = 'Would you eat a "fish supper"?';
let dblSgl = "I'm feeling blue.";
sglDbl;
dblSgl;

但是，您不能在字符串中包含相同的引号，因为它是用来包含它们的。下面将会出现错误，因为它会混淆浏览器和字符串的结束位置:

let bigmouth = 'I've got no right to take my place...';

js的转义字符串：

反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符：

转义字符 (\) 可以用于转义撇号，换行，引号，等其他特殊字符。

下表中列举了在字符串中可以使用转义字符转义的特殊字符：

代码	输出
\'	单引号
\"	双引号
\\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

js中的连接字符串：+

let one = 'Hello, ';
let two = 'how are you?';
let joined = one + two;
joined;

---

字符串方法——在js中一切都可以为对象。

获取字符串的长度

let browserType = 'mozilla';
browserType.length;

检查特定字符串字符

电脑从0开始，不是1！ 要检索任何字符串的最后一个字符，我们可以使用下面这行，将这种技术与length属性相结合起来：

browserType[browserType.length-1];

在字符串中查找子字符串并提取它

这可以使用indexOf()方法来完成，该方法需要一个parameter (en-US) — 你想要搜索的子字符串。

browserType.indexOf('zilla');

因为子字符串“zilla”从“mozilla”内的位置2（0，1，2 —— 所以从第3个字符）开始。 这样的代码可以用来过滤字符串。

另一种可能更有效的方式来实现

browserType.indexOf('vanilla');

 当在主字符串中找不到子字符串（在本例中为“vanilla”）时将返回 -1。

知道字符串中的子字符串开始的位置，以及想要结束的字符时，slice()可以用来提取 它

browserType.slice(0,3);

第一个参数是开始提取的字符位置，第二个参数是提取的最后一个字符的后一个位置。所以提取从第一个位置开始，直到但不包括最后一个位置。

字符串大小写的转换

字符串方法toLowerCase()和toUpperCase()字符串并将所有字符分别转换为小写或大写

let radData = 'My NaMe Is MuD';
radData.toLowerCase();
radData.toUpperCase();

替代字符串的某个地方

可以使用replace()方法将字符串中的一个子字符串替换为另一个子字符串。

它需要两个参数 - 要被替换下的字符串和要被替换上的字符串。

browserType.replace('moz','van');

事实要这样写：browserType = browserType.replace('moz','van');。

---

数组的创建

数组由方括号构成，其中包含用逗号分隔的元素列表。

假设我们想在一个数组中存储一个购物清单 

let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
shopping;

数组中的每个项目都是一个字符串，可以将任何类型的元素存储在数组中 - 字符串，数字，对象，另一个变量，甚至另一个数组。 您也可以混合和匹配项目类型 - 它们并不都是数字，字符串等

et sequence = [1, 1, 2, 3, 5, 8, 13];
let random = ['tree', 795, [0, 1, 2]];

访问与修改数组元素

可以使用括号表示法访问数组中的元素，与 检索特定字符串字符 的方法相同。

简单地为单个数组元素提供新值来修改数组中的元素。 例如：

shopping[0] = 'tahini';
shopping;
// shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles"

多维数组：数组中包含数组的话称之为多维数组

可以通过将两组方括号链接在一起来访问数组内的另一个数组。

a[2][2];

获取数组的长度

通过使用 length 属性获取数组的长度（数组中有多少项元素），这与查找字符串的长度（以字符为单位）完全相同 。

sequence.length;
// should return 7

 length 属性也有其他用途，但最常用于循环（循环遍历数组中的所有项）

let sequence = [1, 1, 2, 3, 5, 8, 13];
for (let i = 0; i < sequence.length; i++) {
  console.log(sequence[i]);
}

字符串与数组之间的转换

扩展：join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

参数

separator 可选指定一个字符串来分隔数组的每个元素。如果需要，将分隔符转换为字符串。如果缺省该值，数组元素用逗号（,）分隔。如果separator是空字符串("")，则所有元素之间都没有任何字符。

返回值

一个所有数组元素连接的字符串。如果 arr.length 为0，则返回空字符串。

描述

所有的数组元素被转换成字符串，再用一个分隔符将这些字符串连接起来。

创建一个新数组数组

let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';

我们用每个逗号分隔它：

let myArray = myData.split(',');
myArray;

最后，尝试找到新数组的长度，并从中检索一些项目：

myArray.length;
myArray[0]; // the first item in the array
myArray[1]; // the second item in the array
myArray[myArray.length-1]; // the last item in the array

使用 toString() 方法。 toString() 可以比 join() 更简单，因为它不需要一个参数，但更有限制。 使用 join() 可以指定不同的分隔符

let dogNames = ["Rocket","Flash","Bella","Slugger"];
dogNames.toString(); //Rocket,Flash,Bella,Slugger

数组的添加和删除

要在数组末尾添加或删除一个项目，我们可以使用  push() 和 pop()。

如果你需要添加一个或者多个数据的时候

myArray.push('Cardiff');
myArray;
myArray.push('Bradford', 'Brighton');
myArray;

当方法调用完成时，将返回数组的新长度。 如果要将新数组长度存储在变量中。

var newLength = myArray.push('Bristol');
myArray;
newLength;

从数组中删除最后一个元素的话直接使用 pop() 就可以。

myArray.pop();

当方法调用完成时，将返回已删除的项目。 你也可以这样做：

let removedItem = myArray.pop();
myArray;
removedItem;

unshift() 和 shift() 从功能上与 push() 和 pop() 完全相同，只是它们分别作用于数组的开始，而不是结尾。

unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。

shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]


const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1