[原创]JavaScript基础教程（下）(页 1) - 网站策划与设计 - 【开放注册】苹果手机软件下载论坛|中国苹果用户网|苹果BT下载种子torrent发布

Thirteen 发表于 2003-11-6 09:32

[

以下内容参照部分资料编写完成，转载请先与本人联系，并注明出处.
 T.L.G
 
 第十一天与用户互交和Date对象
 基本上你打开电脑就在完成互交,所以我也相信你明白什么叫做互交,而现在我们就来看看JS的简单互交的三种方法.
 其实我准备在讲window对象的时候在说下面的内容,不过看到在本章之前,甚至以后我们都回大量的运用到,所以我决定在这里先提及一下.
 那么是哪三种方法呢?正如我开始说的,在之前我们已经大量的运用过了,就是alert(),confirm(),
 prompt().
 或许你已经通过前面或多或少的了解了,这样的话你可以直接跳过下面的段落.
 alert()
 作用:显示出一个简单的对话框,提示简短的信息.
 事实上它是window对象的一种方法,全名是window.alert(),不过JS已经自动假设alert()就是window.alert(),下面两种方法也是一样的,同是window对象的方法.我相信这就不需要举例说明了吧
 
 confirm()
 作用:给用户提个选择,也就是在alert()显示的结果上加上个取消,当按确定的时候就返回true,否则返回false,其他的基本和alert()一样.运用这个方法的关键就是在返回值的运用上.
 
 prompt()
 作用:我相信这也不需要说太多了,因为我们在前面已经运用了太多,只是有朋友问我prompt("请输入你的数字","")中,后面的,""是什么意思,在这里我就只对这点说明一下.事实上我们就是给提示框指顶一个默认值,在这里我指定默认值为空格,但要注意这个默认值是可以修改的.
 
 不过在实际应用中,建议你的这些互交尽量少用,或者不用,除非是万不得以的情况下,相信你也知道没有比这东西更烦的了.
 
 我们权当上面的部分是个花边,下面我们要开始今天真正需要介绍的东西.昨天我们已经了解了Array对象,今天我们就来看看Date对象.
 顾名思义,Date对象就是于时间有关的对象集合,年,月,日,时等等都包含在其中事实上我们还可以用这些来事项更多的东西,在这之前让我们先来了解一些关于JS的时间概念:
 首先,JS是已豪秒来度量,而1970年1月1日0点是JS的中位数,也就是说,在1970年1月1日0点之前的时间,是用负数来显示的.
 在者JS程序是在浏览器中进行的,所以他显示的时间总是用户计算机上的当前时间.因此你也不要指望用JS来使世界各地的浏览者看到同一个时间.除非地球是一个极小的平面.也正是如此,如果用户修改了自己计算机上的时间,那么你所给的脚本一定会在中午的时间说晚上好,(运行前面我们说过的一个关于控制时间的脚本,改改计算机上的时间你就可以了解了)
 最后我们来看看Date使用的参数:
 
 date_object 变量名建立一个Date对象
 yyyy 年用四位整数来表示年
 yy 年用两位整数来表示年
 month 月用英文表示月份
 mth 月用0到11来表示月份
 dd 天用1到31来表示天
 hh 时用0到23之间的整数来表示
 mm 分用0到59之间的整数来表示
 ss 秒用0到59之间的整数来表示
 ms 毫秒任何不超出范围的整数
 
 了解了这些,接下来我们就来看看Date对象的使用.
 通常我们都是Date对象储存当前日期和时间,这可以通过调用Date()来实现,下面我们就开看看它的语法:
 var data_object=new Date()
 例如在讲选择结构时用的一个例子:
 var to_date=new Date()
 当然如果我们要使用一些特殊的时间我们还可以指定Date()中的参数.
 例如:var to_date=new Date(2003,5,20)
 这里我们需要注意参数的先后顺序,通常有下面五种情况:
 "month dd,yyyy,hh:mm:ss"
 "month dd,yyyy"
 yyyy,mth,dd,hh,mm,ss
 yyyy,mth,dd
 ms
 当然光有Date()函数是不够的,我们只可以用它来知道一个完整的时间,实际的应用中我们还需要从这个时间中提出我们想利用的信息来,这时候我们就可以同过一些方法来提取我们想要的信息:
 
 date_object.getFullYear() 以四位数提取年份
 date_object.getYear() 以两位数或者四位数提取年份
 date_object.getMonth() 以0到11的形式提取月份
 date_object.getDate() 以1到31的形式提取某一天
 date_object.getDay() 以0到6的形式提取星期
 date_object.getHours() 以0到23的形式提取小时
 date_object.getMinutes() 以0到59的形式提取分钟
 date_object.getSeconds() 以0到59的形式提取秒钟
 date_object.getMilliseconds() 以0到999的形式提取毫秒
 date_object.getTime() 提取从中位数到现在的豪秒数
 
 例如我们只想知道今天是星期几
 <script language="javascript">
 var to_date=new Date()
 var mill_week=to_date.getDay()
 alert("今天是星期"+mill_week)
 </script>
 不过这样看上去好象有点别扭,如果是数字是中文的就好了,其实要做到也不是那么难,不是吗?我们观察到他是以以0到6的形式提取星期,那么我们是不是可以用数组来完成我们想实现的东西呢?答案是肯定的.
 事实上我们还可以用同样的形式把月份或者时间转换成比较友好的界面,我想你自己来常识着完成,顺便也对昨天的内容进行一些复习.
 我们可以把时间提取出来,事实上我们在实际应用中还需要施行一些算法,这就需要我们来在程序内部来改变一些时间.下面是几种修改时间的方法:
 
 date_object.setFullYear() 以四位数修改年份
 date_object.setYear() 以两位数或者四位数修改年份
 date_object.setMonth() 以0到11的形式修改月份
 date_object.setDate() 以1到31的形式修改某一天
 date_object.setHours() 以0到23的形式修改小时
 date_object.setMinutes() 以0到59的形式修改分钟
 date_object.setSeconds() 以0到59的形式修改秒钟
 date_object.setMilliseconds() 以0到999的形式修改毫秒
 date_object.setTime() 修改从中位数到现在的豪秒数
 
 例如我们要同过输入的日期来查找这个日期是星期几,我们就需要使时间回到那一天,下面我们就来看看用JS如何完成这个过程:
 <script language="javascript">
 var week_name=new Array("一","二","三","四","五","六","七")
 var user_year=prompt("输入你要查找的年份 :( 如:2003)","")
 var user_month=prompt("输入你要查找的月份 :( 如:12)","")
 var user_day=prompt("你想知道这个月的第几天是星期几呢?","")
 var user_date=new Date()
 user_date.setFullYear(user_year)
 user_date.setMonth(user_month-1)
 user_date.setDate(user_day-1)
 var day_name=week_name[user_date.getDay()]
 alert(user_year+"/"+user_month+"/"+user_day+"是星期"+day_name)
 </script>
 这样我们就可以查找到所有年份的星期了.其中需要解释的应该是user_day-1这个参数了吧,或许user_month-1你可以理解,因为我们在前面看到date_object.setMonth(mth)是以0到11的形式修改月份,
 也就是说要使程序内部规则告诉我们要减一才会得到真实时间,但某一天是从1开始的啊,按理说是没有必要减少的,不错,如果你在英国的话,我们就可以不用减一了,遗憾的是我们现在在看中文,JS的时间是算格林威冶时区的,所以我们不得不减一来实现.
 再来看个例子,记得以前常有些计算你活了多少天,多少小时,等等更小单位数值的东动.我们今天就来实现一个.
 <script language="javascript">
 var ONE_SEC=1000
 var ONE_MIN=ONE_SEC*60
 var ONE_HOUR=ONE_MIN*60
 var ONE_DAY=ONE_HOUR*24
 var ONE_WEEK=ONE_DAY*7
 
 var user_year=prompt("输入你出生的年份 :( 如:2003)","")
 var user_month=prompt("输入你出生的月份 :( 如:12)","")
 var user_day=prompt("这个月的第几天是你生日呢?","")
 
 var user_date=new Date()
 user_date.setFullYear(user_year)
 user_date.setMonth(user_month-1)
 user_date.setDate(user_day-1)
 
 var new_date=new Date()
 var user_you=user_date.getTime()
 var new_you=new_date.getTime()
 
 var you_age=new_you-user_you
 var age_sec=Math.round(you_age/ONE_SEC)
 var age_min=Math.round(you_age/ONE_MIN)
 var age_hour=Math.round(you_age/ONE_HOUR)
 var age_day=Math.round(you_age/ONE_DAY)
 var age_week=Math.round(you_age/ONE_WEEK)
 
 alert("你在这个世界上存在了\n"+
 age_sec+"秒\n"+
 age_min+"分\n"+
 age_hour+"小时\n"+
 age_day+"天\n"+
 age_week+"星期\n")
 </script>
 个人习惯把不变的变量用大写来命名,而Math.round()我会在明天说明.
 
 最后我们来看看其他Date方法,在这里我只说明一下就不在详细的介绍了:
 
 date_object.getTimeZoneOffiset() 返回用户本地时区和格林威冶时区之差的分钟数
 date_object.getUTCFullYear() 以四位数返回格林威冶时区的年
 date_object.getUTCYear() 以两位数返回格林威冶时区的年
 date_object.getUTCMonth() 以0到11返回格林威冶时区的月
 date_object.getUTCDate() 以1到31返回格林威冶时区的天
 date_object.getUTCDay() 以0到6返回格林威冶时区的星期
 date_object.getUTCHours() 以0到23返回格林威冶时区的小时
 date_object.getUTCMinutes() 以0到59返回格林威冶时区的分钟
 date_object.getUTCSeconds() 以0到59返回格林威冶时区的秒钟
 date_object.getUTCMilliseconds() 以0到999返回格林威冶时区的毫秒
 date_object.getUTCTime() 返回从中位数到现在的格林威冶时区豪秒数
 date_object.setUTCFullYear(yyyy) 以四位数修改格林威冶时区的年份
 date_object.setUTCYear(yy) 以两位数或者四位数修改格林威冶时区的年份
 date_object.setUTCMonth(mth) 以0到11的形式修改格林威冶时区的月份
 date_object.setUTCDate(dd) 以1到31的形式修改格林威冶时区的某一天
 date_object.setUTCHours(hh) 以0到23的形式修改格林威冶时区的小时
 date_object.setUTCMinutes(mm) 以0到59的形式修改格林威冶时区的分钟
 date_object.setUTCSeconds(ss) 以0到59的形式修改格林威冶时区的秒钟
 date_object.setUTCMilliseconds(ms) 以0到999的形式修改格林威冶时区的毫秒
 date_object.setUTCTime(ms) 修改从中位数到现在的格林威冶时区豪秒数
 Date.parse(string) 返回符合string给的日期表示法
 date_object.toString() 把Date对象转换成字符串,以用户本地时区显示
 date_object.toLocalString() 把Date对象转换成字符串,以用户本地时区的格式显示
 date_object.toGTMString() 把Date对象转换成字符串,以用格林威冶时区的格式显示
 date_object.toUTCString() 把Date对象转换成字符串,以用格林威冶时区的格式显示
 Date.UTC(yyyy,mth,等等) 将时间统一转换成从中位数开的毫秒数
 date_object.valueOf() 返回从中位数到现在的豪秒数

Thirteen 发表于 2003-11-6 09:33

[

第十二天 Math对象
 在任何编程语言中,我们都不得不和数字打交道,在JS中当然也不例外,今天我们就来看看JS如何处理数字.
 我们需要知道JS只局限于处理两中数字数据类型:整数和浮点数(即小数).同时你千万不要指望JS可以做精确的浮点运算,举个简单的例子.5乘上3.99,笔算的结果是19.95,而在JS中,5*3.99的结果是19.950000000000003,也许你不以为然,不过要是在个购物清算帐单页面上出现这么一长串的结算数的话,
 将会给用户带来困惑.我们需要知道大部分的脚本都是用来给别人看的,我们应该站在用户的角度来对程序进行设计.
 
 在讲Math对象之前我们想先说说Number对象的属性和一些相关的方法.
 我们先来看看关于Number对象的属性,这里就不做详细的介绍了.
 
 Number.MAX_VALUE 最大可能值
 Number.MIN_VALUE 最小可能值
 Number.NaN 非数字的任意值
 Number.NEGATIVE_INFINITY 小于最小负数的任意数
 Number.POSITIVE_INFINITY 大于最大数的任意数
 
 接着我们来看看四个与之相关的方法.
 isNaN()
 检测操作数是否是数字.
 例如:
 var number_prompt=prompt("输入数字:","")
 if(isNaN(number_prompt)){
 alert("请输入数字")
 }
 parseInt()
 把字符串转换成整数.
 parseFloat()
 把字符串转换成整数或浮点数.
 在上面两的方法的括号中分别添入下面三个值,对比一下:"5","5.1","five"你就可以很容易的看出来了.
 
 eval()
 把字符串转换成js代码.
 这个方法在之前我们讲加法的时候运用过了,这里我只例举个片断大家可以自己看:
 alert("Number.MAX_VALUE")
 alert(eval("Number.MAX_VALUE"))
 
 了解了这些之后我们就开始看看Math对象.
 与前面几天我们所说的对象不同,Math对象是JS的自建对象,我们可以直接的使用它.
 首先我们就来看看Math对象的属性
 
 属性作用近似值
 Math.E 欧拉常数 2.718281828459045
 Math.LN2 2的自然对数 0.6931471805599453
 Math.LN10 10的自然对数 2.302585092994046
 Math.LOG2E 以2为底的E的对数 1.4426950408889633
 Math.LOG10E 以10为底的E的对数 0.4342944819032518
 Math.PI 圆周率 3.141592653589793
 Math.SQRT1_2 1/2的平方根 0.7071067811865476
 Math.SQRT2 2的平方根 1.4142135623730951
 
 这些基本没有什么好说的,对数学有点了解的都差不多知道了.下面我们就总的看看Math对象的方法,之后再针对性的说说.
 
 Math.abs(No) 求No的绝对值
 Math.acos(No) 求No的反余玄
 Math.asin(No) 求No的反正玄
 Math.atan(No) 求No的反正切
 Math.atan2(X,Y) 求坐标值的反正切
 Math.ceil(No) 求大于等于No的最小整数
 Math.cos(No) 求No的余玄
 Math.exp(No) 求E的NO次幂
 Math.floor(No) 求小于等于No的最大整数
 Math.log(No) 求No的自然对数
 Math.max(No1,No2) 求No1和No2的最大者
 Math.min(No1,No2) 求No1和No2的最小者
 Math.pow(No1,No2) 求No1的No2次幂
 Math.random() O与1之间的随机数
 Math.round(No) 求最靠近No的整数
 Math.sin(No) No的正玄
 
 Math.ceil(No),Math.floor(No),Math.round(No)
 这三个在上面的解释中你可能还不是很明白它们的意思,那么我们随便给它们写入两个值,来看看三者返回的结果:如5.99和5.01
 Math.ceil(No):分别显示6,6
 Math.floor(No):分别显示5,5
 Math.round(No):分别显示6,5
 这样一来我们就可以一目了然了.
 在就是Math.random()的问题,事实上在实际编程中0和1之间的数用得非常少,到是整数比较常见,但我们不可能直接的到这个结果,怎么办呢?我下面就来分析一下:
 假设我们要在1到6中随机产生数字.我们可以这样看6*Math.random()+1,我们用变量来代替数字:
 total_srt*Math.random()+min_no
 其中total_srt是可选值的总数量,min_no是最小值.
 当然如果你想让计算机自己来计算总数量也可以,通常我们也是这么做,那么我们就可以把total_srt的部分替换成max_no-min_no+1.
 得到的随机数到这里还不是个整数,这时候我们就可以用Math.floor()来转换.
 综上所述我们就可以得到一个完成的关于产生随机整数的函数了:
 function random_no(min_no,max_no){
 var ini_random=(max_no-min_no+1)*Math.random()+min_no
 return Math.floor(ini_random)
 }
 是不是很简单,下面我们就来看看好了,假设我们要产生100个随机产生在1到6之间的数字:
 <script language="javascript">
 function random_no(min_no,max_no){
 var ini_random=(max_no-min_no+1)*Math.random()+min_no
 return Math.floor(ini_random)
 }
 var xiao_shu=1
 var da_shu=6
 for(counter=0;counter<100;counter++){
 document.writeln(random_no(xiao_shu,da_shu))
 }

Thirteen 发表于 2003-11-6 09:34

[

第十三天 String对象
 操作文本,这点相信大家也不是很陌生了,到现在我们已经在前面的例子中用了不少的字符串,而这些就我们所说的String对象,在我们说明这个对象前我们来看看用常规的方法建立String对象的全过程.
 var 变量名=new String(常量)
 不过从这一秒开始,你可以选择忘记上面的这段语法了,因为下面我们要给出一个一个与上面等价的例子:
 var 变量名=常量
 事实上我们完全可以忽略掉new String()的存在,相信谁都不会把var wel_come="你好!"换成多出几个字符的var wel_come=new String("你好!")吧.JS是允许忽略用new String()来构造函数的,所以我们也没有必要深究.
 接着我们来看看String对象的属性,但发现String对象属性说白了就只有两个,length和prototype,
 在两个属性都和我们Array对象中的两个属性同名,大概意思也差不多,所以我们就简单的说说好了.
 length
 作用:获取字符串的字符个数.
 语法:string_object.length
 例子:alert("你好啊!".length)
 
 prototype
 作用:自定义String对象的方法.
 语法:String.pototype.自定方法名=函数(后面不需要带圆括号)
 例子:String.pototype.wode=hanshu
 
 接着我们来看看String对象的方法
 虽然String对象的属性没几个,但是它的方法却有一堆,我们分四步来了解.
 与HTML标识相关的方法
 
 方法名等价式
 string_object.anchor(Name) <a name="Name">string_object</a>
 string_object.big() <big>string_object</big>
 string_object.bink() <bink>string_object</bink>
 string_object.bold() string_object
 string_object.fixed() <tt>string_object</tt>
 string_object.fontcolor(Color) string_object
 string_object.fontsize(Size) string_object
 string_object.italics() string_object
 string_object.link(URL) <a href="http://URL" target="_blank">string_object</a>
 string_object.samll() string_object
 string_object.strike() <strike>string_object</strike>
 string_object.sub() string_object
 string_object.sup() string_object
 
 具体的意思我们在这里就不再解释了,相信了解了HTML标识的你很快明白上面的意思了,我们主要来看看怎么运用它.例如要把你好!用JS语句写入html文件中,就可以写成
 document.write("你好!".bold())
 同样我们也可以追加两个或者两个以上的方法来控制字型.
 document.write("你好!".bold().fontcolor("#00ff00"))
 
 搜索子字符串
 
 
 string_object.indexOf(待搜索的子字符串,开始位置) 从左到右搜索子字符
 string_object.lastindexOf(待搜索的子字符串,开始位置) 从右到左搜索子字符
 
 
 我们通过这两个方法来检测string_object中的是否含有这个字符,通常我们不需要指定开始位置,不过如果你要用到的话,需要注意到一个编号的问题,如我们要搜索"H.S Workshop"中的最后一个o,用indexOf来搜索的话,我们就指定开始位置为10,怎么来的呢?看下面的对照表就知道了
 H.S Workshop
 012345678910,11
 中文也是一样的,例如:
 你好啊!
 0 1 2 3
 如果没有你要查找的字符的话自动返回-1
 再着需要注意大小写,例如我们查找"H.S Workshop"中的S,如果我们在括号中填个s的话返回值为-1
 说了这么多我们来看个实际运用的例子吧,例如我们要检测用户填写Email是不是正确,我们知道Email的关键字是@,那么我们就可以检索用户输入的地址是不是包含有@这个字符.
 <script language="javascript">
 do{
 var email_address=prompt("输入你的Email:","")
 }
 while(email_address.indexOf("@")==-1)
 </script>
 当indexOf()检索不到prompt()中包含有@的话,那么脚本就开始循环.
 
 提取子字符串
 有时候我们需要从字符串中提取一噶部分,例如用户输入的Email地址,我们可以只需要@前面的部分,或者后面的部分.这时候我们就可以通过下面的方法来完成.
 
 string_object.charAt(index) 返回index位置的字符
 string_object.charCodeAt(index) 返回index位置的字符代码
 string_object.slice(Start,End) 返回Start和End之间的字符,但不包括End位置
 string_object.split(Sep,Lim) 把string_object中的字符转换成一个数组
 string_object.substr(Start,length) 返回string_object中从Start位置开始的字符
 string_object.substring(Start,End) 返回Start和End之间的字符,但不包括End位置
 
 因为这六个方法看起来比较模糊,下面我们一个个来看看:
 首先大家比较一下下面两个例子
 alert("are you OK?".charAt(0))
 alert("are you OK?".charCodeAt(0))
 我们就会发现charAt(0)返回的是字母a, 而charCodeAt(0)返回的是97,字符代码从32到255,大家可以自己尝试.我们这里主要只讨论charAt(),我们要查找最后一个字符的时候就需要用到length属性,如下:
 var a1="are you OK?".length
 alert("are you OK?".charAt(a1-1))
 如果index位置的值是负数,或者是大于length属性的值,那就返回一个空值.
 在者大家请注意把slice(),split(),substr(),substring()区分开来,大家可以同过下面的例子来了解:
 <script language="javascript">
 var a1="areyouOK?"
 document.write(a1.slice(0,3)+" ")
 document.write(a1.split("")+" ")
 document.write(a1.substr(0,3)+" ")
 document.write(a1.substring(0,3)+" ")
 </script>
 我们看到结果除了split()所显示的以外,根本看不出区别,我们来一个个对比,split()我在其中家了个空字符,这表示一个我们把每一个字符就看成一个数组,假设我们换成"y",结果就显示出are,ouOK?
 再来对比一下slice(),substring(),我们不可以否认他们是执行一个任务,但他们的区别也是很明显的,
 我们把上面的参数改改:
 document.write(a1.slice(0,-3)+" ")
 document.write(a1.substring(0,-3)+" ")
 这时候我们看到slice()显示出来的结果是areyou,而substring()什么都没有显示!事实上我们-3的意义是除了最后三个字符以外其他的字符全部显示.当然substring()也可以实现,但我们需要利用length,如
 var a1="areyouOK?".length
 document.write(a1.substring(0,a1-3)+" ")
 而在我们知道了总的字符长度的时候,最好是使用substr().
 
 其他的方法
 
 string_object.concat(string_object2) 将string_object2连接到string_object后,string_object+string_object2等价
 string.fromCharCode(Code1,Code2...) 建立一个由代码组成的字符串
 string_object.match(string) 从string_object中搜索出匹配string子字符串的字符,建立一个包含这些匹配值的数组
 string_object.replace(sor,sod) 从string_object中搜索出匹配sor的子字符串, 并用sod字符来替换这些匹配值
 string_object.search(string) 从string_object中搜索出匹配string子字符串的字符,但只返回第一个匹配值的索引号
 string_object.toLowerCase() 将string_object全部转换成小写
 string_object.toUpperCase() 将string_object全部转换成大写

Thirteen 发表于 2003-11-6 09:34

[

第十四天 Navigator对象
 首先我们必须了解一个问题,Navjgator对象不是想前面我们所说的诸如Date,Math,String等等嵌入式对象,也不是后面我们要说的window层次对象中的一员,他是一个独立的对象.那么他用来处理什么东西呢?
 它可以为你和你的脚本提供如用户的浏览器名称,版本号,操作系统等等信息,这些都是非常实用的,你可以根据返回的信息进行一些相应的对策.
 下面我们就来看看Navigator对象的属性
 
 navigator.appCodeName 与浏览器相关的内部代码
 navigator.appMinorVersion 辅助版本号
 navigator.appName 浏览器的正式名称
 navigator.appVersion 浏览器的版本号
 navigator.cookieEnabled 检查用户是否允许使用cookie,返回true或false
 navigator.cpuClass 检测用户的CPU型号
 navigator.mimeTypes 检测浏览器支持的所有mime类型的数组
 navigator.onLine 检测浏览器当前是否在线
 navigator.platform 检测用户当前正在运行的操作系统
 navigator.plugins 检测安装在浏览器上的所有插件的数组
 navigator.systemLanguage 检测用户操作系统
 navigator.userAgent 包含appCodeName,appName,appVersion中的字符
 navigator.userLanguage 用户在自己系统上设置的语言
 navigator.userProfile 返回一个储存用户个人信息的userProfile对象
 
 今天要说的内容也全在这里了,根据上面的解释大家大概也都了解了,下面我们来对你的浏览器和系统进行一次测定吧.
 前面我们说过了for()..in的用法这里我就不在重复了,大家可以自己实现一下下面的例子:
 <script language="javascript">
 var look_array=new Array()
 var counter=0
 for(var look_name in navigator){
 look_array[counter++]=look_name
 }
 for(counter=0;counter<look_array.length;counter++){
 document.write(look_array[counter])
 document.write(" "+"=".fontcolor("#FF0000")+" ")
 document.write(navigator[look_array[counter]])
 document.write(" ")
 }
 </script>
 我返回的结果如下:
 appCodeName = Mozilla
 appName = Microsoft Internet Explorer
 appMinorVersion = ;SP1;
 cpuClass = x86
 platform = Win32
 plugins = undefined
 opsProfile = undefined
 userProfile = undefined
 systemLanguage = zh-cn
 userLanguage = zh-cn
 appVersion = 4.0 (compatible; MSIE 6.0; Windows NT 5.0; Assistant 1.0.2.4)
 userAgent = Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; Assistant 1.0.2.4)
 onLine = true
 cookieEnabled = true
 mimeTypes = undefined
 
 首先我必须告诉大家我的操作系统是windows 2000,浏览器是Microsoft Internet Explorer6.0sp1
 这时候你是不是发现了一个问题,为什么appVersion的返回值是4.0,不是说他的返回值是版本号的吗?难道你的浏览器不是IE6吗?首先我们不能不遗憾的说名IE最大只能返回4.0的结果,但真正的版本号也并不是不在其中,相信你也看见了在MSIE后面紧跟着6.0,这时候昨天我们讲的东西就可以派上用场了.
 <script language="javascript">
 var nav_q=navigator.appVersion.indexOf("MSIE")
 if(nav_q!=-1){
 var nav_a=navigator.appVersion.slice(nav_q+5,nav_q+8)
 }
 document.write(navigator.appName+nav_a+navigator.appMinorVersion)
 </script>
 显示出来的结果是
 Microsoft Internet Explorer6.0;SP1;
 这样一来相信没有谁可以误解了吧.
 
 事实上测试操作系统的方法也大同小异,我们看下面:
 <script language="javascript">
 var nav_q=navigator.appVersion.indexOf("Windows NT 5.0")
 if(nav_q!=-1){
 document.write("windows 2000")
 }
 </script>
 这里我们需要知道就是每个操作系统的可能值,下面我就把每个windows操作系统返回的可能值例举出来:
 windows95
 "windows 95"
 "win95"
 windows98
 "windows 98"
 "win98"
 windowsNT
 "windows NT"
 "winnt"
 windows ME
 "win 9X.4.90"
 windows 2000
 "windows NT 5.0"
 "winnt 5.0"
 windows XP
 "windows NT 5.1"
 "winnt 5.1"

Thirteen 发表于 2003-11-6 09:34

[

第十五天 window对象
 从本章开始我们就已经结束对JS语言进行了解的过程,之前所说的东西都是语言本身的部分,现在开始我们就开来编写一些真正有用的脚本.
 window对象是JS对象模型中层次结构最高的对象,之后我们所说的内容都直接或间接的与它有关.这个对象不是对浏览器的编程,而是用来控制浏览器显示内容的实际窗口.
 
 废话少说,现在我们就开始了解这个对象吧.
 首先我们必须知道如何在提个脚本中引用window对象,当前我们还不是很了解,通常可以用如下例格式来引用window对象的属性和方法:
 window.属性名
 window.方法名
 慢慢的你就会发现其实window兑现是JS中默认的对象,这就意味产在没有碰到指定对象的属性和方法时,JS都会把其看做是window对象的属性和方法,也就是说我们完全可以去掉window这个关键词,用下面的格式引用.
 属性名
 方法名
 
 接下来我们就通过大量实用的例子来一个个的了解这个对象的属性和方法.
 在平时的网页制作中我们常常会遇到页面尺寸的问题,用户选择什么样的分辨率来浏览你的网页是你无法确定的,通常我们会考虑一个折衷的办法,假定用户的分辨率是800*600,或者设定表格的相对值.事实上我们还可以常识用JS来实现这一效果.
 实现这一个功能的属性叫做screen,他可以很明确的指出用户当前的显示器设置,需要注意的是这个screen对象没有方法和属性.下面我就把它的属性列举出来:
 
 scrren.availHeight 用户屏幕可用的最大高度
 scrren,availWidth 用户屏幕可用的最大宽度
 scrren.height 用户屏幕的实际高度
 scrren.width 用户屏幕的实际宽度
 scrren.colorDepth 用户显示器上每个象素可用的位数
 下面我们就来实现一下,假设我们想让用户在不同的分辨率下看到不同的背景色彩:
 <script language="javascript">
 if(screen.width==640){
 document.write("<body bgcolor='#00ff00'>")
 }
 else if(screen.width==800){
 document.write("<body bgcolor='#ff0000'>")
 }
 else{
 document.write("<body bgcolor='#0000ff'>")
 }
 </script>
 在状态栏中显示信息相信你已经见过不少了,之前我们在讲事件的时候也提到过一点,下面我们就来详细的介绍一下.
 实现这一功能主要是通过status属性,我们直接看个例子来说明如何使用它:
 <body onLoad="status='welcome to H.S Workshop'">
 它是一个可读写的属性,所以我们在其后面加上我们要用到的设定值就可以了,并没有什么难于理解的地方.
 还有一个属性defaultStatus,这是对状态栏默认显示的设置,通常我们看到一个页面载入完成之后会在状态栏中显示出完成的字样.我们就可以用这个属性来改变它.这时候你会发现两者区别并不大甚至可以说没有什么区别,实际操作我们用defaultStatus来设置默认的显示,而用status设置链接的显示.
 
 时间是控制事件发生的第三种方法,在JS中就提供了时间控制的方法.
 setTimeout
 我们通过这个方法设置一个JS超时,下面是他的语法:
 setTimeout(EXP,MILL,ARG1,ARG2....)
 EXP:将要执行的表达式或函数.
 MILL:设置时间(豪秒为单位)
 ARG1,ARG2....:当EXP为函数的时候,传递给函数的参数.
 下面我们就来看一条应用吧.
 <script language="javascript">
 function exp_val(){
 document.write("<body bgcolor='#0000ff'>")
 }
 setTimeout("exp_val()",5000)
 </script>
 五秒之后页面自动转换色彩.
 这样用户还不可以控制,如果你想让用户参与进来的话,我们就可以使用clearTimeout()方法.我们只要含有setTimeout()的变量放进它的圆括号中,就可以完成控制了.
 我们看下面的例子:
 <html>
 <head>
 <title>H.S Workshop</title>
 <script language="javascript">
 function exp_val(){
 document.write("<body bgcolor='#0000ff'>")
 }
 var time_id=setTimeout("exp_val()",5000)
 function cancel_time(){
 clearTimeout(time_id)
 status="颜色变不了了哦"
 }
 </script>
 </head>
 <body>
 <a href="http://#" target="_blank">点我就取消了</a>
 </body>
 </html>
 在这个基础上,JS有了在一定的时间间隔下重复执行代码和停止重复执行的方法,setInterval()和clearInterval(),和前面timout方法的语法结构大同小异,只是需要注意的是setInterval()中的MILL是间隔的时间.
 <html>
 <head>
 <title>H.S Workshop</title>
 <script language="javascript">
 var counter=10
 function countdown(){
 status=counter--
 }
 var inter_id=setInterval("countdown()",1000)
 function cancel_lnv(){
 clearInterval(inter_id)
 }
 </script>
 </head>
 <body>
 <a href="http://#" target="_blank">点我就取消了</a>
 </body>
 </html>
 这个例子让我们看到了一个从十开始倒数的动态效果.

Thirteen 发表于 2003-11-6 09:35

[

第十六天窗口控制
 我想不需要用过读取的语言来解释这是怎么一会事你也已经明白了,下面我们就直接开始今天的正题.
 我们在HTML中用target参数来控制打开新窗口的确不错,但少量内容放在网页中显得很不协调,但重新开个全屏窗口好象又显得浪费资源,有了JS之后,我们就有个弹出窗口来装载这些信息了.
 window.open()实现弹出菜单的方法,也是JS中最复杂的方法之一,现在我们就从最简单的开始:
 window.open(URL,window_name)
 这是open最基本的语法,我们通过调用一个外部连接实现一个弹出窗口,需要注意的是window_name不是一个可选参数,如果你的连接进来的窗口有了标题栏,这项就应该设置为空字符.下面看个例子:
 <body onLoad="window.open('http://hsworkshop.51.net','')">
 当你打开当前页的时候,会自动在新窗口打开另一个地址的页面.同样我们还可以用他来取代target的作用,下面就是个例子:
 <a href="http://#" target="_blank">H.S Workshop</a>
 我们把href设置为空链接,点击后跳转到<a href="http://hsworkshop.51.net" target="_blank">http://hsworkshop.51.net</a>.
 说到这里我想说一个window对象的属性name,他用来显示出window_name的值.
 言归正转,如果只是为了弄一个上面例子中的窗口,选择JS显然不划算,我们应该实现更多的效果,例如控制新窗口的尺寸和位置.
 window.open(URL,window_name,"height=x1,width=x2,left=x3,top=x4')
 height:新窗口的高度
 width:新窗口的宽度
 left:新窗口在屏幕上的列坐标
 top:新窗口在屏幕上的行坐标
 我们来看个例子说明好了
 <body onLoad="window.open('http://hsworkshop.51.net','','height=300,width=400,left=500,top=200')">
 同过这个例子我们看到一个新窗口以400*300的大小出现在屏幕500*200的位置,无论你怎么试,最终它都会以同样的大小出现在同样的位置.
 下面我们来看看怎么在用户屏幕的中心显示出一个窗口.
 我们知道用户屏幕的中心点是用高和宽分别除上2得到的点,在分别减去窗口本身的大小除2,假设用户当前的屏幕大小为800*600,我们要显示一个300*200的窗口,我们可以得到[(800/2-300/2),(600/2-200/2)]
 前面我们知道了如何获得用户屏幕大小,下面就来看看我们怎么实现
 <script language="javascript">
 function open_window(){
 var window_width=300
 var window_height=200
 var window_left=(screen.availwidth/2)-(window_width/2)
 var window_top=(screen.availheight/2)-(window_height/2)
 var window_val="height="+window_height+",width="+window_width+",left="+window_left+",top="+window_top
 window.open('http://hsworkshop.51.net','',window_val)
 }
 </script>
 从这个例子中我们发现整个窗口只剩下了显示区没有了其他的元素,这是因为你缺省了每个元素开或者关的设置,浏览器就假定他们都是关闭的,因此不显示出来.下面我们就来看看如何启用他它们.
 
 directories 链接工具栏
 location 地址工具栏
 menuber 文字菜单栏
 resizable 边框或用户能调整窗口尺寸的其他窗口元素
 scrollbars 卷动条
 status 状态栏
 toolbar 工具栏
 
 当我们要使用这些元素的时候,我们可以如下面例子的形式来使他显示.
 window.open('http://hsworkshop.51.net','','toolbar,height=300,width=400')
 window.open('http://hsworkshop.51.net','','toolbar=yes,height=300,width=400')
 window.open('http://hsworkshop.51.net','','toolbar=1,height=300,width=400')
 三者任选其一都可以使这个元素显示,当我们要使用几个元素的时候同样只要用逗号隔开就可以了.
 有时候我们需要在二级页面调用部分一级页面的内容,或者我们想用户在看完二级弹出页面之后,可以把焦点换给一级页面,这时候我们就可以通过window.opener这个属性来实现.下面我们就来看个例子:
 我们在一级页面中,写如下列代码:
 <a href="http://#" target="_blank">点这里打开新窗口</a>
 这条相信大家都不会陌生吧,我就不多解释了,下面我们看在二级页面中写点什么.
 <html>
 <head>
 </head>
 <body>
 <script language="javascript">
 document.write(opener.location)
 </script>
 <a href="http://#" target="_blank">返回到一级页面(但不关闭当前页)</a>
 </body>
 </html
 这里我把两条放在了一起,大家不要误解了其中的意思,我们一条条的来看:
 <script language="javascript">
 document.write(opener.location)
 </script>
 在这里我们通过opener返回了一级页面location属性的值,写入二级页面中.当然我们还可以以同样的形式来返回更多一级页面中的值.
 <a href="http://#" target="_blank">返回到一级页面(但不关闭当前页)</a>
 这也是opener比较常用的形式,我们知道focus()是获取焦点,当我们点击这个链接的时候,opener就告知计算机将焦点换给原始窗口,即一级页面.
 
 知道用JS来开新窗口,同样我们也可以用JS来关闭一个窗口,JS提供给我们两种方法,一是在原始页面中关闭,一是在新窗口中关闭.
 在原始窗口中关闭
 window_name.close()
 例如我们在一级窗口中加入下列语句
 <html>
 <head>
 </head>
 <script language="javascript">
 var new_window
 function new_win(){
 new_window=window.open("http://hsworkshop.51.net","")
 }
 function close_win(){
 new_window.close()
 }
 </script>
 <body onLoad="new_win()">
 <a href="http://#" target="_blank">关闭弹出页面</a>
 </body>
 </html>
 事实上在新窗口中关闭的方法在网页制作中比较常见一些.
 这里我们有两种方法,通常我们都用self.close()如:
 <a href="http://#" target="_blank">关闭</a>
 另一种是window.close()如:
 <a href="http://#" target="_blank">关闭</a>
 
 接下来我们看看另外一些关于窗口的技术,个人感觉这些技术在专业的网站建设上实用性不是很大,不过了解也无妨.
 移动窗口
 moveTo(colum,row)
 colum新的列坐标
 row新的行坐标
 下面就看个例子:
 <html>
 <head>
 <title>H.S Workshop</title>
 <script language="javascript">
 var new_window
 var window_width=300
 var window_height=200
 function open_window(){
 var window_num="height="+window_height+",width="+window_width
 new_window=window.open("","",window_num)
 }
 function move_window(hor_edge,ver_edge){
 if(window_action()){
 var column=0
 var row=0
 if(hor_edge=="left"){
 column=0
 }
 else{
 column=screen.availWidth-window_width
 }
 if(ver_edge=="top"){
 row=0
 }
 else{
 row = screen.availHeight - window_height
 }
 new_window.moveTo(column,row)
 }
 else{
 alert("你忘了先开个窗口了")
 }
 }
 function window_action(){
 if(!new_window){
 return false
 }
 else if(new_window.closed){
 return false
 }
 else{
 return true
 }
 }
 function close_window(){
 if(window_action()){
 new_window.close()
 }
 }
 </script>
 </head>
 
 <body>
 <a href="http://java script: void(0)" target="_blank">打开新窗口</a>
 <a href="http://java script: void(0)" target="_blank">移动窗口</a>
 <a href="http://java script: void(0)" target="_blank">移动窗口</a>
 <a href="http://java script: void(0)" target="_blank">移动窗口</a>
 <a href="http://java script: void(0)" target="_blank">移动窗口</a>
 <a href="http://java script: void(0)" target="_blank">关闭窗口</a>
 </body>
 </html>
 
 但指定量移动窗口
 也许你也见过窗口在屏幕上移动,这并不是什么高深的技术,moveBy()就是实现这一技术的方法,我们看个简单的例子:
 <script language="javascript">
 var interval_id
 var counter=400
 self.moveTo(counter,counter)
 interval_id=setInterval("move_window()",50)
 function move_window(){
 moveBy(-1,-1)
 counter--
 if(counter<0){
 clearInterval(interval_id)
 }
 }
 </script>
 这里我门可以想想FLASH中时间轴的概念,首先我们用self.moveTo(counter,counter)来是窗口定位在屏幕400,400的初使位置,在用setInterval()来控制时间,在这里也就是每间隔50毫秒就执行一次函数move_window(),在这个函数里moveBy()被执行一次,窗口就向上移动一个象素,counter的值也相应的减少1,换成FLASH就难于理解了,我们假设self.moveTo(counter,counter)位置的窗口是一个对象,setInterval("move_window()",50)则是着这个FLASH的时间轴,move_window()则是这个FLASH的单帧动作.
 
 同样我们还可以用JS来调整窗口尺寸,和按指定量调整窗口尺寸,个人感觉都是与移动窗口一样的华而不实的东西.
 resizeTo()
 与后面的方法比起来,这个方法在实际应用中出现的频率高出很多.
 <script language="javascript">
 function move_window(){
 var new_window=window.open("","","height=400,width=640")
 new_window.resizeTo(300,200)
 }
 </script>
 这是个最简单的应用,我们从这里就可以很明确的了解到resizeTo()的语法:
 window_name.resizeTo(width,height)
 指定量调整窗口尺寸的方法如下:
 window_name.resizeBy(width,height)
 看个例子就可以很清楚的了解到它的效果了.
 <script language="javascript">
 var interval_id
 var counter=400
 self.resizeTo(counter,counter)
 interval_id=setInterval("move_window()",50)
 function move_window(){
 resizeBy(-1,-1)
 counter--
 }
 </script>

Thirteen 发表于 2003-11-6 09:36

[

第十七天 Location对象与Histoy对象
 在开始今天的内容之前,我们先来看一张window对象的结构表方便大家理清头绪.
 
 见<a href="http://hsworkshop.51.net/images/1111.gif" target="_blank">H.S Workshop</a>
 
 从图表中我们可以看出,今天我们要说的内容既是window对象的属性,又是一个对象,换句话说今天我们所讨论的对象是window对象的子对象.
 了解了这个概念之后我们就开始今天的内容吧.
 Location属性,这部分我们来看看Location做为window对象的属性时有什么意义.下面是引用着个对象的语法:
 window_name.location=URL
 之前我们了解窗口控制的时候,了解到location是地址栏,在这里我们把他看成是地址栏中显示的地址,
 例如我们想在弹出窗口打开5秒之后改变它的地址
 <script language="javascript">
 var new_window
 function new_win(){
 new_window=window.open("http://hsworkshop.51.net","","width=400,height=400")
 }
 setTimeout("win_loc()",5000)
 function win_loc(){
 new_window.location="about:blank"
 }
 </script>
 至于怎么查看本窗口地址在前面我们已经用个了这里重复一下:
 <script language="javascript">
 document.write(location)
 </script>
 下面我们来看看location对象,和以前一样我们先来看看他的属性:
 我们以这个地址为例<a href="http://www.ddc.com.cn:80/bbs/showthread.php?s=&threadid=17918" target="_blank">http://www.ddc.com.cn:80/bbs/showthread...&threadid=17918</a>
 <script language="javascript">
 location="http://www.ddc.com.cn:80/bbs/showthread.php?s=&threadid=17918"
 alert("protocol属性"+location.protocol+"\n"+
 "hostname属性"+location.hostname+"\n"+
 "post属性"+location.port+"\n"+
 "host属性"+location.host+"\n"+
 "pathname属性"+location.pathname+"\n"+
 "hash属性"+location.hash+"\n"+
 "search属性"+location.search+"\n"
 "href属性"+location.href+"\n")
 </script>
 我们看到各个属性把地址分成若干部分,其中href是location的默认属性,也就是说window_name.location.href
 window_name.location
 是等价的.
 
 在来看看关于他的方法,
 reload()重新载入页面
 也就是我们平时刷新网页一样,只是用JS 做同一件事而已.
 这个方法有个可选参数,
 flase:从保存页面的缓存中载入页面
 true:从服务器上载入页面
 
 replace()用历史列表取代页面
 也就是改变后退出现的页面,假设有三个页面,我们从1点击到2,在2中加入replace("3.htm")到3,在3中点后退返回的就是页面1.
 
 上面的方法涉及到部分与历史记录相关的东西,现在我们深入的了解一下.
 history对象
 相信从replace()这个方法的应用已经改变了你认为返回就是后退就只能后退到上一页的概念了吧,下面我们以三个页面之间产生的轨迹来看看:
 1)启动浏览器载入1.htm
 向前页:空
 当前页:1.htm
 向后页:空
 2)从导航链接到2
 向前页:空
 当前页:2.htm
 向后页:1.htm
 3)从导航链接到3
 向前页:空
 当前页:3.htm
 向后页:1.htm,2.htm
 4)按后退返回2.htm
 向前页:3.htm
 当前页:2.htm
 向后页:1.htm
 5)按后退返回1.htm
 向前页:3.htm,2.htm
 当前页:1.htm
 向后页:空
 6)从导航链接到4
 向前页:空
 当前页:4.htm
 向后页:1.htm
 在第6步中我们就无法取得2和3的页面了,这点很重要.理解了这点我们就可以看看history对象的方法了.
 它的属性只有一个length,告诉你历史记录中的总数,但没有什么实际意义.下面我们就来看看它提供的方法:
 首先我们必须知道我们用它的方法可以模拟出向前和后退,但是我们无法精确的了解用户返回到了那一页.
 back()
 作用:模拟后退按钮.
 语法:history.back()
 
 forward()
 作用:模拟向前按钮.
 语法:history.forward()
 
 go()
 作用:模拟向前或者后退按钮边的点击菜单.
 语法:history.go(NO.)
 其中No.是一个整数值,根据数字大小来确定前后,为负数时则向后,为零时刷新当前页,为正数时向前.

Thirteen 发表于 2003-11-6 09:37

[

第十八天 frame对象
 首先我很确定你没有把HTML标识语言中的东西丢了,在了解今天的内容之前建议你复习一下我们在HTML中提到过的框架标识.
 也许你在这之前已经实验过在框架中放进不少的页面了,但同样你也发现那样做的实际意义并不大,
 每个框架中的内容都是独立的,不可能做到相互影响.现在我们就来给框架赋予实际的意义.
 为了方便理解,我们先对框架进行一个系统的描述,我们把包含所有框架的页面称为框架集页面,也就是父窗口,而每一个<frame>标识创造的框架,我们称之为子框架,也就是子窗口.我只所以用窗口来形容他们是因为每个子框架都和父框架一样也是一个window对象.换句话说框架的应用就是多个window对象放在一个页面中显示.
 在昨天我们已经知道怎么去改变一个窗口的location属性去控制另一个窗口的location了,那么我们可不可以在框架中用一个子窗口去控制另一子窗口的显示呢?答案是肯定的.虽然我不喜欢用这种方法,因为这样一定程度上会造成网站的浏览速度减慢,但我不得不承认这样带来的方便.
 言归正传,我们先不去考虑速度的问题,我们先来看看框架带给我们什么.
 在框架中我们有三种引用的方式:从父窗口到子窗口,从子窗口到父窗口,从子窗口到子窗口.
 首先我们看看从父窗口到子窗口.
 也就是说在父窗口中引用子窗口的内容.通用的语法如下:
 window.frame_name
 这里的window一样是可以省略的关键词,例:
 <frameset rows="50%,50%" onLoad="alert(frame_a.location)">
 <frame src="http://hsworkshop.51.net/index2.html" name="frame_a" >
 <frame src="http://hsworkshop.51.net/index1.html" name="frame_b">
 </frameset>
 我们看到在这里我们可以调用frame_a的地址弹出个消息框.你是不是想到了什么呢?呵呵~我们继续往下看.
 
 从子窗口到父窗口
 同样点击我们也可以在子窗口中调用父窗口的内容,通用的语法如下:
 window.parent
 同样的我们也可以省略到window这个关键词,例:
 创建一个index1.html.写入下列语句.
 <script language="javascript">
 document.write(parent.location)
 </script>
 接着我们看框架页面中显示了些什么.
 <frameset rows="50%,50%">
 <frame src="http://hsworkshop.51.net/index2.html" name="frame_a" >
 <frame src="index1.html" name="frame_b">
 </frameset>
 
 最后我们来看从子窗口到子窗口:
 这就是从这个在这个子窗口中显示另一个子窗口的内容,通用的语法如下:
 window.parent.frame_name
 这里的window关键词依然可以省略,例
 创建一个index2.html,写入下列语句.
 <script language="javascript">
 document.write(parent.frame_b.location)
 </script>
 接着是框架页中:
 <frameset rows="50%,50%">
 <frame src="index2.html" name="frame_a" >
 <frame src="index1.html" name="frame_b">
 </frameset>
 同过上面的这些例子你已经想到了怎么充分利用框架的特点了吧,呵呵,别着急,这只是最简单的,在你理清楚头绪之后我们就要开始了解怎么嵌套框架了.
 
 上面我们看到的在一个框架集中的操作,根据这个模式,就是再加上几个子框架也没有关系,而下面我们要了解的是如何在一个框架集中,控制包含在内的另一个框架集.
 首先我们在index2.html中写入下面的语句:
 <frameset cols="50%,50%">
 <frame src="index3.html" name="frame_c" >
 <frame src="index4.html" name="frame_d">
 </frameset>
 下面我们来整理一下头绪:
 首先框架页面frame1.html中包含了两个框架frame_a,frame_b,其中frame_a有引用了一个框架页面index2.html,我们把它称之为frame1.html的子框架,在index2.html中有包含了两个框架frame_c,frame_d,我们把这两个框架称之为frame1.html的孙框架.而frame1.html是相对于c,d的祖框架,
 而b就是c,d的叔框架.
 呵呵有了名字就好办了,下面我们要了解的就是怎么从孙框架到祖框架,从侄框架到叔框架,从祖框架到孙框架,从叔框架到侄框架.
 其实万变不离其宗,我们一样的是使用parent.大体上和父子框架的控制差不多,只是多了个名字而已.
 从祖框架到孙框架
 window.frame_name.child_name
 例:
 frame_a.frame_c.location
 
 从叔框架到侄框架
 window.parent.brother_name.child_name
 例:
 parent.frame_b.frame_c.location
 
 孙框架到祖框架
 window.parent.parent
 例如:
 parent.parent.location
 
 从侄框架到叔框架
 window.parent.parent.brother_name
 例如:
 parent.parent.frame_b.location
 
 最后我提供给你一个top属性,他无论是你在那个框架里,都会指向一级框架,我们用他来取代window.parent.parent,会发现得到的是一样的效果.唯一的缺陷就在于如果你的站点被别的站点显示出来的时候,top将会指向别的站点的一级框架.
 呵呵~本来想写几个例子,但想来想去都没有什么比较难的,感觉除了灵活变通的东西以外就没有其他的东西可写了,大家可以自己尝试着写写 :) (你是懒吧~~~^V^)

Thirteen 发表于 2003-11-6 09:37

[

第十九天 document对象
 通过前面，我们从比较直观的角度了解window对象，现在我们来看下一级，也就是显示在窗口中的对象,这也就是我们今天要说的document对象.
 我想在前面我们已经见过了不少document的一个方法的应用了吧,为了保持一种阅读习惯，我们还是先从这个对象的属性说起.下面我把在html中比较常用的属性说明一下:
 
 activeElement 当文档有了焦点时，返回有焦点的对象
 alinkColor 相当于<body>中的alink参数
 anchors 返回文档中所有锚点组成的数组
 applets 返回文档中所有JAVA小程序组成的数组
 bgColor 相当于<body>中的bgcolor参数
 cookie 设置cookie
 defaultCharset 文档使用的默认字符集
 domain 返回或设置文档的默认域名
 embeds 返回文档中所有嵌入对象组成的数组
 fgcolor 相当于<body>中的fgcolor参数
 fileCreatedDate 返回文档创建时的日期
 fileModifiedDate 返回文档最后一次修改的日期
 fileSize 返回文档的字节大小
 forms 返回文档中所有表单组成的数组
 images 返回文档中所有图象组成的数组
 lastModified 返回文档最后一次修改的日期
 linkcolor 相当于<body>中的link参数
 links 返回文档中所有链接组成的数组
 location 返回或设置文档的地址
 nameProp 返回文档的文件名
 readyState 返回文档的当前状态
 referrer 返回用户用于连接到当前文档的地址
 scripts 返回文档中所有脚本组成的数组
 title 返回或设置<title>标识
 vlinkColor 相当于<body>中的vlink参数
 
 接下来的就是document对象的相关的方法，同样我也只列张表来说明:
 
 clear() 清除文档中的所有文本和标识
 close() 关闭用于向文档写如文本的输出流
 open() 打开一个输出流向文档中写入文本
 write() 向文档中写入数据
 writeln() 向文档中写入数据,后面跟一个回车
 
 OK~今天的内容到此结束了，你或许觉得例子越来越少或者说越来越简短，呵呵~那是因为越到后期实际操作就越显得重要，我不想给你套个框子让你觉得这个东西只可以干这件事情，需要你自己去动脑想想我可以用这个来实现什么，这也是我自己的理念，教程应该是告诉大家这个东西可以做些什么，而不是说明这个东西只能做这一件事。好了不说费话了，现在你就开始行动吧。

Thirteen 发表于 2003-11-6 09:38

[

第二十天 link对象和anchor对象
 我们不得不承认链接是WEB页面于其他媒体最大的区别,在html中我们已经知道用<a>来实现页面与页面之间的连接了,现在我们来看看如何用JS实现.
 先来看看如何在一个链接中使用函数来代替URL的位置
 我们知道<a href="http://URL" target="_blank">可以产生一个链接,现在我们用JS函数来取代URL的位置同样的合法的,通用的格式如下:
 <a href=\"javascript: function_name(ARG)\">
 其中ARG是可选的值,当然有时候我们不想链接做任何事情,我们就可以用void()操作符来禁止连接的默认行为,如
 <a href=\"javascript: void(0)\">
 当然更多的时候,为了方便我们还是使用#符号来控制,(但如果页面中设置有锚点的话,最好还是使用void()操作符)
 
 首先我们需要知道link对象是具有一个双重身份的对象,可以说每一个link对象也是一个location对象,所有location对象具有的属性,link对象也都具有.(当然方法除外)下面我就只把location对象不包含的属性列举出来:
 
 target 相当于<a>标识中的target参数
 innerHTML 在<a>和</a>之间的文本
 
 因为没有关于link对象的方法,关于link对象的操作主要集中在它的事件上,下面是link对象支持的事件:
 Click,Dbcilck,KeyDown,KeyPress,KeyUp,MouseDown,MouseOut,MouseOver,MouseUp
 很多我们在之前已经说过了,这里我们主要来看看MouseOut和MouseOver.
 MouseOut:当鼠标从链接上移开.
 MouseOver:当鼠标移动到链接上.
 用这两个事件我们可以产生一些如鼠标翻转图片的效果.明天我们再详细的讨论这个问题.
 再看看Anchor对象,应该说和链接关系最亲的应该就是锚点了.怎么定义一个锚点相信不要在重复了,下面我们就直接来看看关于他的属性.
 
 name 相当土<a>标识中的name参数
 innerHTML 在<a>和</a>之间的文本

Thirteen 发表于 2003-11-6 09:38

[

第二十一天 Image对象
 图形元素在网页中的应用我想在这里就没有必要重复了,下面我们就来看看JS可以在图形上面做些什么事情.
 同样,我们先来看看image对象的属性 :
 
 borger 相当于<img>标识中的borger参数
 complete 图形加载完成返回true值,反之返回flase值
 height 相当于<img>标识中的height参数
 hspace 相当于<img>标识中的hspace参数
 lowsrc 相当于<img>标识中的lowsrc参数
 name 相当于<img>标识中的name参数
 src 相当于<img>标识中的src参数
 vspace 相当于<img>标识中的vspace参数
 width 相当于<img>标识中的width参数
 
 同样的image对象也不具备方法,更多的是在事件上的应用,主要针对图片来说的三个事件有以下三种:
 Abort,Error,Load
 Abort:当图象下载被取消时
 这很容易理解,当图片未能下载完成时用户按停止或者跳转到其他页面,就触发abort事件.
 Error:当图片载入失败时
 这和Abort比较相似,只是当图片完全不能被浏览器载入的时候才发生的事件
 
 load:当图片完全载入时
 当图片完全载入之后发生的事件.
 
 其实到这里我们今天的内容就算完了,只是觉得昨天我们说MouseOut和MouseOver时曾提到在image上的应用,这里我就举个比较流行的效果来说明了:
 我们长会看见许多网站中的超链接按钮可以翻转色彩,在这里我们就用JS是实现看看.
 首先我们应该有两张图片,为了方便理解就建议用同等大小的两张图片,一张黑一张白,我们假设黑的名称为1.gif,白的名称为2.gif.
 下面我们就一步完成了.
 <a href="http://javascript;void(0)" target="_blank">
 <img src=\"1.gif\" name=\"Image1\">
 </a>

Thirteen 发表于 2003-11-6 09:39

[

第二十二天 form对象
 之前我们在与用户互交中间提及了几个得到用户传递信息的方法,我们不得不承认那是些有效的方法,但是我们也看到它们返回的信息量是有限的,今天我们要了解的对象就是如何返回更多的信息,这也是一个网站互交的核心.
 我们来看看关于form对象的属性:
 
 action 设置提交表单的URL
 elements 返回一个包含表单定义的所有域的数组
 encoding 返回或设置表单的MIME类型
 length 返回由表单定义的域的数目
 method 返回将表单提交给服务器的方法
 name 返回表单的名称
 target 返回包含表单的框架名称
 
 当然我们也知道一个表单最重要的部分并不上上面我们所说的,而更多的应该是表单域的操作,什么是表单域呢?大家回可以顾一下HTML基础教程中的表单标识,这里就不在细说了.
 接下来我们先来看看表单域的公共属性:
 
 form 返回包含域的form对象
 name 返回域的名称
 type 返回域的类型
 value 返回域的value
 
 在者是文本区域对象的属性,方法和事件
 
 属性方法事件
 defaultValue blur() Blur
 focus() change
 handleEvent() focus
 select() KeyDown
 KeyPress
 KeyUp
 Select
 
 其中defaultValue属性表示返回<input>标识中的Value属性指定的值.
 到这里我们就结束了对JS语言的了解,但了解并不等于熟练哦,编程的真正的意义在于把这些东西合理的组合起来,这也就是编程的技巧,这就需要大家动动脑筋了哦~ <img src='images/smiles/smile.gif' smilietext=':)' border='0' style='vertical-align:middle' alt=':)' />

页: [1]

【开放注册】苹果手机软件下载论坛|中国苹果用户网|苹果BT下载种子torrent发布's Archiver

[

[

[

[

[

[

[

[

[

[

[

[