JS 基础总结

Ⅰ、JavaScript的基本语法
一、JS脚本的基本结构和几个注意的要点

BODY部分的内容

二、运算符号
算术运算符： +、-、 * 、 / 、%、++、–、-(求反)

比较运算符： ==、!=、>、>=、<、<=

逻辑运算符： &&、||、！

三、逻辑控制语句
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、 函数的调用
可以在

也可以在控件中的 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、 使用：

<INPUT type=“button” name=“regButton” value=" 用户注册 "

οnclick=“openwindow( )”>

<INPUT type=“button” name=“exitButton” value=" 退 出 "

οnclick=“closewindow( )”>

也可以用链接完成函数的调用

用户注册

退 出

四、Date 对象

H2>当前时间：

</H2></FORM >

五、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”; 显示该层

三、制作实现全选效果

带参数的函数

全选

全不选

Ⅳ、CSS样式特效
一、什么是CSS
( Cascading Style Sheet) 可翻译为 层叠样式表 或级联样式表，是一组格式设置规则，用于控制WEB页面的外观。通过CSS样式设置页面的格式。

二、定义样式

上述内容可以单独定义在一个.css文件中 也可以在一个.html文件中

三、CSS的应用
很简单 在控件中使用属性 class = “样式名”

Ⅴ、表单验证技术

一、表单验证的内容
1、名字 ：不能为空，且只能包括字母、数字和下划线字符

2、姓氏：不能为空且不能有数字

3、登录名：不能为空且不能有数字

4、密码：密码不能为空并且最少为6位，还要求两次输入的密码要一致

5、邮箱：不能为空且包含字符@和.

6、日期：年月日不能为空，且不能超出其要求的范围

二、文本框对象的常用属性、方法、事件
属性 value 设置或获取文本框的值

方法 focus( ) 获得焦点

         select( )      选中文本内容，突出显示输入区域

事件 onFocus 光标进入某个文本框脚本运行

       onBlur    文本框失去焦点脚本运行

       onKeyPress     当一个键按下并释放时去触发一个事件

三、验证举例
1、邮箱验证

2、密码验证

3、多个验证
例如邮箱和密码同时验证

4、焦点问题

*必填

注：onFocus=“clearText( )” 得到焦点时调用clearText( )方法

5、制作回车切换输入的效果
注：检查输入是否是回车键－ASCII码13，若是则将输入改为Tab键－ASCII码9

应用于多个文本框

6、制作即时提示错误的特效
注：添加文本框失去焦点的事件函数

function checkLogin( ){

var myDiv=document.getElementById(“loginError”);

myDiv.innerHTML=“”; // div内容为空

var strName=document.userfrm.loginName.value;

if (strName.length == 0)

{ myDiv.innerHTML=“用户名不能为空”;
return; // 默认是return false ；

} }

<div id=” loginError”> //失去焦点时触发checkLogin（）方法

Ⅵ、脚本中数组的应用
一、用数组优化解决省市级联问题

<select name=“province” οnchange=“changeprov();”> //onChange选项/内容改变事件

--选择所在省或直辖市-- 河北省 北京市 四川省 山东省

--选择所在市或地区--