【JavaWeb】JavaScript基础篇+高级篇

文章目录

- 1 介绍
- 2 ECMAScript
- - 2.1 基本语法
  - 2.2 基本对象
- 3 BOM
- - 3.1 window窗口对象
  - 3.2 location地址栏对象
  - 3.3 history历史记录对象
- 4 DOM
- - 4.1 概念
  - 4.2 核心DOM
  - - 4.2.1 Document对象
    - 4.2.2 Element对象
    - 4.2.3 节点对象
    - 4.2.4 案例：动态表格
    - 4.2.5 内容切换
    - 4.2.6 样式设置
- 5 事件
- - 5.1 基本概念
  - 5.2 开灯关灯案例
  - 5.3 常见事件
  - - 5.3.1 点击事件
    - 5.3.2 焦点事件
    - 5.3.3 加载事件
    - 5.3.4 鼠标事件
    - 5.3.5 键盘事件
    - 5.3.6 选择并改变
    - 5.3.7 表单事件

1 介绍

概念：JavaScript是一门客户端脚本语言，运行在客户端浏览器中，每一个浏览器都有JavaScript的解析引擎。【脚本语言：不需要编译，直接可以被解析执行】

功能：可以来增强用户和html页面的交互过程，可以来控制html同元素让页面有动态的效果，增强用户体验

JavaScript发展史

1992年，Nombase第一门客户端脚本语言C- -专门用于表单的校验。后更名为ScriptEase。
1995年，Netscape网景公司开发了LiveScript。后来请来了SUN公司的专家修改LiveScript，并蹭热度命名为JavaScript。
1996年，微软开发出JScript语言。
1997年，ECMA提出ECMAScript作为客户端脚本语言的标准。
JavaScript = ECMAScript + JavaScript特有的【BOM +DOM】

2 ECMAScript

2.1 基本语法

与html的结合方式

内部JS：定义<script> XXXXX</script> XXXXX是Script代码
外部JS：定义<script src=“XXX.js”> </script>通过src引入外部的js文件
可以定义多个script标签
可以定义在html任何位置但位置会影响执行顺序

注释

单行注释：/ /
多行注释：/* */

数据类型

原始类型：number【整数、小数、NAN】、string、boolean、null【对象为空的占位符】、undefined【未定义如果没有初始化的默认赋值】
引用类型：对象

变量
-var 变量名 = 初值 定义变量
-typeof(变量名) 查看变量类型，null的typeof是object
变量是一小块存储数据的内存空间
Java是强类型的语言，JavaScript是弱类型的语言。强类型在开辟变量存储空间时定义了空间将来存储数据的数据类型，只能存固定类型的数据。

运算符

一元运算符：
在JS中如果运算数不是运算符要求的类型 js引擎会将运算数进行类型转换
string转number：按字面值转或NAN NAN和其他数值运算结果是NAN
boolean转number：true转1 false转0
算数运算符
赋值运算符
比较运算符：===全等于在比较前先判断类型如果类型不一样直接false
逻辑运算符
三元运算符：条件？表达式1：表达式2

number转boolean：0或NAN为假其他为真
string转boolean：除了空串其他都是真
null和undefined：都是假
对象转boolean：都是真

流程控制语句

if...else
switch
java switch可以接收byte、int、short、char、枚举、字符串
js switch可以接收所有数据类型
while
do...while
for

特殊语法

语句以分号结尾，如果一行只有一条语句则可省，不建议不写分号。
变量定义使用var关键字，也可以不使用var。用var定义的是局部变量，不用var定义的是全局变量。

练习：打印99乘法表
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>td{border: 1px solid;}</style><script>document.write("<table align='center'>");for(var i = 1; i <= 9; i ++){document.write("<tr>");for(var j = 1; j <= i; j++ ){document.write("<td>");document.write(i +"×" + j +"=" + i*j + "&nbsp&nbsp&nbsp");document.write("</td>");}document.write("</tr>");}</script><!--    <script src="js/a.js"></script>-->
</head>
<body>
<!--<input type="text">-->
</body>
</html>

2.2 基本对象

Boolean
Number
String

Function
Function是函数对象，同名对象会覆盖。方法的调用只和命名有关和参数列表无关。

<!--方法1--> <script>function f(a, b) {alert(a + b);}`在这里插入代码片`f(1,3);</script>
<!--方法2--> <script>var fun = function (a,b) {alert(a + b);}fun(8,9);</script>

在方法声明中有一个隐藏的内置数组对象arguements，封装了所有的参数。

例如：求任意个数的和

    <script>// 求任意个数的和function f() {var sum = 0;for(var i = 0; i < arguments.length; i++){sum+=arguments[i];}return sum;}var sum = f(1,2,3,4,5);alert(sum);</script>

Array

var arr = new Array(元素列表)创建方法1
var arr = new Array(默认长度)创建方法2
var arr = [原始列表]创建方法3
特点：元素类型可变，长度可变
方法：
join(拼接符号)将元素拼接为字符串
push(添加元素)在末尾添加元素

Date

    <script>var date = new Date();document.write(date.toLocaleString()+"<br>")//返回当前date对象对应的os的字符串格式// 2100/2/18 下午3:00:16document.write(date.getTime())//获取时间戳</script>

Math
Math对象不用创建直接使用
Math.Random 返回 [0,1) 的随机数
Math.ceil向上取整 Math.floor向上取整
Math.round四舍五入取整

获取1~100的随机正整数

    <script>// [0,1)  --->  [0,99.999999] ---> [0,99] ---> [1,100]var rand = Math.random()*100;document.write(Math.floor(rand+1));</script>

RegExp正则表达式对象

正则表达式：

单个字符：[]
如：[a] [ab] [a-zA-Z0-9]
特殊符号表示：
\d单个数字字符[0-9]
\w单个单词字符[a-zA-Z0-9_]
量词符号：
*表示出现0次或多次
?表示出现0次或1次
+表示出现1次或多次
{m,n}表示数量大于等于m小于等于n，如果m缺省表示至多n个，如果n缺省表示最少m次。
开始：^ 结尾：$

正则表达式对象：

var reg = new RegExp("正则表达式")
var reg = /正则表达式/

test方法验证字符串是否符合正则表达式

    <script>var a = new RegExp("[0-9]{11}");var b = /^\\ w{2,9}$/;var username = "zhangsan";//truevar flag1 = b.test(username);var password = 12345678910;//turepassword = 213;//falevar flag  = a.test(password);alert(flag);</script>

Global全局对象

特点：用Global封装的方法不需要对象就可以直接调用
decodeURI()/encodeURI()uri编码/解码
decodeURIComponent()/encodeURIComponent()uri编码解码
上面的方法功能一样 Component可以编码的字符更多
parseInt：将字符串转为数字，逐一判断每一个字符是否是数字，直到遇到非数字，将数字部分转为number
isNaNNaN参与的==比较全为false，用这个方法判断是不是NaN
eval将JS字符串转为脚本执行

3 BOM

navigator浏览器对象和screen屏幕对象：略

3.1 window窗口对象

不需要创建对象可以直接用window.方法名调用，且window引用可以省略

弹出方法：

alter()弹出警告框
confirm()显示带一段消息及确认按钮和取消按钮的对话框。确定按钮返回true，否则false。
prompt()用户输入框

打开方法

close()：关闭自己，哪个window对象调用close，close就关闭谁
open()：可以传入url作为参数不传参数则打开空网页

定时器方法

setTimeout()在指定的毫秒数后调用函数或计算表达式
clearTimeout()取消setTimeout方法设置的timeout
setInterval()按照周期调用函数
clearInterval()取消set方法设置的timeout

案例：轮播图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><img id="pic" src="img/banner_1.jpg" width="100%">
</body>
<script>setInterval("fun()",1000);var number = 1;function fun() {number ++;if(number > 3){number = 1;}var elementById = document.getElementById("pic");elementById.src = "img/banner_"+number+".jpg"}
</script>
</html>

3.2 location地址栏对象

location是window的属性值可以通过window.location获取也可以直接写location

reload() 重新加载
href() 获取href

案例：自动跳转
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p{text-align: center;}span{color: red;}</style>
</head>
<body><p> <span id="time">5</span>秒之后,自动跳转到百度首页</p>
</body>
<script>var second = 5;var time = document.getElementById("time");function showTime(){second --;time.innerHTML = second + "";if(second==0){location.href = "https://www.baidu.com";}}setInterval(showTime, 1000);
</script>
</html>

3.3 history历史记录对象

history是window的属性值可以通过window.history获取也可以直接写history length属性可以返回当前窗口历史列表中的URL数量历史记录是指当前window可以前进后退的窗口数量

back：后退
forward：前进
go：前进或后退

4 DOM

4.1 概念

文档对象模型，将标记语言文档的各个组成部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD的动态操作

W3C DOM的标准被分为三个部分：

核心DOM 针对任何结构化文档的标准模型【Document、Element、Attribute、Text、Comment、Node(其他5个的父对象)】
XML DOM 针对XML文档的标准模型
HTMLDOM 针对HTML文档的标准模型

4.2 核心DOM

4.2.1 Document对象

在HTML DOM中可以通过window.document或document获取

获取Element对象
getElementById()查找具有指定的唯一ID的元素
getElementByTagName根据元素名称获取元素对象们，返回值是一个数组
getElementsByClassName()根据Class属性值获取元素对象们，返回值是一个数组
getElementsByName()根据name属性值获取元素对象们，返回值是一个数组
创建其他DOM对象
createAttribute()
createElement()
createTextNode()
createComment()

4.2.2 Element对象

通过document来获取和创建
-removeAttribute()删除属性
-setAttribute()设置属性

点击按钮设置属性：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><a>点击</a><input type="button" id="btn" value="设置属性">
</body>
<script>var btn = document.getElementById("btn");btn.onclick = function () {var element_a = document.getElementsByTagName("a")[0];element_a.setAttribute("href","https://www.baidu.com");}
</script>
</html>

4.2.3 节点对象

其他五个对象的父对象
所有的dom对象都可以被认为是一个节点

appendChild()向节点的子节点列表的结尾添加新的子节点
removeChild()删除并返回当前节点的指定子节点
replaceChild()用新节点替换子节点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{border: 1px solid red;}#div1{width: 200px;height: 200px;}#div2{width: 100px;height: 100px;}</style>
</head>
<body><div id="div1"><div id="div2">div2</div>div1</div>
<!--    这里href这样写是为了让超链接可以点击 但不跳转页面--><a href="javascript:void(0)" id="del">删除子节点</a>
<!--    <input type="button" id="del" value="删除div2">--><a href="javascript:void(0)" id="add">添加子节点</a>
</body>
<script>var element_a = document.getElementById("del");element_a.onclick = function () {var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");div1.removeChild(div2);}var element_b = document.getElementById("add");element_b.onclick = function () {var div3 = document.createElement("div");div3.setAttribute("id","div3");div1.append(div3);}
</script>
</html>

4.2.4 案例：动态表格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{text-align: center;margin: 50px;}table{border: 1px solid;margin: auto;width: 500px;}td,th{text-align: center;border: 1px solid;}</style>
</head>
<body>
<div><input type="text" id="id" placeholder="请输入编号"><input type="text" id="name" placeholder="请输入姓名"><input type="text" id="gender" placeholder="请输入性别"><input type="button" id="add" value="添加">
</div><table><caption>学生信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr>
</table>
<script>document.getElementById("add").onclick = function(){var id = document.getElementById("id").value;var name = document.getElementById("name").value;var gender = document.getElementById("gender").value;var table = document.getElementsByTagName("table")[0];//追加一行table.innerHTML += "<tr>\n<td>"+id+"</td>\n" +"      <td>"+name+"</td>\n" +"      <td>"+gender+"</td>\n" +"      <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\" >删除</a></td>\n" +"</tr>";}function delTr(obj){var table = obj.parentNode.parentNode.parentNode;var tr = obj.parentNode.parentNode;var th = obj.parentNode;table.removeChild(tr);}
</script>
</body>
</html>

4.2.5 内容切换

用来控制html文档的内容
-document.getElementById(id值)获取页面标签（元素）对象Element

操作Element对象：

修改属性值

明确要获取的对象是哪个
查API文档找有哪些属性可以设置

修改标签体内容

获取元素对象
使用innerHTML属性修改标签体内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--    <img src="img/on.gif" id="pic">--><h1 id="title">哈哈哈哈哈哈哈哈哈哈哈</h1>
</body>
<script>// var elementById = document.getElementById("pic");// alert("换图片");// elementById.src = "img/off.gif";var elementById = document.getElementById("title");alert("换文字")elementById.innerText = "5555555555555555";
</script>
</html>

4.2.6 样式设置

通过元素的style属性来设置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id = "div1">div1</div>
</body>
<script>var div1 = document.getElementById("div1");div1.onclick = function () {div1.style.border = "1px solid red";div1.style.width = "200px";div1.style.fontSize = "200px";}
</script>
</html>

通过提前定义的类选择器的样式，通过元素的className属性来设置class属性值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.d1{border: 1px solid red;width: 100px;height: 100px;}.d2{border: 1px solid blue;width: 100px;height: 100px;}</style>
</head>
<body><div id = "div1">div1</div><div id = "div2">div2</div>
</body>
<script>var div1 = document.getElementById("div1");div1.onclick = function () {div1.className = "d1";}var div2 = document.getElementById("div2");div2.onclick = function () {div2.className = "d2";}
</script>
</html>

5 事件

5.1 基本概念

功能：某些组件被执行某些操作后，触发程序的执行。

绑定事件：
方法1 直接在html标签上指定事件的属性，属性值就是js代码
方法2 通过js获取元素对象，指定事件属性，设置一个函数

5.2 开灯关灯案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><img id="light" src="img/off.gif" onclick="onclick();">
</body>
<script>var light = document.getElementById("light");//一开始灯是关的var flag = false;light.onclick = function() {if(flag){light.src = "img/off.gif";flag = false;}else{light.src = "img/on.gif";flag = true;}}
</script>
</html>