前端教程(11)js入门教程-js基本知识
前端教程(11)js入门教程-js基本知识
一 初识js
js是什么
ECMAScript和JavaScript的关系
1996年11月，JavaScript的创造者–Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。
该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。
因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。
ECMAScript的历史
| 年份 | 名称 | 描述 |
| 1997 | ECMAScript 1 | 第一个版本 |
| 1998 | ECMAScript 2 | 版本变更 |
| 1999 | ECMAScript 3 |
添加正则表达式 添加try/catch |
| ECMAScript 4 | 没有发布 | |
| 2009 | ECMAScript 5 |
添加”strict mode”严格模式 添加JSON支持 |
| 2011 | ECMAScript 5.1 | 版本变更 |
| 2015 | ECMAScript 6 | 添加类和模块 |
| 2016 | ECMAScript 7 |
增加指数运算符（**） 增加Array.prototype.includes |
注：ES6就是指ECMAScript 6。
尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
- 核心（ECMAScript）
- 文档对象模型（DOM） Document object model (整合js，css，html)
- 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
简单地说，ECMAScript 描述了JavaScript语言本身的相关内容。
js就是JavaScript简称，JavaScript 是属于网络的脚本语言！
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
JavaScript 是世界上最流行的编程语言之一。
这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备
- #JavaScript 是脚本语言
- #JavaScript 是一种轻量级的编程语言。
- #JavaScript 是可插入 HTML 页面的编程代码。
- #JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
- #JavaScript 很容易学习。
总计一句话，js是编程语言，不同的是它用于为网页添加动态效果，就想Ios用于apple的应用，Java用于安卓设备的应用一样
js用来做什么
相信你肯定知道，js就是给网页添加动态效果的
js怎么使用，js代码在那里写
其实很简单，而且windows平台，mac os 和linux 都是一样的，打开chrome浏览器，进入百度（任何一个网站都可以），右击空白处，点击检查，然后代码检查模式，点击Console ，再点击clear Console，就可以开始写js代码了，请看下图指示：
二 开始写js代码
JavaScript引入方式
1 Script标签内写代码
- <script>
- // 在这里写你的JS代码
- </script>
2 引入额外的JS文件
- <script src="myscript.js"></script>
JavaScript语言规范
注释（注释是代码之母）
- // 这是单行注释
- /*
- 这是
- 多行注释
- */
结束符
JavaScript中的语句要以分号（;）为结束符。
JavaScript语言基础
变量声明
- #JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
- #声明变量使用 var 变量名; 的格式来进行声明
- var name = "Albert";
- var age = 18;
注意：
变量名是区分大小写的。
推荐使用驼峰式命名规则。
保留字不能用做变量名。
补充：
ES6新增了let命令，用于声明变量。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。例如：for循环的计数器就很适合使用let命令。
- // 等下说
- for (let i=0;i<arr.length;i++){...}
ES6新增const用来声明常量。一旦声明，其值就不能改变。
- const PI = 3.1415;
- PI // 3.1415
- PI = 3
- // TypeError: "PI" is read-only 真理是永恒不变的，这是我们的祖先祖冲之最早计算出来的最精确的值3.14150265753
再次补充，有些单词不能做变量，因为js这门语言已经使用
- abstract
- boolean
- byte
- char
- class
- const
- debugger
- double
- enum
- export
- extends
- final
- float
- goto
- implements
- import
- int
- interface
- long
- native
- package
- private
- protected
- public
- short
- static
- super
- synchronized
- throws
- transient
- volatile
- 保留字列表
保留字都在这里
JavaScript数据类型
JavaScript拥有动态类型
- var x; // 此时x是undefined
- var x = 1; // 此时x是数字
- var x = "Alex" // 此时x是字符串
数值(Number)
JavaScript不区分整型和浮点型，就只有一种数字类型。
- var a = 12.34;
- var b = 20;
- var c = 123e5; // 12300000
- var d = 123e-5; // 0.00123
还有一种NaN，表示不是一个数字（Not a Number）。
常用方法：
- parseInt("123") // 返回123
- parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
- parseFloat("123.456") // 返回123.456
字符串(String)
- var a = "Hello"
- var b = "world;
- var c = a + b;
- console.log(c); // console.log() 相当于Python中的print 得到Helloworld
常用方法：
| 方法 | 说明 |
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n) | 返回第n个字符 |
| .concat(value, …) | 拼接 |
| .indexOf(substring, start) | 子序列位置 |
| .substring(from, to) | 根据索引获取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split(delimiter, limit) | 分割 |
拼接字符串一般使用“+”
- string.slice(start, stop)和string.substring(start, stop)：
- 两者的相同点：
- 如果start等于end，返回空字符串
- 如果stop参数省略，则取到字符串末
- 如果某个参数超过string的长度，这个参数会被替换为string的长度
- substirng()的特点：
- 如果 start > stop ，start和stop将被交换
- 如果参数是负数或者不是数字，将会被0替换
- silce()的特点：
- 如果 start > stop 不会交换两者
- 如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
- 如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
slice和substring的区别
补充：
ES6中引入了模板字符串。模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
- // 普通字符串
- `这是普通字符串！`
- // 多行文本
- `这是多行的
- 文本`
- // 字符串中嵌入变量
- var name = "q1mi", time = "today";
- `Hello ${name}, how are you ${time}?`
注意：
如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义。
JSHint启用ES6语法支持:/* jshint esversion: 6 */
布尔值(Boolean)
区别于Python，true和false都是小写。
- var a = true;
- var b = false;
“”(空字符串)、0、null、undefined、NaN都是false。
null和undefined
- null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
- undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。
还不明白，上图吧！
js对象(Object)
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…此外，JavaScript 允许自定义对象。
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
数组
数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。
- var a = [123, "ABC"];
- console.log(a[1]); // 输出"ABC"
常用方法：
| 方法 | 说明 |
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start, end) | 切片 |
| .reverse() | 反转 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(val, …) | 连接数组 |
| .sort() | 排序 |
关于sort()需要注意：
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
上代码：
- function sortNumber(a,b){
- return a - b
- }
- var arr1 = [11, 100, 22, 55, 33, 44]
- arr1.sort(sortNumber) // [11, 22, 33, 44, 55, 100]
关于遍历数组中的元素，可以使用下面的方式：
- var a = [10, 20, 30, 40];
- for (var i=0;i<a.length;i++) {
- console.log(i);
- }
补充：
ES6新引入了一种新的原始数据类型（Symbol），表示独一无二的值。它是JavaScript语言的第7种数据类型。
类型查询
- typeof "abc" // "string"
- typeof null // "object"
- typeof true // "boolean"
- typeof 123 // "number"
typeof是一个一元运算符（就像++，–，！，- 等一元运算符），不是一个函数，也不是一个语句。
对变量或值调用 typeof 运算符将返回下列值之一：
- undefined – 如果变量是 Undefined 类型的
- boolean – 如果变量是 Boolean 类型的
- number – 如果变量是 Number 类型的
- string – 如果变量是 String 类型的
- object – 如果变量是一种引用类型或 Null 类型的
运算符
算数运算符
- + - * / % ++ -- 加减乘除 取余数 自增1 自减1
比较运算符
- > >= < <= != == === !==
注意
- 1 == “1” // true 弱等于
- 1 === "1" // false 强等于 做逻辑运算时一般使用强等于
逻辑运算符
赋值运算符