一.JS的简介
js全称（javascript）中文是java脚本的意思 。它的由来（在互联网刚兴起的时候，网络速度比较慢，而体验又是放在服务器端的，所以用户体验度非常差，为了了解这一难题，网景公司发明了livescript liverscript主要把表单验证功能从后台提升到了前端，因为不依赖网络，所以用户体验比较好。但是由于知名度比较差，知道的人很少，后来由于sum公司的java语言一飞冲天，爆红编程世界，为了跟风，博取知名度，网景公司把livescript 改成javascript. 后来微软眼红网景公司的成就，就发明了jscript。但是正因为此，导致了js的标准不同，所以给个大浏览器厂家带来了很大的麻烦。为了有一个统一的标准，js被提交到一个ecma组织，也正因为此，后来的js都是采用ecma标准（ECMAScript））
JavaScript 是属于网络的脚本语言！
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
JavaScript 是因特网上最流行的脚本语言。
JavaScript 很容易使用！你一定会喜欢它的！
注：JavaScript的一些基础知识
1.JavaScript用“//”表示注释，且每句话后用“；”分隔开;
2.Js里面的数据类型:字符串、数字、布尔、数组、对象、Null、Undefined；
3.其定义局部变量时，前面要加“var“做标注，没有var时，默认为全局变量;
4.函数如何定义:
1） - 命名函数
function 函数名(){
函数体
}
2） 匿名函数
<div style="width: 100px; height: 100px; border: 1px solid red" onclick="javascript:location.href='http://www.baidu.com'"> baidu
5.alert(“要显示的内容")-------弹出一个警示框;
向页面的指定位置写入内容:
document.getElementById('userTip').inner HTML='<b style="color:red">用户名信息不能空</b>'
6.用“===”表示两者相等
用“==”时，会自动将字符串转换为整形进行比较
7.三元比较符：“（条件语句）？（满足条件返回的值）：（不满足返回的值）“
str.length-----求某字符串的长度
8.BOM对象:
Windows: alert(), setInterval(), clearInterval()
location: href() --(跳转到指定的页面)
9.DOM:
常用的事件: onsubmit(特殊点， 一定要有boolean类型的返回值), onclick， onfocus， onblur, onchange,
二.JS的常规应用
10.节点
Document:整个html文件就称为一个document文档;
Element: 所有的标签都是Element元素;
Attribute: 标签里面的属性；
<input type='text'> --- type
<a href="xxxx"> -- href
<a style="color:red"> ---- style
Text：百度
1
需求:
1). 用户在注册的时候会输入一些信息， 但是用户输入的内容有可能不合法， 会导致服务器端压力过大;
2). 当用户填写信息之后， 对填写的信息进行校验（前端校验， 只能防君子不能防小人）
-后台校验: 也是需要校验的；
需要掌握的技能:
1). 如何在加载页面时执行指定函数?
2). 如何获取指定元素对象?
3). 如何弹出一个警告框?
实现过程：首先我们要建立标签实现登陆界面，其次就是要使用(script)标签实现需求，具体程序如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
// 1. 获取用户输入的用户名的标签对象;
var uEle = document.getElementById('username');
alert(uEle);
// 2. 获取这个对象里面的值；
var uValue = uEle.value;
alert(uValue);
// 弹出一个警示框
alert("这是一个用户名!");
}
</script>
</head>
<body>
<form action="#" method="get">
<!--get: 填写的信息会在url里面显示， 对于重要的数据来说是不安全的；
post: 填写的信息不会在url里面显示
-->
用户名: <input type="text" name="username" placeholder="用户名" id="username"><br/>
密码: <input type="password" name="passwd" placeholder="密码"><br/>
<input type="submit" value="注册">
</form>
</body>
2.验证用户名和密码的合法性
需求:
1). 判断用户名是否为空?
2) 校验密码是否大于6位， 如果不满足则不合法?
实现步骤:
1. 确定事件类型onsubmit(常见事件类型的网址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
2. 对这个事件绑定一个函数(执行的操作写在函数里面);
3. 函数的核心功能: 校验用户名是否为空?
- 1). 获取输入用户名标签提交的内容；
-2). if判断用户名是否为空?
- 3). 如果数据合法， 继续执行， 提交表单；
-4). 如果数据不合法， 不让表单提交? (显示弹出框报错) — alert
onsubmit用法：
onsubmit 事件会在表单中的确认按钮被点击时发生。当该事件触发的函数中返回false时，表单就不会被提交。
onsubmit经常用于表单验证，当"提交"按钮被点击时，依然会执行checkForm()函数，在checkForm()函数中，我们对表单输入框进行了空验证，如果用户名为空或密码不足六位，会弹出警告框，并return false,这样表单就不会提交（上面已经说到：当该事件触发的函数中返回false时，表单就不会被提交）。 同时，这里要注意onsubmit=“return checkForm();”，不能掉了return，否则表单永远会提交。
具体程序如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<style></style>-->
<!--<link>-->
<script>
// *****************************1. 校验用户名是否为空? ***************************
// 定义一个函数
function checkForm() {
// 1). 获取输入用户名标签提交的内容；
var user = document.getElementById('username').value;
// 2). if判断用户名是否为空?
// 3). 如果数据合法， 继续执行， 提交表单；
// 4). 如果数据不合法， 不让表单提交? (显示弹出框报错) --- alert
if (user === '') {
alert("用户名不能为空!");
return false;
}
// ******************************2. 校验密码长度是否小于6 **************************
//
var passwdlen = document.getElementById('passwd').value.length;
// 上边的方法是通过id来得到标签提交的内容，我们也可以通过name获得，不过相同name的可能存在多个，所以加上索引即可
// var passwdlen = document.getElementsByName('passwd')[0].value.length;
if (passwdlen < 6){
alert("密码不合法: 长度小于6！");
return false;
}
}
</script>
</head>
<body>
<form action="#" method="get" onsubmit="return checkForm()">
用户名: <input type="text" name="username" placeholder="用户名" id="username"><br/>
密码: <input type="password" name="passwd" placeholder="密码" id="passwd"><br/>
<input type="submit" value="注册">
</form>
</body>
</html>
1.当输入用户名为空，密码不管是否合法，点击注册按钮，会弹出下列警告
2.当输入用户名合法，密码不合法时，点击注册按钮，会弹出下列警告
3.当输入用户名合法，密码合法时，点击注册按钮，不会出现警告
3.点击按钮时切换图片
onclick事件表示当，当用户在元素上点击时，会改变其内容<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#sowing_map{
width: 590px;
height:500px;
margin: 0 auto;
text-align: center;
}
</style>
<script>
// 1. 定义一个变量， 控制图片的循环顺序;
var i = 1;
function changeImg() {
// 2. 当点击下一页时， i+1, 这个时候， 图片变成img2;
i += 1;
// 3. 修改img标签里面的src属性内容;
document.getElementById('img').src = 'img/img' + i + '.jpg';
// 4. 如果图片轮播结束， 从头开始轮播；
if (i === 6){
i = 0;
}
}
</script>
</head>
<body>
<!--思路:
1. 确定事件类型为onclick事件；
2. 并跟对应的函数changeImg绑定在一起；
3. 实现函数功能；
1). 当点击下一页按钮之后， 修改img标签里面的src属性内容;
-->
<div id="sowing_map">
<img src="img/img1.jpg" id="img">
<input type="button" value="下一页" onclick="changeImg()">
</div>
</body>
</html>
这里实现的效果是每点击一下“下一页”，会切换图片，切换完所有图片后会从头开始
4.轮播图
需求：
实现界面的轮播图，即每隔固定时间换张图片
思路:
1. 确定事件类型为onclick事件；
2. 并跟对应的函数changeImg绑定在一起；
3. 实现函数功能；
具体程序如下：具体程序如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#sowing_map{
width: 590px;
height:500px;
/*块级元素居中*/
margin: 0 auto;
/*行内元素居中*/
text-align: center;
}
</style>
<script>
window.onload = function () {
// 这里的时间单位是毫秒，每隔1s自动执行某一个函数，所以我们将器设置为100
setInterval('changeImg()', 1000);
};
// 1. 定义一个变量， 控制图片的循环顺序;
var i = 1;
function changeImg() {
i += 1;
// 2. 修改img标签里面的src属性内容;
document.getElementById('img').src = 'img/img' + i + '.jpg';
// 3. 如果图片轮播结束， 从头开始轮播；
if (i === 6){
i = 0;
}
}
</script>
</head>
<body>
<div id="sowing_map">
<img src="img/img1.jpg" id="img">
</div>
</body>
</html>
这里实现的效果是每个1秒，会自动切换图片库中的图片，播完后会从头开始
5.js的外部引入轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
Js的引入方式:
- 内部引入: 直接在head标签里面的<script>写的内容;
- 外部引入:<script src="js/main.js" ></script
-->
<link href="css/main.css" rel="stylesheet">
<script src="js/main.js" ></script>
</head>
<body>
<div id="sowing_map">
<img src="img/img1.jpg" id="img">
</div>
</body>
</html>
"css/main.css" 中的内容：
#sowing_map{
width: 590px;
height:500px;
margin: 0 auto;
text-align: center;
}
"js/main.js"中的内容：
window.onload = function () {
// 这里的时间单位是毫秒，每隔1s自动执行某一个函数，所以我们将器设置为100
setInterval('changeImg()', 1000);
};
// 1. 定义一个变量， 控制图片的循环顺序;
var i = 1;
function changeImg() {
i += 1;
// 2. 修改img标签里面的src属性内容;
document.getElementById('img').src = 'img/img' + i + '.jpg';
// 3. 如果图片轮播结束， 从头开始轮播；
if (i === 6){
i = 0;
}
}
6.定时弹出广告图片
需求:
实现网页定时弹出广告， 并定时取消弹出的广告;
步骤:
1. 在页面设置一个隐藏的图片; style=“display: none”
2. 确定事件类型为onload， 为其绑定一个函数;
3. 设置定时执行显示图片的函数showAd();
4. 编写定时任务里面的函数showAd()----
- 获取标签的样式display=‘block’;
- 清除显示广告的定时任务;
- 编写隐藏广告图片的定时任务;
5. 实现定时任务里面的函数hiddenAd();
- 获取标签的样式display=‘none’;
- 清除隐藏广告的定时任务;
程序：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/main.css" rel="stylesheet">
<script src="js/main.js" ></script>
</head>
<body>
<div id="ad">
<img src="img/img7_ad.jpg" id="ad_img" style="display: none">
</div>
</body>
</html>
"css/main.css" 中的内容：
#ad{
width: 1190px;
height: 80px;
margin: 0 auto;
text-align: center;
}
"js/main.js"中的内容：
window.onload = function () {
//每隔1s执行显示广告的函数;
// 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
//(http://www.w3school.com.cn/jsref/met_win_setinterval.asp)
// 在js的函数里面。 变量名没有var时， 是一个全局变量;
adtime = setInterval('showAd()', 1000);
};
// 编写显示隐藏图片的函数
function showAd() {
// 获取到广告图片对应的标签对象
var adEle = document.getElementById('ad_img');
//修改广告图片元素里面的style属性里面的display
adEle.style.display = 'block';
// 清除显示图片的定时操作；
clearInterval(adtime);
// 设置隐藏广告图片的定时任务；
hiddentime = setInterval('hiddenAd()', 1000);
}
function hiddenAd() {
// 获取到广告图片对应的标签对象
var adEle = document.getElementById('ad_img');
//修改广告图片元素里面的style属性里面的display
adEle.style.display = 'none';
//清除隐藏图片的定时任务;
clearInterval(hiddentime);
}
实验结果为：加载该界面后，等待一秒后会出现下图，再过一秒会自动消失
7.使用聚焦和离焦事件验证用户注册信息
需求：
当用户进行用户名和密码填写时，给出相应的提示，输入完毕后，不管是否合法，都对用户进行告知
实现步骤:
1). 确定事件类型(onfocus-聚焦事件)， 并为其绑定一个函数;
2). 确定事件类型(onblur-离焦事件)， 并为其绑定一个函数;
具体程序：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function showUserTip() {
// 1. 获取标签对象;
document.getElementById('userTip').innerHTML = '<b style="color: lightgray;">用户名不能为空</b>';
}
function checkUser() {
//1. 离焦时判断用户名是否为空?
var name = document.getElementById("user").value;
// 2. 如果为空， 右边来一个红色的提示;
// 3. 如果不为空， 则取消所有提示;
if(name===""){
document.getElementById("userTip").innerHTML = '<b style="color: red">用户名不能为空</b>'
}
else {
document.getElementById("userTip").innerHTML = '<b style="color: green">ok</b>'
}
}
function showPwdTip() {
document.getElementById('PwdTip').innerHTML = '<b style="color: lightgray;">密码不能少于六位</b>';
}
function checkPwd() {
var passwd = document.getElementById("pwd").value;
if(passwd.length<=6){
document.getElementById("PwdTip").innerHTML = '<b style="color: red">密码不能少于六位</b>'
}
else {
document.getElementById("PwdTip").innerHTML = '<b style="color: green">ok</b>'
}
}
</script>
</head>
<body>
<div id="bor">
<form action="#" method="get">
用户名：<input type="text" id="user" placeholder="输入用户名" name="username" onfocus=" showUserTip()" onblur="checkUser()">
<span id="userTip"></span><br/>
密码：<input type="password" id="pwd" placeholder="输入密码" name="password" onfocus=" showPwdTip()" onblur="checkPwd()">
<span id="PwdTip"></span><br/>
<input type="submit" value="注册">
</form>
</div>
</body>
</html>
实现结果：当鼠标点击“用户名“那一栏时，后面会出现提示，
当鼠标点击到用户名栏外的地方，则会出现相应的结果提示。密码栏类似
8.表格的全选和全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function checkAll() {
//1. 获取全选框对象
var checkAll_ = document.getElementById("checkAll");
//判断该单选框是否被选中，
// 2. 对编号前面的复选框的状态进行判断;
// - 如果状态为选中， 则设置所有的单选框为选中状态;
// - 如果状态为没有选中， 则设置所有的单选框为没有选中状态;
if (checkAll_.checked){
var checkones = document.getElementsByName("checkOne");
for (var i=0;i<checkones.length;i++){
checkones[i].checked = true;
}
}else{
//- 如果状态为未选中， 则设置所有的单选框为未选中状态;
var checkones = document.getElementsByName("checkOne");
// 依次遍历所有的单选框， 设置状态为选中
for (var i=0;i<checkones.length;i++) {
checkones[i].checked = false;
}
}
}
</script>
</head>
<body>
<table width="60%;" border="1px" cellpadding="5px" cellspacing="5px" style="margin: 0 auto">
<caption style="color: blue ;font-size: xx-large"><span>用户信息</span></caption>
<tr>
<th colspan="4" style="width:95% ;text-align: center">
<input type="submit" value="增加">
<input type="submit" value="删除"></th>
</tr>
<tr>
<th style="width: 10%"><input type="checkbox" id="checkAll" onclick="checkAll()"></th>
<th style="width: 30%">编号</th>
<th style="width: 30%">姓名</th>
<th style="width: 30%">年龄</th>
</tr>
<tr>
<th><input type="checkbox" name="checkOne"></th>
<th>1</th>
<th>张三</th>
<th>22</th>
</tr>
<tr>
<th><input type="checkbox" name="checkOne"></th>
<th>2</th>
<th>粉带</th>
<th>12</th>
</tr>
<tr>
<th><input type="checkbox" name="checkOne"></th>
<th>3</th>
<th>粉条</th>
<th>32</th>
</tr>
<tr>
<th><input type="checkbox" name="checkOne"></th>
<th>4</th>
<th>粉丝</th>
<th>18</th>
</tr>
<tr>
<th><input type="checkbox" name="checkOne"></th>
<th>5</th>
<th>粉猪</th>
<th>19</th>
</tr>
</table>
</body>
</html>
实验结果：左上角的选择按钮为全选或全不选框
