javascript教程系列-1.JavaScript基础

欢迎加入前端交流群来：749539640

转载请标明出处！

 

JavaScript概述

 

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

     

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

 

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

 

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

 

     

 

http://www.zcool.com.cn/

 

    JavaScript简史

 

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

 

     JavaScript发展：

 

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

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

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

 

 

 

 

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

 

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

 

     第一次浏览器大战：

 

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

 

 

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

 

    第二次浏览器大战：

     

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

 

    

     

    JavaScript的组成

 

     ECMAScript 、BOM 、DOM；

 

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

 

 

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

          

     

 

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

 

     

    如何写JavaScript程序？

 

    script标签使用

 

    <script></script> 
 
     src :  外联script 标签（立即调用,不能在该标签内写代码）
     
     <script>
         
          //在标签内书写内容     
     
     </script>
 
     <script  src='javascript.js'>// 这里面不能写任何内容</script>

 

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

     

     document.write的使用 >>>> HelloWord    >>>  原样输出标签。

     

     注释 （一份好的代码，要有三分之二的注释）

 

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

 

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

 

    

     原样输出标签内容

          

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

     

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

      

     &lt  代表 < 

 

     &gt 代表 >

 

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

 

    变量（别称）

     

     

 

     他叫翠花，他是一只熊。

 

     熊的底层是什么那？ 熊皮、熊掌、熊骨....，  那我们每次呼叫这只熊的时候都要叫她什么？有一张熊皮，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;（不推荐初学者使用这样的变量声明方式，因为这样的变量声明方式会导致注释不明确。）

 

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

 

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

 

     你的代码并不是只有你一个人看，变量既然是别称，那么别称就要有特殊的含义：

 

     举个栗子：翠花，我们能从这个名字中得到什么信息那？（这个名字的主人性别应该是女的，家中父母的一个美好愿景）；

     

     那么钢蛋那？

 

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

     

 

     

     

     第二个规则：

 

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

 

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

 

     关键字：

 

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

 

break	do	instanceof	typeof
case	else	new	var
catch	finally	return	void
continue	for	switch	while
debugger*	function	this	with
default	if	throw	delete
in	try

 

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

 

abstract	enum	int	short
boolean	export	interface	static
byte	extends	long	super
char	final	native	synchronized
class	float	package	throws
const	goto	private	transient
debugger	implements	protected	volatile
double	import	public

 

 

     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=2;

 

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 - -；

 

++a  和 - -a 有什么不同；（思考） 

 

var a = 5 + 4;  

var b = a * 2; 

var c = b / 4;

var d = b - c;

var e = -d; 

var f = e % 4;

 

f的结果是什么？

 

var g = 18.4; 

var h = g % 4;

 

h的结果是什么？

 

var i=3; 

var j=i++;  

j的结果是什么？