JS
一、概述
JS:JavaScript,嵌入在html中由浏览器解释运行的脚本代码
作用:通过js可以使页面产生交互效果,增强用户体验
二、JS的引入
注:同名方法执行后定义(引入)的
2.1 内嵌入
在head标签中定义script标签
在script标签中编写js代码
<head>
<script type="text/javascript">
js代码
</script>
</head>
2.2 外联式
创建.js文件,在文件中编写js代码
通过head中的script标签的src属性引入外部的.js源文件
<head>
<script type="text/javascript> src=".js文件路径"></script>
</head>
三、语法
3.1 注释
Java:
1、单行://
2、多行:/* */
3、文档:/** */
html:
1、<!-- -->
css::
1、/* */
js:
1、单行://
2、多行:/* */
jsp:
1、<%-- --%>
3.2 数据类型
1、基本数据类型
- number:数值型
- boolean: 布尔型
- String: 字符串型,js中没有字符类型,字符串可以用“ '‘者’ '包裹
- undefined:未定义,取值只有undefined,表示变量定义后没有赋值就使用
- null:空,取值只有null,表示空字符
2、引用数据类型
3.3 变量的定义
先定义后赋值
格式:
var 变量名:
变量名=值;
定义时赋值
格式:
var 变量名 = 值;
注:
1、var可以省略不屑
2、局部位置下的省略var写法相当于定义在成员位置,前提是该方法被执行了
3、局部位置下的不省略var写法,,会使这个变量只能在局部位置中使用
3.3 运算符
1、算术运算符,同Java
注:
- boolean与number运算时,false视为0,true视为1
2、比较运算符,同Java
注:
- ==:判断数据值是否相同,“3”==3结果是true
- ===:判断数据,类型是否都相同, “3” ===3结果是false
3、赋值运算符,同Java
4、逻辑运算符,同Java
5、位运算符,同Java
6、三元运算符,同Java
3.4 流程控制
同Java
1、if-else
2、switch-case:数据类型可以试任意的
3、while
4、do-while
5、for
四、方法
4.1 方法的定义
方式一:
var 方法名 = new Function("参数1",”参数2“,..."参数n”,“方法体”);
方式二:
function 方法名(参数列表){
方法体
}
方式三:
var 方法名 = function(参数列表){
方法体
}
4.2 方法的调用
方法名(参数列表);
注:
1、形参直接写变量名,不需要写var
2、方法的返回类型不用写出,但是方法可以有返回值,用return返回
3、同名方法会有覆盖
五、数组
定义格式:
1、var arr1 = new Array(长度);
2、var arr2 = new Array(元素列表);
3、var arr3 = [元素1,元素2,元素3,...];
用法同Java
1、length:获取长度
2、数组名[下标]
3、下标范围:0~长度-1;
与Java数组的不同之处:
1、长度可变
2、元素的数据类型是任意的
3、没有默认值,如果没有赋值就获取返回的是undefined
4、越界时返回的结果是undefined
常用方法:
push():将元素添加数组的末尾,数组长度自动+1,并返回添加后的数组长度
六、DOM文档对象模型
元素对象的获取:
1、getElementByid(id值):通过id值找到唯一的元素
2、getElementsByName(class值):通过class值找到所有具有该class属性值的元素
3、getElementsByTagName(标签名):通过标签名找到所有该标签组成的数组
4、getElementsByName(name值):通过name值找到所有具有该name属性值的元素
七、BOM 浏览器对象模型
1、window
2、history
3、location
4、screen
5、navigator
7.1 history
- go(参数):
- 参数1:前进
- 参数-1:后退
- forward():前进
- back():后退
7.2location
- href:设置目标地址
- reload():刷新页面
7.3 window
- 提示框
- alter(显示内容):警告框
- confirm(显示内容):确认框,点击"确定"返回true,反之返回false
- prompt(显示内容):输入框,输入内容后点击"确定"返回输入的内容,点击"取消"或者不输入返回null
- 浏览器窗口的开关
- open(目标地址):在新窗口中打开指定页面
- 定时器
- setInterval():表示每隔指定的实践执行一次功能
- clearInterval():清楚定时器
- setTimeout(功能,毫秒值):表示指定时间后执行功能
- clearTimeout:清除定时器
注:window可以省略