版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35537301/article/details/82108096
概念
一种直译式并且广泛应用于客户端的脚本语言
作用
可以为html增加动态效果
特点
- 直译式
- 弱类型
- 跨平台性
js的组成
- ECMAscript(语法) 脚本语言的规范
- BOM(浏览器对象模型) 通过BOM对象可以操作浏览器
- DOM(文档对象模型) 通过DOM对象可以修改和访问html文档的内容跟结构
js和html的整合
内嵌式
- 通过script标签来完成整合 一般情况下放到head标签中
外联式
- 在外部定义一个后缀名为.js的文件
- 在内部通过script标签的src属性导入即可
ECMAscript语法
变量
变量的命名规范
- 必须以字母或下划线开头,中间可以是数字、字符或下划线
- 变量名不能办好空格等符号
- 不能使用JavaScript关键字作为变量名,如:function
- JavaScript严格区分大小写
变量的声明
- var 变量名 = 初始化值;
数据类型
-
原始数据类型
| 数据类型 | 取值 | |
| Undefined | undefined | |
| Null | null | |
| String | 凡是由引号包裹起来的数据 | |
| Boolean | true/false | |
| Number | 一切数字 |
通过typeof运算符可以判断出是哪种数据类型
-
引用数据类型
new
运算符
-
算数运算符
y=5;
| 运算符 | 描述 | 例子 | 结果 |
| + | 加 | x=y+2 | x=7 |
| - | 减 | x=y-2 | x=3 |
| * | 乘 | x=y*2 | x=10 |
| / | 除 | x=y/2 | x=2.5 |
| % | 求余数 | x=y%2 | x=1 |
| ++ | 累加 | x=++y | x=6 |
| - - | 递减 | x=- -y | x=4 |
- 赋值运算符
y=10
| 运算符 | 例子 | 等价于 | 结果 |
| = | x=y | x=5 | |
| += | x+=y | x=y+5 | x=15 |
| -= | x-=y | x=y-5 | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
-
比较运算符
| 运算符 | 描述 | 例子 |
| == | 等于 | x==8 fanlse |
| === | 全等(值和类型) | x===5 true x==="5" false |
| !== | ||
| != | 不等于 | x!=8 true |
| > | 大于 | x>8 false |
| < | 小于 | x<8 true |
| >= | 大于或等于 | x>=8 false |
| <= | 小于或等于 | x<=8 true |
-
逻辑运算符
| 运算符 | 描述 | 例子 |
| && | and | (x<10 && y>1) true |
| || | or | (x==y||y==5) false |
| ! | not | !(x==y) true |
-
等性运算
语句
判断语句
if()else{}
循环语句
for(){}
函数
方式1
function 函数名(参数列表){
函数体
}方式2:匿名函数
var 函数名 = function(参数列表){
函数体
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function sub(i,j){
alert(i+j);
}
var mul = function(q,k){
alert(q*k);
}
function sub1(i,j){
return i+j;
}
//sub(2,4);
//mul(17,999);
var res = sub1(3,8);
alert(res);
</script>
</head>
<body>
</body>
</html>注意
- 函数不用声明返回值类型
- 参数不需要加类型
- 函数调用:函数名(参数)
事件
常用事件
| 属性 | 当以下情况发生时，出现此事件 | FF | N | IE |
|---|---|---|---|---|
| onabort | 图像加载被中断 | 1 | 3 | 4 |
| onblur | 元素失去焦点 | 1 | 2 | 3 |
| onchange | 用户改变域的内容 | 1 | 2 | 3 |
| onclick | 鼠标点击某个对象 | 1 | 2 | 3 |
| ondblclick | 鼠标双击某个对象 | 1 | 4 | 4 |
| onerror | 当加载文档或图像时发生某个错误 | 1 | 3 | 4 |
| onfocus | 元素获得焦点 | 1 | 2 | 3 |
| onkeydown | 某个键盘的键被按下 | 1 | 4 | 3 |
| onkeypress | 某个键盘的键被按下或按住 | 1 | 4 | 3 |
| onkeyup | 某个键盘的键被松开 | 1 | 4 | 3 |
| onload | 某个页面或图像被完成加载 | 1 | 2 | 3 |
| onmousedown | 某个鼠标按键被按下 | 1 | 4 | 4 |
| onmousemove | 鼠标被移动 | 1 | 6 | 3 |
| onmouseout | 鼠标从某元素移开 | 1 | 4 | 4 |
| onmouseover | 鼠标被移到某元素之上 | 1 | 2 | 3 |
| onmouseup | 某个鼠标按键被松开 | 1 | 4 | 4 |
| onreset | 重置按钮被点击 | 1 | 3 | 4 |
| onresize | 窗口或框架被调整尺寸 | 1 | 4 | 4 |
| onselect | 文本被选定 | 1 | 2 | 3 |
| onsubmit | 提交按钮被点击 | 1 | 2 | 3 |
| onunload | 用户退出页面 | 1 | 2 | 3 |
绑定事件
方式1
- 通过标签的事件属性 进行绑定
- <button onclick="函数名"/>
方式2:派发事件
- 第一步,获取对象
var obj=document.getElementById("id值")- 为对象派发事件
obj.onclick = function(){
函数体
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function show(){
alert("第一种绑定方式");
}
//页面加载事件
onload = function(){
var btnObj=document.getElementById("btn1");
btnObj.onclick = function(){
alert("第二种绑定方式");
}
}
</script>
</head>
<body>
<button onclick="show()">第一种绑定方式</button>
<button id="btn1">第二种绑定方式</button>
<button>第二种绑定方式</button>
<button>第二种绑定方式</button>
<button>第二种绑定方式</button>
<button>第二种绑定方式</button>
<button>第二种绑定方式</button>
<button>第二种绑定方式</button>
<button>第二种绑定方式</button>
</body>
</html>
BOM(浏览器对象模型)
通过BOM对象可以操作浏览器
Window(窗口)
属性
可以访问包括自身在内的其他四个对象
Window.history===history
方法
提示框
alert() 提示框
confirm() 确认框
propmt() 提示输入框
定时器
定时器：有id返回值
setInterVal(要执行的函数,间隔的毫秒值); 周期性定时器 反复执行
clearInterVal(周期性定时器的id)
setTimeOut(要执行的函数,间隔的毫秒值);执行一次的定时器
clearTimeOut(执行一次的定时器)
打开和关闭
打开：open()
关闭：close()
History(浏览历史)
forward() 前进
back() 后退
go(index)
go(1)
go(-1)
Location(定位URL)
href
获取当前页面的URL
location.href
设置当前页面的URL
location.href=""
JS开发的步骤
- 确定事件
- 获取对象
- 操作对象
案例1---表单提交校验
需求
校验数据的有效性
技术分析
表单提交事件
步骤分析
- 确定事件 onsubmit="return 函数名()"
- 编写校验函数
- 获取用户名对象
- 通过对象获取value值
- 判断用户名是否为空
- 给出提示
- 阻止表单提交 return false
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
function checkForm(){
//获取对象
var usernameObj=document.getElementById("username");
var passwordObj =document.getElementById("password");
//获取value值
var usernameVal=usernameObj.value;
var passwordVal=passwordObj.value;
//判断用户名
if(usernameVal==""){
alert("用户名不能为空！");
//阻止表单提交
return false;
}
if(passwordVal==""){
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>案例二：轮播图
需求
间隔一定的时间图片自动切换
技术分析
定时器
window.setInterval(code,millisec); ---周期性定时器
code:执行的函数名或执行的代码字符串
millisec:时间间隔
window.clearInterval();---取消定时器
格式
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">
onload = function(){
setInterval(show,2000);
}
//完成切换函数
var i=1;
function show(){
i++;
//获取img对象
var imgObj=document.getElementById("imgId");
//获取src属性
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---定时弹出广告
<!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 interId;
onload = function(){
interId=setInterval(showAd,4000);
}
//完成显示广告的函数
var i =0;
function showAd(){
i++;
//获取对象
var adObj=document.getElementById("ad");
//操作对象
adObj.style.display="block";
//定义隐藏广告的定时器
setTimeout(hiddenAd,2000);
if(i==3){
clearInterval(interId);
}
}
//完成隐藏广告函数
function hiddenAd(){
//获取对象
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>