javaScript:
概念:客户端脚本语言,运行在客户端浏览器中,每一个浏览器都会有JavaScript的解析引擎。
脚本语言:不需要编译,直接就可以被浏览器解析执行了
功能:可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,来增强用户的体验
JavaScript = ECMAScript + JavaScript(BOM+DOM)
ECMAScript:
基本语法:1、与html结合方式
内部JS:定义<script> , 标签体内容就是js代码
<script> </script>
外部JS:定义<script>,通过src属性引入外部的js文件
<script src="DemoJs.js"> </script>
注意:<script>可以定义在html页面的任何地方,但是定义的位置会影响执行的顺序。可以定义多个<script>标签
2、注释:
单行注释://
多行注释:/* */
3、数据类型
原始数据类型:1、number:数字。整数/小数/NaN
2、string:字符串
3、boolean:true/false
4、null :一个对象为空的占位符
5、undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined
引用数据类型:对象
4、变量
1、变量:一小块存储数据的内存空间
java语言是强类型语言,而JS是弱类型语言
强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型,只能存储固定类型的数据
弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据
2、语法: var 变量名 = 初始化值
3、typeof:获取变量数据类型的方法,注意null运算后得到object
<script> var a = 10; var b = "a"; var c = true; var d =null; var e ; alert(typeof (a)); alert(typeof (b)); alert(typeof (c)); alert(typeof (d)); alert(typeof (e)); </script>
5、运算符
1、一元运算符,例如;++,--,+
注意:在JS中,如果运算数不是运算符所要求的类型,那么JS引擎会自动的将运算数进行类型转换
其他类型转number:String转number,按照字面值转换,如果字面值不是数字,则转为NaN
boolean转number,true转为1,false转为0;
<script> var a ="a"; var b = a++; alert(b); var c ="12"; b=c++; alert(b); var d = true; b= d++; alert(b); </script>
2、算数运算符,例如:+,-,*,/,%
3、赋值运算符,例如:= ,+=,-=
4、比较运算符,例如:>,<,>=,<=,==,===
注意:类型相同,直接比较
类型不同,先进行类型转换,再比较
===,全等于,在比较之前,先判断类型,如果类型不一样,则直接返回false
5、逻辑运算符,例如:&&,||,!
注意:其他类型转boolean:number, 0或者NaN为假,其他为真
string ,除了空字符集(“”),其他为真
null和undefined,都是假
对象,所有对象都是true
6、三元运算符,例如:?
6、JS的特殊语法:1、语句以;结尾,如果一行只有一条语句则;可以省略,不建议省略
2、变量的定义用var关键字,也可以不使用,如果使用var则是局部变量,不使用则是全局变量
7、流程控制语句:
1、if···else
2、switch
注意:在Java中,switch语句可以接受的数据类型:byte,int ,char,short,枚举,String
在JS中,switch语句可以接受任意的原始数据类型
3、while
4、do····whlie
5、for
基本对象:
1、Function:函数对象
创建:1、var fun = new Function (形参列表,方法体),不推荐
2、function 方法名 (形参列表){方法体}
3、var 方法名 = function(形参列表){方法体}
方法:
属性:length:代表形参个数
特点:1、方法定义时,形参的类型不用写,返回值类型也不写
2、方法是一个对象,如果定义名称相同的方法,会覆盖
3、在JS中,方法的调用只与方法的名称有关,和参数列表无关
4、在方法声明中有一个隐藏的内置对象,arguments封装所有的实际参数
调用:方法名称(实参列表)
<script> function addnumber(a , b ) { alert(a+b); } var addnumber1 = function (a ,b, c) { alert(a+b+c); } alert(addnumber1.length); </script>
2、Array
创建:1、var arr = new Array(元素列表)
2、var arr = new Array(默认长度)
3、var arr = [元素列表]
方法:join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push():向数组的末尾添加一个或更多元素,并返回新的长度
属性:length:数组长度
特点:1、数组元素的类型可变的
2、数组长度可变的
<script> var arr1 = new Array(1,2,3,4,5,6); var arr2 = new Array(10); var arr2 = [1,2,3,4,5,6,7,8,9]; alert(arr1.join(",")); alert(arr2.length); alert(arr3) </script>
3、Date
创建:var date = new Date()
方法:toLocalString():返回当前date对象对应的时间本地字符串格式
getTime():获取毫秒值。返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差
<script> var data = new Date(); alert(data); alert(data.toDateString()); alert(data.getTime()); </script>
4、Math
创建:不用创建直接使用,Math.方法名
方法:random(),返回0-1之间的随机数
ceil(),对数进行上舍入
floor(),对数进行下舍入
round(),对数进行四舍五入
属性:PI
<script> var a = 2.2; alert(Math.random()); alert(Math.ceil(2.2)); alert(Math.floor(2.2)); alert(Math.round(2.2)); alert(Math.PI); </script>
5、RegExp:正则表达式对象
正则表达式,定义字符串的组成规则
1、单个字符:[],例如: [a],[ab][a-zA-Z0-9_]
特殊符号代表特殊含义的单个字符
\d :单个数字字符
\w:单个单词字符
2、量词符号
?:表示出现0次或1次
*:表示出现0次或多次
+:表示出现1次或多次
{m,n}:表示m<=数量 >=n
如果{,n}:最多n次
如果{m,}:最少m次
开始结束符号:^开始符号
$结束符号
正则对象:
创建:1、var reg = new RegExp(“正则表达式”)
2、var reg = /正则表达式/
方法:text(参数),验证指定字符串是否符合正则表达式
<script> var reg = /1\d{10}/; var b = reg.test("12345678901"); alert(b); </script>
6、Global:
特点:全局对象,所以其中封装的方法不需要对象就可以直接调用
方法:encodeURL():URL编码
decodeURL();URL解码
encodeURLComponent():URL编码,编码更多字符
decodeURLComponent():URL解码
parseInt():将字符串转换为数字,逐一判断每一个字符是否是数字, 直到不是数字为止,将前面数字部分转为number
isNaN():判断一个值是否是NaN,因为NaN常用的比较都是false
eval():计算javaScript字符串,并将它作为脚本代码执行
DOM:
功能:控制html文档内容
代码:获取页面标签对象 Element
document.getElementById("id值"):通过元素的id获取元素对象
操作Element对象:
1、修改属性值
2、修改标签体内容
事件:
功能:某些组件被执行类某些操作后,触发某些代码的执行
绑定事件:1、直接在html标签上,指定事件的属性,属性值就是js代码
2、通过js获取元素对象,指定事件属性,设置一个函数对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function fun () { var div1 = document.getElementById("div1"); div1.innerHTML ="点我了"; } </script> </head> <body> <div id = "div1"> hello </div> <input type="button" οnclick="fun()" value="点我吧"> </body> </html>
BOM:
概念:浏览器对象模型,将浏览器各个组成部分封装成对象
组成:
1、window,窗口对象
创建:
方法:
1、与弹出框有关的方法
alert():显示带有一段消息和一个确定按钮的警告框
confirm():显示带有一段消息以及确认按钮和取消按钮的对话框
如果用户点击确定按钮,则方法返回true
如果用户点击取消按钮,则方法返回false
prompt():显示可提示用户输入的对话框
返回值,获取用户输入的值
2、与打开关闭有关的方法
open():打开一个新的浏览器窗口
返回新的window对象
close():关闭浏览器窗口
谁调用为,我关谁
3、与定时器有关的方法
setTimeout():在指定的毫秒数后调用函数或计算表达式
参数:1、JS代码或者方法对象
2、毫秒值
返回值:唯一标识,用于取消定时器
clearTimeout():取消由setTimeout方法设置的定时器
setInterval():按照指定的周期来调用函数或计算表达式
clearInterval():取消由setInterval设置的定时器
<script> function fun () { open("http://www.baidu.com"); } setTimeout(fun,5000,"bbb"); </script> </head> <body> <div id = "div1"> hello </div> <input type="button" οnclick="fun()" value="点我吧"> </body>
4、Location:地址栏对象
1、创建:1、window.location
2、location
2、方法:reload(): 重新加载当前文档,刷新
3、属性:href 设置或返回完整的URL
<script> function fun () { location.reload(); } alert(location.href); </script> </head> <body> <div id = "div1"> hello </div> <input type="button" οnclick="fun()" value="点我吧"> </body>
5、History:历史记录对象
1、创建:window.history
history
2、方法:back(),加载history列表中的前一个URL
forward(),加载history列表中的下一个URL
go(),加载history列表中的某个具体页面
参数:正数,前进几个历史记录
负数,后退几个历史记录
3、属性:length 返回当前窗口历史列表中的URL数量
<script> function fun () { alert(history.length); } </script> </head> <body> <div id = "div1"> hello </div> <input type="button" οnclick="fun()" value="点我吧"> </body>
属性:1、获取其他BOM对象
history
location
Navigator
Screen
2、获取DOM对象
document
特点:1、window对象不需要创建可以直接使用,window.方法名()
2、window也可以直接忽略,方法名()
DOM:
概念:文档对象模型,将标记语言文档的各个组成部分,封装为对象,可以使用这些对象,对标记语言文档进行CRUD的动态操作
分类: 1、核心DOM
2、XML DOM
3、HTML DOM
核心DOM:
1、Document:文档对象
创建:针对html,window.document或者document
方法:1、获取Element对象
getElementById(),根据id属性值获取元素对象,id属性值一般唯一
getElementByTagName(),根据元素名称获取对象们,返回值是一个数组
getElementByClassName(),根据Class属性值获取元素对象们,返回值是一个数组
getElementByName(),根据name属性值获取元素对象们,返回值是一个数组
2、创建其他DOM对象
createAttribute(name)
createComment()
createElement()
createTextNode()
2、Element:元素对象
创建:通过document对象来创建
方法:removeAttribute(),删除属性
setAttribute(),设置属性
3、Node:节点对象,所有对象的父类
特点:所有DOM对象都可以被认为是一个节点
方法:appendChild():向节点的子节点列表的结尾添加新的子节点
removeChild():删除并返回当前节点的指定子节点
replaceChild():用新节点替换一个子节点
属性:parentNode:返回节点的父节点
4、Attribute:属性对象
5、Text:文本对象
6、Comment:注释对象
HTML DOM:
1、标签体的设置和获取:innerHTML
2、使用html元素对象的属性
3、控制样式
1、使用元素的style属性来设置
2、提前定义好类选择器的样式,通过元素的classname属性来设置器class属性值
事件:
概念:某些组件被执行了某些操作后,触发某些代码的执行
事件:某些操作。例如:单击,双击,键盘按下,鼠标移动
事件源:组件。例如:按钮,文本框
监听器:代码
注册监听:将事件,事件源,监听器结合在一起。当事件源上发生了某个事件,则触发执行某个监听器代码
常见的事件:
1、点击事件:
onclick:单击事件
ondblclick:双击事件
2、焦点事件
onblur:失去焦点
onfocus:元素获得焦点
3、加载事件
onload:一张页面或者一幅图像完成加载
4、鼠标事件
onmousedown:鼠标按钮被按下
onmouseup:鼠标按钮被松开
onmousemove:鼠标被移动
onmouseover:鼠标移到某元素之上
onmouseout:鼠标从某元素移开
5、键盘事件
onkeydown:某个键盘按钮被按下
onkeyup:某个键盘按钮被松开
onkeypress:某个键盘按钮被按下并松开
6、选择和改变
onchange:域的内容被改变
onselect:文本被选中
7、表单事件
onsubmit:确认按钮被点击
onreset:重置按钮被点击