词汇表
Function Invocation 词汇调用
外链式js
一般在最后放置js链接,格式如下:
<script src="myScript.js"></script>
一般来说js和html文件不会放在同一个文件夹,用../回到上一级文件夹,然后通过IDE自动找到目录。
简单的js输出
document.getElementById("demo").innerHTML = 5 + 6;
document.write(5 + 6);
<button type="button" onclick="document.write(5 + 6)">Try it</button>
window.alert(5 + 6);
console.log(5 + 6);
<button onclick="window.print()">Print this page</button>
如上,第一行式简单的找id为demo的元素打印11
第二行是在文档的末尾打印11
第三行将会覆盖整个页面,只剩下一个11
第四行会弹出一个警告框显示11
第五行会在控制台里打印11
第六行会打印整个页面
js声明变量
let x,y,z,k;
x=5;
y=6;
z=x+y;
k="Hello World";
let和var的区别
var在整个函数里有效,let在块作用域有效,比如:在for循环里定义var和let,var可以在整个函数里使用,而let只能在for循环里使用.
let可以声明为一个全局变量,然后在代码块里再次声明,但是不可以在同一个块内声明两次.
var变量可以在声明前导入值(let则不行),如:
carName = "Volvo";
var carName;
运算符号
特别的运算符号包括===和!==,他们除了判断值是否相等,还判断类型是否相同.
数据类型
js的8种数据类型:
![](https://i-blog.csdnimg.cn/blog_migrate/133a8e0c275a71efaec09e8d07070310.png)
// Numbers:
let length = 16;
let weight = 7.5;
// Strings:
let color = "Yellow";
let lastName = "Johnson";
// Booleans
let x = true;
let y = false;
// Object:
const person = {firstName:"John", lastName:"Doe"};
// Array object:
const cars = ["Saab", "Volvo", "BMW"];
// Date object:
const date = new Date("2022-03-25");
//科学计数法
let y = 123e5; // 12300000
let z = 123e-5; // 0.00123
js对象
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
js的一些事件
![](https://i-blog.csdnimg.cn/blog_migrate/85f592acc5f23251296a809ee4e257fd.png)
转义字符
![](https://i-blog.csdnimg.cn/blog_migrate/9ffffd2b9113d485166e6ac504c14f46.png)
字符串
js的字符串也有length属性
字符串的方法
//slice方法包括开头,不包括结尾,输出Banana
let text = "Apple, Banana, Kiwi";
let part = text.slice(7, 13);
//输出第7个字符后面的字符
let part = text.slice(7);
//输出从末尾开始12位后面的字符(输出Banana, Kiwi)
let part = text.slice(-12);
let part = text.slice(-12, -6);
//substring方法与slice方法类似
//substr方法与slice方法类似
//replace方法用于替换第一次匹配到的字符串,默认匹配大小写
let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");
//replace方法关闭匹配大小写
let newText = text.replace(/MICROSOFT/i, "W3Schools");
//replace方法开启匹配所有字符串
let newText = text.replace(/Microsoft/g, "W3Schools");
//replaceall方法允许不打双引号,但是不打的时候要加上/g,默认匹配所有字符串,区别大小写
text = text.replaceAll(/cats/g,"dogs");
text = text.replaceAll("cats","dogs");
//字符串大写化
let text1 = "Hello World!";
let text2 = text1.toUpperCase();
//字符串小写化
let text1 = "Hello World!";
let text2 = text1.toLowerCase();
//字符串连接
let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);
//删除多余空白trim
let text1 = " Hello World! ";
let text2 = text1.trim();
//trimStart只移除开始的部分空白
let text1 = " Hello World! ";
let text2 = text1.trimStart();
//trimEnd只移除从末尾开始的空白
let text1 = " Hello World! ";
let text2 = text1.trimEnd();
//padEnd和padStart,在字符串的尾部或首部加上n个字符,如下面这段是在尾部加入4个x
let text = "5";
let padded = text.padEnd(4,"x");
//charAt方法,下面这段返回H
let text = "HELLO WORLD";
let char = text.charAt(0);
//charCodeAt,返回对应字符的UTF-16码
let text = "HELLO WORLD";
let char = text.charCodeAt(0);
//字符串可以通过数组的方式来访问,如text[0]="H"
//split方法用于分开字符串,分开后传入一个数组
text.split(",") // 以,为依据分开
text.split(" ") // 以空格为依据分开
text.split("|") // 以竖线为依据分开
text.split("") // 每个字符为一个元素,输出到数组里
js搜索的方法
![](https://i-blog.csdnimg.cn/blog_migrate/6b397035a4b4cdef3d991da0e232f497.png)
//搜寻最后一个匹配的字符串,从第十五个字符开始找
let text = "Please locate where 'locate' occurs!";
text.indexOf("locate", 15);
//indexOf的功能和search相同,但是search只能接受一个数字,而indexOf不能接受正则表达式
//match只匹配第一个,接受正则表达式,将结果存入一个数组,包括匹配成功的次数和匹配出的字符串的重复。
//matchall则是匹配全部(大小写敏感)
//includes返回一个boolean值,并可以指定匹配开始的位置
let text = "Hello world, welcome to the universe.";
text.includes("world");
text.includes("world", 12);
js模块化文字
//使用`替换双引号和单引号,允许在字符串中方便的加入变量
//可以用来输出html元素,比如下面这段代码会输出一个列表
let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
html += `<li>${x}</li>`;
}
html += `</ul>`;
js数字
在js中,浮点数的加减法并不准确,比如:
//0.2+0.1!=0.3
let x = 0.2 + 0.1;
为了解决这个问题,建议用乘法化成整数再计算.
let x = (0.2 * 10 + 0.1 * 10) / 10;
数字和字符串的加法
js允许数字和字符串相加,相加时将数字视为字符串
字符串之间允许减乘除运算,js会试图将字符串内容转换为数字,而加法运算则是进行字符串拼接.
如果试图用数字与字符串继续减乘除运算,js会试图将字符串的内容转换为数字,若失败则输出NaN(Not a Number)
NaN是一个特殊的数字类变量,他与任何数字运算结果都是NaN,与字符串相加如NaN+"5"="NaN5"
infinity无穷大,如果一个数大于js能表示的最大数或者小于能表达的最小数,则会将变量转为infinity和
(-infinity)
//js允许通过toString方法将数字转化为2-36进制的数.
let myNumber = 32;
myNumber.toString(32);
myNumber.toString(16);
myNumber.toString(12);
myNumber.toString(10);
myNumber.toString(8);
myNumber.toString(2);
//js允许将数字写为16进制
let x = 0xFF;(x==255)
最后,object对象是不能用来比较的,比如==和===都返回false
jsBigInt
js最大的数是(253-1)即9007199254740991
最小的数是-(253-1),即 -9007199254740991
超出这个范围的数失去意义,比如:
//结果为true
9007199254740992 === 9007199254740993;
定义BigInt可以解决这个问题:
//两种定义方法
let x = BigInt(999999999999999);
let x = 9007199254740995n;
数字的几个方法
![](https://i-blog.csdnimg.cn/blog_migrate/08e3cbbe5b582eab96cd4d91415365b0.png)
//toExponential方法用于将数字转换为字符串,以指数计数法的形式输出
let x = 9.656;
x.toExponential(2);
x.toExponential(4);
x.toExponential(6);
//括号中的数字表示结果的位数
//假设为2,则上述代码的输出为9.66e+0
//toFixed和toPrecision方法的结果取决于括号内的数字n
//前者输出的数字结果是n,后者是n-1
![](https://i-blog.csdnimg.cn/blog_migrate/a36bc998f3326a5d739bc06130dc6d1a.png)
//Number方法可以把日期转化为number
Number(new Date("1970-01-01"))
//上述代码的结果是0,若改为1970-01-02,结果为86400000
parseInt方法对应的输入和输出:
![](https://i-blog.csdnimg.cn/blog_migrate/5c493c2ae877c51fe90fa1f4537c8545.png)
parseFloat方法的输入和输出:
![](https://i-blog.csdnimg.cn/blog_migrate/3ebf0f533200969141df21811c552c1f.png)
区别:他们都能把字符串数字转换为数字,且扫描时先遇到非数字字符的话会返回NaN,
只是parseInt会忽略小数,而parseFloat不会
数字类
数字类与数字不同,数字类是对象,而数字是变量
![](https://i-blog.csdnimg.cn/blog_migrate/c6668e60c2e675b70bef669f8ebc695a.png)
数字类的几个常量:
![](https://i-blog.csdnimg.cn/blog_migrate/313e09fd55460d1b7b1fdefa0cfd0e9d.png)
其中,MAX_VALUE和MIN_VALUE代表的值应当是在BigInt里的