Java Web(1)-JavaScript

一、JavaScript 和 html 代码的结合方式

1. 第一种方式

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

2. 第二种方式

使用 script 标签引入 单独的 JavaScript 代码文件

二、变量

什么是变量？变量是可以存放某些值的内存的命名。
JavaScript 的变量类型：

• 数值类型： number
• 字符串类型： string
• 对象类型： object
• 布尔类型： boolean
• 函数类型： function

JavaScript 里特殊的值： undefined 未定义，所有 js 变量未赋于初始值的时候，默认值都是 undefined. null 空值 NaN 全称是：NotaNumber。非数字。非数值

JS 中的定义变量格式： var 变量名; var 变量名 = 值;

三、常见运算

1. 关系（比较）运算

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

2. 逻辑运算

• 且运算： &&、
• 或运算：|| 、
• 取反运算： !

在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。
0 、null、 undefined、””(空串) 都认为是 false；
注意：

• && 且运算。 有两种情况： 第一种：当表达式全为真的时候。返回最后一个表达式的值。 第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值
• || 或运算 第一种情况：当表达式全为假时，返回最后一个表达式的值 第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值
• 并且 && 与运算 和 ||或运算 有短路。 短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行 */

四、数组

1. 数组定义方式

• var 数组名 =[]; //空数组
• var 数组名 =[1,’abc’,true]; // 定义数组同时赋值元素

五、函数

函数的二种定义方式

1. 第一种定义方式

可以使用 function 关键字来定义函数

function 函数名(形参列表){

函数体

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

2. 第二种定义方式

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

函数体

}

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

3. 函数的 arguments 隐形参数

只在 function 函数内,就是在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数

隐形参数特别像 java 基础的可变长参数一样。

public void fun(Object...args); ,可变长参数其他是一个数组

那么 js 中的隐形参数也跟 java 的可变长参数一样,操作类似数组

六、JS 中的自定义对象

1. Object 形式的自定义对象

对象的定义：

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

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

变量名.函数名 =function(){} // 定义一个函数

对象的访问：

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

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

对象的定义：

​ var 变量名 ={ // 空对象

​ 属性名：值, // 定义一个属性

​ 属性名：值, // 定义一个属性

​ 函数名：function(){} // 定义一个函数

};

对象的访问：

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

七、JS中的事件

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

1. 常用的事件

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

事件的注册又分为静态注册和动态注册两种

什么是事件的注册（绑定）？

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

2. 静态注册事件

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

3. 动态注册事件

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

动态注册基本步骤：

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

4. onload 加载完成事件

5. onclick 单击事件

    
    
    




    按钮1
    按钮2

6. onblur失去焦点事件

    
    
    


    用户名:

    密码:

7. onchange内容发生改变事件

    
    
    



    
    请选择你喜欢看的电影
    
        --电影--
        盗墓笔记
        黑客帝国
        千与千寻
    

    

    请选择你喜欢看的书籍
    
        --书籍--
        平凡的世界
        小王子
        解忧杂货店
    

8. onsubmit 表单提交事件

八、DOM模型

DOM 全称是 DocumentObjectModel 文档对象模型
就是把文档中的标签，属性，文本，转换成为对象来管理。 那么 它们是如何实现把标签，属性，文本转换成为对象来管理呢

1. Document 对象

Document 对象的理解：

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

2. Document 对象中的方法介绍

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

注意：

document 对象的三个查询方法，如果有 id 属性，

优先使用 getElementById 方法来进行查询 如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询 如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName
以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象

3. getElementById 方法

需 求 ： 当用户点击了校验按 钮 ， 要 获 取 输 出 框 中 的 内 容 。 然 后 验 证 其 是 否 合 法 。

验 证 的 规 则 是 ： 必 须 由 字 母、数 字、下 划 线 组 成 。 并 且 长 度 是 5 到 12 位

    
    
    


    用户名：
    
        
    

    校验

4. getElementsByName 方法

让 所 有 复 选 框 都 选 中

    
    

    



    兴趣爱好：
     C
     Java
     Python

    


    全选
    全部选
    反选

5. getElementsByTagName 方法

也是全选操作

    
    

    



    兴趣爱好：
     C
     Java
     Python

    


    全选

6. createElement 方法

使用js代码来创建html标签

7. 节点常用的属性和方法

方法：

• 通过具体的元素节点调用 getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点
• appendChild(ChildNode) 方法，可以添加一个子节点，ChildNode 是要添加的孩子节点

属性：

• childNodes 属性，获取当前节点的所有子节点
• firstChild 属性，获取当前节点的第一个子节点 ，会匹配换行和空格信息 ，使用firstElementChild 则不会匹配换行和空格信息，其他的类似
• lastChild 属性，获取当前节点的最后一个子节点
• parentNode 属性，获取当前节点的父节点
• nextSibling 属性，获取当前节点的下一个节点
• previousSibling 属性，获取当前节点的上一个节点，previousElementSibling这个不包括换行和空格
• className 用于获取或设置标签的 class 属性值
• innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
• innerText 属性，表示获取/设置起始标签和结束标签中的文本

8. DOM练习

    
    

    


    

        

            

                你喜欢那个城市？
            

            

                
北京
                
南京
                
东京
                
上海
            

            


            

                你喜欢那款游戏？
            

            

                
王者荣耀
                
飞车
                
联盟
                
DNF
            

            


            

                你的手机是什么品牌?
            

            

                
华为
                
小米
                
oppo
                
一加
            
        


        

            gender:
            
            Male
            
            Female

            

            name:
            
        
    

    

        
查找#bj节点
        
查找所有 li 节点
        
查找 name=gender 的所有节点
        
查找#city 下所有 li 节点
        
返回#city 的所有子节点
        
返回#phone 的第一个子节点
        
返回#bj 的父节点
        
返回#android 的前一个兄弟节点
        
返回#username 的 value 属性值
        
设置#username 的 value 属性值
        
返回#city 的文本值