JS总结2

JavaScript课程总结复习（2）

班号：QR2088   姓名： 宋延军

•认识并熟悉JavaScript

•掌握JavaScript    数据类型

•掌握Javascript    函数和事件的处理

•掌握JavaScript    浏览器对象

•掌握Javascript    文档对象

•掌握JavaScript    CSS样式特效

•掌握JavaScript    表单验证和正则表达式

 

由于好不容易的写完了之后，发现 超出字符限定的范围了，所以分为两部分发布出来。如果我的这个总结中还有什么没有涉及完全的地方，请帮忙在楼下追加上，有经验就 不要藏着掖着，贴出来，大家共同的分享分享，谢谢了。

 

 

• Navigator 对象，也称为浏览器对象，该对象包含了 浏览器的整体信息，如浏览器名称、版本号等。

 

• 早期的 Netscape 浏览器称为 Navigator 浏览器， Navigator 对象是在 Navigator 浏览器之后命 名的 .

 

• HTML 中的 frameset 元素可以创建框架。

 

• 在 JavaScript 中并不存在 Frame 对象。所谓的 Frame 对象只是 Window 对象的一个实例，该 对象拥有 Window 对象的所有方法和属性以及事件.

 

• 框架可以在同一个浏览器窗口里打开多个网页，并且 这些 网页之间并 不是独立的 ，网页与网页之间的信息 可以有相互的联系。

 

 

 

• document对象称为文档对象 （是JavaScript中的最重要的一个对象。）

 

•document对象是window对象中的一个子对象，window对象代表浏览器窗口，而document对象代表了浏览器窗口中的文档。

 

•document对象为操作文档提供一个统一的接口，其负责管理下级子对象的关系信息。

 

•HTML文档中相当多的功能是由子级对象提供的，document对象对这些功能组合对象。

 

 

• document对象拥有大量的属性，这些属性主要用于描述HTML文档中的标题、颜色、URL以及HTML文档中的图片、超链接、表单元素等。

 

•最常用的document对象属性是：

bgcolor   页面背景色

fgcolor    前景色（文字颜色）

 

•document对象不需要手动创建，在文档初始化时就已经由系统内部创建好了，我们只要直接调用其方法或属性就可以了。

 

•常用的document 对象方法是：

write()       动态向页面写入内容

createElement(Tag)  创建一个html标签对象

getElementById(ID)          获得指定ID值的对象

getElementsByName(Name)      获得指定Name值的对象集合

getElementsByTagName(Tag)            获取制定标签名的对象集合

 

 

 

• 显示滚动信息的“跑马灯”程序

实现思路：

将document对象的title属性与window对象的setInterval方法相结合， 可以让浏览器窗口显示动态标题 。

 

代码实例：

<script language="javascript">
 var str = "     欢迎光临本站!"
 function titleMove(){
     strstr = str.substring(1, str.length) + str.substring(0, 1);
     document.title = str;           //设置标题栏
     window.status = str;           //设置状态栏
   }
   if (str.length > 20) {
      str = "     欢迎光临本站!";    }
   setInterval("titleMove()", 100);
</script>
<!--使用setInterval方法设置每隔0.1秒来调用函数titleMove() -->

 

 

 

• 使用document对象的write和writeln方法除了可以在当前文档中输出内容之外，还可以在其他浏览器窗口的文档中输出内容。

 

•writeln 是在原文件中换行，并不是在 html中换行。

 

•with() 匹配 document    例如：with(document)

 

•document 的all 属性可以返回整个文档中所有的html元素。

 

•而在实际运用中，很少有需要获得所有元素的情况，通常需要获取某个元素下的子元素。

 

•使用getElementById()方法获取指定ID的元素对象 。

 

•Image对象又称为图像对象。

•它是一个特殊数组中的元素。这个数组就是document对象的images属性的返回值，这个返回值是一个数组。只是这个数组中的每一个元素都是一个Image对象。它是用来设置图片的属性方法和事件等。

 

 

 

• 数组 中的 元素个数 由 HTML 文档中的 <img> 标签决定。

 

• JavaScript 为 每一个 <img> 标签 在 images[] 数组中 创建一个元素。

 

因此， images[] 数组 的每一个元素都代表着 HTML 文档中的一张图片 ，通过对 images[] 数组元素的作用， 可以达 到引用图片的目的。

 

 

• 通常要想使制作的网页图片可以 动态改变大小 ， 要使用 Image 对象的 width 属性和 height 属性 ，他们可以动态改变图片的宽和高，这是通过改变图片的尺寸来实现 的 .

 

 

• 问题 1 ：

在页面中随机显示指定的几张图片中的一张？

产生一个随机图片的原理就是产生一个随机数然后去图组里面取相对应得图像路径，然后设置给 img 元素并显示 出随机后的图片。

 

• 问题 2 ：

如何实现带关闭功能的浮动窗口？

把带关闭的图标放到层中，当点击图标时层消失。

 

 

制作浮动广告图片的实现思路：

<1> 在页面中插入层，在层中插入图片

<2> 编写脚本

1、使用getElementById( )方法获得层对象

2、设置层的样式style的显示属性display="none “

 

 

制作全选/反选多个复选框的实现思路:

<1> 通过document . getElementByName()方法获取复选框集合。

<2> 判断按钮的值是否是全选或全不选。

<3> 根据判断条件循环设置每一个 checkbox 的 checked 属性。

 

 

floor 方法是取   大于它 的 最小 整数。

 

cell  方法是取 小于它 的 最大 整数。

 

( int )( random * 10 )%5       取 0~4 的数 。

 

 

W3C 标准规范 :

 document. documentElememt .serollTop;

 document. body .srollTop;

 

 

 

• Style对象的属性没有连字符。

•例如：

Element.style.font-family:="Arial";  错误

Element.style.fontFamily:=“Arial”;  正确

原来紧接在连字符后面的字母改成大写

 

• Style对象保留了float关键字以备将来使用

 

Style对象属性 

文本属性	说 明
font	在一行设置所有的字体属性
color	设置文本的颜色
border	在一行设置四个边框的所有属性
borderColor	设置所有四个边框的颜色 ( 可设置四种颜色 )
scrollbarHighlightColor	设置箭头和滚动条左侧和顶边的颜色，以及滚动条背景

 

利用鼠标相关事件调用JavaScript代码

onMouseOver=“this.style.fontSize='24px‘“
onMouseOut=“this.style.fontSize='14px‘"

 

 

 

•

 

通过改变样式backgroundImage实现

•

onMouseOver=“this.style.backgroundImage='url(images/bg.jpg)';“

 

 

• 制作鼠标移出的样式，用onMouseOut事件来设定Style对象的backgroundImage的值。

•

onMouseOut="this.style.backgroundImage='url(images/bg1.jpg)';“

 

  

• 定义样式(利用鼠标相关事件调用类样式代码)

<LI><A href="#" onMouseOver="this.className =' MouseOverStyle' "
onMouseOut ="this.className=' MouseOutStyle' ">网站首页</A></LI>

 

 

  层的显示/隐藏特效

显示属性display

适用于所有HTML标签，常用于层DIV、图片Img的显示和隐藏。

 

inline  按行显示，和其他元素同一行显示

 

block  默认值。按块显示，换行显示。   用该值为对象之后添加新行

 

none 不显示，隐藏对象。 与visibility属性的hidden值不同，其不为被隐藏对象保留其物理空间

 

 

 

 

为什么需要表单验证： 脚本在客户端执行，减轻服务器端的压力

 

如何编写脚本验证表单？

1 、 获取表单元素的值 （ String 类型）， 然后进行判断

2 、 触发表单 （ FORM ） 的提交事件 （ onSubmit ）

 

客户端验证有 两种形式 ： 1. 非空验证   2. 格式验证

 

 

常用的String对象

使用 var 语句直接创建一个字符串类型变量 var newstr = "这是我的字符串"

 

使用 new 关键字创建一个String类型的对象 var newstr = new String("这是我的字符串")

 

 

 

调用方法和属性new 出来的 变量 可以 打点 调用到

字符串对象.属性名

字符串对象.方法名( )

 

 

 

• String对象常用的属性和方法

 

  length 获取字符串字符的个数

 

 indexOf( “子字符串”，起始位置)    查找子字符串的位置

 

 charAt(index)  获取位于指定索引位置的字符

 

 substring(index1,index2 ) 求子串，返回从起始位置到结束位置之间的字符串

 

 toLowerCase( ) 将字符串转换成小写

 

 toUpperCase( ) 将字符串转换成大写

 

 

多个元素的多个函数一起调用,用到关系运算符&& 。

• 比如有三个已经写好的验证函数，我们在定义一个总的验证函数，在这个总的验证函数镇南关 加一个 if判读韩，三个函数的并且关系，通过了便返回 true 没有通过的话就返回 false

 

例如：

<script language="javascript">
  function validate(){
    if( checkname() && checkpwd() && checkemail() )
        return true;
    else
       return false;
  }
</script>

当表单的提交事件被触发时调用上述的这个函数

<form name="myform" method="post" action="success.html" onSubmit="return validate()">

.......

</form>

 

 

文本框对象的常用属性、方法、事件

䦋㌌�SÜ	名 称	说 明
属性	value	设置或获取文本框的值
方法	focus( )	获得焦点
	select( )	选中文本内容，突出显示输入区域
事件	onFocus	光标进入某个文本框 脚本运行
	onBlur	文本框 失去焦点脚本运行
	onKeyPress	当一个键按下并释放时去触发一个事件

 

 

• 如何实现省市级联的效果？

1 、 利用省份下拉框的选项改变事件 onChange

2 、 根据用户选择的省份， 动态添加 城市下拉框的值

 

• 下拉框控件SELECT：

常用属性

 length     value    options     selectedIndex

常用事件   

onChange    选项改变事件

onBlur      失去焦点

onFocus    获得焦点

 

 

提示：

选项数组

每个选项 Option 可以动态创建

new Option( " 显示内容 " ， " 值 " )

动态添加选项

selCity. options . add( newOption1 ）

清除选项

selCity . Options . length = 0

 

 selectedIndex       读取或设置被选项的索引号，第一个为0，其他类推。

 

实例代码1：

<script language="javascript">
function changeCity( ) {
                                     <!--1、创建数组，存放各省份对应城市 -->
    var cityList = new Array( );
                                    <!--2、根据用户选择的省份索引号，获取对应数组索引号 -->
    cityList[0] = ['成都', '绵阳', '德阳', '自贡', … '泸州'];
    cityList[1] = ['济南', '青岛', ‘… '日照'];
    cityList[2] = ['武汉', '宜昌', … '潜江'];
                                   <!--3、 获取备选的父级项索引值-->
    var pIndex = document.myform.selProvince.selectedIndex-1;
    var newOption1;
                                   <!--4、清空子级原下拉框内容 -->
    document . myform . selCity . options . Length = 0 ;

    for (var j in cityList[pIndex])
    {
         newnewOption1 = new Option( cityList [pIndex] [j], cityList [pIndex] [j] ) ;
        document.myform.selCity.options.add(newOption1);
                                   <!--5、根据数组内容创建选项，并添加到城市下拉框-->
     }
}
</script>

 

实例代码2： 字符串 数组 优化省市级联

<script language="javascript">

function changeCity( ) {
    var cityList = new Array( );        <!--1. 创建数组存放省份对应的城市-->
    cityList[ ‘ 四川省 ’ ] = ['成都', '绵阳', '德阳', '自贡', … '泸州'];
    cityList[ ‘ 山东省 ’ ] = ['济南', '青岛', ‘… '日照'];
    cityList[ ‘ 湖北省 ’ ] = ['武汉', '宜昌', … '潜江'];
                        <!--2. 获取父类列表的 所选 下标的 value 值-->
    var pIndex = document.myform.selProvince.value;
    var newOption2;                 <!--3. 声明一个 子列表 变量-->
    document . myform . selCity . options . Length = 0 ;    <!--4. 清空子列表项-->

    for (var j in cityList[pIndex])      <!--5. 循环遍历根据数组内容添加城市下拉列表-->
    {
         newnewOption2 = new Option( cityList [pIndex] [j], cityList [pIndex] [j] ) ;
        document.myform.selCity.options.add(newOption2);
     }
}

<!--注意：用这种方法更符合级联标准，需要注意的是，父下拉列表的value值要给一个省份名字。-->



</script>

  

• 正则表达式（regular expression）

•就是用一个“字符串”来描述一个特征，然后去验证另一个“字符串”是否符合这个特征。

 

•正则表达式的用途：

1）验证字符串是否符合指定特征，比如验证是否是合法的邮件地址。

 

2）用来查找字符串，从一个长的文本中查找符合指定特征的字符串，比查找固定字符串更加灵活方便。

 

3）用来替换，比普通的替换更强大。

 

 

• 常用元字符

 

 \d : 表示 0~9 任意数字

 

 \w : 任意数字、字母、下划线

 

 \s : 表示任意一个不显示的字符（换行符、制表符、空格）

 

 .  : 匹配除了换行符（\n）以外的任意一个字符

 

 ^  : 匹配一个字符串的开始

 

 $  : 匹配一个字符串的结束

 

• String对象用于操作和处理字符串文本。

 

•文本框是最常用的表单元素，可以通过使用value属性来读取文本框中的值。

 

•innerHTML属性表示对象的起始到终止标签的全部内容，动态改变页面内容不但可以用innerHTML来实现，还可以使用display属性来实现。

•数组是具有相同数据类型的一个或多个值的集合，它用同一个名称存储一系列值。

 

 

• 几个常用的正则表达式 ：

要求是手机 ： ^[1]{1}[3]{1}(\d){9}$

 

要求是电话 ： ^((\d){3,4}[-]{1})?([1-9]{1}(\d){5,7})([-]{1}(\d){1,6})?$

 

要求是日期 (1999-10-02)   ： ^\d{4}-\d{1,2}-\d{1,2}

 

要求是 mail ： ^\w+( [-+.]\w+)*@\w+( [-.]\w+)*\.\w+( [-.]\w+)*$

 

要求是汉字 ： ^[\u4e00-\u9fa5],{0,}$

 

要求是身份证 ： \d{18}|\d{15}

 

要求是密码（以字母开头，且为 6-16 位） ： ^[a-zA-Z]\w{5,17}$

 

要求是邮编 ： \d{6}

 

 JavaScript科目总结完毕

 OVER！！