概念
JavaScript 是一门跨平台、面向对象的脚本语言,不需要编译,由浏览器直接解析并执行。JavaScript 是用来控制网页行为的,它能使网页可交互;那么它可以做什么呢?如改变页面内容、修改指定元素的属性值、对表单进行校验等。
引入方式
内部脚本
在 HTML 中,JavaScript 代码必须位于 <script>
与 </script>
标签之间,在 HTML 文档中可以在任意地方,放置任意数量的<script>
标签,但一般把脚本置于<body>
元素的底部,可改善显示速度。
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
alert("hello js1");
</script>
</body>
</html>
外部脚本
- 在
demo.js
中书写代码,如下(在js文件中直接写 js 代码即可,不要在 js文件 中写script
标签)
注:<script>
标签不能自闭合,即必须写一对标签。
alert("hello js");
- 在页面中引入外部的js文件,在页面使用
script
标签中使用src
属性指定 js 文件的 URL 路径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../js/demo.js"></script>
</body>
</html>
基础语法
书写语法
- 区分大小写:与 Java 一样,变量名、函数名以及其他一切东西都是区分大小写的
- 每行结尾的分号可有可无,建议加上
如果一行上写多个语句时,必须加分号用来区分多个语句。 - 注释
- 单行注释:// 注释内容
- 多行注释:/* 注释内容 */
注意:JavaScript 没有文档注释
输出语句
- 使用
window.alert()
弹出警告框,window为内置对象可直接写alert()方法 - 使用
document.write()
写入 HTML 输出 - 使用
console.log()
写入浏览器控制台
变量
- var 关键字(variable 的缩写)来声明变量。格式
var 变量名 = 数据值;
。JavaScript 是一门弱类型语言,变量可以存放不同类型的值;如下在定义变量时赋值为数字数据,还可以将变量的值改为字符串类型的数。
var test = 20;
test = "张三";
var
关键字有点特殊,有以下地方和其他语言不一样
- 作用域:全局变量
{
var age = 20;
}
alert(age); // 在代码块中定义的age 变量,在代码块外边还可以使用
- 变量可以重复定义
{
var age = 20;
var age = 30;//JavaScript 会用 30 将之前 age 变量的 20 替换掉
}
alert(age); //打印的结果是 30
针对如上的问题,ECMAScript 6 新增了
let
关键字来定义变量。它的用法类似于var
,但是所声明的变量,只在let
关键字所在的代码块内有效,且不允许重复声明。
ECMAScript 6 新增了 const关键字,用来声明一个只读的常量。一旦声明,常量的值就不能改变。
js 中的变量名命名也有如下规则,和java语言基本都相同
- 组成字符可以是任何字母、数字、下划线(_)或美元符号($)
- 数字不能开头
- 建议使用驼峰命名
数据类型
JavaScript 中提供了两类数据类型:原始类型 和 引用类型。
使用 typeof 运算符可以获取数据类型:alert(typeof age);
原始数据类型
- number:数字(整数、小数、NaN(Not a Number))
- string:字符、字符串,单双引皆可
- boolean:布尔。true,false
- null:对象为空。注:对null使用
typeof
判定得到的是Object
结果 - undefined:当声明的变量未初始化时,该变量的默认值是 undefined
运算符
JavaScript 提供了如下的运算符。大部分和 Java语言 都是一样的,不同的是 JS 关系运算符中的 ==
和 ===
。
- 一元运算符:++,–
- 算术运算符:+,-,*,/,%
- 赋值运算符:=,+=,-=…
- 关系运算符:>,<,>=,<=,!=,==,===…
- 逻辑运算符:&&,||,!
- 三元运算符:条件表达式 ? true_value : false_value
==和===区别
- ==:
- 判断类型是否一样,如果不一样,则进行类型转换
- 再去比较其值
- ===:js 中的全等于
- 判断类型是否一样,如果不一样,直接返回false
- 再去比较其值
上述讲解 ==
运算符时,发现会进行类型转换,所以接下来我们来详细的讲解一下 JavaScript 中的类型转换。
其他类型转为number
-
string 转换为 number 类型:按照字符串的字面值,转为数字。如果字面值不是数字,则转为NaN
将 string 转换为 number 有两种方式:- 使用
+
正号运算符: - 使用
parseInt()
函数(建议使用):
- 使用
-
boolean 转换为 number 类型:true 转为1,false转为0
其他类型转为boolean
- number 类型转换为 boolean 类型:0和NaN转为false,其他的数字转为true
- string 类型转换为 boolean 类型:空字符串转为false,其他的字符串转为true
- null类型转换为 boolean 类型是 false
- undefined 转换为 boolean 类型是 false
流程控制语句
与Java、C++完全一样这边不赘述(if、switch、for、while、dowhile)
函数
定义
方式1
function 函数名(参数1,参数2..){
要执行的代码
}
方式2
var 函数名 = function (参数列表){
要执行的代码
}
注:形式参数和返回值不需要类型,因为JavaScript是弱类型语言。
调用
调用:函数名称(实际参数列表);
注意:
- JS中,函数调用可以传递任意个数参数
- 例如
let result = add(1,2,3);
它是将数据 1 传递给了变量a,将数据 2 传递给了变量 b,而数据 3 没有变量接收。
JavaScript常用对象
Array对象
定义
- var 变量名 = new Array(元素列表);
var arr = new Array(1,2,3); //1,2,3 是存储在数组中的数据(元素)
- var 变量名 = [元素列表];
var arr = [1,2,3]; //1,2,3 是存储在数组中的数据(元素)
注意:Java中的数组静态初始化使用的是{}定义,而 JavaScript 中使用的是 [] 定义
访问
访问数组中的元素和 Java 语言的一样,格式如下:
arr[索引] = 值;
特点
JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的,而 JavaScript 是弱类型,所以可以存储任意的类型的数据。
属性
length
属性,该数组可以动态的获取数组的长度。而有这个属性,我们就可以遍历数组了
方法
- push 函数:给数组添加元素,也就是在数组的末尾添加元素
- splice 函数:删除元素
- 参数1:索引。表示从哪个索引位置删除
- 参数2:个数。表示删除几个元素
String对象
创建
var 变量名 = new String(s);
var 变量名 = "hello";
属性
String对象提供了很多属性,下面给大家列举了一个属性 length
,该属性是用于动态的获取字符串的长度
方法
charAt()
方法可返回指定位置的字符。indexOf()
方法可返回某个指定的字符串值在字符串中首次出现的位置。trim()
方法用来去掉字符串两端的空格。
自定义对象
var 对象名称 = {
属性名称1:属性值1,
属性名称2:属性值2,
...,
函数名称:function (形参列表){},
...
};
调用:
- 对象名.属性名
- 对象名.方法名()
BOM
BOM 中包含了如下对象:
- Window:浏览器窗口对象
- Navigator:浏览器对象
- Screen:屏幕对象
- History:历史记录对象
- Location:地址栏对象
1. Window对象
Window为内置对象,可以直接使用
window
对象提供了用于获取其他四个 BOM 组成对象的属性。
例如Window.History
获取History对象,而前面的Window.
可以省略,
即可以直接通过History获取其对象。
Window对象的方法
setTimeout(function,毫秒值)
:在一定的时间间隔后执行一个function,只执行一次setInterval(function,毫秒值)
:在一定的时间间隔后执行一个function,循环执行confirm("字符串");
:一个弹窗,有确认和取消按钮
// confirm(),点击确定按钮,返回true,点击取消按钮,返回false
var flag = confirm("确认删除?");
alert("字符串");
:一个弹窗
History对象
方法:
back()
:加载history列表中的前一个URLforward()
:加载history列表中的下一个URL
这两个方法就相当于浏览器的左右箭头
Location对象
Location对象属性
Location对象提供了很对属性。以后常用的只有一个属性 href
:设置或返回完整的URL,举例:location.href = "https://www.baidu.com";
DOM
DOM包括:
- Document:整个文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
作用:
JavaScript 通过 DOM, 就能够对 HTML进行操作了
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式(CSS)
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素
获取对象
getElementById()
:根据id属性值获取,返回单个Element对象getElementsByTagName()
:根据标签名称获取,返回Element对象数组getElementsByName()
:根据name
属性值获取,返回Element对象数组getElementsByClassName()
:根据class属性值获取,返回Element对象数组
对象使用
HTML 中的 Element
元素对象有很多,不可能全部记住,以后是根据具体的需求查阅文档使用。
举例:
//1,获取所有的 div 元素对象
var divs = document.getElementsByTagName("div");
/*
style:设置元素css样式
innerHTML:设置元素内容
*/
//2,遍历数组,获取到每一个 div 元素对象,并修改元素内容
for (let i = 0; i < divs.length; i++) {
//divs[i].style.color = 'red';
divs[i].innerHTML = "呵呵";
}
//1,获取所有的 复选框 元素对象
var hobbys = document.getElementsByName("hobby");
//2,遍历数组,通过将 复选框 元素对象的 checked 属性值设置为 true 来改变复选框的选中状态
for (let i = 0; i < hobbys.length; i++) {
hobbys[i].checked = true;
}
事件监听
事件绑定
方式一:通过 HTML标签中的事件属性进行绑定
给输入框绑定点击事件为方法on
<input type="button" onclick='on()’>
function on(){
alert("我被点了");
}
方式二:通过 DOM 元素属性绑定
<input type="button" id="btn">
document.getElementById("btn").onclick = function (){
alert("我被点了");
}
常见事件
上面案例中使用到了 onclick
事件属性,那都有哪些事件属性供我们使用呢?下面就给大家列举一些比较常用的事件属性
事件属性名 | 说明 |
---|---|
onclick | 鼠标单击事件 |
onblur | 元素失去焦点 |
onfocus | 元素获得焦点 |
onload | 某个页面或图像被完成加载 |
onsubmit | 当表单提交时触发该事件 |
onmouseover | 鼠标被移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
正则对象
创建对象
- 直接量方式:注意不要加引号
var reg = /正则表达式/;
- 创建 RegExp 对象
var reg = new RegExp("正则表达式");
正则对象的函数
test(str)
:判断指定字符串是否符合规则,返回 true或 false
规则
正则表达式常用的规则如下:
- ^:表示开始
- $:表示结束
- [ ]:代表某个范围内的单个字符,比如: [0-9] 单个数字字符
- .:代表任意单个字符,除了换行和行结束符
- \w:代表单词字符:字母、数字、下划线(),相当于 [A-Za-z0-9]
- \d:代表数字字符: 相当于 [0-9]
量词:
- +:至少一个
- *:零个或多个
- ?:零个或一个
- {x}:x个
- {m,}:至少m个
- {m,n}:至少m个,最多n个
Q.E.D.