文章目录
- 1、JS书写位置
- 2、注释和结束符
- 3、输出输入语法
- 4、变量的声明赋值和使用
- 5、操作HTML元素
- 6、字面量
- 7、JavaScript 数据类型
- 8、对象
- 9、数组
- 10、字符串
- 11、条件
- 12、循环
- 13、创建函数
- 14、常用内置对象介绍
- 15、对话框
- 16、页面加载事件
- 17、获取浏览器尺寸
- 18、定时器
- 19、DOM
- 20、异常处理
1、JS书写位置
<body>
<script>
script>
<script src="JS路径">script>
<button onclick="alert('开玩笑的啦')">点击button>
body>
2、注释和结束符
// 单行注释 快捷键：Ctrl + /
/* */ 多行注释 快捷键：Shift + Alt + A
// 结束符：使用英文的 ; 代表语句结束
// 实际开发中，可写可不写，浏览器可以自动推断语句的结束位置
// 约定：为了统一风格，结束符要么每句都写，要么每句都不写
3、输出输入语法
<script>
document.write("要输出的内容")
document.write("标题
")
console.log('控制台')
prompt("请输入您的年龄：")
script>
4、变量的声明赋值和使用
// 变量是用于存储信息的"容器"。
// 声明变量：let 变量名（注：以前使用var）
let age
// 变量命名规则
// 1、不能用关键字
// 2、只能用下划线、字母、数字、$组成，且数字不能开头
// 3、字母严格区分大小写
// 赋值
age = 18
// 声明的同时直接赋值 变量的初始化
let age = 18
//声明多个变量
let name = '张三',age = 18
5、操作HTML元素
// 改变 HTML 内容
DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面h1>
<p id="demo">我的第一个段落p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
script>
body>
html>
// 改变 HTML 属性
doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>title>
head>
<body>
<img id="image" src="https://www.baidu.com/img/bd_logo1.png" />
<script>
document.getElementById("image").src =
"https://static.shiyanlou.com/img/shiyanlou_logo.svg";
script>
body>
html>
// 改变 HTML 元素的样式
doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>title>
head>
<body>
<p id="syl" style="color: red;">实验楼p>
<script>
document.getElementById("syl").style.color = "green";
script>
body>
html>
6、字面量
数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)：3.14 101 123e5
字符串（String）字面量 可以使用单引号或双引号：'Tom' "John"
表达式字面量 用于计算：5 + 6
数组（Array）字面量 定义一个数组：[40, 100, 1, 5, 25, 10]
对象（Object）字面量 定义一个对象：{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
函数（Function）字面量 定义一个函数：function myFunction(a, b) { return a * b;}
7、JavaScript 数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、
未定义（Undefined）、Symbol（注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。）。
值类型的值是不可变的，不可变是指值类型指向的空间不可变。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，
还有两个特殊的对象：正则（RegExp）和日期（Date）。
引用类型赋值，是将地址复制一份。
变量的数据类型可以使用 typeof 操作符来查看：typeof "John" // 返回 string
8、对象
// 通过对象字面量来创建
var student = {
name: "zhangsan",
age: 18,
gender: "male",
sayHi: function () {
console.log("hi,my name is " + this.name);
},
};
// 通过 new Object() 创建对象
var student = new Object();
(student.name = "zhangsan"),
(student.age = 18),
(student.gender = "male"),
(student.sayHi = function () {
console.log("hi,my name is " + this.name);
});
// 通过工厂函数创建对象
function createStudent(name, age, gender) {
var student = new Object();
student.name = name;
student.age = age;
student.gender = gender;
student.sayHi = function () {
console.log("hi,my name is " + this.name);
};
return student;
}
var s1 = createStudent("zhangsan", 18, "male");
// 自定义构造函数
function Student(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
this.sayHi = function () {
console.log("hi,my name is " + this.name);
};
}
var s1 = new Student("zhangsan", 18, "male");
// 原型
function Student(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
Student.prototype.sayHi = function () {
console.log("hi");
};
var s1 = new Student("zhangsan", 18, "male");
s1.sayHi(); // 打印 hi
var s2 = new Student("lisi", 18, "male");
s2.sayHi(); // 打印 hi
console.log(s1.sayHi == s2.sayHi); // 结果为 true
// 访问对象属性
Student.name;
Student["name"];
var student = {
name: "zhangsan",
age: 18,
gender: "male",
};
// 遍历对象的属性
for (var key in student) {
console.log(key);
console.log(student[key]);
}
// 删除对象的属性
delete student.name;
9、数组
var myarray = new Array(1, 2, 3, 4, 5); // 创建数组同时赋值
// or
var myarray = [1, 2, 3, 4, 5]; // 直接输入一个数组（称“字面量数组”）
myarray.length; //获取数组长度
//字符串转换为数组
"1:2:3:4".split(":"); // returns ["1", "2", "3", "4"]
"|a|b|c".split("|"); // returns ["", "a", "b", "c"]
//数组转换为字符串
["1", "2", "3", "4"].join(":"); // returns "1:2:3:4"
["", "a", "b", "c"].join("|"); // returns "|a|b|c"
//在数组尾部添加一个或多个元素 开始 unshift()
myarray.push("6","7");
//删除数组的最后一个元素 开始 shift()
myarray.pop()
10、字符串
// 连接字符串
var one = "Hello,jack.";
var two = "I'm rose";
result = one + two;
// 字符串转换
// 把数字转换成字符串
var myNum = 123;
var myString = myNum.toString(); // 数值类型的 toString()，可以携带一个参数，输出对应进制的值 2 8 10 16
// or
var num = String(myNum); // 因为有的值没有 toString() 方法，所以需要用 String()
typeof myString;
// 字符串类型的数字转换为数字
var myString = "123";
var myNum = Number(myString);
typeof myNum;
// 获取字符串长度
var myString = "hello world ";
myString.length;
// 在字符串中查找子字符串
str.indexOf(searchValue, fromIndex);
/*
str 指的是我们需要查的较长的字符串，searchValue 表示我们指定的较小的字符串，
fromIndex 表示调用该方法的字符串中开始查找的位置，是一个可选的任意整数值，也可以不写，
默认是 0 表示从头开始查，fromIndex < 0 和 fromIndex = 0 是一样的效果，表示从头开始查找整个字符串。
如果 fromIndex >= str.length，则该方法的返回值为 -1。
这里有个特殊的情况：就是如果被查找的字符串（searchValue）是一个空字符串，
那么当 fromIndex <= 0 时返回 0，0 < fromIndex <= str.length 时返回 fromIndex，
fromIndex > str.length 时返回 str.length。
*/
// 在字符串中提取子字符串
"Blue Sky".slice(0, 3); // returns "Blu"
// 第一个参数 start 是开始提取的字符位置，第二个参数 end 是提取的最后一个字符的后一个位置。
// 所以提取从第一个位置开始，直到但不包括最后一个位置。
// 另外第二个参数也可以不写，不写代表某个字符之后提取字符串中的所有剩余字符。
// 转换大小写
var string = "I like study";
string.toLowerCase(); // returns "i like study"
string.toUpperCase(); // returns "I LIKE STUDY"
// 替换字符串的某部分
var string = "I like study";
string.replace("study", "sleep"); // returns "I like sleep"
// 转换成数值类型
// Number() 可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回 NaN（not a number）
var num1 = Number(true);
num1; // true 返回 1，false 返回 0
var num2 = Number(undefined);
num2; // 返回 NaN
var num3 = Number(null);
num3; // 返回 0
var num4 = Number("syl");
num4; // 返回 NaN
var num5 = Number(" ");
num5; // 如果是空字符串返回 0
var num6 = Number(123);
num6; // 返回123，如果是数字型的字符，返回数字
var num7 = Number("123abc");
num7; // 返回 NaN
// parseInt() 把字符串转换成整数 可以传递两个参数，第一个参数是要转换的字符串，第二个参数是要转换的进制
var num1 = parseInt("12.3abc");
num1; // 返回 12，如果第一个字符是数字会解析知道遇到非数字结束，只取整，不是约等于
var num2 = parseInt("abc123");
num2; // 返回 NaN，如果第一个字符不是数字或者符号就返回 NaN
var num3 = parseInt("");
num3; // 空字符串返回 NaN，但是 Number("")返回 0
var num4 = parseInt("520");
num4; // 返回 520
var num5 = parseInt("0xA");
num5; // 返回 10
// parseFloat() 把字符串转换成浮点数。写法和 parseInt() 相似，主要有以下几个不同点：
// parseFloat 不支持第二个参数，只能解析 10 进制数。
// 如果解析的内容里只有整数，解析成整数。
// 转换成布尔类型
Boolean(123); // returns true
Boolean("abc"); // returns true
Boolean(null); // returns false
Boolean(undefined); // returns false
Boolean(NaN); // returns false
Boolean(0); // returns false
Boolean(""); // returns false
Boolean(false); // returns false
Boolean("false"); // returns true
Boolean(-1); // returns true
11、条件
if (条件)
{
// 当条件为 true 时执行的语句
}
else
{
// 当条件为 false 时执行的语句
}
if(条件 1)
{
// 当条件 1 为 true 时执行的代码
}
else if(条件 2)
{
// 当条件 2 为 true 时执行的代码
}
else
{
// 当条件 1 和 条件 2 都不为 true 时执行的代码
}
switch(k)
{
case 1:
执行代码块 1 ;
break;
case 2:
执行代码块 2 ;
break;
default:
默认执行（k 值没有在 case 中找到匹配时）;
}
// 三元运算符
条件表达式？结果 1:结果 2
12、循环
for (初始化; 条件; 增量)
{
循环代码;
}
使用 break 跳出循环
使用 continue 跳过迭代 不是完全跳出循环，而是跳过当前循环而执行下一个循环
while (条件)
{
// 需要执行的代码;
}
while 循环只有在条件为真的时候才执行
do
{
// 需要执行的代码;
} while (条件);
do while 循环在检测条件之前就会执行
while 循环，先判断再执行；do while 循环先执行一次再判断。
13、创建函数
函数声明创建函数
function functionName(parameters)
{
// 执行的代码
}
函数表达式创建函数
var functionName = function (parameters)
{
// 执行的代码
};
在 JavaScript 中没有重载
在 JavaScript 中函数的返回值
如果函数中没有 return 语句，那么函数默认的返回值是：undefined。
如果函数中有 return 语句，那么跟着 return 后面的值就是函数的返回值。
如果函数中有 return 语句，但是 return 后面没有任何值，那么函数的返回值也是：undefined。
函数在执行 return 语句后会停止并立即退出，也就是说 return 语句执行之后，剩下的代码都不会再执行了。
当函数外部需要使用函数内部的值的时候，我们不能直接给予，需要通过 return 返回。
匿名函数 匿名函数就是没有命名的函数，一般用在绑定事件的时候
function()
{
// 执行的代码
}
匿名函数不能通过直接调用来执行，因此可以通过匿名函数的自调用的方式来执行
(function () {
alert("hello");
})();
递归
function foo(n) {
if (n == 0) {
return 0;
} // 临界条件
else {
return n + foo(n - 1);
}
}
var a = foo(10);
a; // 55
闭包是指函数可以使用函数之外定义的变量。
简单的闭包
var num = 3;
function foo() {
console.log(num);
}
foo(); //打印 3
复杂的闭包
function f1() {
var num1 = 6;
function f2() {
var num2 = 7;
return num2;
}
console.log(num1 + f2());
}
f1();
在函数代码中，使用特殊对象 arguments，无需明确指出参数名，我们就能访问它们。
第一个参数是 arguments[0]，第二个参数是 arguments[1]，以此类推。
function add() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
add(); // 0
add(1); // 1
add(1, 2); // 3
add(1, 2, 3); // 6
用 Function() 对象创建函数的语法如下：
var function_name = new Function(arg1, arg2, ..., argN, function_body)
注：每个参数都必须是字符串，function_body 是函数主体，也就是要执行的代码。
例子：
var add = new Function("a", "b", "console.log(a+b);");
add(2, 5); // 打印 7
function addF(foo, b, c) {
foo(b, c);
}
var add = new Function("a", "b", "console.log(a+b);");
addF(add, 2, 5); // 打印 7
14、常用内置对象介绍
Array 对象
Array 对象的常用属性：length，获取数组的长度。
Array 对象的常用方法：
concat() 方法用于连接两个或多个数组，并返回结果。
var a = [1, 2, 3];
var b = [4, 5, 6];
var c = ["one", "two", "three"];
console.log(a.concat(b, c)); // 打印结果为：[1, 2, 3, 4, 5, 6, "one", "two", "three"]
join() 方法，将数组转换成字符串。
pop() 方法，删除并返回数组的最后一个元素。
push() 方法，向数组的末尾添加一个或更多元素，并返回新的长度。
reverse() 方法，颠倒数组的顺序。
shift() 方法，删除并返回数组的第一个元素。
unshift() 方法，向数组的开头添加一个或更多元素，并返回新的长度。
slice(start, end) 方法，从某个已有的数组返回选定的元素。
// strat 值是必需的，规定从何处开始选取
// end 值可选，规定从何处结束选取，如果没有设置，默认为从 start 开始选取到数组后面的所有元素
splice(start, deleteCount, options) 方法，删除或替换当前数组的某些项目。
// start 值是必需的，规定删除或替换项目的位置
// deleteCount 值是必需的，规定要删除的项目数量，如果设置为 0，则不会删除项目
// options 值是可选的，规定要替换的新项目
// 和 slice() 方法不同的是 splice() 方法会修改数组
sort() 方法，将数组进行排序。
String 对象
String 对象的常用属性：length，获取字符串的长度。
String 对象的常用方法：
charAt(index) 方法，获取指定位置处字符。
// 字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串
charCodeAt(index) 方法，获取指定位置处字符的 Unicode 编码。
concat() 方法，连接字符串，等效于 “+”，“+” 更常用。与数组中的 concat() 方法相似。
slice() 方法，提取字符串的片断，并在新的字符串中返回被提取的部分。
indexOf() 方法，检索字符串。
toString() 方法，返回字符串。
toLowerCase() 方法，把字符串转换为小写。
toUpperCase() 方法，把字符串转换为大写。
replace() 方法，替换字符串中的某部分。
split() 方法，把字符串分割为字符串数组。
Date 对象
Date 对象方法：
Date()：返回当日的日期和时间（输出的是中国标准时间）。
getDate()：从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()：从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()：从 Date 对象返回月份 (0 ~ 11)。
getFullYear()：从 Date 对象以四位数字返回年份。
getHours()：返回 Date 对象的小时 (0 ~ 23)。
getMinutes()：返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()：返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()：返回 Date 对象的毫秒(0 ~ 999)。
Math 对象
Math 对象的常用属性：
E ：返回常数 e (2.718281828...)。
LN2 ：返回 2 的自然对数 (ln 2)。
LN10 ：返回 10 的自然对数 (ln 10)。
LOG2E ：返回以 2 为底的 e 的对数 (log2e)。
LOG10E ：返回以 10 为底的 e 的对数 (log10e)。
PI ：返回 π（3.1415926535...)。
SQRT1_2 ：返回 1/2 的平方根。
SQRT2 ：返回 2 的平方根。
Math 对象的常用方法：
abs(x) ：返回 x 的绝对值。
round(x) ：返回 x 四舍五入后的值。
sqrt(x) ：返回 x 的平方根。
ceil(x) ：返回大于等于 x 的最小整数。
floor(x) ：返回小于等于 x 的最大整数。
sin(x) ：返回 x 的正弦。
cos(x) ：返回 x 的余弦。
tan(x) ：返回 x 的正切。
acos(x) ：返回 x 的反余弦值（余弦值等于 x 的角度），用弧度表示。
asin(x) ：返回 x 的反正弦值。
atan(x) ：返回 x 的反正切值。
exp(x) ：返回 e 的 x 次幂 (e^x)。
pow(n, m) ：返回 n 的 m 次幂 (nm)。
log(x) ：返回 x 的自然对数 (ln x)。
max(a, b) ：返回 a, b 中较大的数。
min(a, b) ：返回 a, b 中较小的数。
random() ：返回大于 0 小于 1 的一个随机数。
15、对话框
alert()：显示带有一段消息和一个确认按钮的警告框。
prompt()：显示可提示用户输入的对话框。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
16、页面加载事件
window.onload = function () {
// 当页面加载完成执行
// 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
};
window.onunload = function () {
// 当用户退出页面时执行
};
17、获取浏览器尺寸
var width = window.innerWidth;
document.documentElement.clientWidth;
document.body.clientWidth;
var height = window.innerHeight;
document.documentElement.clientHeight;
document.body.clientHeight;
18、定时器
// setTimeout() 方法在指定的毫秒数到达之后执行指定的函数，只执行一次。
// clearTimeout() 方法取消由 setTimeout() 方法设置的 timeout。
// 创建一个定时器，2000毫秒后执行，返回定时器的标示
var timerId = setTimeout(function () {
console.log("Hello shiyanlou");
}, 2000);
// 取消定时器的执行
clearTimeout(timerId);
// setInterval() 方法设置定时调用的函数也就是可以按照给定的时间（单位毫秒）周期调用函数，
// clearInterval() 方法取消由 setInterval() 方法设置的 timeout。
// 创建一个定时器，每隔 2 秒调用一次
var timerId = setInterval(function () {
var date = new Date();
console.log(date.toLocaleTimeString());
}, 2000);
// 取消定时器的执行
clearInterval(timerId);
19、DOM
// 获取节点
// 通过 ID 找到 HTML 元素：使用方法 getElementById() 通过元素的 ID 而选取元素
document.getElementById("demo"); // 假定已经有一个 ID 名为 demo 的标签，可以这样来获取它
// 通过标签名找到 HTML 元素：使用方法 getElementsByTagName() 来选取元素，
// 如果有多个同类型标签，那么我们可以通过下标来确认
<html>
<body>
<input type="text" />
<input type="text" />
<script>
document.getElementsByTagName("input")[0].value = "hello";
document.getElementsByTagName("input")[1].value = "shiyanlou";
script>
body>
html>
// 通过类名来找到 HTML 元素：使用方法 getElementsByClassName() 通过元素的类名来选取元素。
document.getElementsByClassName("name"); // 返回包含 class = "name" 的所有元素的一个列表。
// 获取文档中第一个 <p> 元素：
document.querySelector("p");
// 获取文档中 class="example" 的第一个元素:
document.querySelector(".example");
// 获取文档中 class="example" 的第一个 <p> 元素:
document.querySelector("p.example");
// 获取文档中有 "target" 属性的第一个 <a> 元素：
document.querySelector("a[target]");
// 创建节点
创建元素节点：使用 createElement() 方法。比如：var par = document.createElement("p");
创建属性节点：使用 createAttribute() 方法。
创建文本节点：使用 createTextNode() 方法。
// 插入子节点
appendChild () 方法向节点添加最后一个子节点。
insertBefore (插入的新的子节点，指定的子节点) 方法在指定的子节点前面插入新的子节点。如果第二个参数没写或者为 null，则默认插入到后面。
// 删除节点
父节点.removeChild(子节点);
node.parentNode.removeChild(node); // 如果不知道父节点是什么，可以这样写
// 替换子节点
node.replaceChild(newnode, oldnode);
// 设置节点属性
获取：getAttribute(name)
设置：setAttribute(name, value)
删除：removeAttribute(name)
// 常用的事件
onclick 鼠标单击
ondblclick 鼠标双击
onkeyup 按下并释放键盘上的一个键时触发
onchange 文本内容或下拉菜单中的选项发生改变
onfocus 获得焦点，表示文本框等获得鼠标光标。
onblur 失去焦点，表示文本框等失去鼠标光标。
onmouseover 鼠标悬停，即鼠标停留在图片等的上方
onmouseout 鼠标移出，即离开图片等所在的区域
onload 网页文档加载事件
onunload 关闭网页时
onsubmit 表单提交事件
onreset 重置表单时
// 添加事件
document.querySelector('.btn').addEventListener('click', () => {
console.log("点击按钮")
})
20、异常处理
try {
// 这里写可能出现异常的代码
} catch (err) {
// 在这里写，出现异常后的处理代码
}
注意：
语句 try 和 catch 是成对出现的。
如果在 try 中出现了错误，try 里面出现错误的语句后面的代码都不再执行，直接跳转到 catch 中，catch 处理错误信息，然后再执行后面的代码。
如果 try 中没有出现错误，则不会执行 catch 中的代码，执行完 try 中的代码后直接执行后面的代码。
通过 try-catch 语句进行异常捕获之后，代码将会继续执行，而不会中断。
通过 throw 语句，我们可以创建自定义错误。throw 语句常常和 try catch 语句一起使用。
比如：throw "您输入的值为空";
