03.Day03-WEB-HTML之JavaScript标签学习总结(一)

一 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变量可以不声明,直接使用. 默认值:undefined

3)变量的赋值

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>
步骤2:编写js代码,页面加载触发指定函数
<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定时弹广告

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">...
2)步骤2:
<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>
效果图:


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值