-
JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
-
ECMAScript:客户端脚本语言的标准
-
基本语法
-
与html结合的方式
-
内部JS
定义
<Script>
,标签体内容就是js
代码 -
外部JS
定义
<srcipt>
,通过src
属性引入外部的js
文件 -
注意:
-
<Script>
可以定义在html的任意位置,但是定义的位置会影响执行顺序 -
<Script>
可以定义多个
-
-
-
注释
- 单行注释:
// 注释内容
- 多行注释:
/*注释内容*/
- 单行注释:
-
数据类型
- 基本数据类型
number
:数字。整数/小数/NaN
(not a number不是一个数字的数字类型)string
:字符串。boolean
:true和falsenull
:一个对象为空的占位符undefined
:未定义。如果一个变量没有给初始化,则会被默认赋值为undefined
- 引用数据类型:对象
- 基本数据类型
-
变量
- 变量:一小块存储数据的内存空间
- Java语言是强类型语言,而JavaScript是弱类型语言
- 强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型,只能存储固定类型的数据。
- 弱类型:强类型:在开辟变量存储空间时,不定义空间将来存储的数据的数据类型。可以存放任意类型的数据。
- 语法:
var 变量名 = 初始化值;
typeof
运算符:获取变量的类型。- 注:null运算后得到的是object
-
运算符
-
一元运算符
++、--、+
-
算术运算符
+、-、*、/、%
-
赋值运算符
=、+=、-=
-
比较运算符
>、<、>=、<=、==、===(全等于)
-
逻辑运算符
&&、||、!
-
三元运算符
?:
-
-
流程控制语句
-
JS特殊语法
- 语句以;结尾如果只有一条语句则;可以省略(不建议)
- 变量的定义使用
var
关键字,也可以不使用- 用:定义的变量是局部变量
- 不用:定义的变量是全局变量
-
-
基本对象
-
Function:函数(方法)对象
-
创建:
1. var fun = new Function(形参列表,方法体);//不常用 2. function 方法名称(形式参数列表){ 方法体 } 3. var 方法名 = function(形式参数列表){ 方法体 }
-
方法:
-
属性:
length:代表形参个数
-
特点:
- 方法定义是,形参的类型不用写,返回值类型也不用写。
- 方法是一个对象,如果定义名称相同的方法,会覆盖。
- 在JS中,方法的调用只与方法的名称有关,和参数列表无关。
- 在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数
-
调用
方法名称(实际参数列表)
-
-
数组对象
-
创建:
1. var arr = new Array(元素列表); 2. var arr = new Array(默认长度); 3. var arr = [元素列表]
-
方法:
- join(参数):将数组中的元素按照指定的分隔符拼接为字符串。
- push():向数组的末尾添加一个或更多的元素,并返回新的长度。
-
属性:
length:数组的长度
-
特点:
- 在JS中,数组元素的类型是可变的
- 在JS中,数组的长度是可变的
-
-
Boolean
-
Date:日期对象
-
创建:
Date date = new Date();
-
方法:
toLocalString()
:返回当前date对象对应的时间本地字符串格式。getTime()
:获取毫秒值。返回当前日期对象描述的的时间到1970年1月1日零点的毫秒值差。
-
-
Math:数学对象
-
创建:
特点:Math对象不用创建,直接使用。Math.方法名();
-
方法:
- random():返回0~1之间的随机数。包含0,不包含1。
- ceil(x):对数进行上舍入。
- floor(x):对数进行下舍入。
- round(x):把数四舍五入为最接近的数。
-
属性:
PI
-
-
Number
-
String
-
RegExp:正则表达式对象
-
正则表达式:定义字符串的组成规则
-
单个字符:[]
如:[a] [ab] [a-zA-Z0-9_]
特殊符号代表特殊含义的单个字符:
\d:单个数字字符[0-9]
\w:单个单词字符[a-zA-Z0-9_]
-
量词符号:
?:表示出现0次或1次
*:表示出现0次或多次
+:出现1次或多次
{m, n}:
-
正则对象
- 创建
var reg = new RegExp("正则表达式");
var reg = /正则表达式/;
- 方法
- test(参数):验证指定的字符串是否符合正则定义的规范
- 创建
-
-
-
Global
- 特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。
- 方法:
- encodeURI():uri编码
- decodeURI():uri解码
- encodeURIComponent():url编码
- decodeURIComponent():url解码
- parseInt():将字符串转为数字。逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number。
- isNaN():判断一个值是否是NaN。NaN连自己都不相等,NaN参与的==比较全部为false。
- eval():计算JavaScript字符串,并把它作为脚本代码来执行。
- URL编码
- 将中文转成二进制后,每四位一个数字,也就是十六进制表示,每两个前面加上%:%5e%4a
-
-
BOM
- 概念:Browser Object Model 浏览器对象模型
- 组成:
- Window:窗口对象
- Navigator:浏览器对象
- Screen:显示器屏幕对象
- History:历史记录对象
- Location:地址栏对象
- Window对象
- 创建
- 方法
- 与弹出框有关的方法:
- alert():显示带有一段消息和一个确认按钮的警告窗。
- confirm():显示带有一段消息以及确认按钮和取消按钮的对话框,点击确定,返回true,点击取消,返回false。
- prompt():显示可提示用户输入的对话框,返回值为用户输入的值。
- 与打开关闭有关的方法:
- close():关闭浏览器窗口,谁调用关闭谁。
- open():打开一个新的浏览器窗口,返回一个新的Window对象。
- 与定时器有关的方法
- setTimeout():在指定的毫秒数后调用函数或计算表达式。
- 参数:
- js代码或这方法对象
- 毫秒值
- 返回值:唯一标识,用于取消定时器。
- 参数:
- clearTimeout():取消由setTimeout()方法设置timeout。
- setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式。
- setTimeout():在指定的毫秒数后调用函数或计算表达式。
- 与弹出框有关的方法:
- 属性
- 特点
- window对象不需要创建,可以直接使用。window.方法名();
- window引用可以省略。方法名();
- Location:地址栏对象
- 创建(获取)
- window.location
- location
- 方法:
- reload():重新加载当前文档。刷新
- 属性
- href:设置或返回完整的URL。
- 创建(获取)
- History:历史记录对象
- 创建(获取)
- window.history
- history
- 方法:
- back():加载history列表的前一个URL。
- forward():加载history列表的下一个URL。
- go():加载history列表中的某个具体页面。
- 属性
- length:返回当前窗口历史列表中URL的数量。
- 创建(获取)
-
DOM
-
概念:Document Object Model 文档对象模型
-
W3C DOM 标准被分为3个不同的部分:
- 核心 DOM:针对任何结构化文档的标准模型
- Document:文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
- Node:节点对象,其他5个的父对象
- XML DOM:针对XML文档的标准模型
- HTML DOM:针对HTML文档的标准模型
- 核心 DOM:针对任何结构化文档的标准模型
-
核心 DOM
- Document:文档对象
- 创建(获取):在html dom模型中可以使用window对象来获取
- window.document
- document
- 方法:
- 获取Element对象:
- getElementById():根据id属性值获取元素对象,id属性值一般唯一。
- getElementsByTagName():根据元素名称获取元素对象们,返回值是一个数组。
- getElementsByClassName():根据Class属性值获取元素对象们,返回值是一个数组。
- getElementsByName():根据name属性值获取元素对象们,返回值是一个数组。
- 创建其他DOM对象:
- createAttribute(name)
- createComment()
- createElement()
- createTextNode()
- 获取Element对象:
- 属性
- 创建(获取):在html dom模型中可以使用window对象来获取
- Element:元素对象
- 创建(获取):通过document来获取
- 方法:
- removeAttribute():删除属性
- setAttribute():设置属性
- Node:节点对象
- 特点:所有dom对象都可以被视为是一个节点
- 方法:
- CURD DOM树:
- appendChild():向节点的子节点列表的结尾添加新的子节点。
- removeChild():删除(并返回)当前节点的指定子节点。
- replaceChild():用新节点替换一个子节点。
- CURD DOM树:
- 属性
- parentNode:返回节点的父节点。
- Document:文档对象
-
HTML DOM
-
标签体的设置和获取:innerHTML
-
使用HTML元素对象的属性
-
控制样式
-
使用元素的style属性来设置
-
例:
div1.style.border = "1px solid red";
-
-
提前定义好类选择器的样式,通过元素的className属性来设置器属性值。
-
-
-
-
事件监听机制
- 概念:某些某些事件被执行了某些操作之后,触发某些代码的执行。
- 事件:某些操作。如:单击、双击、键盘按下了、鼠标移动了
- 事件源:组件。如:按钮、文本输入框
- 监听器:代码
- 注册监听:将事件、事件源、监听器结合在一起。当事件源上发生了某个事件,则触发执行某个监听器代码。
- 常见的事件:
- 点击事件:
- onclick:单击事件
- ondblclick:双击事件
- 焦点事件:
- onblur:失去焦点
- onfocus:元素获得焦点
- 加载事件:
- onload:一个页面或一幅图片加载完成
- 鼠标事件
- onmousedown:鼠标按钮被按下
- onmouseup:鼠标按钮被松开
- onmousemove:鼠标被移动
- nomouseover:鼠标移动到某元素之上
- onmounsesout:鼠标从某元素移开
- 键盘事件
- onkeydown:某个键盘按键被按下
- onkeyup:某个键盘按键被松开
- onkeypress:某个键盘按键被按下并松开
- 选择和改变
- onchange:域的内容被改变
- onselect:文本被选中
- 表单事件
- onsubmit:确认按钮被点击
- onreset:重置按钮被点击
- 点击事件:
- 概念:某些某些事件被执行了某些操作之后,触发某些代码的执行。
-
前端自学整理3——JavaScript
最新推荐文章于 2024-04-24 09:22:16 发布