赋予网页生命的JavaScript-初步

JS入门必备

  JS全称：javascript，是一门编程语言，也是一名前端工程师必须掌握的核心技术。主要运行环境：浏览器。

JS由三个部分组成：

  1）ECMAScript：其中ECMA指欧洲计算机制造商协会，ECMAScript是标准，仍在不停更新：ES3 ES5 ES6
ES7 ES8... 规定了JS的基本语法；
  2）BOM：brower object model 浏览器对象模型，使用js操作浏览器；
  3）DOM：document object model 文档对象模型，使用js操作文档。

JS能干的活：

  1）给web页面提供交互；
  2）开发网站；
  3）开发app；
  4）开发小程序；
  5）开发游戏；
  6）作后端——node.js；
  7）嵌入式；
  8）区块链；
  ……

JS的三种写法:

  1）行内写法：直接写在标签中，作为开始标签的属性；

  <button onclick="console.log(888)">点我</button>

  2）内部写法：写在script标签中，通常放在代码最后面，可以写多个；

  <script>
      var a = 110;
      console.log(a)
  </script>

  3）外部写法：另建一个JS文件，将JS代码写在JS文件中，通过script标签引入，需要注意的是一旦我们
引入了script标签，这个标签中就不能再写JS代码了，写了也不会执行。

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

JS中输出数据的常用方式：

  1）alert()  弹出一个警告框
  2）document.write("xxxx")  向页面中写入xxxx（淘汰了）
  3）console.log("xxx") 控制台中输出xxx

  <script>
    alert("xxxx")
    document.write("hello js")
    console.log("hello 控制台")
  </script>

JS基本语法：

  1）JS对大小写敏感，var a = 1; 与 var A = 1;是不一样的；
  2）JS中会忽略空白符，如空格、换行、tab等；
  3）语句后的分号可加可不加，建议加上；
  4）JS中的注释有两种，// 是单行注释，快捷键：ctrl+/，/* */是多行注释，快捷键：shift+alt+a；
  5）标识符与关键字：var a = 110; 其中var是关键字，a为标识符；
  ……

JS变量：

  1）JS中的变量是用于存储数据的容器，由变量名+变量值组成。
  变量名：容器的别名，对这个别名的操作就是对这个容器的操作；
  变量值：容器中存储的数据，对容器的操作就是对数据的操作。
  2）变量的声明：
  var a = 110; 变量名是a。变量值是110。一般在脚本的开头就声明好所有变量。一条语句可以声明多个变量
，中间用逗号隔开：

  var a = 1,b = 2,c = 3; //等同于下面的声明
  var a = 1；
  var b = 2；
  var c = 3；

  ①单独声明变量：一次只声明一个变量

  var name = "wangcai";  var age = 100;

  ②重复声明：JS比较灵活  允许重复声明  写代码时尽量避免

  var name = "xx";  var name = "yy";

  ③遗漏声明：声明一个变量时没有使用var、let、const等关键字

  name = "wangcai";

tip：
声明变量的关键字：var、let、const
声明变量使用let 声明常量使用const 尽量不要用var
let、const共同点：
①声明的变量不会提升；
②配合 {} 可以形成块级作用域；
③声明的变量不会挂载到GO上；
④不能重复声明；
注意const在声明常量时，必须赋值，但不能重复赋值。

  3）变量可分为全局变量和局部变量：类似于普通话和方言，分界点
是函数。写在函数外部的为全局变量，写在函数内部的为局部变量。
全局变量在函数内外都可以访问到。而局部变量只能在函数内部访问到。

JS运算符：

  1）算数运算符：用于对数字进行算数运算。
    加：+ 减：- 乘：* 除：/ 系数：% 递加：++ 递减：-- 。
  2）赋值运算符：用于给JS变量赋值。
    x = y：将y赋给x；
    x += y 将x+y赋给x；
    x -= y 将x-y赋给x；    
    x *= y 将x*y赋给x；
    x /= y 将x/y赋给x；
    x %= y 将x%y赋给x；
  3）比较运算符：
    ==：等于；
    ===：等值且等型；
    ！=：不相等；
    ！==：值不等或者型不等；
    >：大于；
    <：小于；
    >=：大于或等于；
    <=：小于或等于；
    ？：三元运算符 var character = （age<18）？（true）"太年轻"：   （false）"够成熟"；
  4）逻辑运算符：
    &&：与；||：或；！：非。
  5）类型运算符：
    typeof：返回变量的类型；

JS数据类型：

  为了更合理地利用内存空间，需要针对不同类型的数据分配不同的内存空间。
  1）基本数据类型：
  	①数值（number）：JS中只有一种数值类型，包括整数和小数；number可以通过不同进制表示，123十进制
 、0123八进制、0x123十六进制，不要对小数进行运算，对于超大或者超小的数值可以用科学计数法来表示:
123e5（12300000）、123e-5（0.00123） NAN不是数字。
  	②字符串（string）：需要用 "" '' 包起来，注意同一引号不要嵌套使用（可以外单内双或外双内单），
 可以通过下标来获取某个字符，默认从0开始；
  	③布尔值（boolean）：只有true和false两个值，注意大小写，true和TRUE是不一样的；
  	④undefiend：未定义的变量，当一个变量没有赋值时，它的值就是undefiend；
  	⑤null：空值。
  2）引用数据类型：
    对象（object）：函数（function）和数组（array）。
    typeof 运算符可以查看一个数据的数据类型。

JS中数据类型转化：

  1）隐式类型转化：无声无息就自己进行了类型转化，如123 + abc
最后的值是字符串"123abc"。
  2） 强制类型转化：需要我们手动地书写代码去转化类型。
  Number    试图把一个非number的数据转化成number；
  String    试图把一个非string的数据转化成string；
  Boolean   试图把一个非boolean的数据转化成boolean；
  parseInt  试图把一个数据转成整数；
  parseFloat 试图把一个数据转成小数（浮点数）；

tip：
任何的编程语言中，只有三种结构：
顺序结构 由上至下执行代码
选择结构 条件语句 达到某个条件后，再去执行代码
循环结构 循环语句 把某片代码执行多次
条件语句：在JS中提供了四类条件语句：
if语句
if...else 语句
if...else if...else 语句
switch语句
循环语句：
for 循环
while循环
do..while循环
跳转语句：
break：中断，停止
在条件语句中，switch中break也表示终止后面的case。
在循环语句中，表示直接跳出for循环。或理解与终止for循环。
continue：继续
在循环语句中，结束本次循环，继续后面的循环。
return：一般在函数中使用。

函数：函数在JS中是一等公民。

1）定义：
   数学中函数的定义：函数的近代定义是给定一个数集A，假设其中的元素为x，对A   中的元素x施加对应法则
f，记作f（x），得到另一数集B，假设B中的元素为y，   则y与x之间的等量关系可以用y=f（x）表示，函数概
念含有三个要素：定义域   A、值域C和对应法则f。
  编程语言中函数的定义：函数在JS中引用数据类型，本质是一个对象，给函数f传   递一个数据，函数f返回一
个数据。 
2）前面已接触过的函数有：
  alert("xxx");  alert函数在JS内部已封装好，作为开发者直接调用就OK了。
  parseInt(3.14);   返回3， parseInt函数也是封装好的，直接调用。
  parseFloat("3.14abc");  返回3.14， parseFloat函数也是封装好的，直接调用。
  console.log()  log("xxx")是函数
  ...     
  在JS中本身已经封装好了很多的函数，可直接调用。
3）函数的作用：
  ①代码重用
  ②组织代码，把某片代码当作是功能块
自己封装函数：
  ①函数就是一片代码段；
  ②引用数据类型：本质是对象object，其中有两个比较特殊，一个是函数数据类型function，一个是数组数
据类型array；
  ③函数也是一种数据类型，也叫函数数据类型；
  ④自己封装函数有两种方式，一种是函数声明，一种是函数表达式；
  ⑤使用typeof查看一个数据是否是函数类型；
  ⑥函数数据类型的对应的值也是有无数个。
4）函数声明：
   声明语句：声明变量  声明函数  
   function 可以声明函数：

    function distance(a,b){} 

  distance表示函数名，a,b用来接收外面传递数据  a,b叫形参。
5）函数参数：函数调用的过程就是实参向形参赋值的过程。
  形式参数，简称形参，定义函数时()里面的写的参数。如下：
    function f(a, b){};
  实际参数：简称实参，在调用函数时()里面的写的参数。如下：
    f(1, 2);
函数调用：
  只声明一个函数，没有调用，相当于没有写，函数必须调用才能执行函数体中的代码。函数名+() 如：f();
6）函数的返回值：
  return作用：
  1）终止程序  在return 语句后面的写的代码就不再执行了
  2）把reutrn后面的数据返回  返回到函数调用处  在哪个地方调用了函数，那么返回值就返回到什么地方，
如果函数没有返回值，默认返回undefined。函数内部只能有一个reutrn语句，在第1个ruturn语句后面的代
码不会执行。
7）函数表达式:
  var f = function(){} 
  把一个函数类型的数据赋值给一个变量，整体就是一个函数表达式；
  函数表达式不会提升。

JS代码段：

  一个script标签就是一个代码段。JS代码在执行时，是一个代码段一个代码段地执行。

JS代码执行：

  JS代码在执行时可以分为两个过程：预编译阶段和代码执行阶段。
  1）预编译：进行变量和函数的提升；需要注意的是变量的提升只提升变量名，不会提升变量值，而函数的提升
则是整个函数声明以及函数定义；
  2）代码执行：由上至下一行一行的执行。

代码执行过程中的一些概念：

ECStack  EC(G)  VO  EC(f) AO  GO

  ECStack :执行上下文栈;
  EC(G) :全局执行上下文 存储全局的加var  加function的数据存储在VO中;
  VO :变量对象   存储的全局的加var 或 加function;

  EC(f) :函数执行上下文 存储局部的加var 或 加funciton的局部数据;
  AO :活动对象  存储局部的加var 或 加function的局部数据;

  GO: 全局对象：默认情况下，里面就存储了很多东西。
  全局的数据，加Var的全局数据，加functon的全局数据，不加var的变量都会存储到GO中。