JavaScript基础

一个页面分成三个部分，结构，样式，行为。

HTML代表了页面的结构（骨架），CSS代表了页面的样式（皮肤），JavaScript代表了页面的行为（这种行为是被动的）。主动的行为需要一个大脑，后端作为我们的大脑替我们分析执行数据，执行行为，我们和大脑之间的联系AJAX（中枢神经）。

Paste_Image.png

1.JavaScript是什么，它能做什么？

对页面进行渲染，让页面有行为。让页面动起来；

Paste_Image.png

JavaScript简史

JavaScript在设计之初只是为了做表单验证的。但是现如今，JavaScript已经成为了一门功能全面的变成语言，已经是WEB中不可或缺的一部分，如今的JavaScript是一门既简单又复杂的语言，说它简单是因为学会它，几乎只要一个小时就可以了。但是如果你想要真正掌握它，需要几年的时间。

JavaScript发展

NetScape公司在1995年着手开发一种名为liveScript的脚本语言， 为了营销目的搭上当时媒体热炒的Java顺风车，临时更名liveScript为JavaScript。其实JavaScript和Java没有一点关系。JavaScript1.0获得巨大成功。

NetScape公司趁热打铁继续发布JavaScript1.1版本，使得Web获得更高的关注，同时奠定了自己在浏览器界的霸主地位。

如果事情一直这样下去那么NetScape可能依旧使我们现代浏览器的霸主，可是在1996年互联网巨头微软公司进入浏览器领域，推出JScript，和NetScape公司开始争夺霸主地位。

Paste_Image.png

最让人担心的问题也因此出现了，当时的JavaScript和JScript是完全不同的两个版本，这门语言没有一个标准存在，业内的担心（吐槽）日益加剧。终于，多方联合共同制定了一个标准，这个标准也就是ECMAScrip，ECMAScript作为各自JavaScript实现的基础。虽然制定标准只花费了几个月，但是这几个月却对未来20年的JavaScript发展起到了不可或缺的作用。

浏览器的发展经历了无数的坎坷，各个浏览器发现这块巨大的蛋糕后谁都不愿放弃，于是激烈的厮杀开始了。

第一次浏览器大战：

原始时期，微软发布了IE浏览器，和网景netSpace navigator大打出手，最后网景失败，将公司卖给AOL，核心团队全部离职，第一回合，微软获胜，netSpace昔日霸主陨落。

Paste_Image.png

但是NetScape并没有放弃，在1998年公开源码并重新命名为 Mozilla，并重写全部程序，在2002年发布了第一个浏览器版本，firefox登场。在2004年已经开始叫板IE浏览器，iE推出IE7与之抗衡，拉开了第二次浏览器大战的序幕。

第二次浏览器大战：

第二次浏览器大战不再是IE和FF的两家之争，在现代浏览器群雄并起，同时挪威的 Opera ，几乎所有的智能手机配备的都是这个浏览器，拥有全世界最快V8引擎的Chrom,以及苹果公司的Safari，全部加入浏览器争夺。至今战争还在进行，但是对于浏览器大战我们看到的结果大多是推进了浏览器的发展，为更好的用户体验做出了非常积极的贡献。

Paste_Image.png

JavaScript的组成
ECMAScript 、BOM 、DOM；

ECMAScript:这是一个标准，它规定了语法、类型、语句、关键字、保留字、操作符、对象。（相当于法律 ）

Paste_Image.png

BOM（浏览器对象模型）：可以访问浏览器窗口的的浏览器对象模型，对浏览器窗口进行操作。

Paste_Image.png

DOM（文档对象模型）：DOM把整个页面映射为一个多层节点结构。HTML页面组成都是某种类型 的节点，这些节点又包含着不同类型的数据。

Paste_Image.png

如何写JavaScript程序？

script标签使用

<script></script> 

 src :  外联script 标签（立即调用,不能在该标签内写代码）
 
 <script>
     
      //在标签内书写内容     
 
 </script>

 <script  src='javascript.js'>// 这里面不能写任何内容</script>

一切准备就绪，让我们从Hello Word开始吧。

 document.write的使用 >>>> HelloWord    >>>  原样输出标签。
 
 注释 （一份好的代码，要有三分之二的注释）

 单行注释： // 要注释的内容。

 多行注释：/* 注释的内容写在这里 */ 

 原样输出标签内容

如果我想在页面中打印出：<strong>标签怎么办？

如果按照正常的打印方式进行打印，毫无疑问，标签会被浏览器解析。当我们要打印标签的时候要对对标签进行转义。

 &lt  代表 < 

 &gt 代表 >

 document.write('<strong>强大的</strong>');

变量（别称）

Paste_Image.png

他叫翠花，他是一只熊。
熊的底层是什么那？ 熊皮、熊掌、熊骨....， 那我们每次呼叫这只熊的时候都要叫她什么？有一张熊皮，500公斤熊肉，第三块小脚趾骨断过的，那个玩意？
不！我们叫她翠花！这就是这只熊的别称！放在计算机里，这就是把这只熊塞入了一个叫做翠花的变量里。

怎么声明一个变量那？

关键字 var 变量名 a = '<strong>强壮的</strong>'

var 声明变量的底层原理：我们所写的程序运行在内存中，当我们使用关键字var 声明一个变量的时候，计算机会从内存中留出一定储存空间，为我们存放不同类型的内容。

分清左右两侧的意义：

 JavaScript中的 ‘’=‘’ 和我们数学中的 ‘’ = ‘’不一样，在JavaScript中‘’=‘’的作用是赋值（取别称）。 
   
 var a = '<strong></strong>';  这句话分成两个部分。

 左值：在等号左侧，是变量名（同时被赋值）
 
 右值 ：在等号右侧，是存放进变量中的东西（给变量赋值）

变量的类型（因为存放进变量中的数据是放在内存中的，计算机只识别0，1，所以需要对不同类型的数据进行转义，转义的结果会导致所需空间不同，所以JavaScript中分成很多种数据类型，以便计算机储存时使用）

 数字类型(number)：1234567890

 字符类型(string)：'123456','字符串类型',.....（有单引号或者双引号）

 未定义类型(undefined)：这是一种特殊类型，当变量被声明但是没有被赋值的时候，那么该变量的类型为undefined；

 布尔值类型：true，false；

 对象类型：object；

怎样直观地区分不同的数据类型那？

 一个关键字 typeof
 
 变量使用小技巧: 声明一串变量:var a=1,b=2,c=3;（不推荐初学者使用这样的变量声明方式，因为这样的变量声明方式会导致注释不明确。）

 变量命名规范：（匈牙利命名法：驼峰命名法）

为什么要存在命名规范那？

 你的代码并不是只有你一个人看，变量既然是别称，那么别称就要有特殊的含义：
 举个栗子：翠花，我们能从这个名字中得到什么信息那？
（这个名字的主人性别应该是女的，家中父母的一个美好愿景）；

我们从这些名字中能够读出很多的含义，是因为我们的语言常识，同样，变量也有一套类似的标准，代表了各种各样的含义，这些含义如下：

Paste_Image.png

第二个规则：

开头必须为字母或者$ 或 _

想要用break作为变量可不可以那？

关键字：

这些关键字用于执行特定操作等。按照规则，关键字也是语言保留的，不能用作标识符。

Paste_Image.png

保留字：未来可能作为，标识符存在。

Paste_Image.png

alert()方法

alert()使用 。 停止浏览器加载代码。

浏览器解析代码顺序。（从上到下，从左到右）；

逻辑运算符：

 var a=1,b=2;

a+b=3 

a - b=-1 

a * b=2

a / b=0.5

 a % b=1


    var  a='1', b='2';

                      a * b=2 ;

    a / b=0.5;

    a - b=-1;

    a + b =???

不同：和我们概念里的逻辑运算符很多都是不一样的。

• = == === 这些都不一样。

避免问题出现（一眼就看出来了）：

让计算机告诉我：typeof 关键字；（数据类型的检测，意义在于确认是否能够被使用）；

编程习惯：分号，虽然不加分号在JavaScript语法上没有问题，但是建议不要省略分号，加了分号之后可以用软件压缩。良好的变成习惯（JavaScript权威指南）上的理由。

浮点数：

你的电脑做着正确的二进制浮点运算，但问题是你输入的是十进制的数，电脑以二进制运算，这两者并不是总是转化那么好的，有时候会得到正确的结果，但有时候就不那么幸运了；

alert(0.7+0.1); //输出0.7999999999999999

类型转换：alert(0.6+0.2); //输出0.8；

       var a=3,b='10',c=true;

    alert(a+b);

    alert(b+c);

    alert(a+c);

运算结果好像并不是我们想要的：应该怎么办那？当我们想做数学运算的时候，应该先对所有的数据类型进行统一（统一成数字格式），这时候我们就该用到数据类型的转换。

 数据类型转换方法：

 parseInt();

 parseFloat()；

我们尝试一下数据转换的结果：

认识NaN：他是一种特殊的Number类型结果，代表意外转换的数字，NaN和任何东西都是不等的。

关于浮点数：Math.round()四舍五入取整浮点数。

赋值操作：（JavaScript中存在非常多的简写）

  var a=1;

  a=a+1;

  a+=1;

  alert(a)

这些当然还包括 -= 、*=、/=、%=

这些赋值操作符的结果都是什么？

一个更简便的写法 a++ ; a - -；
本文作者祈澈姑娘，转载请标明作者和文章出处，创作不易。