JavaScript概述
什么是JavaScript?
运行在浏览器端的一个脚本语言
脚本语言是一种解释性的语言,例如Python、vbscript,javascript,installshield script,ActionScript等等,它不象c\c++等可以编译成二进制代码,以可执行文件的形式存在,脚本语言不需要编译,可以直接用,由解释器来负责解释。
脚本语言一般都是以文本形式存在,类似于一种命令。
JS的组成:
ECMAScript: 定义JS的语法规范
DOM: Document Object Model 文档对象模型,主要是用来操作文档树,对我们的html文件内容进行增删改查
BOM: Browser Object Model 它主要是用来操作浏览器的, 例如:浏览记录,跳转,获取屏幕信息
JS的语法:
- 区分大小写
- 语法要求不是特别严格, 语句结束的分号可有可无
- 变量是弱变量类型
- var i = 3;
- var i = “aaaa”
- var i = new Object();
- JS代码需要写在
<script></script>
JS的数据类型:
- 原始类型
- string
- number
- boolean
- undefined
- null
- 引用类型
- 内置对象, 注意: 引用类型的默认值是null
JS的运算符和语句:
- 运算符与Java中的相同
- 全等于 === : 类型和值都一致才返回true
- 语句和Java一致
JS的输出
- alert(内容);
- 向页面弹出一个提示框
- innerHTML:
- 向页面的某个元素中写一段内容
document.write();
- 向页面中写内容
步骤分析:
- JS通常都是由事件驱动的, 确定事件 onclick
- 事件通常会触发一个js函数, 实现事件所要触发的函数
- 获取用户输入的值
- 对用户输入的值进行判断
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div注册页面</title>
<script type="text/javascript" src="../js/regutils.js" ></script>
<script>
function checkForm(){
var username = document.getElementById("username");
var uValue = username.value;
//alert(uValue);
if(uValue == "" || uValue.length < 6){
alert("用户名不能为空或者长度小于6");
return false;
}
//判断密码
var upass = document.getElementById("password").value;
var uRepass = document.getElementById("repassword").value;
if(upass.length < 8 ){
alert("密码不能小于8位数字");
return false;
}
if(upass != uRepass){
alert("两次输入的密码不一致!")
return false;
}
var phone = document.getElementById("phone").value;
if(!/^[1][358][0-9]{9}$/.test(phone)){
alert("电话号码格式不正确");
return false;
}
var mail = document.getElementById("email").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(mail)){
alert("邮箱输入不正确");
return false;
}
return true;
}
</script>
</head>
<body>
<div>
<!--LOGO部分-->
<div>
<div style="float: left; width: 33%;">
<img src="../img/logo2.png" />
</div>
<div style="float: left; width: 33%;">
<img src="../image/header.jpg"/>
</div>
<div style="float: left; width: 33%;">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--导航栏部分-->
<div style="clear: both;"></div>
<div style="background: black; height: 50px;border: 1px solid red; width: 99%;">
<ul>
<li style="display: inline; color: white;">首页</li>
<li style="display: inline; color: white;">手机数码</li>
<li style="display: inline; color: white;">鞋靴箱包</li>
<li style="display: inline; color: white;">香烟酒水</li>
</ul>
</div>
<!--注册信息-->
<div style="width: 99%; background: url(../image/regist_bg.jpg); height: 600px;">
<div style="position: absolute;top:200px;left:300px;width: 50%;height:60%;background: white;border:5px solid gray;">
<form action="../07-CSS布局首页/div首页.html" onsubmit="return checkForm()">
<h3>用户注册</h3>
<table width="80%" height="70%" cellspacing="15px">
<tr>
<td>
<label for="username">用户名:</label>
</td>
<td>
<input type="text" id="username" />
</td>
</tr>
<tr>
<td>
密 码:
</td>
<td>
<input type="password" id="password"/>
</td>
</tr>
<tr>
<td>
确认密码:
</td>
<td>
<input type="password" id="repassword"/>
</td>
</tr>
<tr>
<td>
手机号码:
</td>
<td>
<input type="text" id="phone"/>
</td>
</tr>
<tr>
<td>
邮箱地址:
</td>
<td>
<input type="text" id="email"/>
</td>
</tr>
<tr>
<td>
出生日期:
</td>
<td>
<input type="date" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</div>
</div>
<!--网站页脚-->
<div>
<img src="../img/footer.jpg" style="width: 100%;"/>
</div>
<!--网站链接信息-->
<div style="text-align: center;">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<br />
Copyright © 2005-2016 Yeauty商城 版权所有
</div>
</div>
</body>
</html>
使用JS完成图片的轮播效果
技术分析:
- 每隔2秒钟切换一张图片
- 每隔2秒
- 切换图片
JS中的定时器:
需要用到BOM中的window对象
setInterval() | 按照指定的周期(以毫秒计)来调用函数或计算表达式。 |
---|---|
setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
clearInterval() | 取消由 setInterval() 设置的 timeout。 |
---|---|
clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
如何切换图片:
- 首先要获取到图片元素,然后再去修改它的src属性
- document.getElementById(id);
img.src="../img/"+curIndex+".jpg";
步骤分析:
- 确定事件,文档加载完成 onload事件
- 实现事件所要触发的函数 init();
- 编写一个切换图片的方法
- 启动定时器,调用切换图片的方法
代码实现:
function init(){
//获取图片的img
var ad = document.getElementById("ad");
var index = 0;
//切换图片的函数
function changeAd(){
var curIndex = index % 3 + 1; // 0,1,2 ,0 ,1,2
ad.src="../img/"+curIndex+".jpg";
index++;
}
//启动定时器,调用切换图片的方法,传入的是方法的名字
setInterval(changeAd,1000);
}