JavaScript介绍
- JavaScript 是一种客户端脚本语言,不需要编译,就可以直接被浏览器解析运行
- 核心功能:增强用户和 HTML 页面的交互过程,让页面有一些动态效果。以此来增强用户的体验!
快速入门
-
创建一个 HTML
-
在
<body>
标签下面编写一个<script>
标签 -
在
<script>
标签中编写代码。 -
通过浏览器查看。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HelloWorld</title> </head> <body> <h1>HelloWorld</h1> </body> <script> alert("HelloWorld"); </script> </html>
引入方式
- 内部方式
- 在
<body>
标签下通过<script>
标签编写代码
- 在
- 外部方式
- 定义独立的 js 文件,将代码编写在文件中,在
HTML
文件的<body>
标签下通过<script src=文件路径>
来引入 js 文件。 - 注意:
<script>
标签不能写成自闭和标签
- 定义独立的 js 文件,将代码编写在文件中,在
JavaScript基本语法
-
注释
- 单行注释:
//
注释的内容 - 多行注释:
/*
注释内容*/
- 单行注释:
-
输入输出语句
- 输入框:
prompt
(“提示内容”); - 弹出警告框:
alert
(“提示内容”); - 控制台输出:
console.log
(“显示内容”); - 页面内容输出:
document.write
(“显示内容”);
- 输入框:
-
变量和常量
- JavaScript 属于弱类型的语言,定义变量时不区分具体的数据类型
- 定义局部变量:
let
变量名 = 值; - 定义全局变量:变量名 = 值; 或者使用
var
- 定义常量:
const
常量名 = 值;
-
数据类型
数据类型 说明 boolean 布尔类型,true或false null 声明null值的特殊关键字 undefined 代表变量未定义 number 整数或浮点数 string 字符串 bigint 大整数,例如:let num = 10n -
typeof
关键字- typeof 用于判断变量的数据类型
- 例如:let age = 18;document.write(typeof(age)); // number
-
运算符
- 其他运算符正常使用,特殊的有
==
:判断值是否相等===
:判断数据类型和值是否相等&&
:逻辑与,并且的功能||
:逻辑或,或者的功能
-
流程控制和循环语句
- if 语句
- switch 语句
- for 循环
- while 循环
- 正常使用
-
数组
-
用法与java大致相同,但是在 JavaScript 中的数组更加灵活,数据类型和长度都没有限制
-
定义格式: let 数组名 = [元素1,元素2,…];
-
索引范围:从 0 开始,最大到数组长度-1
-
数组长度: 数组名.length
-
数组高级运算符
…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数组</title> </head> <body> </body> <script> //定义数组 let arr = [10,20,30]; //arr[3] = 40; js中的数组长度可变 //遍历数组 for(let i = 0; i < arr.length; i++) { document.write(arr[i] + "<br>"); } document.write("==============<br>"); // 数组高级运算符 ... //复制数组 let arr2 = [...arr]; //遍历数组 for(let i = 0; i < arr2.length; i++) { document.write(arr2[i] + "<br>"); } document.write("==============<br>"); //合并数组 let arr3 = [40,50,60]; let arr4 = [...arr2 , ...arr3]; //遍历数组 for(let i = 0; i < arr4.length; i++) { document.write(arr4[i] + "<br>"); } document.write("==============<br>"); //将字符串转成数组 let arr5 = [..."heima"]; //遍历数组 for(let i = 0; i < arr5.length; i++) { document.write(arr5[i] + "<br>"); } </script> </html>
-
-
函数
-
函数类似于 java 中的方法,可以将一些代码进行抽取,达到复用的效果
-
定义格式
function 方法名(参数列表) {
方法体;
return 返回值;
}匿名函数
function(参数列表) {
方法体;
}参数也可以是可变参数
-
JavaScript DOM
DOM介绍
- DOM(Document Object Model):文档对象模型
- 将 HTML 文档的各个组成部分,封装为对象。借助这些对象,可以对 HTML 文档进行增删改查的动态操作。
DOM树
Element 元素的操作
-
DOM(Document Object Model):文档对象模型
-
Document:文档对象、Element:元素对象、Attribute:属性对象、Text:文本对象
-
元素的操作
-
根据id获得一个元素:getElementById(id属性值)
-
根据标签名称获得多个元素:getElementsByTagName(标签名称)
-
根据name属性获得多个元素:getElementsByName(name属性值)
-
根据class属性获得多个元素:getElementsByClassName(class属性值)
-
获取当前元素的父元素:.parentElement属性
-
根据class属性获得多个元素:createElement(标签名)
-
将指定子元素添加到父元素中:appendChild(子元素)
-
用父元素删除指定子元素:removeChild(子元素)
-
用新元素替换子元素:replaceChild(新元素,旧元素)
-
-
属性的操作
- 设置属性:setAtrribute(属性名, 属性值)
- 根据属性名获取属性值:getAtrribute(属性名)
- 根据属性名移除指定的属性:removeAtrribute(属性名)
- 为元素添加样式:style属性
-
文本的操作
- innerText
- innerHTML:可以解析标签
JavaScript 事件
事件
-
事件指的就是当某些组件执行了某些操作后,会触发某些代码的执行
常用事件
onload
:某个页面或图像被完成加载onsubmit
:当表单提交时触发该事件onclick
:鼠标单击事件ondblclick
:鼠标双击事件onblur
:元素失去焦点onfocus
:元素得到焦点onchange
:用户改变域的内容
-
事件的绑定
-
方式一
通过标签中的事件属性进行绑定。
<button id="btn" onclick="执行的功能"> </button>
-
方式二
通过 DOM 元素属性绑定。
document.getElementById("btn").onclick = 执行的功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button onclick="up()">进入</button> <button id = "down">退出</button> <button id="zg">正规按钮</button> </body> <script> //绑定事件方式1 function up(){ alert("我来了!!!") } //绑定事件方式2 let downbtn = document.getElementById("down"); downbtn.onclick = function(){ alert("xxx") } document.getElementById("zg").onclick = function(){ while(true){ alert("xxx") } } </script> </html>
-
JavaScript 面向对象
类的定义和使用
//定义Person类
class 类名{
//构造方法
constructor(变量列表){
变量赋值;
}
//方法
方法名(参数列表){
方法体;
return 返回值;
}
}
//使用Person类
let 对象名 = new 类名(实际变量值);
对象名.方法名();
字面量定义类和使用
- 定义
let 对象名 = {
变量名:变量值,
变量名:变量值,
...
//方法
方法名(参数列表){
方法体;
return 返回值;
},
...
}
- 使用格式
对象名.方法名(参数);
对象名.变量名;
继承
继承:让类与类产生子父类的关系,子类可以使用父类有权限的成员。
继承关键字:extends
顶级父类:Object
JavaScript 内置对象
- Number
- Math
- Date
构造方法
成员方法
- JSON
JavaScript BOM
- BOM(Browser Object Model):浏览器对象模型。
Window 窗口对象
- 定时器
唯一标识 setTimeout(功能,毫秒值):设置一次性定时器。
clearTimeout(标识):需要拿到定时器的唯一标识才能取消一次性定时器。
唯一标识 setInterval(功能,毫秒值):设置循环定时器。
clearInterval(标识):同上 - 加载事件
window.onload:在页面加载完毕后触发此事件的功能
Location 地址栏对象
就是浏览器的地址栏。我们可以通过为该属性设置新的 URL,使浏览器读取并显示新的 URL 的内容
//跳转
location.href = "目标资源路径";
JavaScript 封装
封装思想
- 封装:将复杂的操作进行封装隐藏,对外提供更加简单的操作。
- 简单封装
//将复杂的操作进行封装隐藏,对外提供更加简单的操作
//引入该js文件就可以使用,
function getById(id){
return document.getElementById(id);
}
function getByName(name) {
return document.getElementsByName(name);
}
function getByTag(tag) {
return document.getElementsByTagName(tag);
}
...