2007年1月31日随笔档案 - lxsohu

下面就要进入JS高级学习的阶段了，努力！~~~

除了JS中一些内置的对象之外，你还可以用JS访问和操作HTML DOM对象

下面一一介绍，并用于学习HTML DOM对象，呵呵，大家别笑话我，这个就是一个小插曲把，以后我换会继续学习，DOM

Object	Description
Window	The top level object in the JavaScript hierarchy. The Window object represents a browser window. A Window object is created automatically with every instance of a <body> or <frameset> tag
Navigator	Contains information about the client's browser
Screen	Contains information about the client's display screen
History	Contains the visited URLs in the browser window
Location	Contains information about the current URL

ＨＴＭＬ　ＤＯＭ

他是一个Ｗ３Ｃ的标准，是Document Object Model的缩写，是操作，ＨＴＭＬ文档的一个标准，

Object	Description
Document	Represents the entire HTML document and can be used to access all elements in a page
Anchor	Represents an <a> element
Area	Represents an <area> element inside an image-map
Base	Represents a <base> element
Body	Represents the <body> element
Button	Represents a <button> element
Event	Represents the state of an event
Form	Represents a <form> element
Frame	Represents a <frame> element
Frameset	Represents a <frameset> element
Iframe	Represents an <iframe> element
Image	Represents an <img> element
Input button	Represents a button in an HTML form
Input checkbox	Represents a checkbox in an HTML form
Input file	Represents a fileupload in an HTML form
Input hidden	Represents a hidden field in an HTML form
Input password	Represents a password field in an HTML form
Input radio	Represents a radio button in an HTML form
Input reset	Represents a reset button in an HTML form
Input submit	Represents a submit button in an HTML form
Input text	Represents a text-input field in an HTML form
Link	Represents a <link> element
Meta	Represents a <meta> element
Option	Represents an <option> element
Select	Represents a selection list in an HTML form
Style	Represents an individual style statement
Table	Represents a <table> element
TableData	Represents a <td> element
TableRow	Represents a <tr> element
Textarea	Represents a <textarea> element

JS中的数组对象，他用于使用一个变量名字存储一组值，

例子：这个例子是创建一个数组，并分配了数值，最后打印出其中的值，

<html>
<body>
<script type="text/javascript">
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (i=0;i<mycars.length;i++)
{
document.write(mycars[i] + "<br />")
}
</script>
</body>
</html>

下面是一个for...in，怎么用他来循环便利数组中的每个元素呢？

<html>
<body>
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>
</body>
</html>

下面是一个连接两个数组的方法concat()

<html>
<body>
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "Jani"
arr[1] = "Tove"
arr[2] = "Hege"
var arr2 = new Array(3)
arr2[0] = "John"
arr2[1] = "Andy"
arr2[2] = "Wendy"
document.write(arr.concat(arr2))
</script>
</body>
</html>

下面是一个join()方法，他是把一个数组中所有的元素方到一个字符串中，，其中可以指定标点符号例子：

<html>
<body>
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "Jani"
arr[1] = "Hege"
arr[2] = "Stale"
document.write(arr.join() + "<br />")
document.write(arr.join("."))
</script>
</body>
</html>

下面一个是分类，区别的sort()，他用于字面的，或者是数字的下面有两个例子来加以区别：

<html>
<body>
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "Jani"
arr[1] = "Hege"
arr[2] = "Stale"
arr[3] = "Kai Jim"
arr[4] = "Borge"
arr[5] = "Tove"
document.write(arr + "<br />")
document.write(arr.sort())
</script>
</body>
</html>

第二个

<html>
<body>
<script type="text/javascript">
function sortNumber(a, b)
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
</script>
</body>
</html>

上面这个我还没有理解，希望大家，指导我一下，谢谢

Array Object Methods

FF: Firefox, N: Netscape, IE: Internet Explorer

Method	Description	FF	N	IE
concat()	Joins two or more arrays and returns the result	1	4	4
join()	Puts all the elements of an array into a string. The elements are separated by a specified delimiter	1	3	4
pop()	Removes and returns the last element of an array	1	4	5.5
push()	Adds one or more elements to the end of an array and returns the new length	1	4	5.5
reverse()	Reverses the order of the elements in an array	1	3	4
shift()	Removes and returns the first element of an array	1	4	5.5
slice()	Returns selected elements from an existing array	1	4	4
sort()	Sorts the elements of an array	1	3	4
splice()	Removes and adds new elements to an array	1	4	5.5
toSource()	Represents the source code of an object	1	4	-
toString()	Converts an array to a string and returns the result	1	3	4
unshift()	Adds one or more elements to the beginning of an array and returns the new length	1	4	6
valueOf()	Returns the primitive value of an Array object	1	2	4

Array Object Properties

Property	Description	FF	N	IE
constructor	A reference to the function that created the object	1	2	4
index		1	3	4
input		1	3	4
length	Sets or returns the number of elements in an array	1	2	4
prototype	Allows you to add properties and methods to the object	1	2	4

js中 Date对象

这个对象主要是用于操作日期和时间的

例子：用Date()得到当前的日期

<html>
<body>
<script type="text/javascript">
document.write(Date())
</script>
</body>
</html>

下面一个getTime()

用他来计算从１９７0年一共过了多少年

<html>
<body>
<script type="text/javascript">
var minutes = 1000*60
var hours = minutes*60
var days = hours*24
var years = days*365
var d = new Date()
var t = d.getTime()
var y = t/years
document.write("It's been: " + y + " years since 1970/01/01!")
</script>
</body>
</html>

下面一个是setFullYear()，用他来设置一个特殊的日期

<html>
<body>
<script type="text/javascript">
var d = new Date()
d.setFullYear(1992,10,3)
document.write(d)
</script>
</body>
</html>

下面是一个toUTCString()，他用于把日期转换成ＵＴＣ格式

<html>
<body>
<script type="text/javascript">
var d = new Date()
document.write (d.toUTCString())
</script>
</body>
</html>

下面是一个getDay()用这个和一个数组来返回一个星期，不仅仅是一个数字哦，

<html>
<body>
<script type="text/javascript">
var d=new Date()
var weekday=new Array(7)
weekday[0]="Sunday"
weekday[1]="Monday"
weekday[2]="Tuesday"
weekday[3]="Wednesday"
weekday[4]="Thursday"
weekday[5]="Friday"
weekday[6]="Saturday"
document.write("Today it is " + weekday[d.getDay()])
</script>
</body>
</html>

怎么在一个页面上展现一个时钟呢，下面的代码可以帮助我们

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
</head>

Date Object Methods

FF: Firefox, N: Netscape, IE: Internet Explorer

Method	Description	FF	N	IE
Date()	Returns today's date and time	1	2	3
getDate()	Returns the day of the month from a Date object (from 1-31)	1	2	3
getDay()	Returns the day of the week from a Date object (from 0-6)	1	2	3
getMonth()	Returns the month from a Date object (from 0-11)	1	2	3
getFullYear()	Returns the year, as a four-digit number, from a Date object	1	4	4
getYear()	Returns the year, as a two-digit or a four-digit number, from a Date object. Use getFullYear() instead !!	1	2	3
getHours()	Returns the hour of a Date object (from 0-23)	1	2	3
getMinutes()	Returns the minutes of a Date object (from 0-59)	1	2	3
getSeconds()	Returns the seconds of a Date object (from 0-59)	1	2	3
getMilliseconds()	Returns the milliseconds of a Date object (from 0-999)	1	4	4
getTime()	Returns the number of milliseconds since midnight Jan 1, 1970	1	2	3
getTimezoneOffset()	Returns the difference in minutes between local time and Greenwich Mean Time (GMT)	1	2	3
getUTCDate()	Returns the day of the month from a Date object according to universal time (from 1-31)	1	4	4
getUTCDay()	Returns the day of the week from a Date object according to universal time (from 0-6)	1	4	4
getUTCMonth()	Returns the month from a Date object according to universal time (from 0-11)	1	4	4
getUTCFullYear()	Returns the four-digit year from a Date object according to universal time	1	4	4
getUTCHours()	Returns the hour of a Date object according to universal time (from 0-23)	1	4	4
getUTCMinutes()	Returns the minutes of a Date object according to universal time (from 0-59)	1	4	4
getUTCSeconds()	Returns the seconds of a Date object according to universal time (from 0-59)	1	4	4
getUTCMilliseconds()	Returns the milliseconds of a Date object according to universal time (from 0-999)	1	4	4
parse()	Takes a date string and returns the number of milliseconds since midnight of January 1, 1970	1	2	3
setDate()	Sets the day of the month in a Date object (from 1-31)	1	2	3
setMonth()	Sets the month in a Date object (from 0-11)	1	2	3
setFullYear()	Sets the year in a Date object (four digits)	1	4	4
setYear()	Sets the year in the Date object (two or four digits). Use setFullYear() instead !!	1	2	3
setHours()	Sets the hour in a Date object (from 0-23)	1	2	3
setMinutes()	Set the minutes in a Date object (from 0-59)	1	2	3
setSeconds()	Sets the seconds in a Date object (from 0-59)	1	2	3
setMilliseconds()	Sets the milliseconds in a Date object (from 0-999)	1	4	4
setTime()	Calculates a date and time by adding or subtracting a specified number of milliseconds to/from midnight January 1, 1970	1	2	3
setUTCDate()	Sets the day of the month in a Date object according to universal time (from 1-31)	1	4	4
setUTCMonth()	Sets the month in a Date object according to universal time (from 0-11)	1	4	4
setUTCFullYear()	Sets the year in a Date object according to universal time (four digits)	1	4	4
setUTCHours()	Sets the hour in a Date object according to universal time (from 0-23)	1	4	4
setUTCMinutes()	Set the minutes in a Date object according to universal time (from 0-59)	1	4	4
setUTCSeconds()	Set the seconds in a Date object according to universal time (from 0-59)	1	4	4
setUTCMilliseconds()	Sets the milliseconds in a Date object according to universal time (from 0-999)	1	4	4
toSource()	Represents the source code of an object	1	4	-
toString()	Converts a Date object to a string	1	2	4
toGMTString()	Converts a Date object, according to Greenwich time, to a string. Use toUTCString() instead !!	1	2	3
toUTCString()	Converts a Date object, according to universal time, to a string	1	4	4
toLocaleString()	Converts a Date object, according to local time, to a string	1	2	3
UTC()	Takes a date and returns the number of milliseconds since midnight of January 1, 1970 according to universal time	1	2	3
valueOf()	Returns the primitive value of a Date object	1	2	4

Date Object Properties

Property	Description	FF	N	IE
constructor	A reference to the function that created the object	1	4	4
prototype	Allows you to add properties and methods to the object	1	3	4

String 对象，被用于操作存储的一小段文本，

管用手法下面是一些例子：

１，返回一个字符串的长度：（怎么用length属性来返回字符串的长度）

<html>
<body>
<script type="text/javascript">
var txt="Hello World!"
document.write(txt.length)
</script>
</body>
</html>

２，字符串的样式风格

.

<html>

<body>

<script type="text/javascript">

var txt="Hello World!"

document.write("<p>Big: " + txt.big() + "</p>")

document.write("<p>Small: " + txt.small() + "</p>")

document.write("<p>Bold: " + txt.bold() + "</p>")

document.write("<p>Italic: " + txt.italics() + "</p>")

document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")

document.write("<p>Fixed: " + txt.fixed() + "</p>")

document.write("<p>Strike: " + txt.strike() + "</p>")

document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")

document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")

document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>")

document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>")

document.write("<p>Subscript: " + txt.sub() + "</p>")

document.write("<p>Superscript: " + txt.sup() + "</p>")

document.write("<p>Link: " + txt.link("http://www.w3schools.com") + "</p>")

</script>

</body>

</html>

大家可以自己去看一下结果，

下面是一个方法

indexOf(),这个方法是从一个字符串中找出指定字符串第一次出现的位置。

下面是一个例子，大家可以拷贝到自己的桌面去运行

<html>
<body>
<script type="text/javascript">
var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))
</script>
</body>
</html>

运行的结果是：

0
-1
6

另外一个方法是 match()，他用于在一个字符串中查找一个特定的字符串，要是能找到就返回这个字符串，如果找不到就返回ＮＵＬＬ

例子：

<html>
<body>
<script type="text/javascript">
var str="Hello world!"
document.write(str.match("world") + "<br />")
document.write(str.match("World") + "<br />")
document.write(str.match("worlld") + "<br />")
document.write(str.match("world!"))
</script>
</body>
</html>

下面一个方法是replace()，他用于用特定的字符串替换一个字符串中指定的内容，这个方法一般很常用，下面给出一个简单的例子

<html>
<body>
<script type="text/javascript">
var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/,"W3Schools"))
</script>
</body>
</html>

下面是STRING的一些方法和属性的介绍：
FF: Firefox, N: Netscape, IE: Internet Explorer

Method	Description	FF	N	IE
anchor()	Creates an HTML anchor	1	2	3
big()	Displays a string in a big font	1	2	3
blink()	Displays a blinking string	1	2
bold()	Displays a string in bold	1	2	3
charAt()	Returns the character at a specified position	1	2	3
charCodeAt()	Returns the Unicode of the character at a specified position	1	4	4
concat()	Joins two or more strings	1	4	4
fixed()	Displays a string as teletype text	1	2	3
fontcolor()	Displays a string in a specified color	1	2	3
fontsize()	Displays a string in a specified size	1	2	3
fromCharCode()	Takes the specified Unicode values and returns a string	1	4	4
indexOf()	Returns the position of the first occurrence of a specified string value in a string	1	2	3
italics()	Displays a string in italic	1	2	3
lastIndexOf()	Returns the position of the last occurrence of a specified string value, searching backwards from the specified position in a string	1	2	3
link()	Displays a string as a hyperlink	1	2	3
match()	Searches for a specified value in a string	1	4	4
replace()	Replaces some characters with some other characters in a string	1	4	4
search()	Searches a string for a specified value	1	4	4
slice()	Extracts a part of a string and returns the extracted part in a new string	1	4	4
small()	Displays a string in a small font	1	2	3
split()	Splits a string into an array of strings	1	4	4
strike()	Displays a string with a strikethrough	1	2	3
sub()	Displays a string as subscript	1	2	3
substr()	Extracts a specified number of characters in a string, from a start index	1	4	4
substring()	Extracts the characters in a string between two specified indices	1	2	3
sup()	Displays a string as superscript	1	2	3
toLowerCase()	Displays a string in lowercase letters	1	2	3
toUpperCase()	Displays a string in uppercase letters	1	2	3
toSource()	Represents the source code of an object	1	4	-
valueOf()	Returns the primitive value of a String object	1	2	4

String Object Properties

Property	Description	FF	N	IE
constructor	A reference to the function that created the object	1	4	4
length	Returns the number of characters in a string	1	2	3
prototype	Allows you to add properties and methods to the object	1	2	4