文章目录
一、JavaScript简介
JavaScript是一门客户端脚本语言,运行在客户端浏览器中,不需要编译,直接就可以被浏览器解析执行。
JavaScrip可以增强用户和html页面的交互过程,可以来控制html元素,增加一些动态效果,增强用户体验。
1、JavaScript发展史
1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验命名为:C–,后更名为:ScriptEase。
1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript。后来,请来了SUN公司的专家,修改LiveScript,命名为JavaScript。
1996年,微软抄袭JavaScript开发出JScript语言。
1997年。ECMA(欧洲计算机制造商协会),ECMAScript,就是所有客户端脚本语言的标准。
JavaScript=ECMAScript+JavaScript自己特有的东西(BOM+DOM)
二、JavaScript基本语法
1、ECMAScript:客户端脚本语言的标准
1、基本语法
- 与html结合方式
内部JS:
定义<script>,标签体内就是js代码
外部JS:
定义<script>,通过src属性引入外部的js文件
注意:
< script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
< script>可以定义多个。
- 注释
-
数据类型
基本数据类型:
-
变量
是一小块存储数据的内存空间。
语法:
var 变量名=初始化值;
java是强类型语言,JavaScript是弱类型语言:
强类型:在开辟变量存储空间时,定义了空间将来存储的数据类型。只能存储固定类型的数据
弱类型:在开辟变量存储空间时,不定义空间将来存储数据类型,可以存放任意类型的数据
- 流程控制语言
2、基本对象
- Function:函数(方法)对象
创建
1. var fun = new Function(形式参数列表,方法体); //忘掉吧
2.
function 方法名称(形式参数列表){
方法体
}
3.
var 方法名 = function(形式参数列表){
方法体
}
特点:
1、方法定义时,形参的类型不用写
2、方法是一个对象,如果定义名称相同的方法,会覆盖
3、在JS中,方法的调用只与方法的名称有关,和参数列表无关
4、在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数
调用:方法名称(实际参数列表)
- Array:数组对象
创建:
1. var arr = new Array(元素列表);
2. var arr = new Array(默认长度);
3. var arr = [元素列表];
方法: join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push()向数组的末尾添加一个或更多元素,并返回新的长度。
特点:
-
JS中,数组元素的类型可变的。
-
JS中,数组长度可变的。
-
Date:日期对象
-
Math:数学对象
-
RegExp:正则表达式对象
-
Global
2、BOM(浏览器对象模型)
将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作。
组成:
- Window:窗口对象
方法:
与弹出框有关的方法
方法 | 描述 |
---|---|
alert() | 显示带有一段消息和一个确认按钮的警告框 |
confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框 |
prompt() | 显示可提示用户输入的对话框 |
与打开关闭有关的方法
方法 | 描述 |
---|---|
close() | 关闭浏览器窗口 |
open() | 打开一个新的浏览器窗口 |
与定时器有关的方法
方法 | 描述 |
---|---|
setTimeout() | 在指定的毫秒数后调用函数或计算表达式。(一次性定时器) |
clearTimeout() | 取消由 setTimeout() 方法设置的 timeout |
setInterval() | 按照指定的周期(以毫秒计)来调用函数或计算表达式。(循环定时器) |
clearInterval() | 取消由 setInterval() 设置的 timeout |
- Navigator:浏览器对象
- Screen:显示器屏幕对象
- History:历史记录对象
- Location:地址栏对象
3、DOM(文档对象模型)
将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作。功能:控制html文档的内容。
代码:获取页面标签(元素)对象 Element
document.getElementById("id值"):通过元素的id获取元素对象
1、操作Element对象:
- 修改属性值:
2. 明确获取的对象是哪一个?
3. 查看API文档,找其中有哪些属性可以设置
- 修改标签体内容:
* 属性:innerHTML
1. 获取元素对象
2. 使用innerHTML属性修改标签体内容
2、事件监听机制
事件:某些操作,如:单击,双击,键盘按下了,鼠标移动了。
事件源:组件。如:按钮,文本输入框……
监听器:代码。
注册监听:将事件,事件源,监听器结合在一起。当事件源上发生了某个事件,则触发执行了某个监听器代码
功能: 某些组件被执行了某些操作后,触发某些代码的执行
如何绑定事件:
1. 直接在html标签上,指定事件的属性(操作),属性值就是js代码
2. 通过js获取元素对象,指定事件属性,设置一个函数
常见事件