开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第20天，点击查看活动详
1、JavaScript简介
1.1 概述
- JavaScript 是一种客户端脚本语言。运行在客户端浏览器中，每一个浏览器都具备解析 JavaScript 的引擎。
- 脚本语言：不需要编译，就可以被浏览器直接解析执行了。
- 核心功能就是增强用户和 HTML 页面的交互过程，让页面有一些动态效果。以此来增强用户的体验！
1.2 JS使用
1）引入js的方式一：内部方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS快速入门</title>
<script>
document.getElementById("btn").onclick=function () {
alert("点我干嘛？");
}
</script>
</head>
<body>
<button id="btn">点我呀</button>
</body>
</html>
2）引入js的方式一：外部方式
创建js文件:
document.getElementById("btn").onclick=function () {
alert("点我干嘛？");
}
在html中引用外部js文件
<script src="js/my.js"></script>
1.3 JS注释
单行注释
// 注释的内容
多行注释
/*
注释的内容
*/
2、基本语法
2.1 JS输入\输出语句
JavaScript 能够以不同方式“显示”数据：
- 输入框 prompt(“提示内容”);
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出
- 使用 innerHTML 写入 HTML 元素
- 使用 console.log() 写入浏览器控制台
2.2 变量和常量
JavaScript 属于弱类型的语言，定义变量时不区分具体的数据类型。
定义局部变量 let 变量名 = 值;
let name = "张三";
let age = 23;
document.write(name + "," + age +"<br>");
定义全局变量 变量名 = 值;
{
let l1 = "aa";
l2 = "bb";
}
document.write(l2 + "<br>");
定义常量 const 常量名 = 值;
const PI = 3.1415926;
document.write(PI);
总结： 1、局部变量 1)写在函数或者代码块中，使用let/var进行修饰 2) 函数的形参，省略修饰符 let/var 2、全局变量 1) 写在函数外面，能被所有的函数访问到，需要使用let/var进行修饰 2) 写在函数或者代码块中，省略修饰符let/var
2.3 JS中的数据类型
typeof 用于判断变量的数据类型
let age = 18;
document.write(typeof(age)); // number
2.4 JS中的运算符
1）算数运算符
2）赋值运算符
3）比较运算符
4） 逻辑运算符
5）类型运算符
2.5 JS函数
JavaScript 函数是被设计为执行特定任务的代码块。
JavaScript 函数会在某代码调用它时被执行。
定义格式
function 方法名(参数列表) {
方法体;
return 返回值;
}
可变参数
function 方法名(…参数名) {
方法体;
return 返回值;
}
匿名函数
function(参数列表) {
方法体;
}
函数调用
函数中的代码将在其他代码调用该函数时执行：
- 当事件发生时（当用户点击按钮时）
- 当 JavaScript 代码调用时
- 自动的（自调用）
2.6 JS数组
语法：
var array-name = [item1, item2, ...];
实例
var cars = ["Saab", "Volvo", "BMW"];
var cars = [
"Saab",
"Volvo",
"BMW"
];
索引范围:从 0 开始，最大到数组长度-1
数组长度 :数组名.length
for(let i = 0; i < arr.length; i++) { document.write(arr[i] + "<br>"); } document.write("==============<br>");
数组的复制：
// 数组的复制
var arr2 = [...nums];
if(arr2!=null && arr2.length>0){
for(var i=0;i<arr2.length;i++){
document.write(arr2[i]+"<br>");
}
document.write("=================<br>");
}
数组的合并：
// 数组的合并
var a1 = ['张三','李四','王五'];
var a2 =[12,13,14];
var a3 = [...a1,...a2];
if(a3!=null && a3.length>0){
for(var i=0;i<a3.length;i++){
console.log(typeof a3[i]);
document.write(a3[i]+"<br>");
}
document.write("=================<br>");
数组的反转：
// 数组的反转
var array2 = [12,13,14,15,16];
// for(var i=array2.length-1;i>=0;i--){
// console.log(array2[i]);
// var temp = array2[i];
// }
for(var i=0;i<(array2.length-1)/2;i++){
var temp = array2[i];
array2[i] = array2[array2.length-1-i];//
array2[array2.length-1-i] = temp;
}
console.log(array2);
2.7 JS日期
默认情况下，JavaScript 将使用浏览器的时区并将日期显示为全文本字符串：
Tue Apr 02 2019 09:01:19 GMT+0800 (中国标准时间)
创建 Date 对象：
- new Date()
- new Date(year, month, day, hours, minutes, seconds, milliseconds)
- new Date(milliseconds)
- new Date(date string)
实例：
var d = new Date();
1）日期格式
2）日期获取方法
3）日期设置方法
2.8 JS控制语句
1）条件语句
在 JavaScript 中，我们可使用如下条件语句：
- 使用 if 来规定要执行的代码块，如果指定条件为 true
- 使用 else 来规定要执行的代码块，如果相同的条件为 false
- 使用 else if 来规定要测试的新条件，如果第一个条件为 false
- 使用 switch 来规定多个被执行的备选代码块
实例：
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
实例：
switch (new Date().getDay()) {
case 0:
day = "星期天";
break;
case 1:
day = "星期一";
break;
case 2:
day = "星期二";
break;
case 3:
day = "星期三";
break;
case 4:
day = "星期四";
break;
case 5:
day = "星期五";
break;
case 6:
day = "星期六";
}
2）循环语句
JavaScript 支持不同类型的循环：
- for - 多次遍历代码块
- for/in - 遍历对象属性
- while - 当指定条件为 true 时循环一段代码块
- do/while - 当指定条件为 true 时循环一段代码块
实例：
for (i = 0; i < 5; i++) {
text += "数字是 " + i + "<br>";
}
实例：
while (i < 10) {
text += "数字是 " + i;
i++;
}
3）Break 语句
break 语句会中断循环，并继续执行循环之后的代码（如果有）：
for (i = 0; i < 10; i++) {
if (i === 3) { break; }
text += "数字是 " + i + "<br>";
}
4）Continue 语句
continue 语句中断（循环中）的一个迭代，如果发生指定的条件。然后继续循环中的下一个迭代。
for (i = 0; i < 10; i++) {
if (i === 3) { continue; }
text += "数字是 " + i + "<br>";
}
2.9 JS异常
try 语句使您能够测试代码块中的错误。
catch 语句允许您处理错误。
throw 语句允许您创建自定义错误。
finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。
语法：
try {
供测试的代码块
}
catch(err) {
处理错误的代码块
}
实例：
<!DOCTYPE html>
<html>
<body>
<p>请输入 5 - 10 之间的数字：</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入</button>
<p id="message"></p>
<script>
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "空的";
if(isNaN(x)) throw "不是数字";
x = Number(x);
if(x < 5) throw "太小";
if(x > 10) throw "太大";
}
catch(err) {
message.innerHTML = "输入是 " + err;
}
}
</script>
</body>
</html>
this 是什么？
JavaScript this 关键词指的是它所属的对象。
它拥有不同的值，具体取决于它的使用位置：
- 在方法中，this 指的是所有者对象。
- 单独的情况下，this 指的是全局对象。
- 在函数中，this 指的是全局对象。
- 在函数中，严格模式下，this 是 undefined。
- 在事件中，this 指的是接收事件的元素。
3、JS事件
HTML 事件是发生在 HTML 元素上的“事情”。
当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。
1）常见的 HTML 事件
2）事件操作
通过标签中的事件属性进行绑定。
<button id="btn" onclick="执行的功能"></button>
通过 DOM 元素属性绑定。
document.getElementById("btn").onclick = 执行的功能
4、JS 操作DOM
4.1 DOM介绍
- DOM(Document Object Model)：文档对象模型。
- 将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。
对象的 HTML DOM 树
通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：
- JavaScript 能改变页面中的所有 HTML 元素
- JavaScript 能改变页面中的所有 HTML 属性
- JavaScript 能改变页面中的所有 CSS 样式
- JavaScript 能删除已有的 HTML 元素和属性
- JavaScript 能添加新的 HTML 元素和属性
- JavaScript 能对页面中所有已有的 HTML 事件作出反应
- JavaScript 能在页面中创建新的 HTML 事件
4.2 操作DOM
1）查找 HTML 元素
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div class="cls">div3</div>
<div class="cls">div4</div>
<input type="text" name="username" id="username" value="我是输入框中的内容" />
</body>
<script type="text/javascript">
// HTML4、HTML5都支持
// 1. getElementById() 根据id属性值获取元素对象
var div1 = document.getElementById("div1");
console.log("div1",div1);
console.log("div1",div1.innerText);
// 2. getElementsByTagName() 根据元素名称获取元素对象们，返回数组
var div = document.getElementsByTagName("div");
console.log("div",div);
console.log("div",div[0].innerText);
// 3. getElementsByClassName() 根据class属性值获取元素对象们，返回数组
var cls = document.getElementsByClassName("cls");
console.log("cls",cls);
console.log("cls",cls[0].innerText);
// 4. getElementsByName() 根据name属性值获取元素对象们，返回数组
var username = document.getElementsByName("username");
console.log("username",username);
console.log("username",username[0].value);
// 5. 子元素对象.parentElement属性 获取当前元素的父元素
var div4 = document.getElementsByClassName("cls");
var body = div4[1].parentElement;
console.log("body",body);
// innerText:获取标签中间的文本，或者给标签中间添加文本
// value:获取属性value=""的文本，或者给value=""赋值
// HTML5新增的
// 获取单个元素
var el = document.querySelector("#div1");
console.log("el",el.innerText);
// 获取多个元素
// var els = document.querySelectorAll(".cls");//替代掉：document.getElementsByClassName("cls");
// var els = document.querySelectorAll("input[name=username]");// 替代掉：document.getElementsByClassName("cls");
var els = document.querySelectorAll("div");// 替代掉：document.getElementsByTagName("div");
console.log("els",els[0].innerText);
</script>
</html>
2）改变 HTML 元素
3）添加和删除元素
4.3 JS改变HTML值
1）改变 HTML 输出流
在 JavaScript 中，document.write() 可用于直接写入 HTML 输出流：
实例：
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
2）改变 HTML 内容
修改 HTML 文档内容最简单的方法是，使用 innerHTML 属性。
用法：
document.getElementById(id).innerHTML = new text
实例：
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "hello kitty!";
</script>
</body>
</html>
3）改变属性的值
用法：
document.getElementById(id).attribute = new value
实例：
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
