本文共 7053 字，大约阅读时间需要 23 分钟。

1.JavaScript介绍

JavaScript语言最早使用于完成页面的数据验证。因此它运行在客户端，需要进行浏览器来解析执行JavaScript代码。

JS是Netcape网景公司的产品，最早取名为LiveScript，后面为了吸引更多的Java程序员进行使用，改名叫做JavaScript。

这里需要注意的是:JavaScript语言与Java语言是两种不同的语言。

• JS是弱类型语言，Java是强类型语言。
• 弱类型就是类型可变。
• 强类型就是定义变量的时候，类型已经确定。

//Java定义变量时，必须明确数据类型int i=12;//JavaScript是弱类型语言，在定义变量时，可以在后续使用时再对数据类型进行明确var   a;a=12;  //此时a的数据类型为数值型a="abc"; //此时a的数据类型为字符串型

JS语言的特点
1.交互性（它可以做到信息的动态交互）
2.安全性（不允许直接访问本地硬盘）
3.跨平台性（只要是可以解释JS的浏览器都可以进行执行，与平台无关）

---

2.JavaScript和html代码的结合方式

2.1 第一种结合方式

只需要在head标签中，或者在body标签中，使用script标签来书写JavaScript代码。

//在head标签中使用script标签来书写JavaScript代码    
           

运行后的结果为：

---

2.2 第二种结合方式

使用script标签引入外部的js文件来进行执行。

//使用script标签引入外部的js文件来执行    
           
       
       

运行后的结果为：

---

2.3 JavaScript与html结合需要注意的事项

script标签可以用来定义js代码，也可以用来引入js文件，但是需要注意的是两个功能二选一使用，不能同时使用两个功能。

运行后的结果为：

---

3. js中的变量

什么是变量？变量就是可以存放某些值的内存的命名。

JavaScript的变量类型
数值类型：number，相当于包含java中int、short、long、float、double等
字符串类型：string
对象类型：object
布尔类型：boolean
函数类型：function

JavaScript里特殊的值
undefined: 未定义的值，所有js变量未赋于初始值的时候，默认的都是undefined
null：空值
NAN：全程是Not a Number。非数字，非数值。

• JS中定义变量的格式：（1）var 变量名；（2）var 变量名= 值；

---

4.JavaScript中的运算符

4.1 关系运算符

JavaScript与Java中存在一些功能相同的关系运算符：>、>=、<、<=、！=等，其使用上与Java中的功能保持一致。

这里重点需要说明的是JavaScript与Java中使用含义不同的两个关系运算符。

• 等于： == ，等于是简单的作字面值的比较
• 全等于：===，全等于除了作字面值的比较之外，还会比较两个变量的数据类型

---

4.2 逻辑运算符

在JavaScript语言中，所有的变量，都可以作为一个boolean类型的变量去使用。并且0、null、undefined、空串都认为是false。

JavaScript中常见的三种逻辑运算符使用
&& 且运算。有两种情况：第一种当表达式全为真的时候，返回最后一个表达式的值。第二种情况当表达式中有一个为假时，返回第一个为假的表达式的值。
或运算。当表达式全为假时，返回最后一个表达式的值。第二种情况：只要有一个表达式为真。就会返回第一个为真的表达式的值。

---

5.数组（重点）

JS中数组定义格式：(1)var 数组名 =[]； //空数组 (2)var 数组名 =[1,‘abc’,true]；//定义数组同时赋值元素。

---

6.函数（重点）

6.1 函数的两种定义方式

函数定义方式一：使用function关键字来定义函数。

• JavaScript中使用function关键字来定义函数的格式如下：

function   函数名(形参列表){       函数体；       }

在JavaScript语言中，如何定义带有返回值的函数？只需要在函数体内直接使用return语句返回值即可。

函数的定义方式二。格式如下：

var 函数名 =function(形参列表){函数体}

需要注意的是：在Java中函数允许重载，但是在JS中函数的重载会直接覆盖掉上一次的定义。

---

6.2 函数的arguments隐形参数（只在function函数内）

在function函数中不需要定义，但却可以直接用来获取所有参数的变量，我们称它为隐形参数。隐形参数特别像java基础的可变长参数一样。public void fun(Object… args);可变参数实质上就是一个数组。那么js中的隐形参数也跟java中的可变长参数一样，操作类似数组。

---

7.JS中的自定义对象

JS中自定义对象的方式通常会有两种：一种是Object形式的自定义对象，另外一种是{}花括号形式的自定义对象。

7.1 Object形式的自定义对象

对象的定义：

var 变量名 = new Object(); //对象实例（空对象）

变量名.属性值=值； //定义一个属性

变量名.函数名=function() {} //定于一个函数的方法

对象的访问：

变量名.属性 /函数名()；

---

7.2 {}花括号形式的自定义对象

对象的定义：

var   变量名  = {                          属性名：值，   //定于一个属性                          属性名：值，                         函数名：function(){}   //定义一个函数                      };   //空对象

对象的访问:

变量名.属性 /函数名();

---

8.JS中的事件

什么是事件？事件就是电脑输入设备与页面进行交互的响应。我们称之为事件。

常用的事件	具体作用
onload：加载完成事件	页面加载完成后，常用于做页面js代码初始化操作。
onclick ：单击事件	常用于按钮的点击响应操作。
onblur：失去焦点事件	常用于输入框离开或者失去焦点后验证其输入内容是否合法。
onchange：内容发生改变事件	常用于下拉框或者列表和输入框内容发改变后操作。
onsubmit：表单提交事件	常用于表单提交前，验证所有表单是否合法。

什么是事件的注册(绑定)？其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或绑定。

事件的注册(绑定)又分为静态注册和动态注册两种。

静态注册事件：通过html标签的事件属性直接赋于事件响应后的代码，这种方式我们叫做静态注册（绑定）。

动态注册事件：是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function(){}这种形式赋于事件响应后的代码，叫动态注册。

动态注册的基本步骤：

• 1.获取标签对象
• 2.标签名.事件名=function(){}

---

8.1 onload加载完成事件

---

8.2 onclick单击事件

    
                
         按钮1      按钮2

运行后的结果为：

---

8.3 onblur失去焦点事件

    
                用户：
     密码：

运行后的结果为：

---

8.4 onchange内容发生改变事件

    
                 
         请选择你最喜欢的篮球明星：                --篮球明星--          乔丹          科比          杜兰特          詹姆斯            
         
      请选择你最喜欢的足球明星：                --足球明星--          梅西          C罗          内马尔          姆巴佩      

运行后的结果为：

---

8.5 onsubmit表单提交事件

---

9. DOM模型

DOM全称为Document Object Model：文档对象模型。通俗得讲，就是把文档中的标签，属性，文本转换为对象来管理。

---

9.1 Document对象

    
            
        我的连接     
我的标题

上面的html代码对应的Doucument文档树内存结构：

Document对象的理解：

• 1.Document它管理了所有的HTML文档内容
• 2.Document它是一种树结构的文档。具有层次关系。
• 3.它可以让我们把所有标签都对象化。
• 4.我们可以通过document访问所有的标签对象。

关于标签的对象化，我们就可以从Java中进行更好的理解。

例如，现在有一个人年龄为15岁，性别为男，名字为张三。我们需要将这个人的信息对象化常采用下面的操作。

class Person{
         private  int age;//年龄属性      private  String sex;//性别属性      private  String name;//姓名属性            }

Html标签要对象化时，需要如何做？

   
   
    div01
   

模拟对象化相当于：

class  Dom{
            priavte  String id;  //id属性         private  String tagName; //标签名         private  Dom  parentNode; //父元素         private List
   
     childrenNode;//子元素         private String innerHTML;//起始标签和结束标签中间的内容
   

---

9.2 Document对象中方法的介绍

Document对象中的方法	解释
doucunment.getElementById(elementId)	通过标签的id属性查找标签的dom对象，elementId是标签的id属性值
document.getElementsByName(elementName)	通过标签的name属性查找标签dom对象，elementName是标签的name属性值
doucument.getElementsByTagName(tagname)	通过标签名查找标签的dom对象。tagname是标签名
doucument.createElement(tagname)	通过给定的标签名，创建一个标签对象。tagName是要创建的标签名。

---

9.2.1 doucument.getElementById(elementId)使用实例：验证用户名是否有效

    
                用户名：     校验

运行后的结果为：

针对上面的验证提示效果由弹框弹出，不是很好的提示效果。下面对代码进行改进，使验证提示效果更好。

    
                用户名：               校验

---

9.2.2 getElementsByName使用实例：实现复选框的全选、全不选以及反选功能

    
                 兴趣爱好：      C++      Java      JavaScript      
      全选      全不选      反选

全选功能展示：

全不选功能展示 反选功能展示

---

9.2.3 getElementsByTagName使用实例：实现复选框的全选功能

    
                兴趣爱好：     C++     Java     JavaScript     
     全选

使用getElementsByTagName()方法实现复选框的全选功能：

---

9.2.4 document对象的三个查询方法的注意事项

• document对象的三个查询方法，如果有id属性，优先使用getElementById方法来进行查询。

• 如果没有id属性，则优先使用getElementsByName方法来进行查询。

• 如果id属性和name属性都没有，最后再使用getElementsByTagName方法来进行查询。

• 以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

---

9.3 正则表达式对象

由于上面验证字符串，符合某个规则，需要使用正则表达式，这里需要对JS中正则表达式进行说明。

运行后的结果为：

---

9.4 节点的常用属性和方法

简单来说，节点就是标签对象。

节点常用的方法
getElementsByTagName()方法：获取当前节点的指定标签名孩子节点
appendChild(oChildNode)方法：可以添加一个子节点，oChildNode是要添加的孩子节点

节点常用的属性
childNodes属性：获取当前节点的所有子节点
firstChid属性：获取当前节点的第一个子节点
lastChild属性：获取当前节点的最后一个子节点
parentNode属性：获取当前节点的父节点
nextSibling属性：获取当前节点的下一个节点
previousSibling属性：获取当前节点的上一个节点
className属性：用于获取或者设置标签的class属性值
innerHTML属性：表示获取/设置起始标签和结束标签中的内容
innerText属性：表示获取/设置起始标签和结束标签中的文本

节点的常用属性与方法的练习：实现下面右侧按钮点击后的功能

   
   
   
	
    
		
     
			你喜欢哪个城市?		
		
     
			
      
北京
			
      
上海
			
      
东京
			
      
首尔
		
     
		
     
		
     
		
     
			你喜欢哪款单机游戏?		
		
     
			
      
红警
			
      
实况
			
      
极品飞车
			
      
魔兽
		
     
		
     
		
     
		
     
			你手机的操作系统是?		
		
     
      
IOS
      
Android
      
Windows Phone
     
	
    
	
    
     		gender:		
     		Male		
     		Female		
     
		
     
		name:		
     	
    
   
   
	
    
     查找#bj节点
    
	
    
     查找所有li节点
    
	
    
     查找name=gender的所有节点
    
	
    
     查找#city下所有li节点
    
	
    
     返回#city的所有子节点
    
	
    
     返回#phone的第一个子节点
    
	
    
     返回#bj的父节点
    
	
    
     返回#android的前一个兄弟节点
    
	
    
     返回#username的value属性值
    
	
    
     设置#username的value属性值
    
	
    
     返回#bj的文本值
    
   

---

总结

本节对前端语言JavaScript进行介绍，对JS中的变量、运算符、数组、函数、自定义对象、事件以及DOM模型进行学习，需要对Document对象以及Document对象中的方法进行具体重点掌握。

转载地址：http://fcqen.baihongyu.com/