目录
基本语法
1.引入方式
-
第一种
<script> js代码 </script>
-
第二种
<script src="js文件"></script>
2.注释
-
单行注释
<script> //这是单行注释 </script>
-
多行注释
<script> /* 这是多行注释 */ </script>
3.输入输出语句
-
prompt()，范例
prompt("请输入:"); //该语句在页面弹出一个输入框，并且带有提示 -
alert()，范例
alert("提示"); -
console.log()，范例
console.log("控制台输出的内容"); -
document.write()，范例
document.write("向页面输出内容");
4.变量和常量
-
JavaScript是弱类型语言，定义变量时不用区分具体数据类型
-
定义局部变量
语法：
let 变量名 = 值;范例：
let name = "张三"; let age = 23;
-
定义全局变量
语法：
变量名 = 值;范例：
school = "清华大学";
-
定义常量
语法：
const 常量名 = 值;范例：
const PI = 3.1415926;
5.原始数据类型
判断原始数据类型的方法：
使用typeof()函数
范例：
let l1 = true; document.write(typeof(l1)+"<br/>"); //输出boolean let l2; document.write(typeof(l2)+"<br/>"); //输出undefined let l3 = null; document.write(typeof(l3)+"<br/>"); //输出Object，null被认为是对象占位符 let l4 = 123; document.write(typeof(l4)+"<br/>"); //输出number let l5 = "abc"; document.write(typeof(l5)+"<br/>"); //输出string let l6 = 10n; document.write(typeof(l6)+"<br/>"); //输出bigint
6.运算符
-
JavaScript中运算符和Java的大致相同
-
不同点：
-
==号比较的是变量的值是否相同，如字符串的"10"跟数字的10比较返回true -
===号比较类型和值，则字符串的"10"跟数字的10比较返回false -
字符串类型的数字计算时会发生类型转换
-
7.流程控制语句
-
与Java的相同，但是注意在流程控制语句中的变量定义语法不同
8.数组
-
JavaScript数组长度和类型没有限制
定义一个数组的语法是：
let 数组名 = [元素];范例：
let arr = [1,2,3];
-
获取数组长度
使用函数：
数组名.length范例：
arr.length;
-
数组复制
语法：
数组1 = [...数组2];范例：
let a = [1,2,3]; let b = [...a];//数组b内容也是1,2,3
-
数组合并
语法：
数组1 = [...数组2,数组3];将数组2和3合并到1范例：
let a = [1,2,3]; let b = [4,5,6]; let c = [...a,...b];//数组c内容是1,2,3,4,5,6
-
字符串转数组
语法：
数组 = [...字符串];范例：
let s = "lxq"; let a = [...s];a数组内容是l,x,q
9.函数
-
JavaScript中的函数类似于Java中的方法
-
普通函数
语法：
function 方法名(参数){ 方法体; return 返回值; }注意：如果不需要返回值则不用写return语句，参数不用写类型
-
可变参数
语法：
function 方法名(...参数){ 方法体; return 返回值; } -
匿名函数
语法：
function(参数){ 方法体; return 返回值; }
DOM
1.概述
-
DOM指document object model，即文档对象模型
-
将HTML文档各个组成部分封装为对象，借助这些对象可以对HTML文档进行增删改查的动态操作
-
相关对象：
-
Document，表示文档对象
-
Element，元素对象
-
Attribute，属性对象
-
Text，文本对象
-
2.元素对象的操作
-
根据document文档对象来获取元素对象
-
根据当前元素对象获取父元素对象
子元素对象.parentElement -
通过文档对象创建新元素对象
document.createElement(标签名); -
将指定子元素对象添加到父元素中
父元素对象.appendChild(子元素对象); -
父元素删除指定的子元素
父元素对象.removeChild(子元素对象); -
父元素用新子元素替换旧子元素
父元素对象.replace(新元素,旧元素);
3.元素内属性操作
-
给元素设置属性
setAttribute(属性名,属性值); -
根据属性名获取属性值
getAttribute(属性名); -
根据属性名移除属性
removeAttribute(属性名); -
为元素添加样式
方式一：
元素对象.style.样式=值;如：
let ele = document.getElementById("a"); ele.style.color = "red";方式二：
元素对象.className = "类选择器名";
4.元素内文本操作
-
设置文本内容，不解析标签
元素对象.innerText="文本内容";注意：不解析标签是指文本内容如果有HTML标签也不会解析，只会当成文本
-
设置文本内容，解析标签
元素对象.innerHTML="文本内容";注意：这里的文本内容会被解析标签
事件
-
事件是某些组件完成某些操作时会触发的代码
-
常用事件
-
绑定事件的方式
-
通过标签中事件属性进行绑定
范例：
<button οnclick="触发的操作"></button>
-
通过DOM元素进行绑定
let b = document.getElementById("btn"); b.οnclick=function(){//使用匿名方法 触发的操作; }
-
面向对象
1.定义类的方式
-
方式1
语法：
class 类名{ //构造方法 constructor(变量列表){ 变量赋值; } //普通方法 方法名(参数列表){ 方法体; return 返回值; } }用法：
let 对象名 = new 类名(实际变量值); 对象名.变量名; 对象名.方法名();
-
方式2
语法：
//在定义类的时候已经创建了对象 let 对象名 = { 变量名 : 变量值, 变量名 : 变量值, 方法名 : function(参数列表){ 方法体; return 返回值; }, 方法名 : function(参数列表){ 方法体; return 返回值; } };用法：
对象名.变量名; 对象名.方法名();
2.继承
-
JS中顶级父类是Object
-
继承需要使用extends关键字
语法：
class 子类 extend 父类{} -
继承范例
class Person{ constructor(name,age){ this.name = name; this.age = age; } show(){ document.write(this.name+","+this.age+"<br/>"); } } class Worker extends Person{ constructor(name,age,salary){ //使用super()调用父类构造方法 super(name,age); this.salary = salary; } show(){ document.write(this.name+","+this.age+","+this.salary); } } let worker = new Worker("张三",23,15000); worker.show();
内置对象
1.Number对象
-
parseFloat(s)方法，将字符串浮点数转为浮点数 -
parseInt(s)方法，将字符串整数转为整数
2.Math对象
-
ceil(x)方法，向上取整 -
floor(x)方法，向下取整 -
round(x)方法，四舍五入 -
random()方法，返回0到1之间的随机数，不含1 -
pow(x,y)方法，x的y次方
3.Data对象
-
构造方法
-
常用方法
4.String对象
-
构造方法
-
常用方法
5.RegExp对象
-
构造方法
-
匹配方法：
test(字符串)方法，用于查看字符串是否符合匹配规则
6.Array对象
-
常用方法
7.Set对象
-
元素唯一，存取顺序一致
-
构造方法：
Set() -
常用方法
-
Set集合遍历范例
let set = new Set(); set.add("a"); set.add("b"); let st = set.keys(); for(let i = 0;i < set.size;i++){ document.write(st.next().value); }
8.Map对象
-
key唯一，存取顺序一致
-
构造方法：
Map() -
常用方法
-
Map集合遍历范例
let map = new Map(); map.set(1,"a"); map.set(2,"b"); let et = map.entries(); for(let i = 0;i < map.size;i++){ document.write(et.next().value); }
9.JSON对象
-
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式
-
它是基于ECMAScript规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据
-
简洁和清晰的层次结构使得JSON成为理想的数据交换语言，易于人阅读和编写，同时也易于计算机解析和生成，并有效提升网络传输效率
-
常用方法
-
范例
let weather = { city : "北京"; date : "2022-08-08"; temperature : "10~20"; }; let str = JSON.stringfy(weather); let weather2 = JSON.parse(str);
BOM
-
BOM(Browser Object Model)，是指浏览器对象模型
-
将浏览器各个组成部分封装成不同的对象，方便进行操作
-
具体有如下的对象
-
Navigator，表示浏览器对象
-
Window，窗口对象
-
Location，地址栏对象
-
History，窗口历史对象
-
Screen，显示屏幕对象
-
-
Window窗口对象常用功能
-
定时器
-
唯一标识 setTimeout(功能,毫秒值);方法，用于设置一次性定时器，返回一个唯一标识 -
clearTimeout(标识);方法，根据标识取消一次性定时器 -
唯一标识 setInterval(功能,毫秒值);方法，设置循环定时器，返回一个唯一标识 -
clearInterval(标识);方法，根据标识取消循环定时器
-
-
加载事件：
window.onload=触发的事件，用于页面加载完毕时触发的事件
-
-
Location地址栏对象常用功能
-
设置href属性，通过设置这个属性实现浏览器读取并显示新的URL的内容
-