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