版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35537301/article/details/83043076
1、ECMAscript语法
1.1 变量的声明
- 方式1
- var 变量名 = 初始化值；
- 方式2
- var 变量名；
2.2 数据类型
2.3 运算符
-
算术运算符
-
赋值运算符
-
逻辑运算符
-
比较运算符
- 注意:
- 如果是两个数字之间的比较 那么跟java一样
- 如果一边是数字 一边数数字类型的字符串 会先强制转化为数字 在比较值的大小
- 如果是两个字符串之间的比较 那么比较 ascii值 即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>比较运算符</title>
<script type="text/javascript">
alert(18 > "16"); //true
alert(17 > "小明"); //false
alert("a".charCodeAt()); //97
alert("a" > "A"); //true
alert(100 > "a"); //false
</script>
</head>
<body>
</body>
</html>-
等性运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
alert(17 == "17"); //true
alert(17 === "17"); //false
alert(true == 1); //true
alert(false == 0); //true
alert(NaN === NaN); //false
</script>
</head>
<body>
</body>
</html>2.4 语句
-
判断语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>判断语句</title>
<script type="text/javascript">
var x = 4;
if (x > 4) {
alert("x大于4")
} else if(x<4){
alert("x小于4");
}
else{
alert("x等于4");
}
</script>
</head>
<body>
</body>
</html>-
循环语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环语句</title>
<script type="text/javascript">
var num = 0;
for (var i = 0; i < 10; i++) {
if (i % 5 == 0) {
continue;
}
num++;
}
alert(num);
</script>
</head>
<body>
</body>
</html>2.5 函数的声明
-
方式1
function 函数名(参数1,参数2){
函数体；
}-
匿名函数
var 函数名 = function(参数1,参数2){
函数体;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
<script type="text/javascript">
//声明函数
function sub(a, b) {
alert(a + b);
}
var mul = function(i, j) {
alert(i * j);
}
function add(a, b) {
return a + b;
}
var sum = add(3, 4);
alert(sum);
</script>
</head>
<body>
</body>
</html>2.6 事件
onload：页面加载事件
onsubmit：表单提交事件，需要返回值，onsubmit="return 函数名"
onclick：单击事件
| 属性 | 此事件发生在何时... | IE | F | O | W3C |
|---|---|---|---|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄 | 3 | 1 | 9 | Yes |
| ondblclick | 当用户双击某个对象时调用的事件句柄 | 4 | 1 | 9 | Yes |
| onload | 一张页面或一幅图像完成加载 | 3 | 1 | 9 | Yes |
| onunload | 用户退出页面 | 3 | 1 | 9 | Yes |
| onsubmit | 确认按钮被点击 | 3 | 1 | 9 | Yes |
| onreset | 重置按钮被点击 | 4 | 1 | 9 | Yes |
| onabort | 图像的加载被中断 | 4 | 1 | 9 | Yes |
| onerror | 在加载文档或图像时发生错误 | 4 | 1 | 9 | Yes |
| onfocus | 元素获得焦点 | 3 | 1 | 9 | Yes |
| onblur | 元素失去焦点 | 3 | 1 | 9 | Yes |
| onchange | 域的内容被改变 | 3 | 1 | 9 | Yes |
| onkeydown | 某个键盘按键被按下 | 3 | 1 | No | Yes |
| onkeyup | 某个键盘按键被松开 | 3 | 1 | 9 | Yes |
| onkeypress | 某个键盘按键被按下并松开 | 3 | 1 | 9 | Yes |
| onmousedown | 鼠标按钮被按下 | 4 | 1 | 9 | Yes |
| onmouseup | 鼠标按键被松开 | 4 | 1 | 9 | Yes |
| onmouseout | 鼠标从某元素移开 | 4 | 1 | 9 | Yes |
| onmouseover | 鼠标移到某元素之上 | 3 | 1 | 9 | Yes |
| onmousemove | 鼠标被移动 | 3 | 1 | 9 | Yes |
| onresize | 窗口或框架被重新调整大小 | 4 | 1 | 9 | Yes |
| onselect | 文本被选中 | 3 | 1 | 9 | Yes |
2.7 函数和事件的绑定
-
通过标签的事件属性，进行绑定
- <button 事件="函数名"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件和函数的绑定方式1</title>
<script type="text/javascript">
function btnCli(){
alert("事件和函数的绑定方式1");
}
</script>
</head>
<body>
<input type="button" value="点击试试" onclick="btnCli()"/>
</body>
</html>
-
派发事件
- 获取对象
- var obj=document.getElementById("id值")
- 为对象派发事件
- 获取对象
obj.onclick = function(){
函数体；
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数和事件的绑定</title>
<script type="text/javascript">
onload = function() {
var obj = document.getElementById("btn");
obj.onclick = function() {
alert("事件和函数的绑定方式2:派发事件");
}
}
</script>
</head>
<body>
<button id="btn">点我试试</button>
</body>
</html>案例
案例1:表单校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面表单提交校验</title>
</head>
<script type="text/javascript">
function checkForm() {
//1.获取对象
var usernameObj = document.getElementById("username");
//2.获取用户输入的内容
var usernameVal = usernameObj.value;
//3.判断
if (usernameVal == "") {
alert("用户名不能为空");
//阻止表单提交
return false;
}
//1.获取对象
var passwordObj = document.getElementById("password");
var repasswordObj = document.getElementById("repassword");
//2.获取用户输入的内容
var passwordVal = passwordObj.value;
var repasswordVal = repasswordObj.value;
//3.判断
if (passwordVal == "") {
alert("密码不能为空");
//阻止表单提交
return false;
} else if (passwordVal != repasswordVal) {
alert("两次输入的密码不一致");
//阻止表单提交
return false;
} else if (repasswordVal == "") {
alert("确认密码不能为空");
//阻止表单提交
return false;
}
}
</script>
<body>
<form action="#" method="get" onsubmit="return checkForm()">
<table width="60%" height="60%" align="center" bgcolor="#ffffff">
<tr>
<td colspan="3">会员注册USER REGISTER</td>
</tr>
<tr>
<td width="20%">用户名:</td>
<td width="40%">
<input type="text" name="username" id="username">
</td>
<td width="40%"><span id="username_msg"></span></td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="password" id="password">
</td>
<td><span id="password_msg"></span></td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" name="repassword" id="repassword">
</td>
<td><span id="repassword_msg"></span></td>
</tr>
<tr>
<td>Email:</td>
<td>
<input type="text" name="email" id="email">
</td>
<td><span id="email_msg"></span></td>
</tr>
<tr>
<td>姓名:</td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="男"> 男
<input type="radio" name="sex" value="女" />女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday">
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="checkcode">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</body>
</html>案例2:轮播图
需求
间隔一定的时间图片自动切换
技术分析
- 周期性定时器
- window.setInterVal(要执行的函数,间隔的毫秒值); 周期性定时器 反复执行
- 一次性定时器
- window.setTimeOut(要执行的函数,间隔的毫秒值)
- 格式
- setInterVal(show,2000)
- setInterVal("show(参数列表)",2000)
步骤分析
- 确定事件 onload = function(){}
- 定义一个周期性定时器 setInterVal(切换的函数,2000)
- 定义切换函数
- 获取轮播图片对象
- 设置src属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
a{
text-decoration: none;
}
.cle{
clear: both;
}
/*logo 部分的div*/
.header{
width: 100%;
}
.header div{
float:left;
width:33.33%;
height: 60px;
line-height: 50px;
}
.header a{
padding: 15px;
}
/*菜单部分*/
.menu{
width: 100%;
background-color: #000;
height: 50px;
padding-top:1px
}
.menu ul li{
list-style-type: none;
display: inline;
}
.menu a{
font-size: 25px;
color: #fff;
}
/*轮播图*/
.lunbo{
width:100%;
margin-top:10px;
margin-bottom: 10px;
}
.lunbo img{
width:100%;
}
/*热门商品*/
/*.left,.right{
float:left;
}*/
.left{
float:left;
width: 16%;
height: 500px;
}
.right{
float: left;
width:84%;
text-align: center;
height: 500px;
}
.middle{
float:left;
width: 50%;
height: 250px;
}
.item{
float:left;
width:16.66%;
height: 250px;
}
/*给广告*/
.ad1{
width: 100%;
}
.ad1 img{
width: 100%;
}
/*版权*/
.foot{
width:100%;
}
.foot p{
text-align: center;
}
</style>
<script type="text/javascript">
//1.页面加载事件
onload = function() {
//2.定义一个定时器
window.setInterval(show, 2000);
}
var i=1;
//完成切换函数
function show() {
// 获取对象
var imgObj = document.getElementById("imgId");
i++;
//修改图片的来源属性,实现图片轮播
imgObj.src = "img/" + i + ".jpg ";
if(i==3){
i = 0;
}
}
</script>
</head>
<body>
<!--
一个大div中放置8个div
-->
<div>
<!--logo
嵌套三个div
-->
<div class="header">
<div>
<img src="img/logo2.png" height="40px" />
</div>
<div>
<img src="img/header.jpg" />
</div>
<div>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<div class="cle"></div>
<!--菜单-->
<div class="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
</div>
<!--轮播图-->
<div class="lunbo">
<img id="imgId" src="img/1.jpg" />
</div>
<!--热门
将起划分成两个div
左边放图片
右边的放商品
-->
<div class="hot">
<!--存放热门商品和一张图片-->
<div>
<h2 style="display: inline;">热门商品</h2>
<img src="img/title2.jpg" />
</div>
<div>
<!--存放左边的图片-->
<div class="left">
<img src="img/big01.jpg" />
</div>
<!--存放商品图片-->
<div class="right">
<div class="middle">
<img src="img/middle01.jpg" />
</div>
<div class="item">
<img src="img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
</div>
</div>
</div>
<div class="cle"></div>
<!--广告-->
<div class="ad1">
<img src="img/ad.jpg" />
</div>
<!--最新-->
<div></div>
<!--广告-->
<div class="ad1">
<img src="img/footer.jpg" />
</div>
<!--版权foot-->
<div class="foot">
<p>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
</p>
<p>
Copyright © 2005-2016 传智商城 版权所有
</p>
</div>
</div>
</body>
</html>案例3:定时弹出广告
需求
在页面记载成功后 经过4秒展示广告 广告显示两秒 隐藏广告 反复执行三次
技术分析
Window 对象方法
- 周期性定时器
- setInterVal(要执行的函数,间隔的毫秒值); 周期性定时器 反复执行
- clearInterVal(周期性定时器的id)
- 执行一次的定时器
- setTimeOut(要执行的函数,间隔的毫秒值);执行一次的定时器
- clearTimeOut(执行一次的定时器)
步骤分析
- 确定事件 onload = function(){}
- 定义周期性定时器 setInterVal(showAd，4000)
- 完成图片显示的函数
- 完成隐藏广告的函数
- 反复执行三次
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a {
text-decoration: none;
}
.cle {
clear: both;
}
/*logo 部分的div*/
.header {
width: 100%;
}
.header div {
float: left;
width: 33.33%;
height: 60px;
line-height: 50px;
}
.header a {
padding: 15px;
}
/*菜单部分*/
.menu {
width: 100%;
background-color: #000;
height: 50px;
padding-top: 1px
}
.menu ul li {
list-style-type: none;
display: inline;
}
.menu a {
font-size: 25px;
color: #fff;
}
/*轮播图*/
.lunbo {
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
}
.lunbo img {
width: 100%;
}
/*热门商品*/
/*.left,.right{
float:left;
}*/
.left {
float: left;
width: 16%;
height: 500px;
}
.right {
float: left;
width: 84%;
text-align: center;
height: 500px;
}
.middle {
float: left;
width: 50%;
height: 250px;
}
.item {
float: left;
width: 16.66%;
height: 250px;
}
/*给广告*/
.ad1 {
width: 100%;
}
.ad1 img {
width: 100%;
}
/*版权*/
.foot {
width: 100%;
}
.foot p {
text-align: center;
}
</style>
<script type="text/javascript">
var interval;
//1. 页面加载事件
onload = function() {
interval = window.setInterval(showAd,4000);
}
//定义一个变量,控制显示的次数
var i = 0;
//定义显示广告的函数
function showAd(){
i++;
//获取对象
var adObj = document.getElementById("ad");
//显示广告
adObj.style.display="block";
//定义隐藏广告的函数
window.setTimeout(hideAd,2000);
if(i==3){
//清除周期性定时器
window.clearInterval(interval);
}
}
//完成隐藏广告的函数
function hideAd(){
//获取对象
var adObj = document.getElementById("ad");
//隐藏广告
adObj.style.display="none";
}
</script>
</head>
<body>
<div id="ad" style="width:100%;display: none;">
<img src="img/ad_.jpg" width="100%" />
</div>
<!--
一个大div中放置8个div
-->
<div>
<!--logo
嵌套三个div
-->
<div class="header">
<div>
<img src="img/logo2.png" height="40px" />
</div>
<div>
<img src="img/header.jpg" />
</div>
<div>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<div class="cle"></div>
<!--菜单-->
<div class="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
</div>
<!--轮播图-->
<div class="lunbo">
<img src="img/1.jpg" />
</div>
<!--热门
将起划分成两个div
左边放图片
右边的放商品
-->
<div class="hot">
<!--存放热门商品和一张图片-->
<div>
<h2 style="display: inline;">热门商品</h2>
<img src="img/title2.jpg" />
</div>
<div>
<!--存放左边的图片-->
<div class="left">
<img src="img/big01.jpg" />
</div>
<!--存放商品图片-->
<div class="right">
<div class="middle">
<img src="img/middle01.jpg" />
</div>
<div class="item">
<img src="img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
<div class="item">
<img src="img/small08.jpg" />
<p align="center"><a href="#">电饭煲</a></p>
<p align="center">200</p>
</div>
</div>
</div>
</div>
<div class="cle"></div>
<!--广告-->
<div class="ad1">
<img src="img/ad.jpg" />
</div>
<!--最新-->
<div></div>
<!--广告-->
<div class="ad1">
<img src="img/footer.jpg" />
</div>
<!--版权foot-->
<div class="foot">
<p>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
<a href="#">关于我们</a>
</p>
<p>
Copyright © 2005-2016 传智商城 版权所有
</p>
</div>
</div>
</body>
</html>