JavaScript （基础篇）
JavaScript是目前Web应用程序开发者使用最为广泛的客户端脚本编程语言，不仅可以用来开发交互式的Web页面，还可以将HTML、XML和Java Applet、Flash等Web对象有机地结合起来，使开发人员快速生成Internet 上使用的分布式应用程序。（给网站增加交互性的脚本语言）
JavaScript的基本入门知识点
动态、弱类型、基于原型的语言，内置支持类。客户端脚本语言
- 动态改变网页的内容
HTML 语言是静态的，一旦编写，内容是无法改变的。JavaScript可以弥补这种不足，可以将内容动态地显示在网页中。 - 动态改变网页的外观
JavaScript 通过修改网页元素的CSS样式，可以动态地改变网页的外观，例如，修改文本颜色、大小等属性，使图片的位置动态地改变等。 - 验证表单数据
为了提高网页的效率，用户在编写表单时，可以在客户端对数据进行合法性验证，验证成功之后才能提交给服务器，这样就能减少服务器的负担和降低网络带宽的压力。 - 响应事件
JavaScript是基于事件的语言，因此可以响应用户或浏览器产生的事件。只有事件产生时才会执行某段JavaScript代码，如用户单击“计算”按钮时，程序显示运行结果。 - 基于对象和事件驱动
JavaScript把HTML页面中的每个元素都当作一个对象来处理，并且这些对象都具有层次关系，像一颗倒立的树，这种关系被称为“文档对象模型（DOM）”。在编写JavaScript代码时会接触大量的对象及对象的方法和属性。可以说学习JavaScript的过程，就是了解JavaScript对象及其方法和属性的过程。以为基于事件驱动，所以JavaScript可以捕捉到用户在浏览器中的操作，可以将原来的静态的HTML页面变成用户交互的动态页面。
JavaScript和Java的区别
JavaScript是一种嵌入式脚本文件，直接插入网页，由浏览器一边解释一边执行。而Java语言必须在Java虚拟机上运行，而且事先需要进行编译。另外，Java的语言规则比JavaScript的语言规则严格得多，功能也要强大得多。主要区别如下:
- 基于对象和面向对象
JavaScript是基于对象的，它是一种脚本语言，是一种基于对象和事件驱动的编程语言，因而它本身提供了非常丰富的内部对象供设计人员使用。
而Java是面向对象的，即Java是一种真正的面向对象的语言，即使是开发简单的程序，也必须设计对象。 - 强变量和弱变量
Java采用强类型变量检查，即所有变量在编译之前必须声明。如下面这段代码：
其中 X = 123456；说明是一个整数；Y = “654321”；说明是一串字符。Integer X； String Y； X = 123456； Y = “654321”；
而在JavaScript中，变量声明采用弱类型，即变量在使用前不需要声明，而是解释器在运行时检查其数据类型。如下面这这段代码：
在上述代码中，前者X为数值型变量，而后者说明Y为字符型变量。X = 123456; Y = "654321";- 代码格式不同
JavaScript与Java的代码格式不一样。JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。编写HTML文档就像编辑文本文件一样方便，其独立文件的格式为“.js”。
而Java是一种与HTML无关的格式，必须通过像在HTML中引用外部媒体那样进行装载，其代码以字节代码的形式保存在独立的文档中，其独立文件的格式为“.class”。 - 嵌入方式不同
JavaScript与Java的嵌入方式不一样。在HTML文档中，两种编程语言的标识不同，JavaScript使用来标识，而Java使用 … 来标识。 - 静态联编和动态联编
JavaScript采用动态联编，即JavaScript的对象引用在运行时检查。
Java则采用静态联编，即Java的对象引用必须在编译时进行，以使编译器能够实现强类型检查。 - 浏览器执行方式不同
JavaScript是一种解释型编程语言，其源代码在发往客户端执行之前无需经过编译，而是将文本格式的字符代码发送给客户，即JavaScript语言本身随Web页面一起被下载，由浏览器解释执行。
而Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须有相应平台的仿真器或者解释器，可以通过编译器或解释器实现独立于某个特定平台的编译代码。
接下来开始简单的入门代码
首先写代码需要写代码的软件，JavaScript比较随意，任何一个可编写文本的软件都可以，可以用电脑的记事本等等。我这里使用的是Hbuilder来编写的，在360浏览器上面运行显示结果。 - 代码格式不同
这是一个简单的JavaScript代码，结果为：
图1
这个是在网页显示的结果。
JavaScript在HTML5中的使用
在HTML5网页头中嵌入JavaScript代码
如果不是通过JavaScript脚本生成的HTML5 网页的内容，JavaScript脚本一般放在HTML5网页头部的标签对之间。这样不会因为JavaScript影响整个网页的显示结果。
在标签中添加相应的 JavaScript脚本，这样可以直接在HTML文件中调用JavaScript的代码，以实现相应的效果
JavaScript!
加入了
标签，结果是：
图2
在HTML5网页中嵌入JavaScript代码
在需要使用JavaScript脚本生成HTML5网页内容时，如某些用JavaScript实现的动态树，就需要把JavaScript放在HTML5网页主体部分的标签对中。
注：JAvaScript代码可以在同一个HTML5网页的头部与主体部分同时嵌入，并且在同一个网页可以多次嵌入JavaScript代码。
JavaScript!
图3
在HTML5网页的元素事件中嵌入JavaScript代码
在开发Web应用程序中，开发者可以给HTML文档设置不同的事件处理器，一般是设置某个HTML元素的属性来引用一个脚本，如可以使一个简单的动作。该属性一般以on开头，如单击鼠标事件OnClick()等。这样，当需要对HTML5网页中的该元素进行事件处理时（验证用户输入的值是否有效），如果事件处理的JavaScript代码量较少，就可以直接在对应的HTML5网页的元素事件中嵌入JavaScript代码。
判断文本框是否为空
在上述HTML文档中使用JavaScript脚本，其作用是当文本框失去焦点时，就会对文本框的值进行长度检验，如果值为空，即可弹出“文本框为空，请输入内容”的提示信息。在网页中显示的结果为：
图3
在HTML5中调用已有的JavaScript文件
如果有一段代码或者功能被重复使用，这个时候如果每一个代码中都重新写一遍的话太繁琐了，我们直接写一个.js文件用来存放它，然后用的时候直接调用这个文件就可以了。一般这个调用的代码形式为：
通过JavaScript伪URL引入JavaScript脚本代码
在多数支持JavaScript脚本的浏览器中，可以通过JavaScript伪URL地址调用语句来引入JavaScript脚本代码。伪URL地址的一般格式为：
JavaScript:alert(“已点击文本框”);
伪URL地址引入JavaScript脚本代码
使用伪URL地址引入JavaScript脚本代码
在浏览器的显示结果为：
图4
如何实现在网页中得到text对象
因为JavaScript的实现是要通过网页的，我们要想对一个对象进行操作，那就必须得先找到它，JavaScript提供了几种得到对象的方法：
得到上边的text对象
var _txtNameObj1 = document.forms[0].elements("txtName");
var _txtNameObj2 = document.getElementById("txtId");
var _txtNameObj3 = document.frmTxt.elements("txtName");
var _txtNameObj1 = document.all.txtName;
浏览器中的文档对象类型（DOM）
不同浏览器使用JavaScript操作同一个页面中同一个对象的方法不同，这会造成页面无法跨平台。DOM正是解决不同浏览器下使用JavaScript操作对象的方法不同的问题而出现的。DOM可以访问页面其他的标准组件，解决了Netscape的JavaScript和Microsoft的JScript之间的冲突，为Web设计师和开发者提供了一个标准的方法，让他们来访问站点中的数据、脚本和表现层对象。document.getElementById()可 格局ID得到页面中的对象，这个方法就是DOM的标准方法，在浏览器中都适用。
DOM是以层次结构组织的节点或信息片段的集合。这个层次结构允许开发人员在树中导航寻找特定信息。分析该结构通常需要加载整个文档和构造层次结构，才能做其他工作。由于它是基于信息层次的，因而DOM被认为是基于树或基于对象的。
JavaScript-test
这段代码的作用是当进入网页的时候显示“欢迎进入网页！”，当关闭网页的时候显示“希望您再次进入！”。
JavaScript编程基础
无论是传统编程语言，还是脚本语言，都具有数据类型、常量和变量、运算符、表达式、注释语句、流程控制等基本构成元素，了解这些基本元素是学会编程的第一步。
JavaScript的基本语法
- 执行顺序：按照在HTML文件中出现的顺序逐行执行。如果需要在整个HTML文件中执行，最好将其放在HTML文件的标记对中。某些代码，如函数体内的代码，并不会被立即执行，只有当所在的函数被其他程序调用时，改代码才会被执行。
- 区分大小写：JavaScript区分大小写。在输入语言的关键字、函数、变量以及其他标识符时，一定要严格区分大小写。username和userName是不同的两个变量。HTML不区分大小写
- 分号和空格：在JavaScript语句中，分号是可有可无的，这一点与Java语言不同，JavaScript并不会要求每一行必须以分号作为语句结束的标志。如果语句的结束处没有分号，JavaScript会自动地将该代码的结尾作为语句的结尾。例如，以下代码的格式都是正确的
Alert ("Hello!")
Alert ("Hello!") ;
- 对代码进行换行：当一段代码比较长时，用户可以在文本字符串中使用反斜杠对代码进行换行。例如：
document.write ("Hello \
Word !");
- 注释：单行// 多行 /* */
- 语句：JavaScript程序是语句的集合，一条JavaScript语句相当于英语中的一个完整句子。JavaScript语句将表达式组合起来，完成一定的任务。一条JavaScript语句由于一个或多个表达式。关键字或运算符组合而成，语句之间用分号隔开，即分号是JavaScript语句的结束符号。
my web
一个段落。
一个DIV块.
这段代码是操作了两个HTML元素，网页显示结果是：
图5
- 语句块：语句块是一些语句的组合，通常语句块都会用一对大括号包围起来。在调用语句块时，JavaScript会按书写次序执行语句块中的语句。JavaScript会把语句块中的语句看成是一个整体全部执行 。
my web
我是一个段落。
我是一个DIV块.
当您点击上面的按钮时，两个元素会改变。
加入函数，点击按钮之后，之前的值就会发生变化，在浏览器中的效果如下：
图6
图7
JavaScript的数据结构
JavaScript脚本语言的数据结构包括标识符、常量、变量、关键字。
- 标识符定义要求：
- 标识符只能由字母。数字、下划线和中文组成，而不能包含空格、标点符号、运算符等其他符号。
- 标识符的第一个字符必须是字母、下划线、或者中文。
- 标识符不能与JavaScript中的关键字名称相同，即不能是if、else等。
- 关键字：关键字标识了JavaScript语句 的开头或结尾。根据规定，关键字是保留的，不能用作变量名或者函数名。
- 保留字：在某种意义上是为将来的关键字而保留的单词。
- 常量，变量
看透代码中的数据类型
- typeof 运算符
typeof 运算符有一个参数，即要检查的变量的值。判断类型
var sTemp = "test string";
alert(typeof sTemp); //输出“string”
alert(typeof 86); //输出“number”
- Undefined类型：未定义类型的变量，表示变量还没有赋值。
- Null 类型：是一个特殊的值，表示空值，用于定义空的或不存在的引用。不过，null不等同于空的字符串或者0.由此可见，null与undefined的区别是：null表示一个变量被赋予了空值，而undefined则表示该变量还未被赋值。
- Boolean 类型：表示一个逻辑数值，用于表示两种可能的情况。逻辑真，用true表示；逻辑假，用false表示。通常我们使用1表示真，0表示假。
- NUMBER类型：JAvaScript的数值类型可以分为4类，即整数、浮点数、内部常量和特殊值。整数可以为正数、0或负数；浮点数可以包含小数点、也可以包含一个e（大小写均可，在科学计数法中表示“10”的幂数），或者同时包含这两项。整数可以以10进制、8进制和16进制作为基数来表示。
- string类型
- Object类型：之前的类型都是原始数据类型，而Object是对象类型。该数据类型中国包括Object、Function、String、Number、Boolean、Array、Regexp、Date、Global、Math、Error,以及宿主环境提供的object类型。
明白数据间的计算法则——运算符
- 算术运算符：+ - * /
- 比较运算符：
== != > >= < <= - 位运算符：任何信息在计算机中都是以二进制的形式保存的。位运算符就是对数据按二进制位进行运算的运算符。JavaScript语言中的位运算符有 ： & 、| 、^ （异或）、~ （取补）、<<（左移）、>> （右移）。其中取补运算符为一元运算符，其他的位运算符都是两元运算符。这些运算都不会产生溢出。位运算符的操作数为整型或者是可以转换为整型的任何其他类型。
var iNum = 18;
alert(iNum.toString(2));
- 逻辑运算符：逻辑运算符通常用于执行布尔运算。它们通常与比较运算符一起使用，来表示复杂的比较运算。这些运算涉及的变量通常不止一个，而且常用于if、while和for语句中。&& 、|| 、！（逻辑非）
- 条件运算符：条件表达式运算符“？：”，这个运算符是个三元运算符，它有3个部分：一个计算值的条件和两个根据条件返回的真假值。语法格式：
条件？表达式1：表达式2 //如果条件为真，则表达式使用表达式1 的值，否则使用表达式2的值
(x > y)? 100*3 : 11 //举例
- 赋值运算符：= += -= *= /= %= &= |= ^=
- 运算符的优先级：
- 括号（）
- 自加自减 ++ - -
- 乘除、取模 * / %
- 加法减法 + -
- 小于、小于等于、大于、大于等于 < <= > >=
- 等于、不等于 == !=
- 逻辑与 &&
- 逻辑或 ||
- 赋值运算符和快捷运算符 = += *= /= %= -=
JavaScript的表达式
表达式是一个语句的集合，像一个组一样，计算结果是单一值，然后改结果被JavaScript归入下列数据类型之一：布尔、数值、字符串、对象等。
一个表达式本身可以使一个数值或者变量，或者它可以包含许多连接在一起的变量关键字以及运算符。
例如，表达式x/y,若分别使自变量X和自变量Y的值为5和10，其输出为数值2；但在Y值为0时则没有定义。一个表达式的赋值和运算符的定义以及数值的定义域是有关联的。
- 赋值表达式：i =1;
- 算数表达式：x+y+i
- 布尔表达式：结果只能为true或false
- 字符串表达式：+ +=两种方法来操作字符串的运算。
- 类型转换：parseInt() 方法和 parseFloat () 方法
局部变量和全局变量的优先级实例
变量的优先级
在上例中可以看到，使用了局部变量的值，而不是全局变量的值，所以在网页中运行的结果为：
图8
看一下定义的全局变量是什么：
变量的优先级
网页中运行的结果为：
图9
程序控制结构和语句
JavaScript编程中对程序流程的控制主要是通过条件判断、循环控制语句及continue、break来完成的，其中条件判断按预先设定的条件执行程序，包括if语句和switch语句乐然循环控制语句则可以重复完成任务，包括while语句、do-while语句及for语句。
- if-else
变量的优先级
图10
- switch语句：
变量的优先级
输出的结果为：
图11
- 使用对话框：三种样式的对话框
- alert
- confirm 确认信息，返回true或false
- prompt 输入，并返回用户输入的字符串
举例：
三种对话框的用法示例
对话框有三种
1:只是提醒，不能对脚本产生任何改变；
2:一般用于确认，返回true或者false
3：一个带输入的对话框，可以返回用户填入的字符串
演示：
演示1：提醒对话框
演示2：确认对话框
演示3：提醒对话框
结果为：
图12
实例：显示距离2020年元旦的天数
——
代码中用到了if-else判断语句嵌套，来实现多种情况的可能性。
在网页中显示的结果为：
图13