1、JavaScript简单介绍

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

js的特点：

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

2、js和html结合的使用方式

1、在html页面除了title标签之外任何地方写上

<script type="text/javascript">
// alert 是 JavaScript 语言提供的一个警告框函数。 // 它可以接收任意类型的参数，这个参数就是警告框的提示信息
alert("hello javaScript!");
</script>

2、在外部定义js单独引入
src =“js文件的路径”

<script type="text/javascript" src="1.js"></script>

3、js变量

js的常见变量类型如下五种：
数值类型： number
字符串类型： string
对象类型： object
布尔类型： boolean
函数类型： function

js当中特殊的值：
undefined 未定义，所有 js 变量未赋于初始值的时候，默认值都是 undefined.
null 空值
NaN 全称是：Not a Number。非数字。非数值

js定义变量的语法：var 变量名 = 值；

4、js关系比较运算和逻辑比较运算

关系运算
等于： == 比较值
全等于： === 除了做字面值的比较之外，还会比较两个变的数据类型

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">var i = "11";var j = 11;document.write( i == j);document.write("<br />")document.write(i === j)</script></body>
</html>

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

0 、null、 undefined、””(空串) 都认为是 false；

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

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

5、js当中的数组

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

arr[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]);
}

6、js当中的的函数（function）

第一种方法：使用function关键字来定义
function 函数名(形参列表){
函数体
}


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">function fun() {document.write("我是无参函数fun");}function sum(num1, num2) {document.write("我是有参函数：")var result = num1 + num2;return result;}document.write(fun());document.write("<br />")document.write(sum(100, 50));</script></body></html>

第二种定义函数的方法
var 函数名 = function(形参列表) {
函数体
}

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">var fun = function() {document.write("我是无参函数fun");}var sum = function (num1, num2) {document.write("我是有参函数：")var result = num1 + num2;return result;}document.write(fun());document.write("<br />")document.write(sum(100, 50));</script></body></html>

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

7、js中的自定义对象

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

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">//创建对象var dog = new Object();//创建属性dog.color = "白色";dog.age = 2;//创建函数dog.fun = function () {document.write("颜色："+this.color+"<br/>狗狗年龄："+this.age);}dog.fun();</script></body></html>

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

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">var dog = {name: "小白",color: "白色",sex: "公",show: function() {document.write("姓名：" + this.name + "颜色：" + this.color + "性别：" + this.sex)}};dog.show();document.write("<br />")document.write(dog.name)</script></body></html>

8、js事件

什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

常用的几种事件如下：

8.1onclick 单击事件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><input type="button" id="" value="单击我" onclick="show()"/><body><script type="text/javascript">var show = function () {alert("我爱学习javascript");}</script></body></html>

8.2移入移出事件

当用户移到某个位置或者移出某个位置做出响应。
onmouseenter：鼠标移入响应
onmouseout：鼠标移出响应

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><p id="pp" onmouseenter="p1()" onmouseout="p2()">javascript</p><body><script type="text/javascript">var p1 = function(){document.getElementById("pp").style.background = "red";}var p2 = function(){document.getElementById("pp").style.background = "none";}</script></body></html>

8.3获得焦点失去焦点事件

onfocus 获得焦点响应
onblur失去焦点响应

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><input type="text" value="" id="text" onfocus="p1()" onblur="p2()"/><body><script type="text/javascript">var p1 = function(){document.getElementById("text").style.borderColor = "red";}var p2 = function(){document.getElementById("text").style.borderColor="white";}</script></body></html>

点击文本框的时候边框会变色，移开文本框的时候边框会变没。

8.4、onchange事件

onchange 改变后触发。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><select name="" id="ss" onchange="color_select()"><option value="red">红色</option><option value="blue">蓝色</option><option value="black">黑色</option></select><body><script type="text/javascript">var color_select = function() {co = document.getElementById("ss").value;document.bgColor = co;}</script></body></html>

当选择下拉框进行背景颜色改变

8.5 onlode事件

onload 事件是浏览器解析完页面之后就会自动触发的事件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body onload="onloadFun()"><script type="text/javascript">function onloadFun() {alert('静态注册 onload 事件，所有代码');}</script></body></html>

浏览器解析完页面之后，触发该事件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">window.onload = function() {alert("动态注册的 onload 事件");}</script></body></html>

8.6 onsubmit表单提交事件

对表单里填写的信息进行验证。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><form action="//www.baidu.com" method="post" onsubmit="return checkForm()">   密码：<input type="password" id="pwd1" value="" onkeyup="onkeyups(this)"/> <span id="spans"></span>确认密码：<input type="password" id="pwd2" value=""  onkeyup="checkpassword(this)"/><span id="spans1"></span><input type="submit" value="提交" /></form><script type="text/javascript">function checkForm() {var pwd1 = document.getElementById("pwd1").value;var pwd2 = document.getElementById("pwd2").value;if(pwd1 != "" && pwd2 != "") {return true;} else {alert('密码不能为空！');return false;}}function onkeyups(obj){var len = obj.value.length;if(len<6){document.getElementById("spans").innerHTML="你长度不够！";}else{document.getElementById("spans").innerHTML="你长度够了！";}}function checkpassword(obj){var pwd2 = obj.value;var pwd1= document.getElementById("pwd1").value;if(pwd1 != pwd2){document.getElementById("spans1").innerHTML="密码不一致！";}else{document.getElementById("spans1").innerHTML="密码一致！";}}</script></body></html>

8.7 keydown键盘事件

keydown：当用户按下键盘上的任意按键时触发，如果按住不放，会重复触发此事件。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">document.onkeydown = function (){document.getElementById("text1").style.color="red";}</script><input type="text"  id="text1"/></body></html>

按下键盘任意内容输入在文本框文本框里面的值会变成红色。

9、操作DOM

DOM 全称是 Document Object Model 文档对象模型
简单来说就是把文档中的标签，属性，文本，转换成为对象来管理。

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

9.1Document对象中的方法介绍

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 以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。
* 验证的规则是：必须由字母，数字。下划线组成。并且长度是 5 到 12 位。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body>用户名：<input type="text" id="username" value="wzg" /> <span id="usernameSpan" style="color:red;"> </span> <button onclick="onclickFun()">较验</button><script type="text/javascript">function onclickFun(){//首先获得文本标签对象var name = document.getElementById("username");//Element  是一个dom对象var nametext= name.value;// 如何 验证 字符串，符合某个规则 ，需要使用正则表达式技术 var patt = /^\w{5,12}$/;//得到sapn标签对象var spans=document.getElementById("usernameSpan");//test()方法用于测试某个字符串，是不是匹配我的规则 ，匹配返回true，不匹配返回falseif(patt.test(nametext)){//如果合法spans.innerHTML = "你好啊,名字合法！";}else{spans.innerHTML = "不合法的名字！";}}</script></body></html>

9.1getElementsByName 方法示例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><p>请选择您的兴趣爱好：<label><input type="checkbox" id="all" />全选</label><label><input type="checkbox" id="NotAll" />反选</label></p><label><input type="checkbox" class="hobby" />游泳</label><label><input type="checkbox" class="hobby" />打游戏</label><label><input type="checkbox" class="hobby" />看电影</label><label><input type="checkbox" class="hobby" />泡妹子</label><label><input type="checkbox" class="hobby" />爬山</label><script>var    all = document.getElementById("all");var NotAll = document.getElementById("NotAll");var hobby = document.getElementsByClassName("hobby");var flag = true;// 全选按钮点击all.onclick = function() {// 返回一个布尔值，如果选中返回true，取消选中返回falseconsole.log(all.checked);if(all.checked) { // 如果全选选中，下面的兴趣就都选中for (var i = 0; i < hobby.length; i++) {hobby[i].checked = true;}}else { // 如果全选取消选中，下面的兴趣就都取消选中for (var i = 0; i < hobby.length; i++) {hobby[i].checked = false;}}}// 反选按钮点击NotAll.onclick = function() {if(NotAll.checked) {for (var i = 0; i < hobby.length; i++) {hobby[i].checked = !hobby[i].checked;}} else {for (var i = 0; i < hobby.length; i++) {hobby[i].checked = !hobby[i].checked;}}}// 外层的for循环是给下面的每一个兴趣爱好添加事件// 里面的for循环是当点击兴趣爱好复选框时，判断是否所有的兴趣爱好复选框都选中了for (var i = 0; i < hobby.length; i++) {hobby[i].onclick = function() {for (var i = 0; i < hobby.length; i++) {if(hobby[i].checked == false) {flag = false;break; // 节约性能}else{flag = true;}}// 如果flag为真就全选，否则就取消选中if(flag) {all.checked = true;}else{all.checked = false;}}}</script></body>
</html>

点击全选、反选的时候复选框全部被选中，当单独把复选框一个个点满了全选会自动勾上。

9.2BOM增删改查

DOM操作思维导图

9.3增删改查案例

创建div标签向div添加内容

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><script type="text/javascript">window.onload = function () {// 创建一个html标签对象var divObj = document.createElement("div");//divobj的内容为divObj.innerHTML = "我是一个div";//将divobj作为子节点添加到bodydocument.body.appendChild(divObj);}</script></body>
</html>

效果图：
删除替换克隆标签

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>02-删除替换克隆标签.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">#one{border: 1px solid blue;background-color: green;width: 300px;height: 150px;}#two{border: 1px solid blue;background-color: aqua;width: 250px;height: 100px;}</style><script type="text/javascript">function demo(){//第一个步骤，先通过id属性值，查找到这个div标签对象var divOne = document.getElementById("one");//alert(divOne);// 然后通过这个div标签对象的parentNode获取到它的父结点对象var parentNode = divOne.parentNode;//alert(parentNode);// 通过父结点对象调用 removeChild 函数来实现删除parentNode.removeChild(divOne);}function demo2(){//第一个步骤，先通过id属性值，查找到这个div标签对象var divOne = document.getElementById("one");var divTwo = document.getElementById("two");// 获取它的父结点var parentNode = divOne.parentNode;// 通过父结点调用replaceChild方法可以替换掉孩子结点// newChild是新的结点// oldChild是被替换掉的孩子结点parentNode.replaceChild(divTwo, divOne);}function demo3(){//第一个步骤，先通过id属性值，查找到这个div标签对象var divOne = document.getElementById("one");var divTwo = document.getElementById("two");// 获取它的父结点var parentNode = divOne.parentNode;// 通过父结点调用replaceChild方法可以替换掉孩子结点// newChild是新的结点// oldChild是被替换掉的孩子结点parentNode.replaceChild(divTwo.cloneNode(true), divOne);}</script></head><body><div id="one" > xxxxxx</div><div id="two" > yyyyyy</div><input type="button" value="删除元素" onclick="demo();"/><input type="button" value="替换元素" onclick="demo2();"/><input type="button" value="克隆和替换" onclick="demo3();"/></body>
</html>

加粗样式

10、操作BOM

浏览器对象模型（Browser Object Model, BOM）被广泛应用于 Web 开发之中，主要用于操作浏览器。

10.1全局对象window

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">window.onload = function (){alert('window.......');}</script></body>
</html>

10.2 location对象

location 对象存储了当前文档位置（URL）相关的信息，简单地说就是网页地址字符串。使用 window 对象的 location 属性可以访问。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link href="css/My.css" rel="stylesheet" /></head><script type="text/javascript"></script><body><div id="main"><div><img src="img/1.jpg" onclick="window.location.href='春天.html'"/>点击上面的图片跳转至“春天”页面</div><div><img src="img/2.jpg" onclick="window.location.href='夏天.html'"/>点击上面的图片跳转至“夏天”页面</div><div><img src="img/3.jpg" onclick="window.location.href='秋天.html'"/>点击上面的图片跳转至“秋天”页面</div><div><img src="img/4.jpg" onclick="window.location.href='冬天.html'"/>点击上面的图片跳转至“冬天”页面</div></div></body>
</html>

使用window.location.href = '路径’可以跳转页面

location.reload()也可以刷新页面

<!doctype html>
<html>
<head><meta charset="utf-8"><title></title>
</head><body bgcolor="#cebeaf"><h1>春天</h1><img src="img/spring.jpg" /><button onclick="location.reload()">刷新本页</button>
</body>
</html>

10.3history对象

history 对象存储了库互动浏览器的浏览历史，通过 window 对象的 history 属性可以访问该对象，实际上 history 属性仅存储最近访问的、有限条目的 URL 信息。

history.reload() 从主页面进入到新的页面，可以返回上一个页面
history.forward(1) 从主页面进入到新的页面,可以去去下一个页面
history.go(1) 从主页面进入到新的页面,可以去去下一个页面

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript"></script><p onclick="history.reload()">返回上一个页面</p><p onclick="history.forward(1)">去下一个页面</p><p onclick="history.go(1)">去下一个页面</p></body>
</html>

10.4定时器

setTimeout计时器
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

提示： 1000 毫秒= 1 秒。

提示：使用 clearTimeout() 方法来阻止函数的执行。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">//定义变量用来接收计时器var timer = null;window.onload = function (){timer=setTimeout(function(){alert("javascript");},2000);}/*停止计时器*/window.clearTimeout(timer);</script></body>
</html>

**setTimeout() **
在指定的毫秒数后重复调用函数或计算表达式。

下面的例子是使用settiumeout轮播图

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.box{width: 400px;height: 400px;}.box img {width: 300px;height: 300px;position: absolute;}.active{z-index: 1;}</style></head><body><div class="box"><img src="../../img/0.jpg" class="active"/><img src="../../img/1.jpg" /><img src="../../img/2.jpg"/><img src="../../img/3.jpg"/></div><script type="text/javascript">/*找到页面中的图片*/var imgs = document.getElementsByTagName("img");var num = 0;setInterval(function(){for (var i = 0; i < imgs.length; i++) {imgs[i].className = "";}num ++;if(num>3){num = 0;}imgs[num].className= "active";},500);</script></body>
</html>

10.5定时器实现秒表

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><script type="text/javascript">// 当页面所有元素和资源加载完成之后，在执行方法里面的代码window.onload = function() {// 找按钮元素var start = document.getElementById("start");var stop = document.getElementById("stop");var reload = document.getElementById("reload");// 找到页面中对应要替换的毫秒（ms）,秒（s）,分（m）var ms = document.getElementById('ms');var s = document.getElementById('s');var m = document.getElementById('m');// num指的是操作的数字，timer指的是接定时器变量var num = 0,timer = null;var flag = true; // 设置开关// 给三个按钮绑定对应的事件// 启动定时器start.onclick = function() {if(flag) { // 防止重复点击flag = false;}else {return;}// timer接收定时器的目的，为了方便清除定时器timer = setInterval(function() {// 让在页面中的数字显示变化num += 21;// 显示毫秒内容ms.innerHTML = num%1000;var sValue = parseInt(s.innerHTML);if(sValue < 10) {s.innerHTML = "0" + parseInt(num/1000);} else {s.innerHTML = parseInt(num/1000);}if(sValue >= 20) {num = 0;s.innerHTML = "00";// 设置分钟显示的内容var mValue = parseInt(m.innerHTML);if(mValue < 10) {m.innerHTML = "0" + parseInt(mValue + 1);} else {m.innerHTML = parseInt(mValue + 1);}}},10);}// 停止定时器stop.onclick = function() {// 清除定时器clearInterval(timer);flag = true;}}</script><style type="text/css">#main{height: 210px;}#main div{width: 200px;height: 200px;border:2px solid orange;border-radius: 100px;font-size: 90px; font-weight: 800px;text-align: center;line-height: 200px; float: left;margin-left: 20px;background: rgba(0,0,0,.8);color: white;}button{width: 100px;height: 100px;border-radius: 50px;</style><body><div id="main"><div id="m">00</div><div id="s">00</div><div id="ms">000</div></div><br /><button id="start">启动</button><button id="stop">暂停</button><button id="reload">重置</button></body>
</html>

当毫秒数大于1000秒数会+1，当秒数大于等于60的时候分钟会加+1；

10.6计时器实现轮播图

JavaScript脚本基础教程相关推荐

【JavaScript】基础教程
JS简介 JavaScript 是 WEB 开发者必学的三种语言之一: HTML 定义网页的内容 CSS 规定网页的布局 JavaScript 对网页行为进行编程 JavaScript对其它两种语言的 ...
JavaScript的基础教程
在HTML中使用JavaScript 主要方法是:就是使用<script>元素, js的代码编写位置可以是:head,body外,html外编写JavaScript的基本流程布局:H ...
java script 菜鸟教程_JavaScript 菜鸟基础教程
<JavaScript 菜鸟基础教程>由会员分享,可在线阅读,更多相关<JavaScript 菜鸟基础教程(21页珍藏版)>请在人人文库网上搜索. 1.JavaScript 简 ...
html5基本页面结构,HTML 5 基础教程
HTML 5 基础教程编辑锁定讨论上传视频 <HTML5基础教程>是2018年1月由北京逐日传媒总策划,柳炳祥等主编,兵器工业出版社出版的艺术类图书教材. 书名 HTML ...
Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
Javascript 基础教程阮一峰
Javascript 基础教程阮一峰 2021-11-16 阮一峰推荐的入门教程,重在查漏补缺 https://wangdoc.com/javascript/index.html 第一章入门 JS ...
JavaScript基础教程速学笔记
JavaScript基础教程速学笔记 JavaScript简介 JavaScript 是 Web 的编程语言.(但是java与JavaScript的区别就是周杰与周杰伦的区别)所有现代的 HTML 页 ...
autojs零基础入门视频教程,跟我学Auto.js Pro安卓免ROOT引流脚本开发教程,飞云脚本学院2019最新录制
课程大纲(更新中-) 基础课程 [已完成]01安装Visual Studio Code(时长9分33秒)在线观看 [已完成]02安装Auto.js Pro(时长5分48秒)在线观看 [已完成]03解读 ...

JavaScript脚本基础教程