JAVAWEB第三天——JavaScript速成（1）

一、什么是JavaScript?

JavaScript被设计用来向HTML页面添加交互行为。
JavaScript是一种脚本语言（脚本语言是一种轻量级的编程语言）
由书行可执行计算机代码组成。
通常被直接嵌入HTML页面
一种解释性语言

二、 javascript的作用？

HTML：整个网站的骨架
CSS：对整个网站骨架的内容进行美化
JavaScript：能够让整个页面具有动态效果。

三、 javascript的组成部分

ECMAScript:它是整个 javascript 的核心，包含(基本语法、变量、关键字、保留字、数据类型、语句、函数等等)
DOM：文档对象模型，包含(整个 html 页面的内容)
BOM：浏览器对象模型,包含(整个浏览器相关内容)

四、 javascript语法

区分大小写
变量为弱类型的
定义变量时只用关键字 var运算符，可以将它初始化为任意值。例如：

	var color =”red”;
	var num =25;
	var visible = true;

分号可有可无，建议携带。
变量声明不是必须的。如拼接一个新的字符，直接拼接不用声明。

五、 ECMAscript原始类型

五种原始类型，undefined、null、boolean、number、string。
其中
Undefine：是指当声明的变量未初始化时，该变量的默认值为Undefined。
number：表示所有的数字类型，typeof运算符对null返回值返回Object。
null：对象不存在；
undefined：对象存在，访问属性或者方法不存在（对象未初始化）。

六、 ECMAScript运算符

重点学习等性运算符
其它运算符与 java 大体一致，需要注意其等性运算符。 “==” 它在做比较的时候会进行自动转换。仅尝试进行转换。“ ===” 它在做比较的时候不会进行自动转换。
例：

var sNum =”66”;
	var iNum = 66;
	alert(sNum == iNum);    -------返回true
	alert(sNum === iNum);   --------返回false

TIPs：==仅尝试进行转换如若相差太多，则不反悔true。

七、 ECMAScript语句

所有语句与 java 大体一致。if…else，for循环，do…while，break，case等。

八、获取元素内容

获取元素 document.getElementById(“id 名称”); id如果是字符串则应该加上引号。
获取元素里面的值 document.getElementById(“id 名称”).value;

九、 Javascript 事件

onsubmit 表单提交事件
onabort 图像加载被中断
onblur 元素失去焦点
onchange 用户改变域的内容
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onerror 当加载文档或图像时发生某个错误
onfocus 元素获得焦点
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
onload 某个页面或图像被完成加载
onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
onreset 重置按钮被点击
onresize 窗口或框架被调整尺寸
onselect 文本被选定
onunload 用户退出页面
-------以上仅为部分，主要参考W3C手册为佳，找出自己想用的事件---------

十、 JavaScript输出

操作HTML元素
向页面指定位置写入内容：innerHTML（属性）。
如需从JavaScript访问某个HTML元素，可以使用document.getElementById(id)方法。

案例：<body>
	<h1>My First Web Page<h1>
	<p id =”demo”> 第一段</p>
	<script>
		document.getElementById(“demo”)
		.innerHTML=”MY First JavaScript”;
	</script>

TIPs:向页面的指定位置输入内容

写在文档中输出
向页面写入内容：document.write(“”);
下面的例子直接把<p>元素写道HTML文档输出中

案例：<body>
	<h1>My First Web Page<h1>
	<script>
	document.write(“<p> 第一段</p”>);
	</script>
	</body>

弹出警告框：alert();
向页面指定位置写入内容，innerHTML()

十一、步骤分析（记）

第一步：确定事件(onsubmit)并为其绑定一个函数
第二步：书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>)
第三步：对用户输入的数据进行判断
第四步：数据合法(让表单提交)
第五步：数据非法(给出错误提示信息，不让表单提交)
如何控制表单提交？
关于事件 onsubmit：一般用于表单提交的位置，那么需要在定义函数的时候给出一个返回值。 onsubmit = return checkForm()

十二、使用JS完成注册页面表单的校验

(一) 用户名校验：

var uValue=document.getElementById("user").value;
	if(uValue ==""){
		alert("用户名不能为空");
		return false;
		}

(二) 密码校验：

var pValue = document.getElementById("password").value;
	if (pValue =="") {alert("密码不能为空");
		return false;
	}

(三) 确认密码校验：

var rValue = document.getElementById("repassword").value;
		if(rValue != pValue){
		alert("两次密码输入不一致");
		return false;
	}

(四) 邮箱校验：

var eValue = document.getElementById("email").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
		alert("邮箱格式不正确");
			return false;
	}

TIPS：1、红色部分为正则表达式，为邮箱的格式。需要时使用即可。

2、注意使用test测试eValue内为测试邮箱的格式。
3、必须在form中加上函数。 onsubmit =”return
checkForm()”,
4、 function checkForm(){}为函数的的写法，呼应第三点onsubmit();
5.必须在<script></script>里面写。

<form action="#" method="get" name="regForm" onsubmit="return
          checkForm()">
          //此为表单的开头部分所写，主要记住onsubmit()的主要写法

十三、更换图片的一个小DEMO

<style>
			div{
				border: 1px solid white;
				width: 500px;
				height: 350px;
				margin: auto;
				text-align: center;
			}
</style>

TIPS：style部分，注意margin:auto。
表示div这个框移动到整个页面中间，
text-align：center表示将按钮放到图片中间。

<script>
			var i=1;
			function changeImg(){
				i++;
			document.getElementById("Img1").src="img/"+i+".jpg";
				if(i == 3){
					i = 0;
				}
			}
		</script>

TIPS:注意书写的步骤，var需要定义在script之外。另外图片最好用数字表示。

十四、进行几秒钟自动定时更换画面

需要用到的部分，获取元素 document.getElementById(“id名称”)；
事件（onload）
定时操作：setInterval(“changeImg()”,3000);
一、 setInterval()方法介绍以及用法
 setInterval()方法可以按照指定的周期（以毫秒计）来调用函数或计算表达式。
 setInterval()方法会不断地调用函数，直到clearInterval()被调用或窗口被关闭。由setInterval()返回地ID值可用clearInterval
 语法setInterval(code,millisec[,”lang”])
code：要调用地函数或者要执行地代码串
millisec：周期性执行或调用code之间的时间间隔，以毫秒为单位。
 返回值：一个可以传递给window.clearInterval()从而取消对code的周期性执行的值。
二、
第一步：确定事件(onload)并为其绑定一个函数
第二步：书写绑定的这个函数
第三步：书写定时任务(setInterval)
第四步：书写定时任务里面的函数
第五步：通过变量的方式，进行循环(获取轮播图的位置，并设置 src 属性)

十五、设计页面的轮播图

在body部分确认事件，<body onload =”init()”>
书写init(),也就是不停地重置，使用setInterval函数。

function init(){
//				书写轮播图
	window.setInterval("changeImg()",3000);
	}

书写changeImg()函数与上面的一个小DEMO类似

var i =0;
function changeImg(){
i++;
document.getElementById("img1").src="img/"+i+".jpg";
if(i== 3){
i=0;
	}		
}

十六、使用JS完成页面定时弹出广告

第一步：在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值)
第二步：确定事件(onload)并为其绑定一个函数
第三步：书写这个函数(设置一个显示图片的定时操作)
第四步：书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)
第五步：清除显示图片的定时操作()
第六步：书写隐藏图片的定时操作
第七步：书写定时器中的函数(获取广告图片的位置并设置属性 style 的 display 值 none)
第八步：清除隐藏图片的定时操作()

十七、代码实现

<script>
function init(){
//书写轮播图
	window.setInterval("changeImg()",3000);
//插入广告
 time =window.setInterval("showAd()",3000);
			}
//书写函数
var i =1;
function changeImg(){
	i++;
document.getElementById("img1").src="img/ “+i+".jpg";
if(i== 3){
			i=0;
	}				
	}
function showAd(){
 var adEle=document.getElementById("img2");
				 adEle.style.display="block";
				 clearInterval(time);
				 time = setInterval("hiddenAd()",3000); 
			}
function hiddenAd(){				 
document.getElementById("img2").style.display= "none";
		 clearInterval(time);
			}
</script>

十八、 javascript引入方式

 内部引入方式
直接将 javascript 代码写到<script type=”text/javascript”></script>
 外部引入方式
需要创建一个.js文件，在里面书写javascript代码，然后在html文件中通过script 标签的 src 属性引入该外部的 js 文件
例如：

<script type =”text/javascript” src =”1.js”></script>

十九、 BOM对象

BOM 对象：浏览器对象模型(操作与浏览器相关的内容)
Windows对象：Window 对象表示浏览器中打开的窗口。
window方法：

setInterval():它有一个返回值，主要是提供给 clearInterval 使用。 setTimeout():它有一个返回值，主要是提供给 clearTimeout 使用。 clearInterval():该方法只能清除由 setInterval 设置的定时操作
clearTimeout():该方法只能清除由 setTimeout 设置的定时操作
例如：

		confirm（“确定是否删除？”）
		prompt(“请输入价格”)

二十、 History对象

 History对象包含用户（在浏览器窗口中）访问过的URL
 History对象是window对象的一部分，可通过window.history属性对其进行访问。
 对象属性：length()，表示返回浏览器历史列表中的URL数量。
 对象方法：

历史页面：使用 location 页面(把 href 属性值改为当前的 history

History 页面代码： <input type="button" value=" 返回上一个页面" onclick="javascript:history.back()"/>

go(参数) 参数：-1 返回上一个历史记录页面；-2 返回上上一个历史记录页面，1 进入下一个历史记录页面。

让按钮点击失效： onclick=”javascript:volid(0)”

二十一、 Location对象

 Location对象包含有关当年URL信息。
 把用户带到一个新的地址,一般使用href。
 例如:<input type=”button” value=”跳转页面” onclick=”javascript:loction.href=‘www.baidu.com’”
 记得上述用单引号
 超链接 <a href=www.baidu.com>超链接</a>

二十二、 Navigator对象

 Navigator 对象包含有关浏览器的信息。(该对象开发中不怎么常用)
 Navigator属性

二十三、 Screeb对象

 Screen 对象包含有关客户端显示屏幕的信息。(该对象开发中不怎么常用)
 Screen对象属性

二十四、使用JS完成注册页面表单校验

步骤分析：
第一步：确定事件(onfocus 聚焦事件)并为其绑定一个函数
第二步：书写绑定函数(在输入框的后面给出提示信息)
第三步：确定事件(onblur 离焦事件)并为其绑定一个函数
第四步：书写函数(对数据进行校验，分别给出提示)
代码实践

<script>
function showTips(id,info){
document.getElementById(id+"span")
.innerHTML="<font color='gray'>"+info+"</font>"; 
}
function check(id,info){
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>

<input type="text" name="username" size="34px" id="user" 
onfocus ="showTips('user','用户名必填')" 
onblur="check('user','用户名不能为空')"/>
<span id="userspan"></span>
<input type="password" name="userpassword"  size="34px" id="password"
onfocus="showTips('password','密码必填')" 
onblur="check('password','密码不能为空')"/>
<span id="passwordspan"></span>