**
JavaScript
**
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。
功能:
用来增强用户和html页面的交互过程,可以用来控制html元素,让页面有一些动态的效果,增强用户体验。
JavaScript=ECMAScript+BOM+DOM
ECMAScript
1.基本语法:
1.与html结合方式
(1)内部js
定义<script>,
标签体内容就是js代码
(2)外部js
定义<script>,
通过src属性,引入外部js文件
注意:
1.`<script>`可以定义在html页面任何位置,但是定义的位置会影响执行顺序z在前面先执行,在后面后执行。
2`.<script>`可以定义多个。
2.注释
1.单行注释://
2.多行注释:/* */
3.数据类型
原始数据类型
1.number:数字。整数/小数/NaN
2.string:字符串。字符/字符串 “abc” “a”
3.boolean:true/false
4.null:表示一个对象为空
5.undefined:未定义。如果一个变量没有给初始值,则会默认赋值为undefined
引用数据类型:对象
4.变量
变量:一小块内存存储数据的内存空间
java语言是强类型语言,而javascript是弱类型语言
强类型:在开辟变量存储空间时,定义了空间将来存储的数据类型。只能存储固定类型的数据
弱类型:在开辟变量存储空间时,不定义空间将来存储的数据类型,可以放任意类型数据。
语法:var 变量名=初始化值;
Typeof运算符:获取变量类型
5.运算符
一元运算符:只有一个运算数的运算符
算数运算符
赋值运算符
比较运算符
逻辑运算符
三元运算符:a>b ? 7:2
6.流程控制语句
if...else...
switch:
在JS中,switch可以接受任意的原始数据类型
while
do...while
for
基本对象
function:函数对象
*function:函数(方法)对象
* 1.创建
* 1. var fun=new function(形式参数列表,方法体)
* 2. function 方法名称(形式参数列表){
* 方法体
* }
* 3.var 方法名称=function(形式参数列表){
* 方法体
* }
- 2.方法
- 3.属性
-
length:代表形参的个数
- 4.特点
-
1.方法定义是,形参的类型不用写
-
2.方法是一个对象,如果定义名称相同的方法,会覆盖
-
3.在JS中,方法的调用只与方法的名称有关,和参数列表无关
-
4.在方法什么中有一个影藏的内置对像,arguments,封装所有的实际参数。
- 5.调用
-
方法名称(实际参数列表)
Array
*Array数组:
* 1.创建
* 1.var arr=new Array(元素队列)
* 2.var arr=new Array(默认长度)
* 3.var arr=[元素列表];
- 2.方法
- join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
- push() 向数组的末尾添加一个或更多元素,并返回新的长度。
- 3.属性
- length
- 4.特点
-
1.JS中,数组元素类型可变
-
2.JS中,数组长度可变。
*/
Boolean
Date
/*
*Date:日期对象
*
1.创建
* var date=new Date();
* 2.方法
* toLocaleString();返回当前date对象对应的时间本地字符串格式
* getTime();获取毫秒值,返回当前日期对应时间与1970年1月1日0点之间时间差
*/
Math
document.write(Math.PI+"<br>");
document.write(Math.random()+"<br>");
document.write(Math.round(3.14)+"<br>");
document.write(Math.ceil(3.14)+"<br>");
document.write(Math.floor(3.14)+"<br>");
Number
String
RegExp
正则表达式
1.创建
var reg=new regExp(“正则表达式”)
var reg=/正则表达式/
2.方法
test(参数):验证指定的字符串是否符合正则定义规范
Global
*global
- 1.特点:全局对象,这个global中封装的方法不需要对象就可以直接调用
- 2.方法:
encodeURI():url编码
* decodeURI():url解码
*
* encodeURIComponent():url编码,编码的字符更多
* encodeURIComponent():url解码
`parseInt():将字符串转为数字`
* 注意判断每一个字符是否为数字,知道不是数字为止,将前面数字部分
* 转为number
* eval():将JS的字符串作为脚本来运行
*/
BOM
功能:控制HTML文档的内容
代码:获取页面标签(元素)对象ELment
document.getElementById(“id的值”):通过元素的id获取元素对象
操作Element对象
1.修改属性值
(1)明确获取的对象是哪一个,
(2)查看API文档,找其中有哪些属性可以设置。
2.修改标签内容
属性:innerHTML
(1)获取元素对象。
(2)使用innerHTML属性修改标签体内容。
事件简单学习
功能:某些组件被执行了某些操作后,触发某些代码的执行
如何绑定事件
1.直接在html标签上,指定事件的属性(操作),属性值是js代码
1.事件:onclick—单击事件
2.通过js获取元素对象,指定事件属性,设置一个函数。
/*
*window窗口对象
- 1.创建
- 2.方法
1.与弹出框有关的方法:
* alert()显示带有一短消息和一个确认按钮的警告框
* confirm()显示带有一段消息以及确认按钮和取消按钮的对话框
* 如果用户点击确定按钮,则方法返回true
* 如果用户点击取消按钮,返回false
* prompt() 显示可提示用户输入的对话框
* 返回值:获取用户输入的值
* 2.与开发关闭有关的方法
* close()关闭浏览器窗口
* 谁调用我,我关谁
* open()打开一个新的浏览器窗口
- 3.属性
- 4.方法
- window对象不需要常见可以直接使用window使用。window.方法名();
- window引用可以省略。方法名()
*/
3.location:地址栏对象
1.创建(获取)
(1)window.location
(2)location
2.方法:
reload():重新加载当前文档
3.属性:
href 这只或者返回完整对象
4.history:历史记录对象
(1)创建(获取)
1.window.history
2.history
(2)方法
back()加载history列表中的前一个url
forward()加载history列表中的下一个url
go() 加载history列表中某个具体页面
(3)属性
length:获取当前窗口历史列表中的url数量
DOM
概念:document object model 文档对象模型
将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言进行CRUD的动态操作。
什么是 DOM?
DOM 是一项 W3C (World Wide Web Consortium) 标准。
DOM 定义了访问文档的标准:
“W3C 文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分:
Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型
W3C DOM 标准被分为 3 个不同的部分:
Core DOM - 所有文档类型的标准模型
document:文档对象
element:元素对象
attribute:属性对象
text:文本对象
conmment:注释对象
node:节点对象,其他5个的父对象
重点学习:
核心DOM模型
document:文档对象
1.创建(获取):在html dom模型中可以使用window对象来获取
(1)window.document
(2)document
2.方法
(1)获取element对象:
getElementById():根据id属性值获取元素对象。id属性值一般唯一
getElementByTagName():根据元素名称获取元素对象,返回值是一个数组
getElementByClassName():根据class属性值获取元素对象,返回值是一个数组
getElementByName():根据name属性值获取元素对象,返回值是一个数组。
(2)创建其他DOM对象:
createAttribute(name)
createComment()
createElement()
createTextNode()
3.属性:
element:元素对象
1.获取/创建:通过document
2.方法:
1.removeAttribute():删除元素
2.setAttribute():设置属性
node:节点对象,其他5个的父对象
方法:
* CRUD dom树
* appendChild():向节点的子节点列表末尾添加新的子节点
* removeChild():删除(并返回)当前节点的指定子节点
* replaceChild():新节点替换一个子节点
HTML DOM - HTML 文档的标准模型
1.标签体的设置和获取:innerHTML
2.使用html元素对象的属性
3.控制元素样式
1.使用元素的style属性来设置
2.提前定义好类选择器样式,通过元素的classname属性来设置class属性值。
事件
对事件作出反应
JavaScript 能够在事件发生时执行,比如当用户点击某个 HTML 元素时。
为了在用户点击元素时执行代码,请向 HTML 事件属性添加 JavaScript 代码:
οnclick=JavaScript
HTML 事件的例子:
当用户点击鼠标时
当网页加载后
当图像加载后
当鼠标移至元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户敲击按键时
常见事件
1.单击事件
onclick :单击事件
ondblclick :双击事件
2.焦点事件
onblur :失去焦点
一般用于表单校验
onfocus :元素获得焦点
3.加载事件
onload:一张纸或者一个页面加载完成
4.鼠标事件
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
5.键盘事件
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。