JavaScript
一、JavaScript入门
-
概念：一门客户端脚本语言
* 运行在客户端浏览器中的，每一个浏览器都有JavaScrpit的解析引擎 * 脚本语言：不需要编译，直接就可以被浏览器解析执行 -
功能：
* 可以用来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。 -
JavaScript = ECMAScript + JavaScript的BOM、DOM
二、 ECMAScript
客户端脚本语言的标准
1. 基本语法：
* 与html结合方式
1. 内部JS：定义<script>，标签体内容就是js代码
2. 外部js，定义<script>，通过src属性引入外部的js文件
* 注意：
1. <script>可以定义在html页面的任何地方，但是定义的位置会影响执行顺序
2. <script>可以定义多个
* 注释：与Java相同，但没有文档注释
* 数据类型
* 原始数据类型：
1. number：数字。 整数/小数/NaN
2. string：字符串。
3. boolean：true和false。
4. null：一个对象为空的占位符。
5. undefined：未定义。一个变量没有初始化值，会默认赋值为undefined。
* 引用数据类型：对象
* 变量
* 概念：一小块存储数据的内存空间
* Java语言是强类型语言，而JavaScript是弱类型语言
* 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
* 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据
* 语法：var 变量名 = 初始化值;
* typeof运算符：获取变量的类型
* 注：null运算后得到的是object
* 运算符
1. 一元运算符
++，--：自增，自减
+，-：正号，负号
* 注意：在js中，如果运算数不是运算符所要求的类型，那么js引擎会自动将运算数进行类型转换
2. 算数运算符
+，-，*，/，%
3. 赋值运算符
=，+=，-=
4. 比较运算符
<，>，==，===，<=，>=
* 比较方式
1. 类型相同：直接比较
* 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
2. 类型不同：先进行类型转换，再比较
* ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
5. 逻辑运算符
&&，||，！
* 其他类型转boolean：
1. number：0或NaN为false，其他为ture
2. string：除了空字符串("")为false，其他皆为ture
3. null和undefined是false
4. 所有对象为ture
6. 三元运算符
表达式? 值1：值2;
* 流程控制语句
1. if...else...
2. switch:可以接收任意的原始数据类型
3. while
4. do..while
5. for
* JS特殊语法
1. 语句以英文分号;结尾
2. 变量用var修饰是局部变量，不用则为全局变量
2. 基本对象
-
Function：函数对象
* 创建： 1. var 方法名称 = new Function(形参列表，方法体); 2. function 方法名称(形参列表) { 方法体; } 3. var 方法名 = function(形参列表) { 方法体; } * 属性： length：形参的个数 * 特点： 1. 方法定义时，形参的类型和返回值类型不写 2. 方法是一个对象，如果定义名称相同的方法，会覆盖 3. 在JS中，方法的调用只和方法的名称有关 4. 在方法声明中有一个隐藏的内置对象（数组）arguements，封装所有传过来的实参 * 调用： 方法名称(实参列表) -
Array：数组对象
* 创建： 1. var arr = new Array(元素1，元素2，...) 2. var arr = new Array(默认长度) 3. var arr = [元素1，元素2，...] * 方法： 1. join(参数)：将数组中的元素按照指定的分隔符拼接为字符串 2. push()：向数组的末尾添加一个或更多元素，并返回新的长度 * 属性： length：数组的长度 * 特点： 1. JS中，同一个数组可以存放不同类型的元素 2. JS中，数组的长度是可变的 -
Boolean
-
Date：日期对象
* 创建：var date = new Date(); * 方法： toLocaleString()：返回当前date对象对应的时间本地字符串格式。 getTime()：获取毫秒值。 -
Math：数学对象
* 特点：Math对象不用创建即可使用 * 方法： random():获取 [0，1) 之间的随机数。 ceil( num ):向上取整 floor( num):向下取整 round( num )：四舍五入 * 属性： * PI：即圆周率π -
Number
-
String
-
RegExp：正则表达式对象
正则表达式：定义字符串的组成规则。 1. 单个字符：[] 如：[a] [ab] [a-zA-Z0-9_] * 特殊符号代表特殊含义的单个字符： /d：单个数字字符 [0-9] /w：单个单词字符 [a-zA-Z0-9_]] 2. 量词符号 ?：表示出现0次或1次 *：表示出现0次或多次 +：表示出现1次或多次 3. 开始结束符号 * ^：开始 * $： 结束 正则对象 * 创建： 1. var reg = new RegExp("正则表达式"); 2. var reg = /正则表达式/; * 方法： test(参数)：验证指定的字符串是否符合正则定义的规范 -
Global
* 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。 * 方法： encodeURI()：url编码 decodeURI()：url解码 encodeURIComponent()：url编码，编码的字符更多 decodeURIComponent()：url解码 parseInt()：将字符串转为数字 isNaN()：判断一个值是否为NaN eval()：解析JvaScript字符串，并作为脚本代码来执行。
三、BOM&DOM
1. DOM简单学习
* 功能：控制HTML文档的内容
* 获取页面标签对象：Element
* document.getElementById("id值")：通过元素的id获取元素对象
* 操作Element对象：
1. 修改属性值
2. 修改标签体内容
* 属性：innerHTML
1. 获取元素对象
2. 使用innerHTML属性修改标签体内容
2. 事件简单学习
* 功能：某些组件被执行了某些操作之后，触发某些代码的执行。
* 绑定事件：
1. 直接在html标签上，指定事件的属性
2. 通过js获取元素对象，指定事件属性
3. BOM
-
概念：Browser Object Model 浏览器对象模型
* 将浏览器的各个组成部分封装成对象 -
分类
* Window：窗口对象 * Navigator：浏览器对象 * Screen：显示器屏幕对象 * History：历史记录对象 * Location：地址栏对象 -
Window
* 特点 * Window对象不需要创建就可以直接使用 * Window对象的方法不需要用引用可以直接使用 * 方法 1. 弹出框有关的方法 alert()：显示带有一段消息和一个确认按钮的警告框 confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框 * 如果用户点击确定按钮，则方法返回true * 如果用户点击取消按钮，则方法返回false prompt()：显示可提示用户输入的对话框 * 返回值：获取用户输入的值 2. 打开关闭有关方法 close()：关闭调用该方法的浏览器窗口 open()：打开一个新的浏览器窗口，返回值上新的Window对象 3. 定时器有关方法 setTimeout()：在指定的毫秒数后调用函数或计算表达式 * 参数： 1. js代码或者方法对象 2. 毫秒值 * 返回值：唯一标识，用于取消定时器 clearTimeout()：取消有setTimeout()方法设置的定时器 setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式 clearInterval()：取消由 setInterval() 设置的 timeout * 属性 1. 获取其他BOM对象 Histroy Location Navigator Screen 2. 获取DOM对象 document -
Location
* 创建 1. window.location 2. location * 方法 * reload()：重新加载 * 属性 * href：设置货返回完整的 URL -
History
* 创建 1. window.history 2. history * 方法 * back()：加载 history 列表中的前一个URL * forward()：加载 history 列表中的下一个URL * go(参数)：加载 history 列表中的某个具体页面 * 参数： * 正数：前进几个历史记录 * 负数：后退几个历史记录 * 属性 * length：返回当前窗口历史列表中URL数量
4. DOM
-
概念：Document Object Model 文档对象模型
* 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象对标记语言文档进行CRUD（增删改查）的操作 -
分类
* W3C DOM 标准被分为3个不同的部分 1. 核心DOM：针对任何结构化文档的标准模型 * Document：文档对象 * Element：元素对象 * Attribute：属性对象 * Text：文本对象 * Comment：注释对象 * Node：节点对象，其他5个对象的父对象 2. XML DOM：针对XML文档的标准模型 3. HTML DOM：针对HTML文档的标准模型 -
核心DOM模型
* Document 1. 创建：在HTML DOM模型中可以使用window对象来获取 1. window.document 2. document 2. 方法 1. 获取Element对象 * getElementById()：根据id属性值获取元素对象。 * getElementByTagName()：根据元素名称获取元素对象。返回值是一个数组。 * getElementByClassName()：根据Class属性值获取元素对象们。 * getElementByName() 2. 创建其他DOM对象 * createAttribute(name) * createComment() * createElement() * createTextNode() 3. 属性 * Element 1. 获取/创建：通过document来获取和创建 2. 方法 1. removeAttribute()：删除属性 2. setAttribute()：设置属性 * Node * 特点：所有DOM对象都可以被认为是一个节点 * 方法： * CRUD dom树： * appendChild()：向节点的子节点列表的结尾添加新的子节点 * removeChild()：删除（并返回）当前节点的指定子节点 * replaceChild()：用新节点替换一个子节点 * 属性 * parentNode：返回节点的父节点 -
HTML DOM
1. 标签体的设置和获取：innerHTML 2. 使用html元素对象的属性 3. 控制元素样式 1. 使用元素的style属性来设置 2. 提前定义好类选择器的样式，通过严肃的className属性来设置class属性值
5. 事件监听机制
-
概念：某些组件被执行了某些操作之后，触发某些代码的执行。
-
常见的事件：
* 点击事件 1. onclick：单击事件 2. ondbclick：双击事件 * 焦点事件 1. onblur：失去焦点 2. onfocus：元素获得焦点 * 加载事件 1. onload：一张页面或一副图像完成加载 * 鼠标事件 1. onmousedown：鼠标按钮被按下 2. onmouseup：鼠标按键被松开 3. onmousemove：鼠标被移动 4. onmouseover：鼠标移到某元素之上 5. onmouseout：鼠标从某元素移开 * 键盘事件 1. onkeydown：某个键盘按键被按下 2. onkeyup：某个键盘按键被松开 3. onkeypress：某个键盘被按下并松开 * 选择和改变 1. onchange：域的内容被改变 2. onselect：文本被选中 * 表单事件 1. onsubmit：确认按钮被点击 2. onreset：重置按钮被点击
1638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
