JS从入门到精通

1.什么是JS

JS：JavaScript 简称为JS，它是一门编程语言。
js与html和css对比
相同点： html,css,js代码都可以在浏览器中运行，html，css，js他们的运行环境是浏览器
不同点： html，css不叫编程语言，js是编程语言，js的运行环境不只有浏览器，其他环境也支持。

不能绝对地说，哪种语言比较好，只有合适的场景使用合适的语言。

另外 js和Java没有一点关系。就像老婆饼里没有老婆，夫妻肺片里面没有夫妻。哈哈哈！！

js能做什么？

• 开发网站
• 开发app
• 小程序
• 游戏开发 小程序游戏 网页游戏
• 写后端 node.js
• 嵌入式 c
• 区块链
• …

---

2.JS三种写法

1.内部写法 把js写在html文件中，通常写在script标签中
2.外部写法 把js卸载js文件中，然后再html文件中通过script标签引入，写项目时通常会把JS写在一个单独的文件中
3.行内写法 把js代码写在开始标签中，当成开始标签的属性。

---

3.JS的基本语法

基本语法

1. JS是区分大小写的 var a=1；var A =2；
2. 忽略空白符（空格 换行 tab）
3. 语句分号可加可不加
4. 注释 单行注释// 多行注释/* */
5. 标识符 和关键字 如：var a=110；var是关键字，a是变量名标识符

---

4.JS中的变量

变量的分类：
（1）全局变量
（2）局部变量
分界点：函数，只要把变量写在函数里面就是局部变量，只要写在函数外面就是局部变量。
全局变量和局部变量的特点

• 全局变量只要在函数内部都能访问到
• 局部变量只能在函数内部访问到

---

5.JS中的数据类型

为什么需要数据类型？
  为了更加合理使用内存空间，基本上所有的编程语言中都提出数据类型的概念，研究针对不同的数据，分配不同的空间。

JS中的数据类型
基本数据类型

number 数字
string 字符串 “” ,’'均支持,JS中不分字符和字符串，都叫字符串
boolean 布尔类型
undefined 没有值
null 没有值

引用数据类型

object 对象
array 数组
function 函数，在JS中也是一种数据类型

 
（1）JS中的number数据类型

1）number是一个数据类型，这个数据类型对应的值有无数个。
2）在JS中number数据类型是不分整数和小数 都是number
3）可以通过typeof查看一个变量值的数据类型
4）最大值 和 最小值
5）number可以通过不同进制显示 进制 10进制 2进制 16进制 8进制
6）NaN Not a Number 不是一个数字
7）JS中不要对小数运算 要运算先转成整数 得到的结果往往不对

<script>
var a=110;
var b=3.14;
console.log(a);  //输出110；
console.log(typeof a);   //输出number
console.log(typeof b);   //输出number
console.log(Number.MAX_VALUE)
 console.log(Number.MIN_VALUE)
</script>

（2）JS中的string数据类型

1）在JS中 使用‘’ “”把字符串包起来 不包 JS会给它当成变量
2）单引号不要嵌套单引号 双引号不要嵌套双引号 外单内双 外双内单
3）string数据类型对应的数据有无数个

SyntaxError表示语法错误

（3）JS中的boolean数据类型

1）boolean数据类型对应的值就两个 true false
2）true 和 True 不一样的 JS是区分大小写的

 <script>
var b = true;
console.log(b);  //输出true
console.log(typeof b);   //输出boolean
</script>

（4）JS中的undefined数据类型

1）undefiend是一个数据类型，这种数据类型对应的值是undefiend
2）什么时候会出现undeined?
答：一个变量没有赋值 它的值是undefiend 这个值的类型是undefiend

<script>
	var a;
    console.log(a);  // undefined 值
    console.log(typeof a);  // undefined 是类型
</script>

---

6. JS中的数据类型转化

数据类型转化：
  隐式类型转化：静悄悄地，不知不觉地就进行了类型转化
  强制类型转化：写代码进行转化
**前提:**在JS中，运算符两侧需要保存数据类型一致，如果不一致，JS解释器会帮你把一个数据类型转成另一个数据类型。

隐式类型转换
+是双元运算符 运算符你要保证两侧操作数的数据类型要一致

<script>
   var res = 123 + "abc";  // 123隐式转化成字符串
   console.log(res);  // 123abc
   console.log(typeof res);  // string
</script>
<script>
   var isMerry = true;
   if(isMerry){  // 如果if后面的（）里面是true 执行第一个{}里面的代码
        console.log("结婚了....")
   }else{
       console.log("没有结婚....")
   }
</script>
<script>
   var isLove = "";
   // if后面的小（）里面要么放true 要么放false
   // if后面小（）里面放一个非布尔类型的值，也会进行隐式类型转化
   if(isLove){
       console.log("是真爱");
   }else{
       console.log("是骗子");
   }
   </script>

强制类型转化

<script>
   console.log(parseInt(3.14)); // 3  把小数转成整数
   console.log(parseInt("3.14abc")); //3   尝试把小数或非数字转成整数
   console.log(parseFloat(3)) //3
   console.log(parseFloat("3.14abc"))  //3.14
   console.log(Number("abc123"))  // NaN
   console.log(Number("123abc"))  // NaN
   console.log(Number("123"))  // 123
   console.log(String(123456))  // 123456
   </script>

---

7. JS代码在执行时分两个阶段

JS代码在执行时分两个阶段：
  1）预编译
  2）代码执行
每一个阶段做的事情是不一样的。

预编译： 提升
把加var的变量进行提升 变量声明会提升 变量的赋值是不会提升
提升到了代码段最前面
把使用function声明的函数进行提升 提升的是整个函数声明
代码的执行：
一行一行执行

<!--<script>
    console.log(a);  // 输出und
    console.log(b);  // 输出und
    for (var a=1; a<2; a++){
        for(var b=1; b<2; b++){
            }
    }
    console.log(a); // 输出2
    console.log(b); // 输出2
</script>

8. 初步了解执行上下文（ Execute Context）

执行上下文（ Execute Context）简称：EC
***EC的作用：给代码提供数据
代码分两类：
*** 全局代码 函数外面的代码叫全局代码
函数代码 一个函数就是一个局部代码

全局执行上下文：
全局代码在执行时时，就会产生全局的EC。 EG(G)
局部执行上下文：
函数代码在执行时，就会产生局部的EC。调用一个函数就产生一个EC，调用100个函数，就产生100个EC。

EC栈：
栈：杯子
每产生一个EC就会放到杯子中，说白了，就是杯子中放鸡蛋。
栈：先放进去的后出来

---

9. 加var的变量和没有加var的变量的区别

1）在全局代码中，加var会提升，没有var的不会提升。

<script>
    console.log(a);
    a = 110;  // a is not defined
</script>

2）不管加没加var的全局变量，都会作为window的属性

<script>
    var a = 1;
    b = 2;
    console.log(window.a)   //1
    console.log(window.b)   //2
</script>

3）没有加var的变量，只能作为全局变量，只要是全局变量，肯定是window的属性

<script>
  function f() {
      a = 666;
  }
  f()
  console.log(window.a)   //666
  </script>

4）加var的局部变量，不会作为window的属性

<script>
    function f() {
        var a = 666;
    }
    f()
    console.log(a)
    console.log(window.a) // undefined(访问一个对象上不存在的属性，结果就是und)
    </script>

---

10. 做几个小题（掌握EC（G），VO，GO）

1.

<script>
console.log(a);  // und
  if("a" in window){
      // 此处的a是全局变量  加var了 放到VO中一份 还会放到GO中的一份
      var a = 110;
  }
  console.log(a); // 110
  </script>

2.

<script>
console.log(a);  // und
  if("a" in window){
      // 此处的a是全局变量  加var了 放到VO中一份 还会放到GO中的一份
      var a = 110;
  }
  console.log(a); // 110
  </script>

3.

<script>
// 对象  是集合 放一堆的数据  变量里放一个数据
  var obj = {
      name:"wangcai",
      age:100
  }
  console.log("name" in obj); // in是一个运算符 用来判断一个对象有没有一个属性
  </script>

4.

<script>
console.log(a,b); // und und
  if(true){
      // 看到var就提升
      var a = 1;
  }else{
      // 看到var就提升
      var b = 2;
  }
  console.log(a,b); // 1 und
  </script>

5.

<script>
console.log(a);  // a is not defined
  function f() {
      console.log(a); // und
      // 只要加var  变量肯定会提升
      // 加var的局部变量只会提升到函数内部最前面的
      var a = 1;
      console.log(a); // 1
}
f();
  </script>

6.

<script>
var n = 100;
  console.log(n);  // 100
  console.log(window.n);  // 100
  m = 200;  // 只会放到GO中
  console.log(m);  // 从GO拿  写全 window.m  window省略了
  console.log(x);  // GO和VO中都没有*/
  </script>

11. 注意（零碎的知识点）

1. 内存分堆内存和栈内存。在JS中，基本数据类型存储在栈中 引用数据类型存储在堆中
2. 函数调用的过程就是实参向形参赋值的过程
3. 一个函数如果没有返回值，默认返回undefiend
**4.**函数定义 f叫函数名 ()是函数特有的标识 {} 叫函数体
// 定义 = 声明 + 赋值