Ⅰ、JavaScript的基本语法
一、JS脚本的基本结构和几个注意的要点
<HTML>
<HEAD>
<TITLE>脚本的基本结构</TITLE>
<SCRIPT language="javascript">
var count=0; //变量的声明类型都用 var
document.write("输出在页面，循环语句的应用");
for(i=0;i<5;i++) // for 循环里的变量 i 不用定义类型
document.write("<H2>大兴区正保培训学校</H2>");
</SCRIPT>
</HEAD>
<BODY>
<H1> BODY部分的内容</H1>
</BODY>
</HTML>
二、运算符号
算术运算符： +、-、 * 、 / 、%、++、--、-(求反)
比较运算符： ==、!=、>、>=、<、<=
逻辑运算符： &&、||、！
三、逻辑控制语句
if条件语句
switch多分支语句
for、while循环语句
四、类型转换：
parseInt（String） 、 parseFloat （String）
五、函数
1、函数的创建：
function showHello(){
var count=document.from1.txtCount.value ; // 得到值 document.表单名.控件名.value
for(i=0;i<count;i++)
{
Document.write(“this is a function !”);
}
}
2、 函数的调用
可以在<body onload = “showHello();”>
也可以在控件中的 onclick = “showHello();”
如<INPUT type="submit" name="show" value="显示HelloWorld" onClick="showHello()">
Ⅱ、DOM编程——window对象
一、什么是DOM
DOM－Document Object Model ,它是W3C国际组织的一套Web标准，它定义了访问HTML文档对象的一套属性、方法和事件
二、浏览器对象的分层结构
三、window对象常用的属性、方法和事件
1、 属性 ：status 、screen 、 history 、 location 、 document
2、 方法 ：alert(“提示信息”) 、confirm(“提示信息”) 、 open(“url”,”name”) 、
close () 、 showModalDialog((“url”,”name”) 、 setTimeout(“函数”,毫秒数)
3、 事件 ： onLoad 事件：在窗口或框架完成文档加载时触发
4、 使用：
<SCRIPT language="javascript">
function openwindow( )
{ window.status="系统当前状态：您正在注册用户......"; //状态栏下显示的信息
if (window.screen.width == 1024 && window.screen.height == 768)
window.open("register.html");
// open("register.html", "注册窗口", "toolbars=0, location=0, statusbars=0, //menubars=0,width=700,height=550,scrollbars=1");
else
window.alert("请设置分辨率为1024x768，然后再打开"); }
function closewindow( )
{ if(window.confirm("您确认要退出系统吗？"))
window.close( );
}
</SCRIPT>
<INPUT type="button" name="regButton" value=" 用户注册 "
οnclick="openwindow( )">
<INPUT type="button" name="exitButton" value=" 退 出 "
οnclick="closewindow( )">
也可以用链接完成函数的调用
<H3><A href="javascript: openwindow( ) ">用户注册 </A></H3>
<H3><A href="javascript: closewindow( ) ">退 出</A></H3>
四、Date 对象
<SCRIPT language="JavaScript">
function disptime( ){
var time = new Date( ); //获得当前时间
var hour = time.getHours( ); //获得小时、分钟、秒
var minute = time.getMinutes( );
var second = time.getSeconds( );
document.myform.myclock.value =hour+":"+minute+":"+second+" " ;
var myTime = setTimeout("disptime()",1000); //设置定时器每隔1秒(1000毫秒),调用函数//disptime( )执行
}
</SCRIPT>
<BODY onLoad="disptime( )">
<FORM NAME="myform">
H2>当前时间：
<INPUT name="myclock" type="text" value="" size="10" >
</H2></FORM >
</BODY>
五、History对象
1、方法：back() 加载history 列表的上一个URL
forward() 加载history 列表的下一个URL
go(“URL” or number) 加载 History 列表中的一个 URL，或要求浏览器移动指定的页面数。 注 ：go (1)代表前进1页，等价于forward( )方法；
go(-1) 代表后退1页，等价于back( )方法
六location对象
1、属性
host：设置或检索位置或 URL 的主机名和端口号
hostname:设置或检索位置或 URL 的主机名和端口号
href：设置或检索位置或 URL 的主机名和端口号
2、方法
assign("url") 加载 URL 指定的新的 HTML 文档。
reload() 重新加载当前页
replace("url") 通过加载 URL 指定的文档来替换当前文档
Ⅲ、DOM编程－document对象
一、document对象的主要方法
getElementByID( ) 根据HTML元素指定的ID，获得唯一的一个HTML元素。如：访问DIV层对象、图片Img对象
getElementsByName( ) 根据HTML元素指定的name，获得相同名称的一组元素。如：访问表单元素(全选功能)
二、制作一个浮动窗口
1、常见的页面坐标的介绍
top:指定元素的上边界位置。
pixelTop:设置或返回元素的上边界。
left:指定元素的左边界位置。
scrolltop:页面滚动的高度
2、方法
// document.getElementById("advLayer").style 得到id是advLayer 的层的对象
// document.getElementById("advLayer").style.pixelTop; 该层对象距上边界的距离
// document.getElementById("closeLayer").style.display="none"; 隐藏该层
// // document.getElementById("closeLayer").style.display="block/inline"; 显示该层
<SCRIPT language="javascript">
var advInitTop=0;
var closeInitTop=0;
function inix( ){
advInitTop=document.getElementById("advLayer").style.pixelTop;
closeInitTop=document.getElementById("closeLayer").style.pixelTop; }
function move( ){
document.getElementById("advLayer").style.pixelTop=
advInitTop+document.body.scrollTop ;
document.getElementById("closeLayer").style.pixelTop=
closeInitTop+document.body.scrollTop ; }
function closeMe( ) {
document.getElementById("closeLayer").style.display="none";
document.getElementById("advLayer").style.display="none"; }
window.οnscrοll=move ; //窗口的滚动事件 即 调用move 函数
</SCRIPT>
三、制作实现全选效果
带参数的函数
<SCRIPT language="javascript">
function checkAll(boolValue ) { //参数不用定义类型
var allCheckBoxs=document.getElementsByName("isBuy") ;
for (var i=0;i<allCheckBoxs.length ;i++)
{
if(allCheckBoxs[i].type=="checkbox") // 判断 控件的类型是否是checkbox
allCheckBoxs[i].checked=boolValue ; // boolValue 的值有 true 和 false 两种
} }
</SCRIPT>
<A href="javascript: checkAll(true)">全选
<A href="javascript: checkAll(false)">全不选
Ⅳ、CSS样式特效
一、什么是CSS
( Cascading Style Sheet) 可翻译为 层叠样式表 或级联样式表，是一组格式设置规则，用于控制WEB页面的外观。通过CSS样式设置页面的格式。
二、定义样式
<STYLE type="text/css" >
.mouseOverStyle{
background-image: url(images/back2.jpg);
color:#CC0099;
border:0px;
margin:0px;
padding:0px;
height:23px;width: 82px;
font-size: 14px; }
.mouseOutStyle{
background-image: url(images/back1.jpg);
color:#0000FF; border:0px; margin:0px;
padding:0px;height:23px; width:82px;
font-size: 14px; }
</STYLE>
上述内容可以单独定义在一个.css文件中 也可以在一个.html文件中
三、CSS的应用
很简单 在控件中使用属性 class = “样式名”
Ⅴ、表单验证技术
一、表单验证的内容
1、名字 ：不能为空，且只能包括字母、数字和下划线字符
2、姓氏：不能为空且不能有数字
3、登录名：不能为空且不能有数字
4、密码：密码不能为空并且最少为6位，还要求两次输入的密码要一致
5、邮箱：不能为空且包含字符@和.
6、日期：年月日不能为空，且不能超出其要求的范围
二、文本框对象的常用属性、方法、事件
属性 value 设置或获取文本框的值
方法 focus( ) 获得焦点
select( ) 选中文本内容，突出显示输入区域
事件 onFocus 光标进入某个文本框脚本运行
onBlur 文本框失去焦点脚本运行
onKeyPress 当一个键按下并释放时去触发一个事件
三、验证举例
1、邮箱验证
<SCRIPT LANGUAGE = "JavaScript">
function checkEmail( ) { var strEmail=document.myform.txtEmail.value;
if (strEmail.length==0)
{ alert("电子邮件不能为空!");
return false; }
if (strEmail.indexOf("@",0)==-1|| strEmail.indexOf(".",0)==-1)
{ alert("电子邮件格式不正确");
return false; }
return true; }
</SCRIPT>
<FORM name=“myform” action=“” onSubmit=“return checkEmail( )”>
<INPUT name="registerButton" type="submit" id="registerButton" value="注册" >
2、密码验证
<SCRIPT language = "JavaScript">
function passCheck(){ //验证密码
var userpass = document.myform.txtPassword.value;
if(userpass == ""){
alert("未输入密码 /n" + "请输入密码");
document.myform.txtPassword.focus();
return false; }
if(userpass.length < 6){
alert("密码必须多于或等于 6 个字符。/n");
return false; }
return true; }
</SCRIPT>
<FORM name=“myform” action=“” onSubmit=“return passCheck ( )”>
<INPUT name="registerButton" type="submit" id="registerButton" value="注册" >
3、多个验证
例如邮箱和密码同时验证
<SCRIPT language = "JavaScript">
……
function validateform(){
if(checkUserName()&&passCheck( ))
return true;
else
return false; }
</SCRIPT>
<FORM name="myform" onSubmit="return validateform( )“ method="post" >
<INPUT name="registerButton" type="submit" id="registerButton" value="登录" >
4、焦点问题
<SCRIPT LANGUAGE = "JavaScript">
function clearText( ) {
if (document.myform.txtEmail.value= =“请输入真实的电子邮箱，我们将
发送激活密码") {
document.myform.txtEmail.value="" ; // 清空文本框
document.myform.txtEmail.style.color="red"; // 修改文本框的颜色
if (strEmail.length==0)
{ alert("电子邮件不能为空!");
document.myform.txtUserName.focus( ); // 得到焦点
return false; }
if (strEmail.indexOf("@",0)==-1|| strEmail.indexOf(".",0)==-1)
{ alert("电子邮件格式不正确");
document.myform.txtUserName.focus( ); // 得到焦点
return false; }
return true; }
</SCRIPT>
<INPUT name="txtEmail" type="text" class="textBorder" id="txtEmail" value="请输入真实的电子邮箱，我们将发送激活密码" size="40" onFocus="clearText( )" style="color: #666666;">*必填
注：onFocus="clearText( )" 得到焦点时调用clearText( )方法
5、制作回车切换输入的效果
注：检查输入是否是回车键－ASCII码13，若是则将输入改为Tab键－ASCII码9
应用于多个文本框
<script language="javascript" type="text/javascript">
function changeFocus( ){
if (event.keyCode==13)
event.keyCode=9; }
</script>
<INPUT name="sname" type="text" class="borderBox" onKeyDown="changeFocus( )">
<INPUT name="spass" type="text" class="borderBox" onKeyDown="changeFocus( )">
<INPUT name="semail" type="text" class="borderBox" onKeyDown="changeFocus( )">
6、制作即时提示错误的特效
注：添加文本框失去焦点的事件函数
function checkLogin( ){
var myDiv=document.getElementById("loginError");
myDiv.innerHTML=""; // div内容为空
var strName=document.userfrm.loginName.value;
if (strName.length == 0)
{ myDiv.innerHTML="<font color='red'>用户名不能为空</font>";
return; // 默认是return false ；
} }
<INPUT name="loginName" type="text" onblur="checkLogin( )"><div id=” loginError”></div> //失去焦点时触发checkLogin（）方法
Ⅵ、脚本中数组的应用
一、用数组优化解决省市级联问题
<script language="javascript">
function changeprov(){
var citylist = new Array();
citylist["hb"]=["邯郸市","邢台市","石家庄市","衡水市","保定市","廊坊市","承德市","张家口市","保定市"];
citylist["bj"]=["海淀区","朝阳区","西城区","东城区","昌平区","丰台区","大兴区"];
citylist["sch"]=["成都","绵阳","泸州","宜春"];
citylist["shd"]=["济南","德州","日照","青岛","潍坊","聊城"];
var pindex = document.form1.province.value; //取得province的值
var option1;
document.form1.city.options.length = 0;
for( var i in citylist[pindex]){
option1 = new Option(citylist[pindex][i],citylist[pindex][i]);
document.form1.city.options.add(option1);
}
}
</script>
</head>
<body>
<form name="form1" >
<select name="province" οnchange="changeprov();"> //onChange选项/内容改变事件
<option>--选择所在省或直辖市--</option>
<option value="hb" >河北省</option>
<option value="bj">北京市</option>
<option value="sch">四川省</option>
<option value="shd">山东省</option>
</select> <br /><br />
<select name="city">
<option>--选择所在市或地区--</option>
</select><br /><br />
</form>
</body>
</html>
1649
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
