JavaScript:
概念:一门客户端脚本语言
运行在客户端浏览器中的,每一个浏览器都有JacaScript的解析引擎
脚本语言:不需要编译,直接可以没浏览器解析执行
功能:
可以来增强用户和html页面的交互,可以控制html元素,让页面有一些动态效果,增强用户体验
ECMAScript:
1、基本语法:
1.于html结合方式
内部JS:定义<script>,标签体内容为js代码
外部JS:定义<script>,通过src属性引入外部的js文件
<script>可以定义多个,可以定义在html页面任何地方,位置影响执行顺序
2.注释
单行注释 //
多行注释 /*xxx*/
3.数据类型
原始数据类型(基本)
number:数字。整数/小数/NaN
string:字符串
boolean:true false
null:一个对象为空的占位符
undefined:未定义。一个变量没有给初始化值,默认为undefined
引用数据类型:对象
4.变量:一小块存储数据的内存空间
强类型:在开辟变量存储空间时,定义了空间将来存储数据的数据类型,固定的
弱类型:在开辟变量存储空间时,不定义空间将来存储数据的数据类型
var 变量名 = 初始化值;
typeof 获取变量的类型 null——》object
5.运算符
6.流程控制语句
7.js特殊语法
语句;结尾,一行只有一条语句 ;可以省略
var定义关键字可以不使用,用:定义局部变量,不用:定义全局变量
2、基本对象
Function:函数对象
function 方法名(形参){方法体}
方法会被覆盖,方法的调用和方法有关,和形参无关
Array
var arr = new Array(元素列表);
var arr = new Array(默认长度);
var arr = [元素列表];
数组元素类型和数组长度可变
Boolean
Date
var date = new Date();
Math
Number
String
RegExp:正则表达式对象
正则表达式:定义字符串的组成规则
单个字符 []
var reg = new RegExp("正则表达式");
var reg = /正则表达式/;
test(字符串):验证指定的字符串是否符号正则定义的规范
Global
1.特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用, 方法名();
encodeURL():url编码
decodeURL():url解码
BOM:
概念:Brower Object Model 浏览器对象模型
将浏览器的各个组成部分封装成对象
组成:
Window:窗口对象
1.与弹出框有关的方法
alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认和取消按钮的对话框
点击确认按钮--》true 点击取消按钮--》false
prompt() 显示可提示用户输入的对话框
返回值:用户输入的值
2.与打开关闭有关的方法
close()
open()
3.与定时器有关的方法
setTimeout() 在指定毫秒数后调用函数或计算表达式
clearTimeout() 取消setTimeout()方法设置的timeout
setInterval() 按照指定的周期(毫秒计)来调用函数或计算表达式
clearInterval() 取消setInterval()设置的timeout
获取其他BOM对象
获取DOM对象 document
Navigator:浏览器对象
Screen:显示器屏幕对象
History:历史记录对象
创建(获取):window.history history
方法:
back() 加载历史列表中的前一个URL
forward() 加载历史列表中的下一个URL
go(参数) 加载历史列表中的某个具体页面
属性:
length 返回当前窗口历史列表中的URL数量
Location:地址栏对象
创建(获取):window.location location
方法:reload() 重新加载当前文档,刷新
属性:href 设置或返回完整URL
DOM:
功能:控制html文档的内容
代码:获取页面标签(元素)对象,Element
document.getElementById("id值"):通过元素的id获取元素对象
操作Element对象:
修改属性值、修改标签体内容
1、事件
功能:某些组件被执行了某些操作后,触发了某些代码的执行
onclick--单击事件
概念:Document Object Model 文档对象模型
将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作
W3C DOM 标准被分为3个不同部分:
核心DOM:针对任何结构化文档的标准模型
Document:文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
Node:节点对象,其他5个的父对象
XML DOM:针对XML文档的标准模型
HTML DOM:针对HTML文档的标准模型
核心DOM模型:
Document:文档对象
创建(获取):window.document document
方法:
1.获取Element对象
2.创建其他DOM对象
属性:
Element:元素对象
通过document来获取和创建
方法:
1.removeAttribute()删除属性
2.setAttribute()设置属性
Node:节点对象,其他5个的父对象
特点:所以dom对象都可以被认为是一个节点
方法:
CRUD dom树:
appendChild()
removeChild()
replaceChild()
属性:
parentNode 返回节点的父节点
HTML DOM:
1、标签体的设置和获取:innerHTML
2、使用html元素对象的属性
3、控制元素样式
1.使用元素的style属性来设置
2.提前定义号类选择器的样式,通过元素的className属性来设置器class属性值
事件(监听机制):某些组件被执行了某些操作后,触发了某些代码的执行
事件:某些操作(单击、双击)
事件源:组件。如:按钮、文本输入框...
监听器:代码
注册监听:将事件,事件源,监听器结合在一起。事件源上发生了某个事件,则触发了执行某个监听器的代码
常见事件:
1.点击事件:onclick 单击事件 ondbclick 双击事件
2.焦点事件:onblur 失去焦点 onfocus 元素获得焦点
3.加载事件:onload 一张页面或图片完成加载
4.鼠标事件
5.键盘事件
6.选中和改变
7.表单事件