一 JavaScript 介绍:
1.1 什么是JavaScript
JavaScript是Web上一种功能强大的编程语言,用于开发交互式的web页面.它不需要进行编译,而是直接嵌入在HTML页面中,由浏览器执行.
- JavaScript被设计用来向HTML页面添加交互行为;
- JavaScript是一种脚本语言(脚本语言是一种轻量级的编程语言);
- JavaScript由数行可执行计算机代码组成;
- JavaScript通常被直接嵌入HTML页面;
- JavaScript是一种解释性语言(就是说,代码执行不进行预编译)
JavaScript的组成:
核心(ECMAScript)
文档对象模型(DOM)
浏览器对象模型(BOM)
ECMAScript: 语法,语句
BOM:浏览器对象
DOM:Document Object Model 操作文档中的元素和内容
1.2 JavaScript的作用:
使用JavaScript添加页面动画效果,提供用户操作体验.主要应用有:嵌入动态文本于HTML页面,对浏览器事件作出响应,读写HTML元素,验证提交数据,监测访客的浏览器信息等.
1.3 JavaScript的引入:
在HTML文件中引入JavaScript的方式有两种:
一种是在HTML文档直接嵌入JavaScript脚本,称为内嵌式;
一种是在链接外部JavaScript脚本文件,称为外联式;
1.3.1内嵌式
在HTML文档中,通过<script>标签引入,如下所示
<script type="text/javascript">
//此处为JavaScript代码
</script>1.3.2外联式
在HTML文档中,通过<script src="">标签引入.js文件,如下:
<script src="1.js" type="text/javascript" charset="utf-8"></script>二 基本语法介绍:
2.1变量
1) 在使用JavaScript时,需要遵守以下命名规范
- 必须以字母或下划线开头,中间可以是数字,字符或者下划线;
- 变量名不能包含空格等符号;
- 不能使用JavaScript关键字作为变量名,如:function;
- JavaScript严格区分大小写.
2) 变量的声明
var 变量名; //JavaScript变量可以不声明,直接使用. 默认值:undefined3)变量的赋值
var 变量名 = 值; //JavaScript变量是弱引类,及同一个变量可以存放在不同类型的数据2.2数据类型
[基本数据类型]
- Undefined , Undefined 类型只有一个值,即undefined.当声明的变量未初始化时,该变量的默认值就是undefined ;
- Null , 只有一个专用值 null,表示空,一个占位符.值undefined 实际上是从值null派生来的,因此ECMAScript 把他们定义为相等的.
- alert(null == undefined); //输出"true",尽管这两个值相等,但他们的含义不同;
①:Boolean,有两个值true和false
②:Number,表示任意数字
③:String,字符串由双引号(")或者单引号(')声明的,JavaScript没有字符类型
**对变量或者值调用typeof运算符将返回下列值之一:
undefined - 如果变量是Undefined类型的
boolean - 如果变量是Boolean类型的
number - 如果变量是Number类型的
string - 如果变量是String类型的
object - 如果变量是一种医用类型或者Null类型的
[引用数据类型]
- 引用类型通常叫做类(class) ,也就是说,遇到引用值,所处理的就是对象;
- JavaScript是基于对象而不是面向对象,对象类型的默认值是null;
- JavaScript提供众多预定义引用类型(内置对象)
2.3运算符
JavaScript运算符与Java运算符基本一致:
- 算术运算
- 赋值运算符
- 比较运算符
- 逻辑运算符
2.4基本操作
alert() :向页面中弹出一个提示框!!
innerHTML :向页面中的某个元素中写一段内容,将原有的东西覆盖;
document.write() :向页面中写内容
三 案例分析:
3.1获取元素
<head>
<meta charset="UTF-8">
<title>获取元素</title>
<script>
window.onload = function(){
//获取页面指定位置的元素
var uEle = document.getElementById("username");
alert(uEle);
var uValue = uEle.value;
alert(uValue);
}
</script>
</head>
<body>
用户名：<input type="text" name="username" id="username"/><br />
密码: <input type="password" name="password" />
</body>效果图
3.2使用JS完成注册页面表单校验
3.2.1 表单form添加提交事件
<form action="#" method="get" name="regForm" οnsubmit="return checkForm()">3.2.2 编写checkForm()函数,进行校验
<script>
function checkForm(){
/**校验用户名*/
//1.获取用户输入的数据
var uValue = document.getElementById("user").value;
if(uValue==""){
//2.给出错误提示信息
alert("用户名不能为空");
return false;
}
/**校验密码*/
var uPwd = document.getElementById("password").value;
if(uPwd ==""){
alert("密码不能为空");
return false;
}
/**校验确认密码*/
var uRepwd = document.getElementById("repassword").value;
if(uRepwd != uPwd){
alert("两次密码输入不一样!");
return false;
}
/**校验邮箱 用正则进行匹配*/
var eValue = document.getElementById("eamil").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
alert("邮箱格式不正确!");
return false;
}
}
</script>3.2.3 总结
①JS中正则的匹配,两种方式:
*使用String对象中的match方法
*使用正则对象的test方法
②JS中函数的编写方式:
函数:实现一定功能的代码块,类似于Java中的方法,函数关键字function,函数名自定义:
<script type="text/javascript">
//方式1:声明函数
function demo01(){
alert("案例1");
}
//方式1:调用函数
demo01();
//方式2:声明匿名函数
var demo02 = function(){
alert("案例2");
}
//方式2:调用函数
demo02();
</script>3.3轮播图效果
3.3.1 首页自动切换图片功能:
用到知识点:定时器setInterval()
window.setInterval(code,millisec) 按照指定的周期(间隔)来执行函数或代码片段.
参数1: code必须;执行的函数名或者执行的代码字符串;
参数2:millisec必须,时间间隔,单位:毫秒;
返回值:一个可以传递给window.clearInterval(),从而取消对code的周期性执行的值栗子:
* 方式1: 函数名 , setInterval(show,100);
* 方式2: 函数字符串, setInterval("show()",100);
window对象提供都是全局函数,调用函数时window可以省略;
window.setInterval() 等效 setIntervar()
3.3.2 案例分析
1) 编写html页面,为页面设置加载事件onload
2) 编写事件触发函数
3) 获得轮播图图片
4)开启定时器,2000毫秒重新设置图片的src属性
3.3.3 案例实现
步骤1:为轮播图img标签添加id属性<div id="">
<img src="../img/1.jpg" width="100%" id="img1"/>
</div><script>
function init(){
//书写轮图片显示的定时操作
setInterval("changeImg()",3000);
}
//书写函数
var i=0
function changeImg(){
i++;
//获取图片位置并设置src属性值
document.getElementById("img1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
</script>3.4.1 案例需求
在平时打开网页之后,过5s后弹出一个广告,再过5s之后广告隐藏3.4.2 相关知识点
1)JavaScript定时器:setTimeout* setTimeout() 在指定的毫秒数后调用函数或者执行代码片段.
setTimeout(code,millisec)
code 必须,要调用的函数或要执行的代码字符串 millisec 必须,在执行代码前需要等待的毫秒值
* setInterval() 以指定周期执行函数或代码片段
* clearInterval() 取消由setInterval()设置的timeout
* clearTimeout() 取消由setTimeout()方法设置的timeout.
2)JavaScript样式获得或修改
* 获得或设置样式
obj.style.属性 ,获得指定"属性"的值.
obj.style.属性=值 ,给指定"属性"设置内容.
如果属性由多个单词使用"-"连接,需要将"-"删除,并将后一个单词首字母大写.
例如:background-color 需要改成backgroundColor代码片段
<script type="text/javascript">
//1获取div对象
var divObj = document.getElementById("divId");
//2获取高度
//divObj.style.height数据为100px
//使用parseInt() ,将字符串"100px"转换为数字"100"
var height = window.parseInt(divObj.style.height);
//3将原始高度翻倍,在设置给div
//注意:必须加单位,否则无效
divObj.style.height = height * 2 +"px";
</script>3.4.3 案例分析
1) 页面加载成功后出发onload()事件
2) 加载成功后,触发延迟定时器,5s后,开始显示广告
3) 显示广告开始后,5s后再次隐藏广告
3.4.4 案例实现
1)步骤1:在页面中,添加广告位div,并设置页面加载事件<div id="father">
<!--定时弹出广告图片位置-->
<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none" id="img2"/>
<!--1.logo部分-->
<div id="logo">...<script type="text/javascript">
function init(){
//书写轮图片显示的定时操作
setInterval("changeImg()",3000);
//1.设置显示广告图片的定时操作
time = setInterval("showAd()",3000);
}
//书写函数
var i=0
function changeImg(){
i++;
//获取图片位置并设置src属性值
document.getElementById("img1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
//2.书写显示广告图片的函数
function showAd(){
//3.获取广告图片的位置
var adEle = document.getElementById("img2");
//4.修改广告图片元素里面的属性让其显示
adEle.style.display = "block";
//5.清除显示图片的定时操作
clearInterval(time);
//6.设置隐藏图片的定时操作
time = setInterval("hiddenAd()",3000);
}
//7.书写隐藏广告图片的函数
function hiddenAd(){
//8.获取广告图片并设置其style属性的display值为none
document.getElementById("img2").style.display= "none";
//9.清除隐藏广告图片的定时操作
clearInterval(time);
}
</script>3.5完善注册表单校验
3.5.1 案例介绍 效果图:
3.5.2 相关知识点
1)标签体内容:innerHTML
innerHTML-HTML元素的内部文本
获得:document.getElementById("divId).innerHTML
设置:document.getElementById("divId").innerHTML = "......"2)相关事件
3.5.3 案例分析:
* 校验不通过,在当前标签后面,红色字体提示
* 对所有需要校验的表单项进行全部校验
* 第一个校验不通过的元素获得焦点
编写步骤
1)添加错误提示显示区域<span id="usernameMsg"></span> (msg == message 消息)
2)表单元素id属性
3)校验不同,给span显示错误信息
4)第一个不通过获得焦点
3.5.4 案例实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script>
function showTips(id,info){
document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
}
function check(id,info){
//1获取用户输入的用户名数据
var uValue = document.getElementById(id).value;
if(uValue == ""){
document.getElementById(id+"span").innerHTML = "<font color='red'>"+info+"</font>";
}else{
document.getElementById(id+"span").innerHTML = "";
}
}
</script>
</head>
<body>
<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
<!--1.logo部分-->
<tr>
<td>
<!--嵌套一个一行三列的表格-->
<table border="1px" width="100%">
<tr height="50px">
<td width="33.3%">
<img src="../img/logo2.png" height="47px" />
</td>
<td width="33.3%">
<img src="../img/header.png" height="47px" />
</td>
<td width="33.3%">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!--2.导航栏部分-->
<tr height="50px">
<td bgcolor="black">
<a href="#">
<font size="5" color="white">首页</font>
</a>
<a href="#">
<font color="white">手机数码</font>
</a>
<a href="#">
<font color="white">电脑办公</font>
</a>
<a href="#">
<font color="white">鞋靴箱包</font>
</a>
<a href="#">
<font color="white">家用电器</font>
</a>
</td>
</tr>
<!--3.注册表单-->
<tr>
<td height="600px" background="../img/regist_bg.jpg">
<!--嵌套一个十行二列的表格-->
<form action="#" method="get" name="regForm" οnsubmit="return checkForm()">
<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr height="40px">
<td colspan="2">
<font size="4">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="user" size="34px" id="user" οnfοcus="showTips('user','用户名必填！')" οnblur="check('user','用户名不能为空！')"/><span id="userspan"></span>
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input type="password" name="password" size="34px" id="password" οnfοcus="showTips('password','密码必填')" οnblur="check('password','密码不能为空!')"/><span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<input type="password" name="repassword" size="34px" id="repassword"></input>
</td>
</tr>
<tr>
<td>
Emaile
</td>
<td>
<input type="text" name="email" size="34px" id="eamil"/>
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<input type="text" name="username" size="34px"/>
</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" size="34px"/>
</td>
</tr>
<tr>
<td>
验证码
</td>
<td>
<input type="text" name="yzm" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--4.广告图片-->
<tr>
<td>
<img src="../img/footer.jpg" width="100%"/>
</td>
</tr>
<!--5.友情链接和版权信息-->
<tr>
<td 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>
<p>
Copyright © 2005-2016 传智商城 版权所有
</p>
</td>
</tr>
</table>
</body>
</html>
634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
