JavaScript
-
概念
一门客户端脚本语言。
- 运行在客户端浏览器中,每一个浏览器都有JavaScript的解析引擎。
- 脚本语言:不需要编译,直接就可以被浏览器解析执行。
-
功能
- 可以用来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户体验。
-
组成
- JavaScript=ECMAScript+BOM+DOM
ECMAScript
-
基本语法
- 与html结合方式
-
内部js:定义< script>,标签内容js内容,写在html代码中
-
外部js:另写一个js文件
-
注意:< script>可以定义在html页面的任何地方,但是定义的位置会影响执行顺序。< script>可以定义多个。
-
注释
- 单行注释://
-
多行煮熟:/* 内容 */
-
数据类型
- 原始数据类型(基本数据类型)
- number:数字,整数/小数/NAN(一个不是数字的数字类型)
- string:字符串,可以是单引号也可以是双引号
- boolean:true和false
- null:一个对象为空的占位符
- undefined:未定义,如果一个变量没有给初始化值,则会被默认赋值为undefined。
- 引用数据类型:对象
-
变量
- 变量:一小块存储数据的内存空间
-
Java语言是强类型语言,而JavaScript是弱类型语言
- 强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据。
- 弱类型:在开辟变量存储空间时,没有定义空间将来存储的数据的数据类型,可以存储任意类型的数据。
- 语法:var 变量名=初始化值。 (输出到页面上:document.write()😉
-
运算符
- 一元运算符:只有一个运算数的运算符
- ++ ,–,+(正号)
- ++在前,先自增再运算
- ++在后,先运算再自增
- 在js中,如果运算数不是运算符所要求的类型,那么js引擎会自动地将运算数进行类型转换(因为+号或-号只能用在number类型上)
- 其他类型转为number
- string转,按照字面值转换,如果字面值不是数字,则转化为NAN(不是数字的数字)
- 其他类型转为number
- 算术运算符
- +,-,*,/,%
- 赋值运算符
- =,+=,-=
- 比较运算符
- 大于,<,大于等于,小于等于,,=(全等于)
- 类型相同,直接比较,如果是字符串,按照字典顺序比较。按位逐一比较,直到得出大小为止。
- 类型不同,先进行类型转换再比较;===全等于,在比较之前,先判断类型,如果类型不一样,直接返回fales
- 大于,<,大于等于,小于等于,,=(全等于)
- 逻辑运算符
- && ,||,!
- !有时候会产生其他类型转boolean
- number:0为假,非0为真
- string:除了空字符串(“”),别的都是true
- null&undefined:都是false
- 对象:所有对象都是true
- !有时候会产生其他类型转boolean
- && ,||,!
- 三元运算符
- ?: 表达式?值1:值2
- 如果表达式成立,输出值1,否则输出值2
- 流程控制语句
- if …else…
- switch
- 在Java中,switch语句可以接受的数据类型:int byte shor char 枚举 string
- 在js中,switch可以接受任意的数据类型
- 特殊语法
- 语句以";"结尾。
- 变量的定义使用var关键字,也可以不使用。
- 用var :定义的变量是局部变量
- 不用var,定义的变量是全局变量
-
-
基本对象
-
function对象
-
创建
-
var fun=new function(形参,方法体);
-
function fun(形参列表){
方法体
}
-
-
-
var fun=function(形参列表){
方法体
}
- 方法
-
属性
-
length长度
-
特点
-
方法定义时,形参的类型不用写
-
方法是一个对象,如果定义名称相同的方法,会发生覆盖
-
在js中,方法的调用制语方法的名称有关,与参数列表无关
- 在方法声明中有一个隐藏的内置对象(数组),arguements封装所有的实际参数
-
调用
- 方法名称(实际参数列表);
-
-
Array数组对象
- 创建
- var arr=new Array(元素列表);元素只有一个,代表数组长度
- var arr=new Array(默认长度);
- var arr=[元素列表];
- 方法
- join(参数);将数组中的元素按照指定的分隔符拼接成字符串,不是如参数默认为逗号
- 属性
- 特点
- js中,数组元素的类型可变
- js中,数组的长度是可变的;如果大于了数组长度则默认为undefined;加入数组长度为5,也可以直接arr[10]=10;中间没写的都是undefined
- 创建
-
Date对象
- 创建
-
var date =new Date();
- 方法
- toLocaleString(),返回当前date对象对应的时间本地字符串格式
- getTime(),获取毫秒值,返回当前对象描述的时间到1970年0分0秒相差的秒
- 方法
-
Math对象
- 创建
-
特点:该对象不用创建,直接使用。Math.方法名();
- 方法
- random(),获取(之间的随机数
- ceil()数进行向上取整
- floor()数进行向下取整
- round()四舍五入
- 方法
-
-
属性
+ PI -
RegExp正则表达式对象
-
正则表达式:定义字符串的组成规则
-
单个字符:[]
如:[a] [ab]a或b [a-z]a到z
特殊符号代表特殊含义的单个字符:
\d:单个数字字符[0-9]
\w:单个单词字符[a-zA-Z]
-
量词符号:
?:表示出现0次或者1次
*:表示出现0次或者多次
+:表示出现1次或多次
{m,n}:表示m<=数量<=n
m如果缺省:{,n}最多n次
n如果缺省:{m,}最少m次
-
开始结束符号
- ^表示开始
- $表示结束
-
-
正则对象
- 创建
- var reg=new RegExp("^正则表达式$");
- var reg=/^正则表达式$/;
- 方法
- test()验证指定的字符串是否符合正则定义的规范
- 创建
-
-
Global对象
-
特点:是个全局对象,这个Global中封装的方法不需要对象就可以直接调用。 方法名();
-
方法
-
encodeURI():uri编码;decodeURI():uri解码
-
encodeURIComponent():uri编码 decodeURIComponent():uri解码
-
-
parseInt()将字符串转为数字 逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number
-
isNAN() 六亲不认,连自己都不忍,NAN参与的==比较全部时false
-
eval();将JavaScript字符串转化成脚本代码来执行
-
-
-
-
DOM简单学习
- 功能:控制html文档内容
-
代码:获取页面标签(元素)对象 Element
- document.getElementById(“id值”);通过元素的id获取元素
- 操作Element对象
- 修改属性值
- 明确获取的对象是哪一个
- 查看API文档,找其中有哪些属性可以设置
- 修改标签体内容(属性:innerHTML)
- 获取标签对象
- 使用innerHTML属性修改标签体内容
-
事件简单学习
- 功能:某些组件被执行了某些操作后,出发某些代码的执行。
- 如何绑定事件
- 指着在html标签上,指定事件的属性(操作),属性值就是js代码
- onclick–单击事件
- 通过js获取元素对象,指定时间属性,设置一个函数
- 指着在html标签上,指定事件的属性(操作),属性值就是js代码
-
BOM学习
- Window:窗口对象
- 创建
- 方法
- 与弹出框有关的方法
- alert()显示带有一段消息和一个确认按钮的警告框。
- confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框;如果用户点击确定按钮,则方法返回true,点击取消按钮,方法返回false
- prompt()显示可提示用户输入的对话框;返回值:获取用户输入的值。
- 与弹出框有关的方法
- 与打开关闭有关的方法
- close()关闭浏览器窗口,谁调用就关谁
- open()打开一个新的浏览器窗口
- 与定时器相关的方法
- 一次性定时器
- setTimeout()在指定的毫秒数后调用函数或计算表达式
- 参数:1.js打麻或者方法对象 2.毫秒值
- 返回值:唯一标识,用来取消定时器
- clearTimeout()取消由setTomeout()方法设定的timeout。
- 循环定时器
- setInterval()按照指定的周期(以毫秒计)来调用函数或者计算表达式。
- clearInterval()取消setInterval()设置的timeout
- 属性
- 获取其他BOM对象
- history location nacigator screen
- 获取DOM对象
- document
- 特点
- window对象不需要创建可以直接使用window使用,window.方法名()
- window引用可以省略,方法名();
- 方法
- Navigator:浏览器对象
-
Screen:显示器屏幕对象
- History:历史记录对象
- 创建(获取)
- window.history 或history
- 方法
- back() 加载history列表中的前一个URL
- forward()加载history列表的下一个URL
- go() 加载history 列表中的某个具体页面
- 参数 :正数,前进几个历史记录;附属,后退几个历史记录
- 属性
- length 返回当前窗口列表中的URL对象
- Location:地址栏对象
- 创建(获取):window.location 或location
- 方法:
- reload()重新加载当前文档
- 属性
- herf 设置或者获取当前界面的路径
-
DOM
-
概念:Document Object Model 文档对象类型
-
将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作。
-
w3c DOM标准被分为三个不同的部分
-
核心DOM–针对任何结构化文档的标准模型
-
Document 文档对象
-
创建(获取):在html DOM模型中中可以使用window对象获取
- 方法
- 获取元素的方法
- getElementById()根据元素id来获取对象,di属性值一般唯一
- getElementsByTagName()根据标签名称来获取对象,返回值是一个数组
- getElementsByClassName()根据class属性值来获取对象,返回值是一个数组
- getElementsByName()根据name属性值来获取对象,返回值是一个数组
- 创建其他DOM的对象
- creatAttribute(name):属性
- creatComment():注释
- creatElement():元素
- creatTextNode():文本节点
-
Element 元素对象
-
获取:通过document来获取和创建
-
方法
-
removeAttribute()删除属性
-
setAttribute()设置属性
- 参数:属性名称,属性值
-
-
-
Attribute 属性对象
-
Text 文本对象
-
Comment 注释对象
-
Node 节点对象,其他五个的父对象
- 特点:所有的dom对象都可以被认为是一个节点
- 方法
- appendChild()向节点的子节点列表的结尾添加新的子节点
- removeChild()删除并返回当前节点的指定子节点
- replaceChild() 用新节点替换一个子结点
- 属性
- parentNode()获取父节点
-
-
HTML DOM --针对HTML文档的标准模型
- 标签体的设置和获取:innerHTML
- 使用html元素对象的属性
- 控制样式
- 使用元素的style属性来设置
- 提前定义好类选择器的样式,通过元素的className属性来设置class的值
-
-
XML DOM --针对XML文档的标准模型
-
-
事件
- 概念:某些组件被执行了某些操作后,出发了某些代码的执行
- 事件:某些操作,如单机,双击,键盘按下,鼠标移动
- 事件源:组件,如按钮,文本输入框等
- 监听器:代码
- 注册监听:将事件,事件源,监听器结合在一起当事件源上发生了某个时间,则触发执行某个监听器代码。
- 常见的事件
- 点击事件
- 单击事件,onclick
- 双击事件,ondbclick
- 焦点事件
- onblur,失去焦点
- 一般用于表单检验
- onfocus,元素获得焦点
- onblur,失去焦点
- 加载事件
- onload,一张页面或者图像完成加载
- 鼠标事件
- onmousedown,鼠标按钮被按下
- 定义方法时,定义一个形参,接收event对象
- evebt对象的button属性可以获取鼠标按钮键被点击。
- onmouseup,鼠标按钮被松开
- onmousemove,鼠标被移动
- onmouseover,鼠标移到某元素之上
- onmouseout,鼠标移开
- onmousedown,鼠标按钮被按下
- 键盘事件
- onkeydown,某个键盘键被按下
- onkeyup,某个键盘按键被松开
- onekeypress,某个键盘按键被按下并松开
- 选择和改变
- onchange ,域的内容被改变
- onselect,文本被选中
- 表单事件
- onsubmit,确认按钮被点击
- 可以阻止表单的提交
- onreset,重置按钮被点击
- onsubmit,确认按钮被点击
- 点击事件
- 概念:某些组件被执行了某些操作后,出发了某些代码的执行