大家好，小编为大家解答javascript语句执行顺序不对的问题。很多人还不知道详细说明js的执行过程，现在让我们一起来看看吧！
一、JavaScript 介绍
Java 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行 JavaScript 代码python for语句用法。
JS是 Netscape网景公司的产品，最早取名为 LiveScript;为了吸引更多 java程序员。更名为 JavaScript。
JS是弱类型，Java是强类型。
特点：
1. 交互性（它可以做的就是信息的动态交互）
2. 安全性（不允许直接访问本地硬盘）
3. 跨平台性（只要是可以解释 JS的浏览器都可以执行，和平台无关）
二、JavaScript 使用
1、JavaScript 和 html 代码的结合方式
1）第一种方式
只需要在head标签中，或者在body标签中，使用 标签来书写 JavaScript 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
< type="text/java">
<!--
alert是JavaScript语言提供的一个警告框函数。
它可以接收任意类型的参数，这个参数就是警告框的提示信息
-->
alert("hello javaScript!");
</>
</head>
<body>
</body>
</html>2）第二种方式
使用标签引入单独的 JavaScript 代码文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
现在需要使用引入外部的js文件来执行
src 属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径）
标签可以用来定义js代码，也可以用来引入js文件
但是，两个功能二选一使用。不能同时使用两个功能
-->
< type="text/java" src="1.js"></>
</head>
<body>
</body>
</html>2、变量
JavaScript 的变量类型：
- 数值类型： number
- 字符串类型： string
- 对象类型： object
- 布尔类型： boolean
- 函数类型：function
JavaScript 里特殊的值：
- undefined：未定义，所有 js变量未赋于初始值的时候，默认值都是 undefined.
- null ：空值
- NaN：全称是：Not a Number。非数字。非数值。
JS 中的定义变量格式：
- var 变量名;
- var 变量名 = 值;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
< type="text/java">
var i;
// alert(i); // undefined
i = 12;
// typeof()是 JavaScript语言提供的一个函数。
// alert( typeof(i) ); // number
i = "abc";
// 它可以取变量的数据类型返回
// alert( typeof(i) ); // String
var a = 12;
var b = "abc";
alert( a * b ); // NaN是非数字，非数值。
</>
</head>
<body>
</body>
</html>3、关系（比较）运算
等于： == 等于是简单的做字面值的比较
全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
< type="text/java">
var a = "12";
var b = 12;
alert( a == b ); // true
alert( a === b ); // false
</>
</head>
<body>
</body>
</html>4、逻辑运算
- 且运算： &&
- 或运算： ||
- 取反运算： !
在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。
0、null、undefined、””(空串) 都认为是false；
&& 且运算：
- 当表达式全为真的时候。返回最后一个表达式的值。
- 当表达式中，有一个为假的时候。返回第一个为假的表达式的值
|| 或运算：
- 当表达式全为假时，返回最后一个表达式的值
- 只要有一个表达式为真。就会把回第一个为真的表达式的值
并且 && 与运算和 || 或运算有短路，当这个 && 或 || 运算有结果了之后，后面的表达式不再执行。
5、数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
< type="text/java">
var arr1 = []; // 定义一个空数组
alert( arr.length ); // 0
arr[0] = 12;
alert( arr[0] );//12
// javaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。
arr[5] = "abc";
alert(arr.length); //6
alert(arr[4]);// undefined
// 数组的遍历
for (var i = 0; i < arr.length; i++){
alert(arr[i]);
}
</>
</head>6、函数
1）函数的二种定义方式
方式一
使用的格式如下:
function 函数名(形参列表){
函数体
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
< type="text/java">
// 定义一个无参函数
function fun(){
alert("无参函数 fun()被调用了");
}
fun();
function fun2(a ,b) {
alert("有参函数 =>" + a + ",b=>"+b);
}
fun2(12,"abc");
// 定义带有返回值的函数
function sum(num1,num2) {
var result = num1 + num2;
return result;
}
alert( sum(100,50) );
</>
</head>
<body>
</body>
</html>方式二
使用格式如下：
var 函数名 = function(形参列表){ 函数体 }<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
< type="text/java">
var fun = function () {
alert("无参函数");
}
fun();
var fun2 = function (a,b) {
alert("有参函数 a=" + a + ",b=" + b);
}
fun2(1,2);
var fun3 = function (num1,num2) {
return num1 + num2;
}
alert( fun3(100,200) );
</>
</head>
<body>
</body>
</html>2）函数的 arguments 隐形参数（只在function函数内）
就是在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。
隐形参数特别像 java 基础的可变长参数一样。public void fun( Object ... args ); 可变长参数其是是一个数组。
那么 js中的隐形参数也和 java 的可变长参数一样。操作类似数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
< type="text/java">
function fun(a) {
alert( arguments.length );//可看参数个数
alert( arguments[0] );
alert( arguments[1] );
alert( arguments[2] );
alert("a = " + a);
for (var i = 0; i < arguments.length; i++){
alert( arguments[i] );
}
alert("无参函数 fun()");
}
fun(1,"ad",true);
//编写一个函数。用于计算所有参数相加的和并返回
function sum(num1,num2) {
var result = 0;
for (var i = 0; i < arguments.length; i++) {
if (typeof(arguments[i]) == "number") {
result += arguments[i];
}
}
return result;
}
alert( sum(1,2,3,4,"abc",5,6,7,8,9) );
</>
</head>
<body>
</body>
</html>7、JS 中的自定义对象
1）Object 形式的自定义对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
< type="text/java">
<!--
对象的定义：
var 变量名 = new Object(); 对象实例（空对象）
变量名.属性名 = 值; 定义一个属性
变量名.函数名 = function(){} 定义一个函数
-->
var obj = new Object();
obj.name = "华仔";
obj.age = 18;
obj.fun = function () {
alert("姓名：" + this.name + " , 年龄：" + this.age);
}
<!--
对象的访问：
变量名.属性 / 函数名();
-->
alert( obj.age );
obj.fun();
</>
</head>
<body>
</body>
</html>2）花括号形式的自定义对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
< type="text/java">
<!--
对象的定义：
var 变量名 = {
属性名：值, 定义一个属性
属性名：值, 定义一个属性
函数名：function(){} 定义一个函数
};
-->
var obj = {
name:"国哥",
age:18,
fun : function () {
alert("姓名：" + this.name + " , 年龄：" + this.age);
}
};
<!--
对象的访问：
变量名.属性 / 函数名();
-->
alert(obj.name);
obj.fun();
</>
</head>
<body>
</body>
</html>8、js 中的事件
事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
常用的事件：
- onload 加载完成事件： 页面加载完成之后，常用于做页面 js 代码初始化操作
- onclick 单击事件：常用于按钮的点击响应操作。
- onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。
- onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
- onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。
事件的注册（绑定）其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
事件的注册又分为静态注册和动态注册两种：
- 静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
- 动态注册事件：是指先通过 js 代码得到标签的dom对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件 响应后的代码，叫动态注册。
动态注册基本步骤：
- 获取标签对象
- 标签对象.事件名 = fucntion(){}
1）onload 加载完成事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
< type="text/java">
// onload事件的方法
function onloadFun() {
alert('静态注册 onload事件，所有代码');
}
// onload事件动态注册。是固定写法
window.onload = function () {
alert("动态注册的 onload事件");
}
</>
</head>
<!--
静态注册 onload事件
onload事件是浏览器解析完页面之后就会自动触发的事件
<body onload="onloadFun();">
-->
<body>
</body>
</html>2）onclick 单击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
< type="text/java">
function onclickFun() {
alert("静态注册 onclick事件");
}
// 动态注册 onclick事件
window.onload = function () {
/*
1、获取标签对象
document 是 JavaScript语言提供的一个对象（文档）
getElementById 通过id属性获取标签对象
**/
var btnObj = document.getElementById("btn01");
alert( btnObj );
// 2 通过标签对象.事件名 = function(){}
btnObj.onclick = function () {
alert("动态注册的 onclick事件");
}
</>
</head>
<body>
<!--静态注册 onClick事件-->
<button onclick="onclickFun();">按钮 1</button>
<button id="btn01">按钮 2</button>
</body>
</html>3）onblur 失去焦点事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
< type="text/java">
// 静态注册失去焦点事件
function onblurFun() {
// console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出，用于测试使用
// log() 是打印的方法
console.log("静态注册失去焦点事件");
}
// 动态注册 onblur事件
window.onload = function () {
//1、获取标签对象
var passwordObj = document.getElementById("password");
//2、通过标签对象.事件名 = function(){};
passwordObj.onblur = function () {
console.log("动态注册失去焦点事件");
}
}
</>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"><br/>
密码:<input id="password" type="text" ><br/>
</body>
</html>4）onchange 内容发生改变事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
< type="text/java">
function onchangeFun() {
alert("女神已经改变了");
}
window.onload = function () {
//1、获取标签对象
var selObj = document.getElementById("sel01");
//2、通过标签对象.事件名 = function(){}
selObj.onchange = function () {
alert("男神已经改变了");
}
}
</>
</head>
<body>
请选择你心中的女神：
<!--静态注册 onchange事件-->
<select onchange="onchangeFun();">
<option>--女神--</option>
<option>芳芳</option>
<option>佳佳</option>
<option>娘娘</option>
</select>
请选择你心中的男神：
<select id="sel01">
<option>--男神--</option>
<option>国哥</option>
<option>华仔</option>
<option>富城</option>
</select>
</body>
</html>5）onsubmit 表单提交事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
< type="text/java" >
// 静态注册表单提交事务
function onsubmitFun(){
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
alert("静态注册表单提交事件----发现不合法");
return flase;
}
window.onload = function () {
//1、获取标签对象
var formObj = document.getElementById("form01");
//2 通过标签对象.事件名 = function(){}
formObj.onsubmit = function () {
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
alert("动态注册表单提交事件----发现不合法");
return false;
}
}
</>
</head>
<body>
<!--return false 可以阻止 表单提交 -->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" id="form01">
<input type="submit" value="动态注册"/>
</form>
</body>
</html>9、DOM 模型
DOM 全称是 Document Object Model 文档对象模型
大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。
1）Document 对象
Document 对象的理解：
- Document 它管理了所有的 HTML 文档内容。
- Document 它是一种树结构的文档。有层级关系。
- 它让我们把所有的标签都对象化
- 我们可以通过 Document 访问所有的标签对象。
那么 html 标签要对象化怎么办？
<body>
<div id="div01">div01</div>
</body>模拟对象化，相当于：
class Dom{
private String id; // id属性
private String tagName; // 表示标签名
private Dom parentNode; // 父亲
private List<Dom> children; // 孩子结点
private String innerHTML; // 起始标签和结束标签中间的内容
}2）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 对象的三个查询方法，如果有 id 属性，优先使用 getElementById方法来进行查询
- 如果没有 id属性，则优先使用 getElementsByName方法来进行查询
- 如果 id 属性和 name属性都没有最后再按标签名查 getElementsByTagName
以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。
getElementById 方法示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
< type="text/java" >
/*
当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。
验证的规则是：必须由字母，数字。下划线组成。并且长度是 5到 12位。
**/
function onclickFun() {
// 1、当我们要操作一个标签的时候，一定要先获取这个标签对象。
var usernameObj = document.getElementById("username");
var usernameText = usernameObj.value;
// 如何验证字符串符合某个规则 ，需要使用正则表达式技术
var patt = /^\w{5,12}$/;
var usernameSpanObj = document.getElementById("usernameSpan");
// innerHTML 表示起始标签和结束标签中的内容，这个属性可读，可写
usernameSpanObj.innerHTML = "国哥真可爱！";
//test()方法用于测试某个字符串，是不是匹配我的规则
if (patt.test(usernameText)) {
usernameSpanObj.innerHTML = "用户名合法！";
} else {
usernameSpanObj.innerHTML = "用户名不合法！";
}
</>
</head>
<body>
用户名：<input type="text" id="username" value="wzg"/>
<span id="usernameSpan" style="color:red;"></span>
<button onclick="onclickFun()">较验</button>
</body>
</html>getElementsByName 方法示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
< type="text/java">
//让所有复选框都选中
function checkAll() {
/*
根据指定的name属性查询返回多个标签对象集合，这个集合的操作跟数组一样，
集合中每个元素都是dom对象，这个集合中的元素顺序是他们在html页面中从上到下的顺序
**/
var hobbies = document.getElementsByName("hobby");
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;
}
}
</>
</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="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>getElementsByTagName 方法示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
< type="text/java">
// 全选
function checkAll() {
/*
按照指定标签名来进行查询并返回集合，这个集合的操作跟数组一样，集合中都是dom对象
集合中元素顺序是他们在 html页面中从上到下的顺序。
**/
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++){
inputs[i].checked = true;
}
}
</>
</head>
<body>
兴趣爱好：
<input type="checkbox" value="cpp" checked="checked">C++
<input type="checkbox" value="java">Java
<input type="checkbox" value="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
</body>
</html>createElement 方法示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
< type="text/java">
window.onload = function () {
// 使用js代码来创建 html标签，并显示在页面上
var divObj = document.createElement("div"); // 在内存中 <div></div>
var textNodeObj = document.createTextNode("国哥，我爱你");
divObj.appendChild(textNodeObj); // <div>国哥，我爱你</div>
// divObj.innerHTML = "国哥，我爱你"; // <div>国哥，我爱你</div>,但，还只是在内存中
// 添加子元素
document.body.appendChild(divObj);
}
</>
</head>
<body>
</body>
</html>3）节点的常用属性和方法
方法：
- getElementsByTagName()：获取当前节点的指定标签名孩子节点
- appendChild( oChildNode )：可以添加一个子节点，oChildNode 是要添加的孩子节点
属性：
- childNodes：获取当前节点的所有子节点
- firstChild：获取当前节点的第一个子节点
- lastChild：获取当前节点的最后一个子节点
- parentNode：获取当前节点的父节点
- nextSibling：获取当前节点的下一个节点
- previousSibling：获取当前节点的上一个节点
- className：用于获取或设置标签的 class 属性值
- innerHTML：表示获取/设置起始标签和结束标签中的内容
- innerText：表示获取/设置起始标签和结束标签中的文本
683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
