Web前端之JavaScript入门
写在开头的链接：W3C，菜鸟教程。
关于JS的详细介绍和学习，可以进入W3C、菜鸟教程进行了解和学习，本篇文章仅对JS相关重要的、常用的几部分（它的主要语法、作用、DOM、BOM以及与Python语法的重要区别）作以介绍。
一、JavaScript简介
1、什么是JavaScript
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是脚本语言：
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入HTML 页面后，可由所有的现代浏览器执行。
2、JavaScript组成部分
- ECMAScript，描述了该语言的语法和基本对象
- 文档对象模型（DOM），描述处理网页内容的方法和接口
- 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。
3.JavaScript基本特点
JavaScript是一种属于网络的脚本语言,通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
- 是一种解释性脚本语言（代码不进行预编译）。
- 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
- 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
- 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
- Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
注：总结其特性为：
- 脚本语言
- 基于对象
- 简洁
- 动态性
- 跨平台性
4.JavaScript的主要用途
- JavaScript 能够改变 HTML 内容；
- JavaScript 能够改变 HTML 属性；
- JavaScript 能够改变 HTML 样式 (CSS)；
- JavaScript 能够隐藏 HTML 元素；
- JavaScript 能够显示 HTML 元素。
5.为何学习JavaScript
JavaScript 是 web 开发者必学的三种语言之一：
(Web开发三剑客)：
- HTML 定义网页的内容（框架）
- CSS 规定网页的布局（化妆）
- JavaScript 对网页行为进行编程（活起来）
二、JavaScript的使用和输出
1、JavaScript的使用
< script>标签
在HTML中，JavaScript代码必须位于< script>与< /script>标签之间
注： 那些老旧的实例可能会在 < script> 标签中使用 type=“text/javascript”。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
2、JavaScript输出
JavaScript 能够以下不同方式“显示”数据：
- 使用 window.alert() 写入警告框（常用）
- 使用 document.write() 写入 HTML 输出
- 使用 innerHTML 写入 HTML 元素
- 使用 console.log() 写入浏览器控制台
三、JavaScript基本语法
1.定义变量
使用一个变量前要先声明：
| var x,y | //如何声明变量 |
|---|---|
| x=7;y=8 | //如何赋值 |
| z=x+y | //如何计算值 |
var x=1;
var y=2;
var z=x+y;2.JavaScript 运算符
1）算数运算符
算术运算符对数值（文字或变量）执行算术运算。
| 运算符 | 描述 |
|---|---|
| + | 加法 |
| - | 减法 |
| * | 乘法 |
| ** | 幂 |
| / | 除法 |
| % | 系数 |
| ++ | 递增 |
| – | 递减 |
2).赋值运算符
赋值运算符向 JavaScript 变量赋值。
| 运算符 | 例子 | 等同于 |
|---|---|---|
| = | x=y | x=y |
| += | x+=y | x=x+y |
| -= | x-=y | x=x-y |
| *= | x*=y | x=x*y |
| /= | x/=y | x=x/y |
| %= | x%=y | x=x%y |
| <<= | x<<=y | x=x< |
| >>= | x>>=y | x=x>>y |
| >>>= | x>>>=y | x=x>>>y |
| &= | x&=y | x=x&y |
| ^= | x^=y | x=x^y |
| l= | x l=y | x=x l y |
| **= | x**=y | x=x**y |
3). 比较运算符
| 运算符 | 描述 |
|---|---|
| == | 等于 |
| === | 等值等型 |
| ！= | 不等于 |
| !== | 不等值或不等型 |
| > | 大于 |
| < | 小于 |
| >= | 大于或等于 |
| <= | 小于或等于 |
| ？ | 三元运算符 |
其中：
===：表示值相等并且类型相等
==：值相等
4）逻辑运算符
| 运算符 | 描述 |
|---|---|
| && | 逻辑与 |
| ll | 逻辑或 |
| ！ | 逻辑非 |
3.JavaScript 数据类型
字符串值，数值，布尔值，数组，对象（有点像字典）。而python支持的数据类型有数值类型、字符串、列表、元组、集合、字典等。
| var length=7 | //数字 |
|---|---|
| var lastName=“Gates” | //字符串 |
| var cars=[“Porsche”, “Volvo”, “BMW”] | //数组 |
| var x={firstName：“Bill”，lastName：“Gates”}; | //对象（类似于字典） |
var a=3;
var name='hello'
var color=['red','blue','green']
var b={name:'lili',age:12}4.JavaScript 函数语法
JavaScript 函数是被设计为执行特定任务的代码块；
JavaScript 函数会在某代码调用它时被执行。
- JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
- 函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
- 圆括号可包括由逗号分隔的参数：(参数 1, 参数 2, …)
- 由函数执行的代码被放置在花括号中：{}
function name（参数1，参数2，参数3...）{
要执行的代码；
return 返回值；
}其中：
- 函数参数（Function parameters）是在函数定义中所列的名称。
- 在函数中，参数是局部变量。
- 在其他编程语言中，函数近似程序（Procedure）或子程序（Subroutine）
如：
<script>
function myFunction(p1,p2){
return p1 * p2;
}
document.getElementById("demo").innerHTML=myFunction(7,8);
</script>简单的JS代码示例：
<!DOCTYPE HTML >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<!--
引入JS：JavaScript 代码必须位于<script>与</script>标签之间
1.变量
2.JavaScript数据类型：数值类型、字符串、布尔值、数组、对象
3.JavaScript函数：
function myFunction(p1,p2) {
return p1 * p2 //该函数返回p1和p2的乘积
}
-->
<script>
<!-- -->
var info="打开成功"
alert(info)
</script>
</head>
<body>
这是一个JavaScript页面
</body>
</html>运行结果
点击确定后：
5.JavaScript中的对象
JavaScript中的对象和python中的字典类似，这里就不在过多赘述，可以进入W3c网站进行查看学习。
6.条件语句
在 JavaScript 中，我们可使用如下条件语句：
- 如果 if 之后的条件为 true，执行 if 规定的代码块
- 如果多个条件均为为 false，执行 else 规定的代码块
- 如果else if 之后的条件为 false，执行else if 规定的代码块
- 使用 switch 来规定多个被执行的备选代码块
if(条件1){
条件1 为TRUE时执行点的代码块
}else if（条件2）{
条件2 为false 而条件2为true时执行的代码块
}else {
条件1和条件2均为false时执行的代码块
}7、for循环
for(var i=0;i<count;i++){
循环做的事
}四 、DOM文档对象模型
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。当网页被加载时，浏览器会创建页面的文档对象模型。
HTML DOM模型被结构化为对象树：
通过这个对象模型，HTML DOM可以进行获取、更改
添加或删除HTML元素。
DOM方法和属性
HTML DOM方法是能够（在HTML元素上）执行的动作；
HTML DOM属性是能够设置或改变的HTML元素的值。
常用的方法和属性：
//方法：
document.getElementByName() //返回的是一个列表对象
document.getElementById() //返回的是一个元素对象
document.createTextNode() //创建文本节点
document.createElement() //创建元素节点
nodeobj.appendCgild() //添加子节点
//属性：
object.innerHTML //当前标签对象里面嵌套的HTML信息
object.value //用户输入的信息值
object.src //获取图片的路径，通过赋值方式可以实现修改图片路径
object.checked //判断当前多选框是否被选中五、BOM浏览器对象模型
浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。
BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
六、JavaScript事件
1、HTML事件
HTML 事件是发生在 HTML 元素上的“事情”，可以是浏览器或用户做的某些事情。
当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。
下面是HTML事件的一些例子：
- HTML网页完成加载
- HTML输入字段被修改
- HTML按钮被点击
下面是一些常见的HTML事件:
| 事件 | 描述 |
|---|---|
| onchange | HTML元素已被改变 |
| onclick | 用户点击了HTML元素 |
| onmouseover | 用户把鼠标移动到HTML元素上 |
| onmouseout | 用户把鼠标移开HTML元素 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已经完成页面加载 |
另外，还有事件句柄（Event Handlers）
HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。
| 属性 | 此事件发生在何时… |
|---|---|
| onabort | 图像的加载被中断 |
| onblur | 元素失去焦点 |
| onchange | 域的内容被改变 |
| onclick | 当用户点击某个对象时调用的事件句柄 |
| ondblclick | 当用户双击某个对象时调用的事件句柄 |
| onerror | 在加载文档或图像时发生错误 |
| onfocus | 元素获得焦点 |
| onkeydown | 某个键盘按钮被按下 |
| onkeypress | 某个键盘按键按下并松开 |
| onkeyup | 某个键盘按键被松开 |
| onload | 一张页面或一幅图像完成加载 |
| onmousedown | 鼠标按钮被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标移到某元素上 |
| onmouseup | 鼠标按键被松开 |
| onreset | 重置按钮被点击 |
| onresize | 窗口或框架被重新调整大小 |
| onselect | 文本被选中 |
| onsubmit | 确认按钮被点击 |
| onunload | 用户退出页面 |
2、onsubmit事件
onsubmit事件：提交事件，onsubmit 事件会在表单中的确认按钮被点击时发生。
案例：实现简单的用户登录校验：
<!DOCTYPE HTML >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录校验</title>
<script>
function checkForm(){
//获取当前提交的用户名,默认情况下getElementsByNamed返回列表对象，.value获取对象里面的值
var username=document.getElementsByName("username")[0].value;
//判断用户名是否为空，如果为空，报错
if (username===''){
// ==:'5'==5 true 只比较值是否相等
// === '5'===5 false 比较值和类型是否相等
alert('用户名为空');
}
var password=document.getElementById('pwd').value;
var passwd_length=password.length;
if (passwd_length<6){
alert('密码长度小于6位');
}
}
</script>
</head>
<body>
<div class="login">
<h1>用户登录</h1>
<!-- onsubmit当提交登录信息的时候，执行函数checkForm()实现用户的校验-->
<!-- 第一个事件类型：onsubmit-->
<form action="#" method="get" onsubmit="return checkForm()">
<input type="text" name="username" placeholder="用户名"><br/>
<input type="password" name="password" placeholder="密码" id="pwd"><br/>
<input type="submit" value="登录">
</form>
</div>
</body>
</hmtl>运行结果
当输入用户名并且密码长度大于6时，登录成功。
3.聚焦（onfocus）和离焦（onblur）事件：
onfocus事件： 聚焦事件，onfocus 事件在对象获得焦点时发生。
onblur事件： 离焦事件，onblur 事件会在对象失去焦点时发生。
我们在平常的登录过程当中，用户名和密码栏后面一般会有与输入内容相关的要求和提示，并不总是跳出警示框，这种需求该如何实现呢？那就需要用到聚焦和离焦事件。
案例：优化版简单的用户登录校验
<!DOCTYPE HTML >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录校验</title>
<script>
function showUserTips() {
//innerHTML:给usertips中添加一些文本信息
var usertipsObj=document.getElementById('usertips');
var info="用户名不能为空";
usertipsObj.innerHTML=info;
}
function checkuser() {
//获取当前提交的用户名,默认情况下getElementsByNamed返回列表对象，.value获取对象里面的值
var username=document.getElementsByName("username")[0].value;
//判断用户名是否为空，如果为空，报错
var usertipsObj=document.getElementById('usertips');
if (username.length<=2) {
// ==:'5'==5 true 只比较值是否相等
// === '5'===5 false 比较值和类型是否相等
usertipsObj.innerHTML = "用户名长度不大于2";
}else {
usertipsObj.innerHTML="ok";
}
}
</script>
</head>
<body>
<div class="login">
<h1>用户登录</h1>
<!-- onsubmit当提交登录信息的时候，执行函数checkForm()实现用户的校验-->
<!-- 第一个事件类型：onsubmit-->
<form action="#" method="get" >
<!-- onfocus聚焦事件，如果聚焦，执行showUserTips()-->
<input type="text" name="username" placeholder="用户名" id="user" onfocus="showUserTips()" onblur="checkuser()">
<span id="usertips">tips</span><br/>
<input type="password" name="password" placeholder="密码" id="pwd"><br/>
<input type="submit" value="登录">
</form>
</div>
</body>
</html>运行结果
3.点击onclick事件
点击事件
onclick事件：onclick 事件会在对象被点击时发生。
1）案例1：onclick实现图片的转换
实现点击图片，切换图片
代码：
<!DOCTYPE HTML >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var count=1;
function changeImg() {
count += 1;
// 通过for循环实现图片的切换
// 1.获取图片对象
var Obj=document.getElementById('img');
Obj.src='./img/'+count+'.jpg';
//如果轮播图片结束，我们就从头开始显示图片
if (count===5){
count=0;
}
}
</script>
</head>
<body>
<div class="box">
<img src="./img/1.jpg" id="img"><br/>
<!-- 当前用户点击按钮时，切换图片到下一页-->
<input type="submit" value="下一页" onclick="changeImg()">
</div>
</body>
</html>运行结果
点击下一页
点击下一页
点击下一页
点击下一页
2）案例2：onclick实现表格全选和不全选
点击左上角按钮，全选，或全不选
代码：
<!DOCTYPE HTML >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现表格全选或不全选</title>
<script>
function checkAll() {
// 1.获取全选框对象
var checkAllEle=document.getElementById('checkAll');
// 获取当前的状态，如果返回true，则代表选中，否则未选中；
// alert(checkAllEle.checked);
// 获取所有叫checkOne的对象
var checkOnes=document.getElementsByName('checkOne');
if (checkAllEle.checked){
for (var i=0;i<checkOnes.length;i++){
checkOnes[i].checked=true;
}
}else{
for (var i=0;i<checkOnes.length;i++){
checkOnes[i].checked=false;
}
}
}
</script>
</head>
<body>
<table style="width: 600px;margin: 0 auto;margin-top: 50px;text-align: center;"border="1px" >
<th style="text-align: center;" colspan="5">
<input type="button" value="添加">
<input type="button" value="删除">
</th>
<tr>
<th><input type="checkbox" id="checkAll" onclick="checkAll()"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>4</td>
<td>4</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>5</td>
<td>5</td>
<td>1</td>
<td>5</td>
</tr>
</table>
</body>
</html>运行结果‘
点击全选即可全选，再点击即可全不选。
3）案例3:onclick实现动态添加城市以及标签的嵌套
输入城市点击添加城市，会添加到下面的城市列表中。
代码：
<!DOCTYPE HTML >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态添加城市</title>
<script>
function addCity() {
// 1.获取要添加的城市的名字
var city=document.getElementById('city').value;
// 2.判断城市是否有值，如果有，则添加到列表中
if (city){
// 3.创建一个关于城市的文本节点
var textnode=document.createTextNode(city); //广州
// 4.创建一个li节点
var liEleNode=document.createElement('li');
// 5.将城市信息添加到li标签里：<li>城市名称</li>
liEleNode.appendChild(textnode);
// 6.将城市列表标签添加到ul标签中
var ulEleNode=document.getElementById('city_ul');
ulEleNode.appendChild(liEleNode);
}else{
alert('城市为空');
}
}
</script>
</head>
<body>
<div class="content">
<form>
<!-- placeholder为提示语-->
<input type="text" name="city" id="city" placeholder="请输入城市">
<input type="button" value="添加城市" onclick="addCity()">
</form>
<!--1.比如要添加深圳到列表中，首先加到li列表中，再添加到ul列表中-->
<ul id="city_ul">
<li>西安</li>
<li>成都</li>
<li>上海</li>
</ul>
</div>
</body>
</html>运行结果
未作操作时：
添加的城市为空时：
输入正确时：
4.onchange事件
onchange 当对象信息改变时执行的内容。
案例：onchange实现省市信息二级联动
第一次选择省份之后，后面选择省份对应的城市
代码：
<!DOCTYPE HTML >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市信息二级联动</title>
<script>
function changeCity() {
// 1.如何存储省份和城市之间的关系
// provinces=[['西安’，‘渭南’，‘宝鸡'],['太原'，'大同','吕梁']，['桂林','南宁']]
var provinces=new Array(3);
provinces[0]=new Array('西安','渭南','宝鸡');
provinces[1]=new Array('太原','大同','吕梁');
provinces[2]=new Array('桂林','南宁');
// 2.获取用户选择的省份
var choiceProvince=document.getElementById('province').value;
// alert(choiceProvince);
// 3.遍历用户选择省份对应的所有城市；
var citys=provinces[choiceProvince];
//先获取到城市，如果之前选择过省份，对多选框中的内容进行清空，即可以直接将长度置为0
var selectcityObj=document.getElementById('city');
selectcityObj.length=0;
// 4.添加所有的城市到select中
for(var i=0;i<citys.length;i++){
// 创建城市的文本节点
var textnode=document.createTextNode(citys[i]);
// 创建option节点对象
var optObj=document.createElement('option');
// 将文本节点添加到option节点中
optObj.appendChild(textnode);
// 获取select节点对象
var selectobj=document.getElementById('city');
selectobj.appendChild(optObj);
}
}
</script>
</head>
<body>
<div class="content">
<form action="#" method="get">
<span>籍贯</span>
<!-- select表示下拉列表-->
<select id="province" onchange="changeCity()"> <!--修改省份时，就会触发并执行函数changeCity的内容-->
<option>...选择省份...</option>
<option name="province" value="0">陕西</option>
<option name="province" value="1">山西</option>
<option name="province" value="2">广西</option>
</select>
<select id="city">
<option>...选择城市...</option>
</select>
</form>
</div>
</body>
</html>运行结果
首先选择省份，接下来选择对应省份中的城市
七、总结
1.基本语法
1）定义变量：var 变量名=''value;
2）判断相等：
==：值是否相等
===：值和类型是否相等
3）判断语句
if（条件）{
满足条件做的事情
}else{
不满足条件做的事情
}
4）for循环
for（var i=0；i<count;i++）{
循环做的事情
}
5）函数定义
function 函数名（形参1，形参2）{
return 返回值；
}
**********js事件
onsubmit-----提交事件
onclick-----点击事件
onfocus------聚焦事件
onblur-----离焦事件
onchange-----当对象信息改变时执行的内容
2.DOM（document object model）
document.getElementByName()--- 返回的是一个列表对象
document.getElementById()---返回的是一个元素对象
document.createTextNode---返回一个文本节点
document.createElement---返回元素
NodeObj.appendChild（）---将一个节点对象添加到（）中
标签对象的属性信息：
innerHTML---当前标签对象里嵌套的HTML信息
value---用户输入的信息值
checked---判断当前多选框是否被选中
src---获取图片的路径，通过赋值方式实现修改图片路径