JavaScript：增强用户和HTML的交互

JS基础

* 概念：一门客户端脚本语言
　　* 运行在客户端浏览器中的，每一个浏览器都有JavaScript的解析引擎
　　* 脚本语言：不需要编译，直接就可以被浏览器解析执行了

* 功能：
　　* 可以增强用户和HTML页面的交互过程，可以来控制HTML元素，让页面有动态的效果，增强用户的体验

* JavaScript的发展史：
　　* 1992年，Nombase公司开发出第一门客户端脚本语言，专门用于表单校验，命名为：C - -，后来更名为ScriptEase
　　* 1995年，Netscape公司，也开发了一门客户端脚本语言：LiveScript。后来，请来了SUN公司的专家，修改LiveSript，命名为JavaScript
　　* 1996年，Microsoft公司，抄袭了JavaScript开发出了JScript语言，搅乱了市场
　　* 1997年，ECMA（欧洲计算机制造商协会），制定ECMAScript，成为了所有客户端脚本语言的标准

　　* JavaScript  =  ECMAScript + JavaScript特有的东西（BOM + DOM）

ECMAScript

* 基本语法
　　* 与HTML的结合方式
　　　　* 内部JS：定义

　　* 数据类型
　　　　* 原始数据类型（基本数据类型）：
　　　　　　* number：整数、小数、NaN
　　　　　　* string：字符、字符串
　　　　　　* boolean：布尔值
　　　　　　* null：空对象的占位符
　　　　　　* undefined：未定义，如果一个变量没有给初始化值，默认就为 undefined
　　　　* 引用数据类型（对象）：

　　* 变量
　　　　* 一小块存储数据的内存空间
　　　　* Java语言是强类型的语言，JS是弱类型的语言
　　　　　　* 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
　　　　　　* 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据
　　　　* 语法：
　　　　　　* var 变量名 = 初始化值;

　　* 运算符：
　　　　* 一元运算符：只有一个运算数的运算符
　　　　　　* ++、- -、正号、负号
　　　　　　　　* ++(- -)在前，先++(- -)，再运算
　　　　　　　　* ++(- -)在后，先运算，再++(- -)
　　　　　　　　* 注意：在JS中，如果运算数不是运算符所要求的类型，那么JS的引擎会自动的将运算数进行类型转换
　　　　　　　　　　* 其他类型转number：
　　　　　　　　　　　　* string 转 number，按照字面值转换。如果字面值不是数字，那么就会转为NaN
　　　　　　　　　　　　* boolean 转 number，true为非零，false为零
　　　　* 算术运算符：
　　　　　　* 加减乘除，取模取余
　　　　* 赋值运算符：
　　　　　　* 等号、+=、-=
　　　　* 比较运算符：
　　　　　　* >、<、>=、<=、==、===(全等于)
　　　　　　* 比较方式
　　　　　　　　* 类型相同：直接比较
　　　　　　　　　　* 字符串，按照字典顺序按位注意比较，直到得出大小结果为止
　　　　　　　　* 类型不同：先进行类型转换，再比较
　　　　　　　　　　* 字符串和数字，会先将字符串转换成数字再比较
　　　　　　　　　　* === 全等于：在比较之前会先判断类型，如果类型不同就会直接返回 false
　　　　* 逻辑运算符：
　　　　　　* &&、||、！
　　　　　　　　* &&：短路与
　　　　　　　　* ||：短路或
　　　　　　　　* ！：非
　　　　　　　　　　* 其他类型转boolean：
　　　　　　　　　　　　* number 转 boolean：0或NaN为假，非0为真
　　　　　　　　　　　　* string 转 boolean：空字符串为假，非空为真
　　　　　　　　　　　　* 对象 转 boolean：所有对象都为真
　　　　　　　　　　　　* null、undefined 转 boolean：null 和 undefined都是假
　　　　* 三元运算符：
　　　　　　* 表达式 ？值1 ：值2
　　　　　　* 判断表达式的值，如果是 true 则取值1，如果是 false 则取值2

　　* 流程控制语句：
　　　　* if... else... 
　　　　* switch
　　　　　　* 在Java中，switch语句可以接收的数据类型：byte、int、short、char、枚举、字符串
　　　　　　　　* switch(变量):
　　　　　　　　　　* case 值:
　　　　　　* 在JS中，switch语句可以接收任意的原始数据类型
　　　　* while
　　　　* do ... while
　　　　* for

　　* JS特殊语法：
　　　　* 语句一般以分号结尾，如果一行只有一条语句，则分号可以省略
　　　　* 变量的定义使用 var 关键字，也可以不使用。
　　　　　　* 用：定义的变量是局部变量
　　　　　　* 不用：定义的变量是全局变量

Test1

* 基本对象
　　* Function：函数对象
　　　　* 创建：
　　　　　　* var fun = new Function(形式参数列表，方法体);
　　　　　　* function 方法名称(形式参数列表) {
　　　　　　　　　　方法体
　　　　　　　}
　　　　　　* var 方法名 = function(形式参数) {
　　　　　　　　　　方法体
　　　　　　　}
　　　　* 方法
　　　　* 属性：
　　　　　　* length：形参的个数
　　　　* 特点：
　　　　　　* 方法定义时，形参的类型不用写
　　　　　　* 方法是一个对象，如果定义名称相同的方法，就会覆盖
　　　　　　* 方法调用只与方法名有关，与参数列表无关
　　　　　　* 在方法声明中，有一个隐藏的的内置对象（数组），arguments，封装了所有参数
　　　　　　* 方法的返回值类型可以省略
　　　　* 调用
　　　　　　* 方法名称(实际参数列表);

　　* Array：数组对象
　　　　* 创建
　　　　　　* var arr = new Array(元素列表);
　　　　　　* var arr = new Array(默认长度);
　　　　　　* var arr = [元素列表];
　　　　* 方法
　　　　　　* join()：将数组元素按照传入的分隔符拼接为字符串
　　　　　　* push()：向数组的尾部添加元素
　　　　* 属性
　　　　　　* length：数组长度
　　　　* 特点
　　　　　　* JS中数组的类型是可变的
　　　　　　* JS中数组的长度是可变的

　　* Boolean
　　* Date
　　　　* 创建
　　　　　　* var date = new Date();
　　　　* 方法
　　　　　　* toLocaleString()：返回当前Date对象对应的本地时间的字符串形式
　　　　　　* getTime()：获取当前时间到1970年的毫秒值
　　* Math
　　　　* 不需要创建，可以通过 Math.方法名() 调用
　　　　* 方法
　　　　　　* random()：返回 0~1之间的随机数
　　　　　　* ceil()：向上取整
　　　　　　* floor()：向下取整
　　　　　　* round()：四舍五入
　　　　* 属性
　　　　　　* PI
　　* Number
　　* String
　　* RegExp：正则表达式对象
　　　　* 正则表达式：定义字符串的组成规则
　　　　　　* 单个字符：[ ]
　　　　　　　　* 如：[ a ] 、[ ab ] 、[ a-zA-Z0-9_ ]
　　　　　　　　* 特殊符号代表特殊含义的单个字符：
　　　　　　　　　　* \d ：单个数字字符[ 0-9 ]
　　　　　　　　　　* \w ：单个单词字符[ a-zA-Z0-p_ ]
　　　　　　* 量词符号：
　　　　　　　　* ：表示出现0次或多次
　　　　　　　　? ：表示出现0次或1次
　　　　　　　　+ ：出现1次或多次
　　　　　　　　{m, n} ：数量 大于等于m，小于等于n
　　　　　　　　　　* m缺省：{ ,n}最多n次
　　　　　　　　　　* n缺省：{m, }最少m次
　　　　　　* 开始结束符
　　　　　　　　* ^：表示表达式的开始
　　　　　　　　* &：表示表达式的结束
　　　　* 正则对象：
　　　　　　* 创建
　　　　　　　　* var reg = new RegExp("正则表达式");（此时的反斜线需要被转义）
　　　　　　　　* var reg = /正则表达式/;
　　　　　　* 方法
　　　　　　　　* test()：reg.test(string) 验证字符串是否符合正则定义的规范

　　* Global
　　　　* 特点：全局对象，其中封装的方法不需要对象就可以直接调用
　　　　* 方法：
　　　　　　* encodeURI()：url编码
　　　　　　* decodeURI()：url解码
　　　　　　* encodeURIComponent()：url编码，可以编码更多字符
　　　　　　* encodeURIComponent()：url解码
　　　　　　* parseInt() ：将字符串转换为数字
　　　　　　　　* 逐一判断每一个字符是否是数字，直到不是数字为止，将数字部分转换为number
　　　　　　* isNaN()：判断一个值是否为NaN
　　　　　　　　* NaN六亲不认，连自己都不认。NaN参与的 == 比较全部为false
　　　　　　* eval()：将JS的字符串转换为脚本代码来执行
　　　　* URL编码：用百分号分隔每个字符的编码值

DOM

* 概念：Document Object Model 文档对象模型
　　* 将标记语言文档的各个组成部分封装为对象，可以使用这些对象，对标记语言文档进行CRUD的动态操作

* 功能：控制 HTML文档的内容

* 代码：获取页面的标签（元素对象）：Element
　　* document.getElementById("id值")：通过id值获取元素对象

* 操作 Element对象：
　　* 修改属性值
　　　　* 明确获取的对象是哪一个
　　　　* 查看API文档，找其中有哪些属性可以设置
　　* 修改标签体内容
　　　　* 属性：innerHTML 修改标签体的内容

    
    




悔创阿里杰克马

* W3C DOM 标准被分为3个不同的部分
　　* 核心 DOM - 针对任何结构化文档的标准模型
　　　　* Document：文档对象
　　　　* Element：元素对象
　　　　* Attribute：属性对象
　　　　* Text：文本对象
　　　　* Comment：注释对象
　　　　* Node：节点对象，其他5个的父对象
　　* XML DOM - 针对XML文档的标准模型
　　* HTML DOM - 针对HTML文档的标准模型

* 核心DOM模型
　　* Document
　　　　* 创建（获取）
　　　　　　* window.document
　　　　　　* document
　　　　* 方法
　　　　　　* 获取 Element对象
　　　　　　　　* getElementById()：根据 id属性值获取元素，id一般唯一
　　　　　　　　* getElementsByTagName()：通过标签名称，获取元素对象们，返回值是数组
　　　　　　　　* getElementsByClassName()：通过Class的属性值，获取元素对象们，返回值是数组
　　　　　　　　* getElementsByName()：根据Name属性值，获取元素对象们，返回值是数组
　　　　　　* 创建其他DOM对象
　　　　　　　　* createAttribute()
　　　　　　　　* createComment()
　　　　　　　　* createElement()
　　　　　　　　* createTextNode()
　　　　* 属性

    
    



div1
div2
div3

 div4
 div5

　　* Element
　　　　* 获取
　　　　　　* 通过document来获取和创建
　　　　* 方法
　　　　　　* removeAttribute()：删除属性
　　　　　　　　* 参数
　　　　　　　　　　* 属性名
　　　　　　* setAttribute()：设置属性
　　　　　　　　* 参数
　　　　　　　　　　* 属性名
　　　　　　　　　　* 设置的值

    
    



点我试一试

　　* Node
　　　　* 特点：所有DOM对象都可以被认为是一个节点
　　　　* 注意：超链接标签中将 href 的属性设置为 javascript:void(0);可以使标签体在保留点击样式的同时不进行跳转
　　　　* 方法:
　　　　　　* CRUD DOM树
　　　　　　　　* appendChild()：向节点的子节点列表末尾添加新的子节点
　　　　　　　　* removeChild()：删除（并返回）当前节点的指定子节点
　　　　　　　　* replaceChild()：用新节点替换一个子节点
　　　　* 属性
　　　　　　* parentNode：返回当前节点的父节点

    
    
    





    

        div2
    
    div1


删除div的子节点
添加div的子节点

    
    
    






    
    
    
    



    
学生信息表
    

        

        
编号
        
姓名
        
性别
        
操作
    

    

        

        
1
        
zwb
        
男
        
删除
    

    

        

        
1
        
zwb
        
男
        
删除
    

    

        

        
1
        
zwb
        
男
        
删除
    




    
    
    

Test

* HTML DOM
　　* 标签体的设置和获取：innerHTML
　　* 使用 html 对象的属性
　　* 控制样式

    
    

    



div

div1
div2

事件

* 概念：某些组件被执行了某些操作后，触发某些代码的执行
　　* 造句： xxx 被 xxx， 我就 xxx
　　　　* 我方水晶被摧毁后，我就责备队友
　　　　* 敌方水晶被摧毁后，我就夸奖自己
　　* 事件：某些操作。如：单机、双击、键盘按下、鼠标移动
　　* 事件源：组件。如：按钮、文本输入框…
　　* 监听器：代码。
　　* 注册监听：将事件、事件源和监听器结合在一起。当事件源上发生某个事件，则触发执行某个监听器代码

* 如何绑定事件
　　* 直接在html标签上，指定事件的属性，属性值就是JS代码（耦合度太高）
　　* 通过JS获取元素对象，指定事件属性，设置一个函数

Test2

 * 常见的事件：
　　* 点击事件：
　　　　* onclick：单击事件
　　　　* ondbclick：双击事件
　　* 焦点事件
　　　　* onblur：失去焦点
　　　　　　* 一般用于表单项的校验
　　　　* onfocus：获得焦点
　　* 加载事件
　　　　* onload：一个页面或一张图像完成加载
　　* 鼠标事件
　　　　* onmousemove：鼠标被移动
　　　　* onmouseout：鼠标从某元素移开
　　　　* onmouseover：鼠标移动到某元素之上
　　　　* onmousedown：鼠标按键被按下
　　　　　　* 定义方法时，定义一个形参来接收event对象
　　　　　　* event对象可以接收鼠标哪个键按下了
　　　　　　* 事件的 button值 0 1 2 分别对应鼠标的左右键和滚轮键
　　　　* onmouseup：鼠标按键被松开
　　* 键盘事件
　　　　* onkeydown：某个按键被按下
　　　　　　* 事件的 keycode值对应具体被按下的键的编号
　　　　* onkeyup：某个按键被松开
　　　　* onkeypress：某个按键被按下并松开neit
　　* 选中和改变
　　　　* onchange：域的内容被改变
　　　　* onselect：文本被选中
　　* 表单事件
　　　　* onsubmit：确认按钮被点击
　　　　　　* 可以阻止表单的提交
　　　　　　　　* 方法返回 false则表单被阻止提交
　　　　* onreset：重置按钮被点击

    
    

    
    






    
    
        --请选择--
        --北京--
        --上海--
        --广州--
        --深圳--
    

    

    
    
    





    

        
新用户注册
        
USER REGISTER

    

    

        

            
            

                

                    

                        
for="username">用户名
                        

                            
                        
                    

                    

                        
for="password">密码
                        

                            

                        
                    

                    

                        
for="email">Email
                        

                            
                        
                    

                    

                        
for="name">姓名
                        

                    

                    

                        
for="tel">手机号
                        

                            

                        
                    

                    

                        
性别
                        

                             男
                             女
                        
                    

                    

                        
for="birthday">出生日期
                        

                        
                    

                    

                        
for="checkcode">验证码
                        

                            
                        
                    


                    

                        

                    
                

            


        

    

    

        
已有账号?立即登录
    

Test

BOM

* 概念：Browser Object Model 浏览器对象模型
　　* 将浏览器的各个组成部分封装成对象

* 组成：
　　* Window：窗口对象
　　　　* 创建
　　　　* 方法
　　　　　　* 与弹框有关的方法：
　　　　　　　　* alert()：显示带有一段消息和一个确认按钮的警告框
　　　　　　　　* confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
　　　　　　　　　　* 如果点击确认按钮，则返回 true
　　　　　　　　　　* 如果点击取消按钮，则返回 false
　　　　　　　　* prompt()：显示可提示用户输入的对话框
　　　　　　　　　　* 返回用户输入的值
　　　　　　* 与打开关闭有关的方法
　　　　　　　　* open()：打开一个新的窗口
　　　　　　　　　　* 返回一个新的window对象
　　　　　　　　* close()：关闭当前窗口，默认是当前的窗口。
　　　　　　　　　　* 谁调用我，我就关闭谁
　　　　　　* 与定时器有关的方法
　　　　　　　　* setTimeout()：在指定的毫秒后调用函数或计算表达式（只执行1次）
　　　　　　　　　　* 参数：
　　　　　　　　　　　　* JS代码或者方法对象
　　　　　　　　　　　　* 毫秒值
　　　　　　　　　　* 返回值：唯一标识，用于取消定时器
　　　　　　　　* clearTimeout()：取消由 setTimeout() 方法设置的 timeout
　　　　　　　　* setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式
　　　　　　　　　　* 参数：
　　　　　　　　　　　　* JS代码或者方法对象
　　　　　　　　　　　　* 毫秒值
　　　　　　　　　　* 返回值：唯一标识，用于取消定时器
　　　　　　　　* clearInterval()：取消由 setInterval() 方法指定的 timeout
　　　　* 属性
　　　　　　* 获取其他BOM对象
　　　　　　　　* history
　　　　　　　　* location
　　　　　　　　* navigator
　　　　　　　　* screen
　　　　　　* 获取DOM对象
　　　　　　　　* document
　　　　* 特点
　　　　　　* Window对象不需要创建，可以直接使用 window调用。 如：windows.方法名()
　　　　　　* window引用也可以省略。 如：方法名()

Test2

　　* Navigator：浏览器对象

　　* Screen：屏幕对象

　　* History：历史记录对象
　　　　* 获取
　　　　　　* window.history
　　　　　　* history
　　　　* 属性
　　　　　　* length：返回当前窗口历史列表中的 URL数量
　　　　* 方法
　　　　　　* back()：加载 history列表中的前一个URL
　　　　　　* forward()：加载 history列表中的下一个URL
　　　　　　* go()：加载 history列表中的某个具体页面
　　　　　　　　* 参数：
　　　　　　　　　　* 正数：前进几个历史记录
　　　　　　　　　　* 负数：后退几个历史记录 

    
    






页面

　　* Location：地址栏对象
　　　　* 获取
　　　　　　* window.location
　　　　　　* location
　　　　* 属性
　　　　　　* href：设置或返回完整的URL
　　　　* 方法
　　　　　　* reload()：刷新当前页面

    
    
    




    5秒之后，自动跳转到首页

Test3