一、引入
可以内部引入和外部引入,这里介绍外部引入方式
1. 将代码编写在独立的JS文件中,比如demo.js
2. 在html页面中用<script>标签引入文件。注意script标签可以出现在html的任意位置,也可以出现多次
<script src="demo.js"></script>
二、基础语法
(1)语法
1. 区分大小写
2. 分号可有可无
3. 注释:单号注释用//,多行注释用/**/
4. 大括号表示代码块
(2)输出语句
1. window.alert()将数据写入警告框,注意window可以省略。Safrai警告框展示如下
2. document.write()写入HTML输出,作为页面的一部分显示
3. console.log()写入浏览器控制台
(3)变量
1. var声明变量。变量可以存放不同类型的值,并且var定义的变量是全局变量,在代码块中声明的变量在代码块外可以获取
2. let声明的是局部变量
3. const定义不可修改的常量
(4)数据类型
1. typeof()得到数据的数据类型
2. ==会进行类型转换(只要值相等就是True),全等===不进行类型转换
3. parseInt()将string转换成number,从第一个字符开始匹配,在遇见第一个非数字的字符时停止转换;如果第一个字符就是非数字,则转换成NaN
三、函数
// 方法一
function function_name(param1, param2...){
// code
return return_value
}
// 方法二:用var进行定义
var functionName = function(param1, param2...) {
}
// 调用时
var result = functionName(params)
alert(result)
四、对象
(1)数组Array
1. 定义
// 方法一
var arrayName = new Array(element_list)
var arr = new Array(1,2,3)
// 方法二
var arrayName = [element_list]
var arr = [1,2,3]
注意JS中的array类型和长度都可变
2. 常用方法
var arr = [1,2,3,4]
// 长度
arr.length
// 遍历所有元素
for (let i=0; i<arr.length; i++){
}
// 遍历有值元素:每个有值元素会作为function的参数e
arr.forEach(function(e){
})
arr.forEach((e)=>{
})
// 添加新元素在尾部,可以同时添加若干
arr.push(1,2)
// 从start开始删除num个
arr.splice(start, num)
(2)字符串
var str = "Hello String"
// 长度
str.length
// 指定位置字符
str.charAt(index)
// 检索字符串所在位置
str.indexOf(substr)
// 去除左右两侧空格,返回新的字符串
var s = str.trim()
// 截取子串,含头不含尾
var s = str.substring(start, end)
(3)JSON对象
1. 自定义对象
是由基础类型组合而成的自定义复合类型
// 定义
var myObject = {
attr1: value1,
attr2: value2,
functionName: function(params){}
}
var user = {
name: 'Tom',
age: 20,
eat: function(){
alert("eat")
}
}
// 调用
myObject.attr
user.name
myObject.function()
user.eat()
2. JSON
是通过JavaScript对象标记法书写的文本, 用于前后端交互,需要将所有attr写在""中
{
"name": "Tome",
"age": 20
}
// 字符串定义(注意本质上是文本)
var jsonStr = '{'key1': 'value1'}'
var userStr = '{"name": "Tom", "age": 20, "addr": ['BJ', 'SH']}'
// 将JSON格式字符串转换成JS对象
var obj = JSON.parse(jsonStr)
alert(obj.name)
// JS对象转换成JSON字符串
var jsonStr = JSON.stringify(object)
(4)BOM
浏览器对象模型,允许JS与浏览器对话,JS将浏览器的各个组成部分封装成对象
1. 浏览器窗口对象Window
// 获取对象,注意调用属性和方法时可以省略window
window
// 获取其他DOM对象
window.history
window.location
window.navigator
// 提示对话框,包括确认和取消两个按钮,分别返回True和False
window.confirm()
// 按照指定周期调用函数,单位为ms
window.setInterval(function, time)
// 一段时间后调用某个函数,单位为ms
window.setTimeout(function, time)
2. 地址栏对象Location
// 获取(window可以省略)
window.location
// URL地址
location.href
// 获取当前URL
location.href
// 跳转页面
location.href = "https://www.baidu.com"
(5)DOM
文档对象模型。将HTML标记语言的各个组成部分封装成对象
// HTML中的Element对象可以通过Document对象获取,而Document对象时通过Window对象获取的
// 根据id属性获取,返回单个对象
var h1 = document.getElementById('id')
// 根据标签名,返回对象列表
var divs = document.getElementByTagName('div')
// 根据name属性,返回对象列表
var names = document.getElementByName()
// 根据class属性,返回对象列表
var classes = document.getElementByClassName()
// 改变<img>的src
img.src = "newURL"
// 设置或返回div对象,注意相当于直接在HTML页面中添加newText,因此newText中可以包含新标签
element.innerHTML = “newText”
div.innerHTML += "<font color='red'>very good</font>"
五、事件监听
在检测到指定事件时执行相应代码
(1)事件绑定
// 方法一:通过HTML中的事件属性
<input type="button" onclick="on()" value="按钮">
<script>
function on(){
}
</script>
// 方法二:通过DOM元素属性
<input type="button" id="btn" value="按钮">
<script>
document.getElementById('btn').onclick=function(){}
</script>
(2)常见事件
onclick | 鼠标点击 |
onblur | 失去焦点(输入框) |
onfocus | 获得焦点 |
onload | 页面/图像完成加载 |
onsubmit | 提交表单 |
onkeydown | 键盘输入 |
onmouseover | 鼠标移动 |
onmouseout | 鼠标移开 |