1.概念
- 一门客户端脚本语言
- 运行在客户端浏览器中,每一个浏览器都有JavaScript脚本的解析引擎
- 脚本语言:不与要编译,直接就可以被浏览器解析执行
- 功能
- 可以用来增强用户和html页面的交互,可以用来控制html元素,增加动态效果
2.ECMAScript:客户端脚本语言的标准
- 基本语法
- 与html结合
- 定义
<script>
,标签体内容就是js代码 - 定义
<script>
,通过src属性引入外部js文件 <script>
可以定义在html页面的任何地方,但定义位置会影响执行的顺序<script>
可以定义多个
- 定义
- 与html结合
3.数据类型
- JavaScript 原始值
原始值指的是没有属性或方法的值。
原始数据类型指的是拥有原始值的数据。
JavaScript 定义了 5 种原始数据类型:
- string
- number :数字、NaN
- boolean
- null:占位
- undefined
原始值是一成不变的(它们是硬编码的,因此不能改变)。
假设 x = 3.14,能够改变 x 的值。但是您无法改变 3.14 的值。
-
关键词var:用是局部变量,不用是全局变量
-
字符串
-
数组
-
可以包含任意数据类型
-
数组大小可变
-
push压入尾部,pop弹出尾部的一个元素(类似于栈)
-
unshift压入头部,shift弹出头部
-
concat()返回一个新数组,不会改变原数组
-
-
对象
-
var 对象名 = { 属性名:属性值, 属性名:属性值, 属性名:属性值 }//使用逗号隔开,最后一个键值对不用加括号,键是字符串
-
使用一个不存在的对象属性不会报错,undefined
-
可以动态的删减属性
delete 对象名.属性名 //删除属性 对象名.属性名=值 //添加属性
-
-
流程控制
-
if,while,for,switch
-
for/in 遍历对象键,for/of遍历对象值
var person = {fname:"Bill", lname:"Gates", age:62}; var text = ""; var x; for (x in person) { text += person[x]; }
-
-
Map/Set
var map = new Map([key,value],[key,value],[key,value]); map.get("key") //取值 map.set("key",value) //存值 var set = new Set([value,value,value]); set.has(value) //判断是否包含
-
Function对象
-
创建方式:
//参数类型不用写 function 方法名(形式参数列表){ //方法体 //不需要定义返回值类型 } var 方法名 = function(形式参数列表){ //方法体 }
-
方法是一个对象。如果定义一个名称相同的方法会覆盖。
-
方法的调用只与方法的名称有关与参数列表无关。
function fun(a,b){ alert(a+b); } fun(1) //此时b为undefind fun(1,2,3,4) //方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数,3,4被其接收。 //一个使用内置对象的示例 function add(){ var sum=0; for(var i=0;i<arguments.length;i++){ sum += arguments[i]; } return sum; }
-
-
Date日期对象
var date = new Date(); //创建一个当前浏览器的时区并将日期显示为全文本的字符串 //Fri Oct 23 2020 11:12:25 GMT+0800 (中国标准时间)
-
Global对象
-
encodeURL()
-
url编码:将对应的字符串编码成页面所指定格式的16进制码
-
"你好吗?"=%E4%BD%A0%E5%A5%BD%E5%90%97%EF%BC%9F
-
-
dedecodeURL()
- url解码
-
encodeURLComponent()
- 较上面的编\解的字符更多
-
deencodeURLComponent()
-
parseInt()
- 解析一个字符串转换为数字
-
isNaN ()
- 检查是否不是数字
-
eval()
- 将字符串解析为为脚本代码执行
-
4.DOM
-
概念:Document Object Model 文档对象模型,将标记语言文档的各个组成部分封装为对象,可以使用这些对象对文档进行增删改查的动态操作。
-
DOM树,对应HTML文档的结构
-
包括:Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型
-
-
document文档对象
-
获取Element对象:
-
getElementById():查找具有指定的唯一 ID 的元素
-
getElementsByTagName():返回所有具有指定标签名称的元素节点,返回值是一个数组
-
getElementsByNam():返回所有具有指定Name属性的元素节点,返回值是一个数组
-
getElementsByClassName():返回所有具有指定Class属性的元素节点,返回值是一个数组
-
代码:获取页面标签对象 Element
document.getElementById("test") //通过元素(标签)的id值获取指定的标 签
-
-
创建其他DOM对象:
-
createAttribute(name) 创建拥有指定名称的属性节点,并返回新的 Attr 对象
-
createComment() 创建注释节点
-
createElement() 创建元素节点
var table = document.createElement("table")
-
createTextNode() 创建文本节点
-
-
操作标签对象
-
修改属性值
-
修改标签体内容
anchorObject.innerHTML=text
-
-
-
Element元素对象:
-
获取/创建方法:通过documen来获取和创建
-
方法:
-
setAttribute()
elementNode.setAttribute(name,value) //name 必需。规定要设置的属性名 value 必需。规定要设置的属性值。
-
removeAttribute()
elementNode.removeAttribute(name) //name 必需。规定要删除的属性名
-
-
-
Node节点对象:
-
特点:其他所有DOM对象都可以认为是一个节点
-
方法:增删改查DOM树:
-
appendChild() 向节点的子节点列表的结尾添加新的子节点
-
removeChild() 删除(并返回)当前节点的指定子节点
var div1 = getElementById("div1"); var div2 = getElementById("div2"); div1.removeChild("div2");
-
replaceChild() 用新节点替换一个子节点
-
-
属性:
-
parentNode 返回节点的父节点
-
childNodes 返回节点到子节点的节点列表
var x=nodeObject.childNodes; for (i=0;i<x.length;i++) { //操作 }
-
-
-
HTML DOM
-
标签体的设置和获取:innerHTML
/*修改 HTML 文档内容最简单的方法是,使用 innerHTML 属性。 如需修改 HTML 元素的内容,使用此语法:*/ document.getElementById(id).innerHTML = new text
-
使用HTML元素的对象和属性:
document.getElementById(id).attribute = new value //attribute属性,value值 <!--本例修改了 <img> 元素的 src 属性的值--> <img id="myImage" src="smiley.gif"> <script> document.getElementById("myImage").src = "landscape.jpg"; </script>
-
设置样式:
-
方法一:
document.getElementById(id).style.property = new style <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color = "blue"; </script>
-
方法二:
document.getElementById(id).className="name" .name{ //css样式控制 }
-
5.事件
-
功能:HTML 事件可以是浏览器或用户做的某些事情:
-
下面是 HTML 事件的一些例子:
- HTML 网页完成加载
- HTML 输入字段被修改
- HTML 按钮被点击
通常,当事件发生时,用户会希望做某件事,JavaScript 允许在事件被侦测到时执行代码。
-
通过 JavaScript 代码,HTML 允许向 HTML 元素添加事件处理程序。
-
-
事件源:组件,如:按钮,文本输入框... ...
-
事件绑定/注册事件:
-
直接在html页面上,指定事件的属性(操作),属性值就是js代码
<button onclick="displayDate()">时间是?</button> <script> function displayDate() { document.getElementById("demo").innerHTML = Date(); } </script> //代码耦合度太高
-
通过js获取元素对象,指定事件属性,设置一个函数
<img src="#" id=image> var object = getElementById("image"); object.onclik=fun; function fun(){ alert("点了一下!") }
-
-
常见的事件:
-
点击事件:
- onclick 当用户点击某个对象时调用的事件句柄
- ondblclick 当用户双击某个对象时调用的事件句柄
-
焦点事件:
-
onblur 元素失去焦点
- 一般用于表单校验
-
onfocus 元素获得焦点
-
-
加载事件:
-
onload 一张页面或一幅图像完成加载
- 可以与window绑定
-
-
鼠标事件:
- onmousedown 鼠标按钮被按下
- 将会传递一个参数 ,定义方法时定义一个形参,指示哪一个鼠标按键被点击
- ,onmouseup 鼠标按键被松开
- onmousemove 鼠标被移动
- onmouseout 鼠标从某元素移开
- onmouseover 鼠标移到某元素之上
- onmousedown 鼠标按钮被按下
-
键盘事件:
- onkeydown 某个键盘按键被按下
- onkeypress 某个键盘按键被按下并松开
- onkeyup 某个键盘按键被松开
-
选中和改变:
- onchange 域的内容被改变
- onselect 文本被选中
-
表单事件
-
onsubmit 确认按钮被点击
- 只支持表单form,返回true则被提交,要注意此处是否需要添加return,事件注册的方法一需要return,方法二不需要。
-
onreset 重置按钮被点击
-
-
6.BOMze
-
概念:Browser object model 浏览器对象模型
-
将浏览器各个组成部分封装成对象
-
1.window :浏览器窗口对象
-
特点:window不需要创建,可以直接使用
-
window.方法名(),可以直接省略window
-
与弹出框有关的方法:
alert() //显示带有一段消息和一个确认按钮的警告框 confirm() //显示带有一段消息及确认和取消按钮的警告框,有boolean类型的返回值 prompt() //显示提示用户输入的对话框,有返回值
-
与开发关闭有关的窗口:
open() //打开一个新窗口 close() //关闭已经打开的窗口,谁调用关闭谁
-
与定时器有关的方法:
setTimeout(code,millisec) //code:要调用的函数后要执行的JavaScript代码串;millise:在执行代码前需等待的毫秒数,返回值为唯一标识,用于取消计时。 clearTimeout(id_of_settimeout) //id_of_settimeout:由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。 setInterval(code,millisec) //code:要调用的函数后要执行的JavaScript代码串;millise:在执行代码前需等待的毫秒数。setInterval() 方法会不停地调用函数,直到clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 clearInterval() //取消由 setInterval()设置的 timeout。
-
获取其他BOM对象
window.history history //可以直接省略window
-
获取DOM对象
document
-
-
2.location :地址栏对象
-
属性:
-
href 属性是一个可读可写的字符串,可设置或返回当前显示的文档的完整 URL。
location.href //得到当前地址栏的值,或者设置当前地址栏的值
-
reload() 方法用于重新加载当前文档
location.reload(force) //参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。
-
-
-
history:历史记录对象
-
screen:显示器屏幕对象
-
Navigator:浏览器对象
-
-