js（一）---初识js

前面将近一个星期复习了，html、css的主要内容，那么接下来的三剑客最后一个内容就是js，那么就今天就学习一下js吧，js的内容有很多，它也是基础，所以说学好js对我们以后的学习有很大的帮助的。那么就慢慢介绍吧，所以就从一点一滴把这个高楼大厦给建起来吧。

• Mosaic是互联网历史上第一个普遍使用和能够显示图片的网页浏览器，1993年问世。
• JavaScript作为Netscape Navigator浏览器的一部分首次出现在1996年。它最初的设计目标是改善网页的用户体验。
• 起初JavaScript被命名为，LiveScript，后因和Sun公司合作，因市场宣传需要改名JavaScript（可能当时为了宣传Java，毕竟当时Java比较火）。后来Sun公司被Oracle收购，JavaScript版权归Oracle所有。

浏览器组成

之前讲过，浏览器包括shell（外壳部分）和内核部分，前面介绍了主流浏览器的内核是什么。但是内核有好多部分组成：

• 渲染引擎
  
  内核里的渲染引擎主要作用于html和css部分，定义了语法规则、渲染规则以及渲染路径和速度等等。

• js引擎
  

• 2001年发布ie6，首次实现对js引擎的优化。

• 2008年Google发布最新浏览器Chrome，它是采用优化后的javascript引擎，引擎代号V8，因能把js代码直接转化为机械码来执行，进而以速度快而闻名。

• 后Firefox也推出了具备强大功能的js引擎
  Firefox3.5 TraceMonkey（对频繁执行的代码做了路径优化）

• 其它模块
  

• 绘制图形，音频之类的等。

js的语言特点

• 解释性语言
  
  
  • javascript不需要编译，只需要嵌入到html代码中，由浏览器逐行加载解释执行。

• 单线程
  

  • 之前讲过单线程是什么，这就是js的语言特点，一定要记住它是单线程，同一时间只能做一件事哦。

• 弱类型
  

  • 语法和java,C语言类似，变量不需要声明和指定类型即可使用，是一种弱类型语言。
• 动态性
  
  
  • 使用javascript可以在前端实现一些和服务器完全没有联系的效果，javascript采用事件驱动的方式进行，html页面的相关控件的相关事件在处触发的时候会自动执行响应的脚本或者函数。

• 语言相对来说比较安全
  

  • 仅由浏览器执行，不允许javascript访问本地硬盘，以及操作服务器上的数据，只用来显示浏览器的网页效果和实时交互。

  js执行队列

  • js中有一个重要的概念就是执行队列。
    js只有一个主线程，它是单线程的。
    其他模块把任务分解成好多的小模块，这些小模块排成一个队列，队列最前面的进入主线程执行，执行完之后第二个进入主线程执行，这个队列就是js的执行队列。有点像操作系统里面的轮转时间片。

js的三大部分

---

• ENMAscript是符合ECMA标准的JavaScript。简单的来说，十个就js一个规则，不能随意乱写了。
• DOM是Document Object Model文档对象模型，是吧页面和js联系起来的中枢。可以操作页面的代码，可以操作html和css部分。DOM是非常非常重要的部分，接下来一段时间都是来介绍它的。
• BOM是Browser Object Model浏览器对象模型，操作浏览器shell的。因为每一个浏览器厂家的不同，导致我们在每一个浏览器操作BOM都不一样，因此这里大概了解一下就可以了。

---

如何引入js代码

• 页面内嵌script标签

  • 我们可以在标签里面或者标签里面写一个，这个标签有一个type属性，如果要写的话就写完整的”text/javascript”，要不然就不写，浏览器会默认是这个type值，如果写还写错的话浏览器就会报错。

• 引入外部js文件

  • script标签除了可以在里面直接写代码之外，还可以写一个src属性来引入外部的js文件。
    有一点值得注意的是，一个script标签只能在里面写代码或者引入外部js文件，不能既引入又在里面写代码。
    一个script标签就是一个代码块，一个页面可以引入多个代码块。
    为了符合传统页面的web标准（w3c标准的一项）：结构、样式、行为相分离，我们一般采用第二种引入外部js文件的方法。我们的html、css、js最好放在专门的文件里面，然后在html里面引入外部文件。
    浏览器在加载我们的html文件的时候，当遇到link标签的时候会异步加载，但是到script标签的时候并不会异步加载，而是会完全不加载后面的内容，而是去下载这个js文件，并且执行js文件里面的内容，之后下载并且执行完全部的js内容之后，浏览器才会继续执行html后面的代码。
    这样就导致了一个问题，如果js是操作DOM的话，我们页面的DOM还没有出来，js就操作，就会出现错误，而且写在前面如果js文件比较大的话，就会导致页面一直没有内容。后面会介绍到加载时间线，你就知道会是怎么回事了。

js基本语法
js是一种弱数据类型的语言，任何类型的变量都用关键字var来声明。

  var num = 123;  var arr = [1,2,3];   var string1 = "123";

定义一些变量，当然定义变量的不仅仅有var，es6中还会再讲的。let、const更方便，有特定的含义。

var num1 = 1;var num2 = 2;var num3 = 3;//为了了减少使用，也可以这样写。var num1 = 1,    num2 = 2,    num3 = 3;

变量命名规则

1.以英文字母、_、$符号开头。

2.变量名可以包括数字。

3.不可以使用系统自带的关键字、保留字作为变量名。

关键字是被系统定义了语法的单词，像var、window、if、else这一类都算作关键字。（关键字在编辑器里面是可以变色的）

保留字是为以后升级可能会变成关键字做的保留，像java、int、enum、abstract、short、boolean等等都是保留字。

值的类型

• 不可改变的原始值
  
  • 主要有：Number、String、Boolean、undefined、null
    这些数据一般叫做栈数据。

type of（null）//object

不同对象在底层都表示为二进制，在js中二进制前三位都为0的话会被判断为object类型，null的二进制表示是全为0，所以金返回“object”。

• 引用值
  
  • 主要有：数组array、对象object、函数function
    这些数据一般叫做堆数据。

那么这两种数据类型的区别在哪里呢？

下面的例子来感受一下：

var num = 123,    num1 = num;    num = 234;    console.log(num); //234    console.log(num1); //123

num的改变没有影响num1的变化，它两个是没有联系的，这就是栈数据。

var arr = [1, 2, 3],    arr1 = arr;    arr.push(4);    arr.push(5);    console.log(arr); //1,2,3,4,5    console.log(arr1); //1,2,3,4,5

这就跟上面的有些不同了，按道理改变arr应该不会改变arr1的值，但结果arr1的值发生了改变，这就是堆数据。

这就是它们的区别：
因为原始值是存放在栈里面的，而引用值是存放在堆里面的，原始值的赋值是把值的内容赋值一份给另一个变量，但是引用值却不是这样。引用值的变量名存在栈里面，但是值却是存在堆里面的，栈里面的变量名只是指向了一个堆空间，这个堆空间存的是我们一开始赋的值，当我们写arr1 = arr的时候，其实是把arr1指向了和arr指向的同一个的堆空间，这样当我们改变arr的内容的时候，其实就是改变了这个堆空间的内容，自然同样指向这个堆空间的arr1的值也随着改变了。

栈内存一点被赋值了，就不可以改变了，我们即使给num重新赋值为234，也是在栈里面重新开辟了一块空间赋值234，然后把num指向了这个空间，前面那个存放123的空间还存在，只是没有指针指向这里罢了。
第二点区别则是：原始值不可以被改变，引用值可以被改变。

var str = "12345";    str.length = 2;    console.log(str)//12345var arr = [1,2,3,4,5];    arr.length = 2;    console.log(arr);//12

JavaScript语句基本规则

---

1.语句后面要用英文分号结束 “;”

2.js语法错误会引发后面的代码终止，但不会影响其他的js代码块。这里仅限于逻辑错误，低级的语法错误会导致代码全都执行不了。

3.书写要规范，=、+、-、/、%两边都要留有空格（这样写是为了方便查错，看着这比较舒服）。

JavaScript运算符

---

1. “+”运算符

• 数学上的相加功能

• 拼接字符串
字符串和任何数据相加都会变成字符串

var a = 1 + 2 + "3";console.log(a);//字符串的123

“-“运算符：

• 数学上的相减功能

“*” 运算符：

• 数学上的相乘功能

/ 运算符：

• 数学上的相除功能

% 运算符：

• 数学上的取余功能

= 运算符：

• 赋值运算符，优先级最低

== 运算符：

• 比较运算符中的等于，不过两个等号的等于属于不严格等于，严格等于是“===”三个等号。

++ 运算符：

• 自加一运算，当写在变量前面的时候是先加1再执行运算，写在变量后面的时候是先运算再加1。

    var num = 1;    console.log(num++); // 1    console.log(num); //2    console.log(++num); // 3

相类似的运算还有 — ，用法和 ++ 一样，不过是减法操作。

+= 运算符：

var num = num + 10;var num += 10;

比较运算符：

比较运算符有 > 、< 、>= 、<= 、!= 、== 不严格等于、===严格等于

这里介绍一下不严格等于和严格等于的区别

当我们比较两个数据的时候，是先转化成同一个类型的数据之后再进行比较的。不严格等于就是说这两个数据进行了转化之后，他们的值相同，则整两个数据相等。而严格等于则是两个数据不进行数据转化也相等。

NaN == NaN // falseundefined == undefined // truevar demo = !!"abc"; // true

逻辑运算符：

逻辑运算符主要是 && 和 || —— 与和或

&&的作用是只有是true的时候，才会继续往后执行，一旦第一个表达式就错了，后面的第二个表达式根本不执行。如果表达式的返回结果都是true的话，那么这里&&的返回结果是最后一个正确的表达式的结果。

||的作用是只要有一个表达式是true的，那么就结束，后面的就不走了，并且返回的结果是这个正确的表达式的结果，如果都是false的表达式的话，那么返回结果就是false。

一般来说，||有当做赋初值的作用，有时候我们希望函数参数有一个初始值，再不使用ECMA6的语法的情况下，最好的做法就是利用或语句。

function demo (example) {      var example = example || 100;}

默认为false：undefined、null、””、NaN、0、false。
数据中所有的值都可以被转换成true或false，只要记住几个十false其它的就全是true。