Web 前端学习之js概述

1.JavaScript 介绍

Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript 代码。
JS 是Netscape 网景公司的产品，最早取名为LiveScript;为了吸引更多java 程序员。更名为JavaScript。
JS 是弱类型，Java 是强类型。
- 如在Java中需要 int i = 1;
- 在JS中只需要var i;即可

特点：

交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解释JS 的浏览器都可以执行，和平台无关）

2.JavaScript 和html 代码的结合方式

注意,在老版本中JS 需要加type="text/javascript"

text 表明放在之间的是文本类型。
javascript是告诉浏览器里面的text是个javascript脚本

<script type="text/javascript">alert('hello js!')
</script>

方法1

只需要在head 标签中，或者在body 标签中，使用script 标签来书写JavaScript 代码
如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JS概述</title><script type="text/javascript">alert('hello js!')</script>
</head>
<body>
</body>
</html>

方法2

使用script 标签引入单独的JavaScript 代码文件

src 属性专门用来引入js 文件路径（可以是相对路径，也可以是绝对路径）
script 标签可以用来定义js 代码，也可以用来引入js 文件
但是，两个功能二选一使用。不能同时使用两个功能

首先new一个JS的文件

这里文件命名为t1.js,只需要写下面一句话即可

alert('hello js!')

这里通过src的方式引入,如下图,编译器会自动提示

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JS概述</title><script type="text/javascript" src="t1.js"></script>
</head>
<body>
</body>
</html>

效果一样

3. JavaScrip 变量

什么是变量？

变量是可以存放某些值的内存的命名。

JavaScript 的变量类型：

数值类型： number
字符串类型： string
对象类型： object
布尔类型： boolean
函数类型： function
JavaScript 里特殊的值：
- undefined 未定义，所有js 变量未赋于初始值的时候，默认值都是undefined.
- null 空值
- NaN 全称是：Not a Number。非数字。非数值。

var a = 1;
var b = 'abc';
alert(a*b) # 此时返回的就是NaN

JS 中的定义变量格式：
- var 变量名;
- var 变量名= 值;

JavaScript 的关系（比较）运算

等于： == 等于是简单的做字面值的比较

如 var a = '12' 与 var b = 12
a == b 返回的是true

全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型
上述的例子就会返回false

JavaScript 的逻辑运算

且运算： &&
或运算： ||
取反运算： !

在JavaScript 语言中，所有的变量，都可以做为一个boolean类型的变量去使用。

下面列出是false的几种情况
0 、null、undefined、””(空串) 都认为是false;
注意这里的空串是引号之间没有任何东西的,如果有一个空格就不算空串

且运算 &&

第一种：当表达式全为真的时候。返回最后一个表达式的值。
第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值

概括一下就是遇到假就返回那个值遇到真就往后走直到结束

或运算 ||

第一种情况：当表达式全为假时，返回最后一个表达式的值
第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值

可以看到和且运算反了一下

且和或两种运算有短路,也就是说当它们有结果了之后,后面的表达式就不再进行了,直接返回结果

4. JavaScript 数组

数组定义方式

var 数组名= []; // 空数组
var 数组名= [1 , ’abc’ , true]; // 定义数组同时赋值元素

这里的数组是可变长的

比如先定义了 var arr = []
现在的arr.length长度为0
但是在进行arr[2] = 1的语句之后
arr.length的长度会变成3
此时arr数组里面的内容是[undefined,undefined,1]

<script type="text/javascript">var arr = [true,1]; // 定义一个空数组// alert( arr.length ); // 0arr[0] = 12;// alert( arr[0] );//12// alert( arr.length ); // 0// javaScript 语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。arr[2] = "abc";alert(arr.length); //3// alert(arr[1]);// undefined// 数组的遍历for (var i = 0; i < arr.length; i++){alert(arr[i]);}
</script>

5. JavaScript 函数

定义方法

JS中的函数定义有点类似python的语法,下面我们看看2种定义函数的方法

方法一 function关键字

格式

function 函数名(形参列表){函数体
}

下面给出几种常用的函数类型

无参函数
有参函数
有返回值函数

function fun(){alert("无参函数fun()被调用了");
}
// 函数调用===才会执行
// fun();
function fun2(a ,b) {alert("有参函数fun2()被调用了a=>" + a + ",b=>"+b);
}
// fun2(12,"abc");
// 定义带有返回值的函数
function sum(num1,num2) {var result = num1 + num2;return result;
}
alert( sum(100,50) );

方法二

格式
var 函数名= function(形参列表) { 函数体}
跟方法一差不多没什么区别

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) );

注意事项

注：在Java 中函数允许重载。但是在JS 中函数的重载会直接覆盖掉上一次的定义

隐形参数

js函数里的隐形参数我们可以理解成可变长参数 , 类似于python中的*args,下面就看个例子

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) );

我们可以看到, arguments就带代表了可变长参数,这里的arguments与函数体原来定义的参数个数无关, 用arguments可以方便的实现一些不知道参数个数的需求
在上述例子中,1和2分别对应了num1,num2,但是在函数过程中我们并不使用他们,甚至在函数定义的时候我们可以直接不加参数,仍然可以调用arguments.

6. JavaScript 自定义对象

有点类似C语言中的结构体,这部分蛮简单的,看着代码运行一下就知道了

方法一: Object 形式的自定义对象

格式如下

对象的定义：var 变量名= new Object(); // 对象实例（空对象）变量名.属性名= 值; // 定义一个属性变量名.函数名= function(){} // 定义一个函数
对象的访问：变量名.属性/ 函数名();

示例如下

<script type="text/javascript">
// 对象的定义：
//  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();
</script>

方法二: {}花括号形式的自定义对象

格式

对象的定义：
var 变量名= { // 空对象属性名：值, // 定义一个属性属性名：值, // 定义一个属性函数名：function(){} // 定义一个函数
};
对象的访问：变量名.属性/ 函数名();

案例如下

<script type="text/javascript">
// 对象的定义：// var 变量名= { // 空对象// 属性名：值, // 定义一个属性// 属性名：值, // 定义一个属性// 函数名：function(){} // 定义一个函数
// };
var obj = {name:"国哥",age:18,fun : function () {alert("姓名：" + this.name + " , 年龄：" + this.age);
}
};
// 对象的访问：// 变量名.属性/ 函数名();
alert(obj.name);
obj.fun();
</script>

7. JavaScript 中的事件

对于事件我单独整理了一节笔记,链接如下
Web 前端学习之 JS中的事件

8.JavaScript DOM模型

DOM 全称是Document Object Model 文档对象模型

简单的说，就是把文档中的标签，属性，文本，转换成为对象来管理。
那么它们是如何实现把标签，属性，文本转换成为对象来管理呢。这就是我们马上要学习的重点。

下图整个html代码就是一个Document对象,我们可以把它转换成树形的结构来理解

Document 对象的理解：

第一点：Document 它管理了所有的HTML 文档内容。
第二点：document 它是一种树结构的文档。有层级关系。
第三点：它让我们把所有的标签都对象化
第四点：我们可以通过document 访问所有的标签对象。

我们可以使用方法获取到对象比如下面几种

document.getElementById(elementId)
document.getElementsByName(elementName)
document.getElementsByTagName(tagname)
document.createElement( tagName)

然后通过对象里面的属性获取我们想要的内容,并且完成想要的操作
对此,我详细的写了一篇文章来举例说明 DOM实例的操作

getElementById

Javascript 案例:验证登录用户名
上面这个小案例使用了getElementById()的方法

下面用另一个案例简单的说一下其他两个方法

getElementByNAME

这个案例的目的是实现复选框的全选,全不选,反选的操作
代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">// 全选function checkAll() {// 让所有复选框都选中// document.getElementsByName();是根据 指定的name属性查询返回多个标签对象集合// 这个集合的操作跟数组 一样// 集合中每个元素都是dom对象// 这个集合中的元素顺序是他们在html页面中从上到下的顺序var hobbies = document.getElementsByName("hobby");// checked表示复选框的选中状态。如果选中是true，不选中是false// checked 这个属性可读，可写for (var i = 0; i < hobbies.length; i++){hobbies[i].checked = true;}}//全不选function checkNo() {var hobbies = document.getElementsByName("hobby");// checked表示复选框的选中状态。如果选中是true，不选中是false// checked 这个属性可读，可写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="js">JavaScript<br/><button onclick="checkAll()">全选</button><button onclick="checkNo()">全不选</button><button onclick="checkReverse()">反选</button>
</body>
</html>

总结: 除了getElementsByID,其他方法返回的都是一个数组,就算getElementsByName只有一个标签,我们也需要用[0]的方法去使用它

getElementsByTagName

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">window.onload = function(){// alert( document.getElementById("btn01") );}// 全选function checkAll() {alert( document.getElementById("btn01") );// document.getElementsByTagName("input");// 是按照指定标签名来进行查询并返回集合// 这个集合的操作跟数组 一样// 集合中都是dom对象// 集合中元素顺序 是他们在html页面中从上到下的顺序。var inputs = document.getElementsByTagName("input");for (var i = 0; i < inputs.length; i++){inputs[i].checked = true;}}</script>
</head>
<body><!--as -->兴趣爱好：<input type="checkbox" value="cpp" checked="checked">C++<input type="checkbox" value="java">Java<input type="checkbox" value="js">JavaScript<br/><button id="btn01" onclick="checkAll()">全选</button></body>
</html>

createElement

这里要注意的是单单使用createElement创建了标签之后,它只是被加载在了缓存里面,页面中是无法显示的,为了让他真正的显示出来,我们还需要使用appendChild把它加载实际存在的标签之后作为子节点存在 ,比如document.body.appendChild();

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">window.onload = function () {// 现在需要我们使用js代码来创建html标签，并显示在页面上// 标签的内容就是：<div>国哥，我爱你</div>var divObj = document.createElement("div"); // 在内存中 <div></div>var textNodeObj = document.createTextNode("国哥，我爱你"); // 有一个文本节点对象 #国哥，我爱你divObj.appendChild(textNodeObj); // <div>国哥，我爱你</div>// divObj.innerHTML = "国哥，我爱你"; // <div>国哥，我爱你</div>,但，还只是在内存中// 添加子元素document.body.appendChild(divObj);}</script>
</head>
<body></body>
</html>

9.JavaScript 节点的常用属性和方法

节点就是标签对象

方法

通过具体的元素节点调用

getElementsByTagName()

获取当前节点的指定标签名孩子节点

appendChild( oChildNode )

可以添加一个子节点，oChildNode 是要添加的孩子节点

属性

DOM查询练习

需求,完成右边按钮中的操作

代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">window.onload = function(){//1.查找#bj节点document.getElementById("btn01").onclick = function () {var bjObj = document.getElementById("bj");alert(bjObj.innerHTML);}//2.查找所有li节点var btn02Ele = document.getElementById("btn02");btn02Ele.onclick = function(){var lis = document.getElementsByTagName("li");alert(lis.length)};//3.查找name=gender的所有节点var btn03Ele = document.getElementById("btn03");btn03Ele.onclick = function(){var genders = document.getElementsByName("gender");alert(genders.length)};//4.查找#city下所有li节点var btn04Ele = document.getElementById("btn04");btn04Ele.onclick = function(){//1 获取id为city的节点//2 通过city节点.getElementsByTagName按标签名查子节点var lis = document.getElementById("city").getElementsByTagName("li");alert(lis.length)};//5.返回#city的所有子节点var btn05Ele = document.getElementById("btn05");btn05Ele.onclick = function(){//1 获取id为city的节点//2 通过city获取所有子节点alert(document.getElementById("city").childNodes.length);};//6.返回#phone的第一个子节点var btn06Ele = document.getElementById("btn06");btn06Ele.onclick = function(){// 查询id为phone的节点alert( document.getElementById("phone").firstChild.innerHTML );};//7.返回#bj的父节点var btn07Ele = document.getElementById("btn07");btn07Ele.onclick = function(){//1 查询id为bj的节点var bjObj = document.getElementById("bj");//2 bj节点获取父节点alert( bjObj.parentNode.innerHTML );};//8.返回#android的前一个兄弟节点var btn08Ele = document.getElementById("btn08");btn08Ele.onclick = function(){// 获取id为android的节点// 通过android节点获取前面兄弟节点alert( document.getElementById("android").previousSibling.innerHTML );};//9.读取#username的value属性值var btn09Ele = document.getElementById("btn09");btn09Ele.onclick = function(){alert(document.getElementById("username").value);};//10.设置#username的value属性值var btn10Ele = document.getElementById("btn10");btn10Ele.onclick = function(){document.getElementById("username").value = "国哥你真牛逼";};//11.返回#bj的文本值var btn11Ele = document.getElementById("btn11");btn11Ele.onclick = function(){alert(document.getElementById("city").innerHTML);// alert(document.getElementById("city").innerText);};};
</script>
</head>
<body>
<div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br /><br /><p>你手机的操作系统是?</p><ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul></div><div class="inner">gender:<input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name:<input type="text" name="name" id="username" value="abcde"/></div>
</div>
<div id="btnList"><div><button id="btn01">查找#bj节点</button></div><div><button id="btn02">查找所有li节点</button></div><div><button id="btn03">查找name=gender的所有节点</button></div><div><button id="btn04">查找#city下所有li节点</button></div><div><button id="btn05">返回#city的所有子节点</button></div><div><button id="btn06">返回#phone的第一个子节点</button></div><div><button id="btn07">返回#bj的父节点</button></div><div><button id="btn08">返回#android的前一个兄弟节点</button></div><div><button id="btn09">返回#username的value属性值</button></div><div><button id="btn10">设置#username的value属性值</button></div><div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>

@CHARSET "UTF-8";body {width: 800px;margin-left: auto;margin-right: auto;
}button {width: 300px;margin-bottom: 10px;
}#btnList {float:left;
}#total{width: 450px;float:left;
}ul{list-style-type: none;margin: 0px;padding: 0px;
}.inner li{border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float:left;
}.inner{width:400px;border-style: solid;border-width: 1px;margin-bottom: 10px;padding: 10px;float: left;
}

注意点

上述案例中,有一个需求是返回#city的所有子节点
我们先看看id=city的代码是怎么样的

     <ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul>

很明显,这是一个无序列表, 也许会想当然的以为#city的子节点只有4个,但是为什么查询出来的结果是9呢,因为他把空格也算进了子节点中, 也就是字符串也相当于子节点

<ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul>

如果我改成上面这样的写法的话查询的结构就是4了

本节笔记来自下面链接的视频学习
尚硅谷2020最新版JavaWeb全套教程,java web零基础入门完整版