JavaScript
文章目录
JavaScript介绍
JavaScript语言的诞生主要是完成页面的数据验证，因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。JS是Net scape网景公司的产品，最早取名为LiveScript，为了吸引更多的Java程序员，更名为JavaScript。JS是弱类型，Java是强类型。
弱类型就是类型可变
强类型就是在定义变量的时候，类型已确定，而且不可变
特点：
1.交互性（它可以做的就是信息的动态交互）
2.安全性（不允许直接访问本地硬盘）
3.跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）
JavaScript与HTML代码的结合方式
- 第一种方式
只需要在head标签中，或者body标签中，使用script标签来书写JavaScript代码
<script type="text/javascript">
//alert是JavaScript语言提供的一个警告框函数
//它可以接收任意类型的参数，这个参数就是警告框的提示信息
alert("hello JavaScript!");
</script>
- 第二种方式
使用script标签引入单独的JavaScript代码文件
<script type="text/javascript" src="01-JSfile.js"></script>
src属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径）
script标签可以使用来定义js代码，也可以用来引入js文件，但是两个功能二选一使用，不能同时使用两个功能。
变量
变量是可以存放某些值的内存的命名
JavaScript的变量类型：
数值类型：number——int、long、float、double等只要和数值有关的都是
字符串类型：string
对象类型：object
布尔类型：boolean
函数类型：function
JavaScript里特殊的值：
undefined——未定义。所有JS变量未赋予初始值的时候，默认值都是undefined
null——空值
NAN——全称是：Not a Number，即非数值
JS中定义变量的格式
var 变量名;
var 变量名=值;
<script type="text/javascript">
//alert是JavaScript语言提供的一个警告框函数
//它可以接收任意类型的参数，这个参数就是警告框的提示信息
var i;
// alert(i);//undefined
i = 12;
// alert(i);//12
// typeof 是JavaScript语言提供的一个函数。它可以取变量的数据类型返回
// alert(typeof (i));//number
i = "abc";
// alert(typeof (i));//string
var a = 12;
var b = "abc";
alert(a * b);//会返回一个NaN
</script>
关系（比较）运算
< <= > >= !=等使用与Java中一样
等于：== 等于是简单的做字面值的比较
全等于： === 除了做字面值的比较之外，还会比较两个变量的变量类型
逻辑运算
且运算：&&
或运算：||
取反运算：!
在JavaScript中，所有的变量都可以作为一个boolean类型的变量去使用。
0、null、undefined、“”（空串,一个空格都不能有）都认为是false，其他都为true
&&且运算：
有两种情况：
第一种：当表达式全为真的时候，返回最后一个表达式的值。
第二种：当表达式中有一个为假的时候，返回第一个为假的表达式的值
||或运算
有两种情况：
第一种情况：当表达式全为假的时，返回最后一个表达式的值
第二种情况：只要有一个表达式为真，就会返回第一个为真的表达式的值
并且&&与运算 和 ||或运算 有短路
短路：当这个&&或||运算有结果之后，后面的表达式不再执行
var a = "abc";
var b = true;
var d = false;
var c = null;
// 第一种：当表达式全为真的时候，返回最后一个表达式的值。
alert(a && b);//返回true
// 第二种：当表达式中有一个为假的时候，返回第一个为假的表达式的值
alert(a && c);//返回null
// 第一种情况：当表达式全为假的时，返回最后一个表达式的值
alert(c || d);//返回false
// 第二种情况：只要有一个表达式为真，就会返回第一个为真的表达式的值
alert(a || c);//返回abc
数组（重点）
JS中数组定义方式：
格式：
var 数组名 = []; //空数组
var 数组名 = [1,‘abc’,true]; //定义数组的同时赋值元素
var array = [1,'abc',true,NaN];
for(var i = 0;i < array.length;i++){
alert(array[i]);
}
var arr = [];
arr[3] = "123";
arr[10] = true;
for(var i = 0;i <= arr.length;i++){
console.log(arr[i]);
}
函数（重点）
函数的两种定义方式
1.第一种，可以使用function关键字来定义函数
使用格式如下：
function函数名(形参列表){
函数体
}
在JavaScript语言中，如何定义带有返回值的函数——只需要在函数体内直接使用return语句返回值即可
//无参函数
function fun(){
alert("无参函数fun()被调用");
}
//函数只有被调用才会执行
//有参函数
function funRun(a,b) {
fun();
alert("有参函数被调用！" + a + " " + b);
}
funRun(12,"hello world!");
//带有返回值的函数
function sum(num1,num2){
var result = num1 + num2;
return result;
}
alert(sum(12,13));
2.第二种函数的定义方式，
使用格式如下：
var 函数名 = function(形参列表){
函数体
}
var funTwo = function (){
alert("funTwo无参函数被调用");
}
var funTwoRun = function (a,b) {
funTwo();
var result = a * b;
return result;
}
alert(funTwoRun(5,8));
注：在Java中函数允许重载，但是在JS中函数的重载会直接覆盖掉上一次的定义
因为函数本身也是一个变量，而同名变量只能存在一个（JS在IDEA中不会提示报错，但是在运行的时候会直接覆盖）
3.函数的arguments隐形参数（只在function函数内）
在function函数中不需要定义，但却可以直接用来获取所有参数的变量，即隐形参数。
JS中的隐形参数也跟Java的可变长参数一样，操作类似数组。
function fun(){
alert(arguments);
alert("无参函数");
}
fun();
<script type="text/javascript">
function fun(){
alert(arguments.length);
alert("无参函数");
}
fun(1,2);
</script>
获取参数值
<script type="text/javascript">
function fun(){
alert(arguments.length);
alert(arguments[0]);
for (var i = 0;i < arguments.length;i++){
alert(arguments[i]); }
}
fun(1,2,"abc");
</script>
arguments相当于一个数组，可以通过下标取得里面的值
在JS当中对数值和字符串求和就是进行字符串拼接
JS中的自定义对象
- Object形式的自定义对象
var 变量名 = new Object(); //对象实例（空对象）
变量名.属性值 = 值; //定义一个属性
变量名.函数名 = function(){} //定义一个函数
对象的访问：
变量名.属性 / 函数名(){};
var obj = new Object();
obj.name = "Maddox";
obj.age = 18;
obj.funObj = function (a,b){
alert("这是一个对象的函数");
alert(this.name);
alert(b + a);
}
obj.funObj(123,"你猜我是谁");
alert(obj.age);
- {}花括号形式的自定义对象
var 变量名 = {}; //空对象
定义属性和方法
var 变量名 = {
属性名：值, //定义一个属性
属性名：值, //定义一个属性
函数名：function(){} //定义一个方法
};
//这是一个自定义对象
var obj = {
name : "zdz",
age : 18;
sex : "男",
method : function (a,b){
alert("我是恁爹");
}
};
alert(typeof (obj));
obj.method(1,2);
JS中的事件
事件是电脑输入设备与页面进行交互的响应，我们称之为事件。
常用的事件：
onload ——加载完成事件，页面加载完成之后，常用于做页面js代码初始化操作
onclick——单击事件，常用于按钮的点击响应操作
onblur—— 失去焦点事件，常用于输入框失去焦点后验证其输入内容是否合法
onchange——内容发生改变事件，常用于下拉列表和输入框内容发生改变后操作
onsubmit ——表单提交事件，常用于表单提交前，验证所有表单项是否合法
事件的注册又分为静态注册和动态注册两种：
什么是事件的注册（绑定）：就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或绑定。
- 静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码
- 动态注册事件：是指先通过JS代码得到标签的dom对象，然后再通过dom对象.事件名 = function(){}这种形式赋予事件响应后的代码
动态注册的基本步骤：
1. 获取标签对象
2. 标签对象.事件名 = function(){}
onload加载事件
<script type="text/javascript">
//onload事件的方法
function onloadFun(){
alert("静态注册onload事件，所有代码");
//...
}
window.onload = function (){
alert("这是动态注册的onload事件！");
}
</script>
</head>
<!--静态注册onload事件
onload事件是浏览器解析完页面之后就会自动触发的事件
<body οnlοad="alert('欢迎点击')">
<body οnlοad="onloadFun();">
-->
onclick点击事件
<script type="text/javascript">
function onclickEvent(){
alert("点击事件的方法实现");
}
window.onload = function (){
//获取标签对象
/**
* document是JS语言提供的一个对象（文件）——表示整个页面的内容
* getElementById("")：
* get ————获取
* Element —————元素(就是标签）
* By ————通过（由...经....）
* Id ————id属性
* getElementById即通过id属性获取元素（标签）对象
*/
var btn = document.getElementById("btn01");
//通过标签对象.事件名 = function()
btn.onclick = function (){
alert("window实现点击事件");
}
}
</script>
</head>
<body>
<button οnclick="alert('点击事件属性实现')">按钮1</button>
<button οnclick="onclickEvent();">按钮2</button>
<button id="btn01">按钮3</button>
onblur失去焦点事件
<script type="text/javascript">
window.onclick = function (){
var elementById = document.getElementById("btn02");
elementById.onclick =function (){
alert("提交成功");
}
}
function onblurEvent(){
//console是控制台对象，是由JS语言提供，专门用来向浏览器的控制器打印输出，用于测试使用
//log是打印的方法
console.log("静态注册失去焦点事件，请输入密码");
alert("静态注册失去焦点,请输入密码");
}
window.onblur = function (){
//1.获取标签对象
var elementById = document.getElementById("inputBlur");
elementById.onblur = function (){
console.log("动态注册失去焦点事件，请输入邮箱");
alert("动态注册实现失去焦点事件");
}
}
</script>
</head>
<body>
<from>
<table>
<tr>
<td>用户名：</td>
<td><input type="text" οnblur="alert('请输入用户名')"><br></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="text" οnblur="onblurEvent();"><br></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" id = "inputBlur"><br></td>
</tr>
<tr>
<td>  <button id="btn02">按钮</button></td>
</tr>
</table>
</from>
</body>
</html>
onchange——内容发生改变事件
<script type="text/javascript">
function onchangeEvent(){
alert("内容发生改变2！");
}
window.onchange = function (){
var elementById = document.getElementById("selEve");
elementById.onchange = function (){
alert("内容发生改变3！");
}
}
</script>
</head>
<body>
请选择你最喜欢的动漫：
<!-- <select οnchange="alert('内容发生改变1！')">-->
<!-- <select οnchange="onchangeEvent();">-->
<select id="selEve">
<option>《一人之下》</option>
<option>《海贼王》</option>
<option>《斗罗大陆》</option>
<option>《镇魂街》</option>
<option>《画江湖》</option>
</select>
onsubmit ——表单提交事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onsubmitEvent</title>
<script type="text/javascript">
function onsubmitEvent(){
//要验证所有表单项是否合法，如果有一个不合法就阻止表单提交
alert("表单提交成功");
return true;
}
window.onload = function (){
var elementById = document.getElementById("form01");
elementById.onsubmit = function (){
alert("表单不合法，禁止提交");
return false;
}
}
</script>
</head>
<body>
<!--οnsubmit="alert('表单提交成功！')" -->
<form action="http://zdzblog.fun" method="get" οnsubmit="return onsubmitEvent();">
<table>
<tr>
<td>用户名：</td>
<td><input type="text"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password"></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="email"></td>
</tr>
</table>
<input type="submit" value="静态注册" >
</form>
<form action="http://zdzblog.fun" id="form01">
<table>
<tr>
<td>用户名：</td>
<td><input type="text"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password"></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="email"></td>
</tr>
</table>
<input type="submit" value="动态注册" >
</form>
</body>
</html>
DOM模型（重点）
DOM全称是Document Object Model 文档对象模型
即把文档中的标签、属性、文本转换成对象来管理
- Document对象
Document对象的理解：- Document它管理了所有的HTML文档内容
- Document是一种树结构的文档，有层级关系
- Document让我们把所有的标签都对象化
- 我们可以通过Document访问所有的标签对象
- Document对象中的方法介绍（重点）
document.getElementById(elementId)
通过标签的id属性查找标签的dom对象，elementId是标签的id属性值
document.getElementsByName(elementName)
通过标签的name属性查找标签dom对象，elementName是标签的name属性值
document.getElementsByTagName(tagName)
通过标签名查找标签dom对象，tagName是标签名
document.createElement(tagName)
通过给定的标签名，创建一个标签对象，tagName是要创建的标签名
document.getElementById(elementId)
通过标签的id属性查找标签的dom对象，elementId是标签的id属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSMethod</title>
<script type="text/javascript">
function onclickFun(){
//1.当我们要操作一个标签的时候，一定要先获取这个标签的对象
var usernameObj = document.getElementById("username");
//alert(usernameObj);//[object HTMLInputElement]
//2.[object HTMLInputElement]就是dom对象,通过对象.属性可以获取到这个标签当中属性的值
//value可以获取到输入框内输入的值
var usernameText = usernameObj.value;
//如何验证字符串————正则表达式技术
var verify = /^\w{5,12}$/;
/*
* test()方法用于测试某个字符串是不是匹配我的规则。
* 匹配就返回true，不匹配就返回false
* */
if(verify.test(usernameText)){
alert("注册成功");
}else{
alert("用户名不合法！必须由字母，数字，下划线组成");
}
}
</script>
</head>
<!--需求：
当用户点击了校验按钮，要获取输出框中的内容，然后验证其是否合法。
验证的规则是：必须由字母，数字，下划线组成，并且长度是5到12位
-->
<body>
用户名：<input type="text" id="username" value=""><br>
<button οnclick="onclickFun();">注册</button>
</body>
</html>
document.getElementsByName(elementName)
通过标签的name属性查找标签dom对象，elementName是标签的name属性值，返回带有指定名称的对象集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSByName</title>
<script type="text/javascript">
//全选
function checkAll(){
//让所有复选框都选上
// document.getElementsByName("hobby")是根据指定的name属性查询返回多个标签对象集合、
//这个集合的操作和数组一样
//这个集合中的每个元素都是dom对象
//这个集合中的元素顺序是他们在html页面中从上到下的顺序
var hobbies = document.getElementsByName("hobby");
// alert(hobbies); //[object NodeList]
// alert(hobbies[2].value); //Python
//checked表示复选框的选中状态，如果选中是true，否则就是false
//checked属性可读可写
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = true;
}
}
//全不选
function checkNo(){
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = false;
}
}
//反选
function checkReverse(){
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = !hobbies[i].checked;
//等价写法
// if(hobbies[i].checked){
// hobbies[i].checked = false;
// }else{
// hobbies[i].checked = true;
// }
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="cpp" checked="checked">c++
<input type="checkbox" name="hobby" value="Java">Java
<input type="checkbox" name="hobby" value="Python">Python
<input type="checkbox" name="hobby" value="JavaScript">JavaScript
<br>
<button οnclick="checkAll();">全选</button>
<button οnclick="checkNo();">全不选</button>
<button οnclick="checkReverse();">反选</button>
</body>
</html>
document.getElementsByTagName(tagName)
通过标签名查找标签dom对象，tagName是标签名
var happyTag = document.getElementsByTagName("input"); //即把上面ByName方法中的name换成TagName
document对象的三个查询方法的使用优先顺序是
优先使用getElementById方法来进行查询
其次是getElementsByName
最后才是getElementsByTagName(这三个方法查询的范围依次增大）
以上三个方法一定要在页面加载完成之后，整个浏览器执行代码是从上往下执行的
document.createElement(tagName)
通过给定的标签名，创建一个标签对象，tagName是要创建的标签名
需求：使用JS代码来创建html标签并显示在页面上，标签的内容是：<div>hello world</div>
<script type="text/javascript">
window.onload = function (){
var newObj = document.createElement("div");//在内存中是<div></div>
newObj.innerHTML = "Hello World!"; //还是在内存中<div>Hello World!</div>
// 一样的效果
// var textNodeObj = document.createTextNode("Hello World!");//有一个文本节点对象 Hello World!
// newObj.appendChild(textNodeObj);
//添加子元素
document.body.appendChild(newObj);
}
</script>
正则表达式看我的博客——正则表达式
JS中正则表达式的使用
<script type="text/javascript">
//匹配字符串当中的"e"
var patt = new RegExp("e");
alert(patt);// /e/
//更简便的写法：
var pattTwo = /e/;
var pattThree = /^e\w{3,9}a$/;
var str = "qbsndnecd";
var strTwo = "ebscdneheya";
alert(patt.test(str));//true
alert(pattTwo.test(str));//true
alert(pattThree.test(strTwo));//true
</script>
常见的验证提示效果
alert弹窗提示
span标签文字提示
span标签图片提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSMethod</title>
<script type="text/javascript">
function onclickFun(){
//1.当我们要操作一个标签的时候，一定要先获取这个标签的对象
var usernameObj = document.getElementById("username");
//alert(usernameObj);//[object HTMLInputElement]
//2.[object HTMLInputElement]就是dom对象,通过对象.属性可以获取到这个标签当中属性的值
var usernameText = usernameObj.value;
//如何验证字符串————正则表达式技术
var verifyOne = /^\w{5,12}$/;
/*
* test()方法用于测试某个字符串是不是匹配我的规则。
* 匹配就返回true，不匹配就返回false
* */
var usernameObjTwo = document.getElementById("usernameIllegal");
//innerHTML 表示起始标签和结束标签中的内容
//innerHTML 这个属性可读、可写
// usernameObjTwo.innerHTML = "用户名格式不正确（或为空）";
if(verifyOne.test(usernameText)){
// alert("注册成功");
usernameObjTwo.innerHTML = " <img src=\"../img/绿√.jpg\" width=\"16\" height=\"16\">";
}else{
// alert("用户名不合法！必须由字母，数字，下划线组成");
usernameObjTwo.innerHTML = " <img src=\"../img/红×.jpg\" width=\"16\" height=\"16\">";
}
}
</script>
</head>
<!--需求：
当用户点击了校验按钮，要获取输出框中的内容，然后验证其是否合法。
验证的规则是：必须由字母，数字，下划线组成，并且长度是5到12位
-->
<body>
用户名：<input type="text" id="username" value="">
<span style="color:red" id="usernameIllegal" value="">
</span><br>
<button οnclick="onclickFun();">注册</button>
</body>
</html>
节点的常用属性和方法
节点就是标签对象
方法：
通过具体的元素节点调用
getElemectsByTagName()方法，获取当前节点的指定标签名孩子节点
appendchild( oChildNode)方法，可以添加一个子节点，oChildNode是要添加的孩子节点
属性：
childNodes：获取当前节点的所有子节点
firstChild：获取当前节点的第一个子节点
lastChild：获取当前节点的最后一个子节点
parentNode：获取当前节点的父节点
nextSibLing：获取当前节点的下一个节点
previousSibLing：获取当前节点的上一个节点
className：用于获取或设置标签的class属性值
innerHTML：表示获取/设置起始标签和结束标签中的内容
innerText：表示获取/设置起始标签和结束标签中的文本
401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
