JavaScript学习

JavaScript的发展史

JavaScript是有Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。最初Netscape将其命名为LiveScript，后来因为Netscape公司与Sun合作，Netscape管理层希望它外观上看起来像Java，因此改名为JavaScript。JavaScript最初受java的启发而开始设计的，因此语法上有类似之处，一些名称与命名规范也是借自java。但JavaScript的主要设计原则源自self和scheme。为了取得“技术优势“，微软推出了Jscript来迎战JavaScript的脚本语言。除了二者以外，当时的脚本语言还有CEnvi的ScriptEase。1997年，在ECMA(欧洲计算机制造商协会)的调解下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262，即ECMAScript。

JavaScript的特性

JavaScript脚本语言具有以下特点:

 

1. 脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
2. 基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
3. 简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
4. 动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
5. 跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

 

不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。

 

而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖JavaScript在客户端进行支持。随着引擎如V8和框架如Node.js的发展，及其事件驱动及异步IO等特性，JavaScript逐渐被用来编写服务器端程序。

 

JavaScript的基础语法

使用场景与安装配置

JS（JavaScript的缩写）的使用场景（web网络开发）

1. 客户端编程：编写在HTML中/js脚本文件中，运行在浏览器中【脚本】

主要实现：网页特效，数据验证，数据交互，读写HTML元素

1. 服务端编程：编写在服务器中的js脚本文件中，运行在Node平台上

主要实现：检测访客的浏览器信息，以及服务端软件的功能流程处理

             

              安装与配置

1. 安装：客户端编程，不需要安装【服务端开发，需要安装Node.js环境】
2. 配置：客户端编程无需配置【服务端开发需要配置开发环境】
3. 开发环境：客户端编程的环境就是浏览器，前提是浏览器支持js【大多数的浏览器引擎对象中包含了js解释器】

服务端就需要在Node.js中运行

JS代码的位置（客户端）

参考CSS的代码位置，可以把JS代码位置分为三种

1. 外部脚本：把js代码写在一个后缀名为.js的文件中，通过script标签引入HTML中

例如：

1. 网页内嵌：就是把JS代码写在script标签中
2. 标签内嵌：一般是事件属。例如：onclick 鼠标单击

JS中的三种对话框

1. 警告信息对话框：alert（）

代码	按钮
效果截图

1. 信息确认对话框:confirm()

代码	按钮
效果截图

1. 交互对话框：prompt（）

代码	按钮
效果截图

 

 

数据类型，变量，运算符

变量

变量是储存信息的容器

JS在声明变量是通过使用var关键词声明变量。变量声明后是空的，如需赋值可以使用赋值符进行赋值。

 

可以在一条语句中声明多个变量，每个变量之间用逗号隔开即可。例如：

       Var name=“tom”，age=“18”；

（JS中每一个语句后面加分号）

当然，声明也可以跨行

 

 

数据类型

1. 字符串类型（String）：字符串可以是引号中的任意文本，可以使用单引号或双引号
2. 数字（Number）：数字类型可以带小数点，也可以不带。极大或极小的数可以使用科学计数法表示
3. 布尔类型（Boolean）：布尔（逻辑）只能有两个值：false或true
4. 数组：在声明数组的时候可以使用Array（）函数，也可以直接使用“[ ]”声明一个空的数组
5. Undefined和Null：Undefined字面解释为没有定义，缺少。Null是引用数据类型，表示空对象。目前二者大体同义

Null的用法是：

1. 作为函数的参数，表示该函数不是对象
2. 作为对象原型链的终点

Undefined的用法是：

1. 变量声明了，但是没有赋值
2. 调用函数时，应提供参数没有提供，该参数为undefined
3. 对象没有赋值属性，该属性的值为undefined
4. 函数没有返回值，默认为Undefined

 运算符

1. 赋值运算符：=  +=  -=  …
2. 算数运算符：+  -  *  /  %  …
3. 比较运算符：>  <  >=  <=  ==（值相等）   ===（值、类型相等）
4. 逻辑运算符：&&（与）  || （或）  ！（非）

选择结构

JS中提供了两种选择结构

1. 判断结构：if-else结构
2. 选择结构：switch-case结构

 

判断结构：

语法	if (条件 1){   当条件 1 为 true 时执行的代码   } else if (条件 2){   当条件 2 为 true 时执行的代码   } else{   当条件 1 和 条件 2 都不为 true 时执行的代码   }
示例	if (time<10){   x="Good morning";   } else if (time<20){   x="Good day";   } else{   x="Good evening";   }

 

选择结构：

语法	switch(n){ case 1:   执行代码块 1   break; case 2:   执行代码块 2   break; default:   n 与 case 1 和 case 2 不同时执行的代码 }
示例	var day=new Date().getDay(); switch (day) { case 0:   x="Today it's Sunday";   break; case 1:   x="Today it's Monday";   break; case 2:   x="Today it's Tuesday";   break; case 3:   x="Today it's Wednesday";   break; case 4:   x="Today it's Thursday";   break; case 5:   x="Today it's Friday";   break; case 6:   x="Today it's Saturday";   break; }

default 关键词来规定匹配不存在时做的事情

循环结构

for循环结构

1. while循环结构
2. do-while循环结构

 

for循环结构：

语法	for (语句 1; 语句 2; 语句 3)   {   被执行的代码块   }
示例	for (var i=0; i<5; i++)   {   x=x + "The number is " + i + " ";   }

通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。语句 1 是可选的，也就是说不使用语句 1 也可以。也可以在语句 1 中初始化任意（或者多个）值

 

通常语句 2 用于评估初始变量的条件。

语句 2 同样是可选的。

如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。

提示：如果您省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。

 

通常语句 3 会增加初始变量的值。

语句 3 也是可选的。-

语句 3 有多种用法。增量可以是负数 (i--)，或者更大 (i=i+15)。

语句 3 也可以省略（比如当循环内部有相应的代码时）

 

While循环：

 

语法	while (条件)   {   需要执行的代码   }
示例	while (i<5)   {   x=x + "The number is " + i + " ";   i++;   }

 

do-while循环

 

语法	do   {   需要执行的代码   } while (条件);
示例	do   {   x=x + "The number is " + i + " ";   i++;   } while (i<5);

数组操作

声明数组

       var _name=Array（）；

       var _name=New Array(（）

       var _users=[ ]；

数组数据操作

       开头增加数据：unshift（args）

              开头删除数据：shift（）

 

              末尾增加数据：push（args）

              末尾删除数据：pop（）

             

              修改数据：通过下标修改。例如_name[0]=”tom”

删除数据：数组一旦创建就是固定长度，如果要实现删除一个数据：创建一个新数组

 

Array的属性

constructor	返回对创建此对象的数组函数的引用。
length	设置或返回数组中元素的数目。
portotype	使您有能力向对象添加属性和方法。

             

       Array对象方法

             

concat（）	连接两个或更多的数组，并返回结果。
join（）	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔
pop（）	删除并返回数组的最后一个元素
push（）	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse（）	颠倒数组中元素的顺序。
Shift（）	删除并返回数组的第一个元素
slice（）	从某个已有的数组返回选定的元素
sort（）	对数组的元素进行排序
splice（）	删除元素，并向数组添加新元素。
toSource（）	返回该对象的源代码。
toString()	把数组转换为字符串，并返回结果。
toLocaleString（）	把数组转换为本地数组，并返回结果。
unshift（）	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值