JavaScript的运用1
一.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>
实验结果:左上角的选择按钮为全选或全不选框