JavaScript（1）
2021-10-18 本文已影响0人
七喜丶
1.介绍
- JavaScript是一种客户端脚本语言。运行在客户端浏览器中及每个浏览器具备解析JavaScript的引擎
- 脚本语言：不需要编译，就可以直接被浏览器解析执行
- 核心功能：增强用户和HTML页面交换过程，让页面有一些动态效果，增强用户的体验
- 1995 年，NetScape (网景)公司，开发的一门客户端脚本语言：LiveScript。后来，请来 SUN 公司的专家来 进行修改，后命名为：JavaScript
- 1996 年，微软抄袭 JavaScript 开发出 JScript 脚本语言
- 1997 年，ECMA (欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，统一了所有客户 端脚本语言的编码方式
JavaScript使用方式
内部方式：在<body>标签下通过<script>标签编写代码
外部方式：定义独立的 js 文件，将代码编写在文件中，在 HTML 文件的<body>标签下通过<script src=文件路径>来引入 js 文件
2.基本语法
2.1输入输出语句
- 输入框：prompt("提示内容 ")
- 弹出警告框：alert("提示内容 ")
- 控制台输出：console.log("显示内容 ")
- 页面输出：document.write("显示内容 ")
2.2变量和常量
- JavaScript属于弱类型的语言，定义变量时不区分具体的数据类型
- 定义局部变量：let 变量 = 值
- 定义全局变量： 变量 = 值
- 定义常量：const 变量 = 值
typeof方法用于判断变量的数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>页面一</h1>
</body>
<script>
let age = 18;
document.write(typeof(age)); // number
</script>
</html>
2.3运算符
如Java中运算符用法一致
| 运算法 | 说明 |
|---|---|
| 算术运算符 | |
| + | 加法运算 |
| - | 减法运算 |
| * | 乘法运算 |
| / | 除法运算 |
| % | 取余数 |
| ++ | 自增 |
| -- | 自减 |
| 赋值运算符 | |
| = | 将等号右边的值赋给左边变量 |
| += | 相加后赋值 |
| -= | 相减后赋值 |
| *= | 相乘后赋值 |
| /= | 相除后赋值 |
| %= | 取余后赋值 |
| 比较运算符 | |
| == | 判断值是否相等 |
| === | 判断值和数据类型是否相等 |
| > | 大于 |
| >= | 大于等于 |
| < | 小于 |
| <= | 小于等于 |
| != | 不等于 |
| 逻辑运算符 | |
| && | 逻辑与，并且的功能 |
| || | 逻辑或，或者的功能 |
| ! | 取反 |
三元运算符：(比较表达式) ? 表达式1 : 表达式2;
流程控制和循环语句：if 语句、switch 语句、for 循环、while 循环
数组：
- 数组的使用和 java 中的数组基本一致，但是在 JavaScript 中的数组更加灵活，数据类型和长度都没有限制。
- 定义格式： let 数组名 = [元素1,元素2,…];
- 索引范围： 从 0 开始，最大到数组长度-1
- 数组长度：数组名.length
- 数组高级运算符…
数组复制
合并数组
字符串转数组
函数：
函数类似于 java 中的方法，可以将一些代码进行抽取，达到复用的效果。 - 定义格式
function 方法名(参数列表) {
方法体;
return 返回值;
} - 可变参数
function 方法名(…参数名) {
方法体;
return 返回值;
} - 匿名函数
function(参数列表) {
方法体;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="s">
<option>上海</option>
<option>北京</option>
<option>杭州</option>
</select>
</body>
<script>
let element = document.getElementById("s");
//获取为数组对象
let elementsByTagName = document.getElementsByTagName("option");
alert(elementsByTagName.length);
let length = elementsByTagName.length;
//数组内里值会随移除会重新排序（向前移动）
for(let i = 0; i< length; i++) {
alert(i)
element.removeChild(elementsByTagName[i]);
i--;
}
// element.innerHTML = "";
// document.write("<table>");
// for (let i = 1; i <= 9; i++) {
// document.write("<tr>");
// for (let j = 1; j <= 9; j++) {
// document.write("<td>");
// document.write(i + "*" + j);
// if (i == j) {
// break;
// }
// document.write("</td>");
// }
// document.write("</tr>");
// }
// document.write("</table>");
// function f(m, n) {
// let temp;
// let result = 0;
// if (m > n) {
// temp = m;
// m = n;
// n = temp;
// }
// for (let i = m; i <=n; i++) {
// if (i%2 !=0) {
// alert(i);
// result+= i;
// }
// }
// return result;
// }
//
// let num = f(10,5);
// alert(num);
</script>
</html>
3.JavaScript DOM
3.1介绍
- DOM(Document Object Model)：文档对象模型
-
将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作
3.2DOM操作
| 方法名 | 说明 |
|---|---|
| element元素 | |
| getElementById(id属性) | 根据id获取一个元素 |
| getElementsByTagName(标签名) | 根据标签名获取多个元素 |
| getElementsByName(name属性值) | 根据name属性获取多个元素 |
| getElementsByClass(class属性值) | 根据class属性获取多个元素 |
| 子元素对象.parentElement属性 | 获取当前元素的父元素 |
| createElement(标签名) | 创建一个新元素 |
| appendChild(子元素) | 将指定子元素添加到父元素 |
| removeChild(子元素) | 用父元素删除指定子元素 |
| replaceChild(新元素，旧元素) | 用新元素替换旧元素 |
| attribute元素：以下操作过于繁琐，可直接.对应属性名 | |
| setAttribute(属性名，属性值) | 设置属性 |
| getAttribute(属性名) | 获取指定属性值 |
| removeAttribute(属性名) | 移除指定属性 |
| style属性 | 为元素添加样式 |
| text文本 | |
| innerText | 添加文本内容，不解析标签 |
| innerHTML | 添加文本内容，解析标签 |
4.JavaScript 事件
| 事件 | 说明 |
|---|---|
| onload | 某个页面或图片完成加载 |
| onsubmit | 当表单提交触发该事件 |
| onclick | 鼠标单击事件 |
| ondbclick | 鼠标双击事件 |
| onbulr | 元素失去焦点 |
| onfoucs | 元素获得焦点 |
| onchange | 用户改变域内容 |
| onkeyup | 某个键盘的键被松开 |
| onkeydown | 某个键盘的键被按下 |
| onkeypress | 某个键盘的键被按下切按住 |
| onmousedown | 某个鼠标按键被按下 |
| onmouseup | 某个鼠标按键被松开 |
| onmouseover | 鼠标移动到某个元素上 |
| onmouseup | 鼠标从某个元素上移开 |
绑定事件：
- 方式一 ：通过标签中的事件属性进行绑定
<button id="btn" onclick="执行的功能"> </button> - 方式二： 通过 DOM 元素属性绑定
document.getElementById("btn").onclick = 执行的功能
