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