JAvascript入門経典【推奨】-初心者必須、基礎学習ゼロ
47238 ワード
本書目録
第一章:JavaScript言語基礎
第二章:JavaScript内蔵オブジェクト第三章:ウィンドウwindowオブジェクト第四章:ドキュメントdocumentオブジェクト第五章:フォームformオブジェクト第六章:HistoryとNavigatorオブジェクト第七章:JavaScriptフレームワークプログラミング第八章:JavaScript異常処理
第九章:カスタムJavaScriptオブジェクト
第一章JavaScript言語基礎
第二章JavaScript内蔵オブジェクト
第三章ウィンドウwindowオブジェクト
第四章ドキュメントdocumentオブジェクト
第五章フォームformオブジェクト
第六章HistoryとNavigatorの対象
第七章JavaScriptフレームワークプログラミング
第八章JavaScript異常処理
第九章JavaScriptオブジェクトのカスタマイズ
第一章:JavaScript言語基礎
第二章:JavaScript内蔵オブジェクト第三章:ウィンドウwindowオブジェクト第四章:ドキュメントdocumentオブジェクト第五章:フォームformオブジェクト第六章:HistoryとNavigatorオブジェクト第七章:JavaScriptフレームワークプログラミング第八章:JavaScript異常処理
第九章:カスタムJavaScriptオブジェクト
第一章JavaScript言語基礎
JavaScript
JavaScript (Object) (Event Driven)
。
JavaScript HTML ， Java HTML ，
。
1、
JavaScript ， 。 ，
， 。
2、
JavaScript ， 。 ，
JavaScript （ ） JavaScript 。
3、
JavaScript Java ，
， Java ； ， “ ”，
。
4、
JavaScript ， ， ；
， ，
。
5、
JavaScript ， Web 。
。 ，
， 、 ， 。
6、
JavaScript ， ， ，
JavaScript 。 “ ， ” 。
Java Javascript
1、
Java ， ， 。
JavaScript ， ， 。
（Object Based） （Event Driver） 。
。
2、
。Java ，
， ，
。
JavaScript ， ，
。
3、
。
Java ， 。
JavaScript ， 。 ，
，
4、
Java HTML ， HTML ，
。
JavaScript ， HTML ， 。
HTML 。
5、
HTML ， ，JavaScript <Script>...</Script>
， Java <applet>...</applet> ， java 。
6、
Java ， Java ， 。
JavaScript ， JavaScript ，
。
JavaScript
1、JavaScript HTML
head body ， ：
<script language="javascript">
document.write("<font color=blue>Hello World!</font>");
</script>
2、JavaScript .js ， HTML
<head>
<script language="javascript" SRC="xxx.js"></script>
</head>
<body>
<form>
<input type=button onclick=show()>
</form>
</body>
.js javascript 。
function show(){
document.write("hello world!");
}
JavaScript ：
（ ）
（ "" '' ）
（ true false ）
（null）
， 。
：
， ， 。 、+
JavaScript 。 ：var、int、double、delete
， ， 。
（ ） ：
var x, myString;
var y=100, st="hello";
cost=23.6;
JavaScript （ ）：
abstract boolean break byte case catch
char class const continue default do
double else extends false final finally
float for function goto if implements
import in instanceof int interface long
native new null package private protected
public return short static super switch
synchronized this throw throws transient true
try var void while with
JavaScript 。 ，
； ， 。
<script language="javascript">
var quanju=100;
function get(){
var i=10;
if(true){
var j=1;
}
}
</script>
。
1、
：123 ，512
2、
， 3.14，12.43 ， ，
5E7，4e5 。
3、
true false。 ，
4、
（'） （"） 。 ， 'a'，
"hello"。
JavaScript （\） ， 。
（'\r'）、 （'\t'）
5、
JavaScript null， 。 ，
null 。
。
：+, -, *, /, %, ++, --
：= =, >, >=, <, <=, !=
：&&, ||, !
：=, +=, -=, *=, /=,
x=100;
str=" ";
t=null;
、 。
：a, a*2/3, (x+y)*10+(z-3)*20, x==y
1、if
if ( ){
;
}
x=80;
if (x>=60){
document.write( " ， ！");
}
if ( ){
1 ;
}else{
2 ;
}
if (x>=0){
y=x;
}else{
y=-x;
}
2、switch
switch( ) {
case 1： 1; break;
case 2： 2; break;
case 3： 3; break;
default: 4;
}
<script language="javascript">
function getWeek(week){
switch(week){
case 0:
st=" ";
break;
case 1:
st=" ";
break;
case 2:
st=" ";
break;
case 3:
st=" ";
break;
case 4:
st=" ";
break;
case 5:
st=" ";
break;
case 6:
st=" ";
break;
default:
st=" ";
}
return st;
}
</script>
3、for
for ( ; ; ) {
//
}
4、While
while( ) {
//
}
break ： switch 。
continue ： for while ， ， 。
JavaScript 。
， ， ，
1、
function ([ ]) {
;
[return ;]
}
<script language="javascript">
// ： 。
function max(a,b){
var x;
if (a>b)
x=a;
else
x=b;
return x;
}
</script>
2、
。
。
<script language="javascript">
max(20,30);
</script>
<input type="button" onClick="max(23,45);">
JavaScript ， 。
， 。
typeof 。 ， typeof
“undefined”。 ：
<script language="javascript">
function get(a,b){
document.write(" a ："+typeof(a)+"<br>");
document.write(" b ："+typeof(b));
}
get(32.4);
</script>
，JavaScript ，
， arguments 。 arguments ，
“ .arguments[0]” 。 ：
<script language="javascript">
function getSum(){
var sum=0;
var number=getSum.arguments.length;//
for(var i=0;i<number;i++){
sum+=getSum.arguments[i];
}
return sum;
}
document.write("23+54+65="+getSum(23,54,65));
</script>
JavaScript
JavaScript ， ， 。
。
1、 eval( )
。
：test=eval("x=8+9+5/2");
document.write(test); // 19.5
2、 escape( )
， % unicode 。
: escape("Hello there") "Hello%20there"
3、unescape( )
。
4、parseFloat( )
5、parseInt( ,radix)
radix ， parseInt( )
JavaScript ， 。
（Event， ） ， 。
（Event Driver）。 ， （Event
Handler ）。
1、
JavaScript （ ） 。
。
FF: Firefox, N: Netscape, IE: Internet Explorer
FF N IE
onabort 1 3 4
onblur 1 2 3
onchange 1 2 3
onclick 1 2 3
ondblclick 1 4 4
onerror 1 3 4
onfocus 1 2 3
onkeydown 1 4 3
onkeypress 1 4 3
onkeyup 1 4 3
onload 1 2 3
onmousedown 1 4 4
onmousemove 1 6 3
onmouseout 1 4 4
onmouseover 1 2 3
onmouseup 1 4 4
onreset 1 3 4
onresize 1 4 4
onselect 1 2 3
onsubmit 1 2 3
onunload 1 2 3
2、
HTML ， HTML 。 ，
button click MyProc()，
：
<script language="javascript">
function myPorc(){
alert(document.all("txt").value);
}
</script>
<input type="text" name="txt" />
<input type="button" value="Try" onClick="myPorc( );"/>
, ， ， ，
； ， 。
<script language="javascript">
// mouseover
function imgover(){
document.myForm.img1.src="color.jpg";
}
// mouseout
function imgout(){
document.myForm.img1.src="gray.jpg";
}
</script>
<form name="myForm">
<img border=0 name="img1" src="gray.jpg"
onmouseover="imgover();"
onmouseout="imgout()">
</form>
：
1、 1 100
2、 while 1 100
3、 100 ：02468。。。
4、 1-100， “ ！”， “ ！”
5、 if break 20 * 。
6、 ：x+y+z=50 x+2*y+5*z=100
7、
*
**
***
****
n 。
8、 a,b,c ， 。
（ if else ）
9、
*
**
***
****
***
**
*
n 。
10、 。
（ ，100 999 ）。 第二章JavaScript内蔵オブジェクト
JavaScript ， 。
， 。
：
.
. ()
Array
。 ，
[ ] （ 0 ）。
：var myA=[" "," "," "];
document.write(myA); //
myA[0]
myA[2]
１、 ：
(1) ，
var myA=[" ", " "," "];
var b=[10,20,30,40];
(2) new ，
var myA=new Array(" ", " "," ");
， 。
(3) 10 ，
var anArray = new Array(9);
anArray[0]= " ";
anArray[1]= " ";
anArray[2]= " ";
２、
length
.length
：myA.length 3
： for myA 。
for(i=0;i<myA.length;i++){
alert(myA[i]);
}
３、
join( )
， 。
：
myA.join("/") " / / "
reverse()
。
：
myA.reverse( ) [" "," "," "]
sort()
（ ）。
：
myA.sort () [" "," "," "]
concat()
。
concat() a
<script type="text/javascript">
var a = [1,2,3];
document.write(a.concat(4,5));
// ：
//1,2,3,4,5
</script>
， concat()
<script type="text/javascript">
var arr = ["George","John","Thomas"];
var arr2 = ["James","Adrew","Martin"];
document.write(arr.concat(arr2));
// ：
//George,John,Thomas,James,Adrew,Martin
</script>
， concat()
<script type="text/javascript">
var arr = ["George","John","Thomas"];
var arr2 = ["James","Adrew","Martin"];
var arr3 = ["William","Franklin"];
document.write(arr.concat(arr2,arr3));
// ：
//George,John,Thomas,James,Adrew,Martin,William,Franklin
</script>
pop()
。
， 1， 。 ，
pop() ， undefined 。
<script type="text/javascript">
var arr = ["George","John","Thomas"];
document.write(arr);
document.write("<br />");
document.write(arr.pop());
document.write("<br />");
document.write(arr);
// ：
//George,John,Thomas
//Thomas
//George,John
</script>
push()
， 。
：arrayObject.push(newelement1,newelement2,....,newelementX)
push() arrayObject 。 arrayObject，
。push() pop() 。
<script type="text/javascript">
var arr = ["George","John","Thomas"];
document.write(arr + "<br />");
document.write(arr.push("James") + "<br />");
document.write(arr);
// ：
//George,John,Thomas
//4
//George,John,Thomas,James
</script>
shift()
， 。
， shift() ， undefined 。 ，
， arrayObject。
<script type="text/javascript">
var arr = ["George","John","Thomas"];
document.write(arr + "<br />");
document.write(arr.shift() + "<br />");
document.write(arr);
// ：
//George,John,Thomas
//George
//John,Thomas
</script>
unshift()
， 。
unshift() arrayObject ，
， 。 0， ，
1， 。
，unshift() ， 。
<script type="text/javascript">
var arr = ["George","John","Thomas"];
document.write(arr + "<br />");
document.write(arr.unshift("William") + "<br />");
document.write(arr);
// ：
//George,John,Thomas
//4
//William,George,John,Thomas
</script>
slice(start,end)
。
<script type="text/javascript">
var arr = ["George","John","Thomas"];
document.write(arr + "<br />");
document.write(arr.slice(1) + "<br />");
document.write(arr);
// ：
//George,John,Thomas
//John,Thomas
//George,John,Thomas
</script>
<script type="text/javascript">
var arr =["George","John","Thomas","James","Adrew","Martin"];
document.write(arr + "<br />");
document.write(arr.slice(2,4) + "<br />");
document.write(arr);
// ：
//George,John,Thomas,James,Adrew,Martin
//Thomas,James
//George,John,Thomas,James,Adrew,Martin
</script>
splice()
、 。
：arrayObject.splice(index,howmany,element1,.....,elementX)
splice() index ，
。
index
。 / 。
（ ） ， 。
howmany 。 。 ， "0"。
， index 。
element1 。 。 index 。
elementX 。 。
， ， ：
<script type="text/javascript">
var arr =["George","John","Thomas","James","Adrew","Martin"];
document.write(arr + "<br />");
arr.splice(2,0,"William");
document.write(arr + "<br />");
// ：
//George,John,Thomas,James,Adrew,Martin
//George,John,William,Thomas,James,Adrew,Martin
</script>
， index 2 ， ：
<script type="text/javascript">
var arr =["George","John","Thomas","James","Adrew","Martin"];
document.write(arr + "<br />");
arr.splice(2,1,"William");
document.write(arr);
// ：
//George,John,Thomas,James,Adrew,Martin
//George,John,William,James,Adrew,Martin
</script>
， index 2 ("Thomas") ，
("William") ：
<script type="text/javascript">
var arr =["George","John","Thomas","James","Adrew","Martin"];
document.write(arr + "<br />");
arr.splice(2,3,"William");
document.write(arr);
// ：
//George,John,Thomas,James,Adrew,Martin
//George,John,William,Martin
</script>
4、
， 。 ：document forms
， ， ：
<form name="firstForm"></form>
<form name="secondForm"></form>
<form name="thirdForm"></form>
<script language="javascript">
var fs=document.forms;
for(i=0;i<fs.length;i++){
alert(fs[i].name);
}
</script>
options ，
<form name="myForm">
<select multiple size="5" name="box" style="width:150" onClick="f(this);">
<option value="apple"> </option>
<option value="orange"> </option>
<option value="banana"> </option>
</select>
</form>
<script language="javascript">
function f(o){
for(i=0;i<o.options.length;i++){
alert(o.options[i].value+","+o.options[i].text);
}
}
</script>
String
myStr=" ！";
myStr= new String(" ！");
１、
myStr.length 9， 。
２、
， ：
(1) ：
big(), bold(), fontcolor( ), fontsize( ), sub(), sup()
(2) 。
str="Hello";
anchor() HTML 。str.anchor("b"):<A NAME=”b”>Hello</A>
big() 。str.big() : <BIG>Hello</BIG>
blink() 。str.blink() : <BLINK>Hello</BLINK>
bold() 。str.bold() : <B>Hello</B>
charAt() 。" ".charAt(2) " "
" ".charAt(0) " "
charCodeAt()
Unicode 。
" ".charCodeAt(2) 27426
concat() 。" ".concat(" ") " "
fixed() 。str.fixed() : <FIXED>Hello</FIXED>
fontcolor() 。str. Fontcolor ("Red") :
<FONT color="red">Hello</FONT>
fontsize() 。str. fontsize () : <FONT
size="3">Hello</FONT>
indexOf() 。" ".indexOf(" ") 2
" ".indexOf(" ") -1
" ， ".indexOf(" ") 2
italics() 。str. italics () : <I>Hello</I>
lastIndexOf() 。" ， ".lastIndexOf(" ") 6
link() 。str.link("http://www.javakc.com") :
<a href="http://www.javakc.com"> Hello
</a>
match() 。
replace() 。
search() 。
slice() ，
。
" ".slice(2,4) " "
small() 。str.small():<SMALL>Hello</SMALL>
split() 。" | | ".split("|")
{" "," "," "}
strike() 。str.strike():<strike>Hello </strike>
sub() 。
str.sub( ) : <sub> Hello </sub>
substr()
。
" ".substr(1,2) " "
substring()
。
" ".substring(2,4) " "
sup() 。str.sup():<sub> Hello </sub>1
toLowerCase() 。
（ ）
"Welcome to BeiJing".toLowerCase()
welcome to beijing
toUpperCase() 。
（ ）
"Welcome to BeiJing".toUpperCase()
WELCOME TO BEIJING
Math
。 ， Math.
Math. 。
Math.E 2.718
Math.PI 3.14159
Math
abs(x) 。
acos(x) 。
asin(x) 。
atan(x) -PI/2 PI/2 x 。
atan2(y,x) x (x,y) （ -PI/2 PI/2 ）。
ceil(x) 。
cos(x) 。
exp(x) e 。
floor(x) 。
log(x) （ e）。
max(x,y) x y 。
min(x,y) x y 。
pow(x,y) x y 。
random() 0 ~ 1 。
round(x) 。
sin(x) 。
sqrt(x) 。
tan(x) 。
toSource() 。
valueOf() Math 。
Date
。
１、 ：
new Date() ， 。
new Date( ) 1970 1 1 ，
new Date(2005,6,3,21,0,22) 2005 7 3 ， 0
new Date("July 3, 2005 21:00:22")
２、 ：
getDate()
getDay() （0 ，1 6 ）
getHours()
getMinutes()
getSeconds()
getTime() 1970 1 1
getYear()
setDate()
setDay() （0 ，1 6 ）
setHours()
setMinutes()
setSeconds()
setTime() 1970 1 1 ，
setYear()
：
1、 。
2、 “ ” “ ” 。
3、 “ ” 。
4、 。
5、 50 100 ， ， 60 。
6、 （ ）。第三章ウィンドウwindowオブジェクト
JavaScript window self 。
window ， （frame iframe ），
HTML window ， window 。
top ， parent 。
Window
closed 。
defaultStatus 。
document Document 。 Document 。
history History 。 History 。
innerheight 。
innerwidth 。
length 。
location Location 。 Location 。
name 。
Navigator Navigator 。 Navigator 。
opener 。
outerheight 。
outerwidth 。
pageXOffset X 。
pageYOffset Y 。
parent 。
Screen Screen 。 Screen 。
self 。 Window 。
status 。
top 。
window window self ， 。
· screenLeft
· screenTop
· screenX
· screenY
。 x y 。IE、Safari
Opera screenLeft screenTop， Firefox Safari
screenX screenY。
Window
alert() 。
blur() 。
clearInterval() setInterval() timeout。
clearTimeout() setTimeout() timeout。
close() 。
confirm() 。
createPopup() pop-up 。
focus() 。
moveBy() 。
moveTo() 。
open() 。
print() 。
prompt() 。
resizeBy() 。
resizeTo() 。
scrollBy() 。
scrollTo() 。
setInterval() （ ） 。
setTimeout() 。
（1） ：
open 。
window.open(URL, , )
close() Open
：“toolbar=yes, width=500,height=200”
（2）
alert ( ) ， “ ”
confirm ( ) ， ：true, false
<html>
<head>
<script type="text/javascript">
function disp_confirm(){
var r=confirm(" ");
if (r==true){
document.write(" ！");
}else{
document.write(" ！");
}
}
</script>
</head>
<body>
<input type="button" onclick="disp_confirm()" value=" " />
</body>
</html>
prompt( ， )
<html>
<head>
<script type="text/javascript">
function disp_prompt(){
var name=prompt(" ","Bill Gates");
if (name!=null && name!=""){
document.write(" ，" + name + "！ ？");
}
}
</script>
</head>
<body>
<input type="button" onclick="disp_prompt()" value=" " />
</body>
</html>
（3） ：
（ 0，0 ）
moveBy moveBy(10,10)
<html>
<head>
<script type="text/javascript">
function moveWin(){
myWindow.moveBy(50,50);
myWindow.focus();
}
</script>
</head>
<body>
<script type="text/javascript">
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("This is 'myWindow'");
</script>
<input type="button" value="Move 'myWindow'" onclick="moveWin()" />
</body>
</html>
moveTo moveTo(100,100)
<html>
<head>
<script type="text/javascript">
function moveWin(){
myWindow.moveTo(0,0);
myWindow.focus();
}
</script>
</head>
<body>
<script type="text/javascript">
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("This is 'myWindow'");
</script>
<input type="button" value="Move 'myWindow'" onclick="moveWin()" />
</body>
</html>
（4） ：
， ， ：
setInterval clearInterval ( )
<html>
<body>
<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50);
function clock(){
var t=new Date();
document.getElementById("clock").value=t;
}
</script>
<button onclick="int=window.clearInterval(int)">
Stop interval
</button>
</body>
</html>
， ， ：
setTimeout clearTimeout
<html>
<head>
<script type="text/javascript">
function timedMsg(){
var t=setTimeout("alert('5 seconds!')",5000);
}
</script>
</head>
<body>
<form>
<input type="button" value=" ！"
onClick = "timedMsg()">
</form>
<p> 。5 。</p>
</body>
</html>
（5） ：
。
window.focus()
<html>
<body>
<script type="text/javascript">
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("This is 'myWindow'");
myWindow.focus();
</script>
</body>
</html>第四章ドキュメントdocumentオブジェクト
DOM ( )
window ， 。 ， 。
document Window ， (HTML ) 。
form ， 。
window、document history ， 。
。
document
document 。 ，
document 。 ， form “form1”
“ txtbox” ， ：
document.form1.txtbox.value。
HTML ，document 、 、 ，
。
Document
all[] HTML 。
anchors[] Anchor 。
applets Applet 。
forms[] Form 。
images[] Image 。
links[] Area Link 。
Document
body
<body> 。
， <frameset>。
cookie cookie。
domain 。
lastModified 。
referrer URL。
title 。
URL URL。
Document
close() document.open() ， 。
getElementById() id 。
getElementsByName() 。
getElementsByTagName() 。
open() ， document.write()
document.writeln() 。
write() HTML JavaScript 。
writeln() write() ， 。
document （body ）
onkeydown
onkeypress
onkeyup
onclick
ondblclick
onmousedown
onmouseup
load
unload
attachEvent ， body 。
document.attachEvent ('onclick',getA);第五章フォームformオブジェクト
1、
（<form>） Web 。
。 ， ； ， Web
。
Web ， document forms 。 ，
HTML ：
<form name="form1">
<input type="text">
<input type="text">
<input type="text">
</form>
<form name="form2">
<input type="text">
<input type="text">
</form>
document forms ：forms[0] ，
： forms[1] form2， 。
forms ， 。 ， ，
document.form1 document.form2 。
2、
submit（） 。 ， form1
， ：
document.form1.submit();
3、
Name
action
target
(_blank,_parent,_self,_top)
( )
encoding text/html
method “Get” “Post”
elements
， ,0,1,…
document. .elements.length
elements ， 。 elements
， HTML <form> 。
4、
， ：
<script type="text/javascript">
function display(){
var str;
//
str="name="+document.form1.name+"\r";
str=str+"action="+document.form1.action+"\r";
str=str+"method="+document.form1.method+"\r";
// elements
str=str+"elements:"+"\r";
for(var i=0;i<document.form1.elements.length;i++){
str=str+ " "+document.form1.elements[i].type
+"\t"+document.form1.elements[i].name
+"\t"+document.form1.elements[i].value+"\r";
}
window.alert(str);
return false;
}
function submitform(){
// +
document.forms[0].submit();
}
</script>
<form name="form1" action="/web/user" method="post" onsubmit="return
display()">
<input type="text" name="text1" value="AAA"/>
<input type="text" name="text2" value="BBB"/>
<input type="checkbox" name="check1" value="aaa"/>
<input type="submit" name="submit" value=" "/>
<input type="button" name="button" onclick="submitform();" value="js "/>
</form>
： “ ” onsubmit 。 onsubmit
false， 。 submit（） ，
。
、 、 、 、 。
JavaScript ， ：
. ：document.form1.check
.elements[ ] ：document.form1.elements[2]
。
1、text
text text 。
<input type="text" name=" " value=" " />
accessKey 。
Alt + accessKey
alt 。
defaultValue 。
disabled 。
id id。
maxLength 。
name 。
readOnly 。
size 。
tabIndex tab 。
type 。
value value 。
blur( )
select( ) ， 。
focus() 。
onfocus，onblur，onselect，onchange
text ：
<form name="form1">
<input type="text" name="text1" value="Welcome"/>
</form>
<script type="text/javascript">
document.form1.text1.value="this is a javascirpt";
document.form1.text1.select();
alert(document.form1.text1.value);
document.text1.blur();
</script>
2、textarea
textarea textarea 。
<textarea name=" "> </textarea>
name textarea
value textarea
defaultvalue textarea
blur( )
select( )
onfocus，onblur，onselect，onchange
3、select
select 。
<select name=" " size=" ">
<option value=" "> </option>
<option value=" " selected> </option>
…………
</select>
disabled
id id。
length 。
multiple 。
name 。
options
(option ) 。
option ：
text
value value
selected
selectedIndex
size 。
options.add() 。
blur() 。
focus() 。
remove() 。
onfocus，onblur，onchange
4、button
button 。
<input type="button" value=" " name=" ">
accessKey 。
alt 。
disabled 。
id id。
name 。
tabIndex tab 。
value 。
blur() 。
click() 。
focus() 。
onclick
5、checkbox
checkbox 。
<input type="checkbox" value=" " name=" " checked>
accessKey checkbox 。
alt checkbox 。
checked checkbox 。
defaultChecked checked 。
disabled checkbox 。
id checkbox id。
name checkbox 。
tabIndex checkbox tab 。
value checkbox value
blur() checkbox
click() checkbox 。
focus() checkbox 。
onclick
6、radio
radio 。 ，
radio ， radio 。
<input type="radio" value=" " name=" " checked>
<input type="radio" value=" " name=" " >
…………
accessKey 。
alt 。
checked 。
defaultChecked 。
disabled 。
id id。
name 。
tabIndex tab 。
value value 。
blur() 。
click() 。
focus() 。
onclick
7、hidden
hidden 。
<input type="hidden" value=" " name=" " >
alt 。
id id。
name 。
value value 。
8、submit
submit submit 。
<input type="submit" value=" " name=" " >
accessKey 。
alt 。
disabled 。
id id。
name 。
tabIndex tab 。
value 。
blur() 。
click() 。
focus() 。
onclick
9、password
password 。
<input type="password" value=" " name=" " >
accessKey 。
alt 。
defaultValue 。
disabled 。
id id。
maxLength 。
name 。
readOnly 。
size 。
tabIndex tab 。
value value 。
blur() 。
click() 。
focus() 。
onfocus，onblur，onselect，onchange第六章HistoryとNavigatorの対象
History
History （ ） URL。
History window ， window.history 。
History
length URL 。
History
back() history URL。
forward() history URL。
go(number|URL) history 。
-1
Navigator
Navigator 。 。
Navigator ， Window navigator 。
Navigator
plugins[]
。
Plugin ， 。Plug-in
， MIME 。
plugins[] IE 4 ， IE 4 ， IE
4 Plugin 。
Navigator
appCodeName 。
appMinorVersion 。
appName 。
appVersion 。
browserLanguage 。
cookieEnabled cookie 。
cpuClass CPU 。
onLine 。
platform 。
systemLanguage OS 。
userAgent user-agent 。
userLanguage OS 。
Navigator
IE F O
javaEnabled() Java。4 1 9
taintEnabled() (data tainting)。4 1 9第七章JavaScriptフレームワークプログラミング
HTML ， <iframe> <frame> ，
HTML 。 ，
JavaScript ， ， 。
HTML ， window ，
window.frames ， 、 。 ，
document ， ， ， ：
window.frames["frameName"]
window.frames.frameName
window.frames[index]
，window self ， frameName ，
：
window.frames["frameName"]
self.frames["frameName"]
self.frames[0]
frames[0]
frameName
HTML ， ，
， window 。 window ，
， window.document 、 window.location
。 。
1、
：
window.frames["frameName"]
frameName ， ， ，
window ， ：
window.frames["frameName"].frames["frameName2"]
， ， 。
2、
window parent ， 。 ，
window.parent ， ， TestA.html ， ：
<html>
<head><title> </title></head>
<body>
<form name="formA" id="formA">
<input type="text" name="username" id="username"/>
</form>
<iframe src="TestB.html" width="100%"></iframe>
</body>
</html>
， iframe TestB.html ，
TestB.html TestA.html username ， TestB.html ：
<script type="text/javascript">
var parentWin=window.parent;
parentWin.formA.username.value="javakc";
</script>
3、
， ， ，
2
<frameset rows="30%,70%">
<frame src="left.html" name="frame1"/>
<frame src="main.html" name="frame2"/>
</frameset>
frame1 frame2。
self.parent.frames["frame2"]
4、
。 ，
， window ， ， ：
self.parent.frames["childName"].frames["targetFrameName"]
5、
parent ，window top ， ，
， ：
top.window.formA.username.value="javakc";
if(self==top){
//too do
}
“window” ， window location ，
，
window.frames[0].location="index.html";
index.html， ，
， ：
<frameset rows="30%,70%">
<frame src="left.html" name="frame1"/>
<frame src="main.html" name="frame2"/>
</frameset>
<a href="frame1.location='index.html';frame2.loaction='top.html'">link</a>
JavaScript ， ：
<script type="text/javascript">
function hello (){
alert("hello javakc");
}
window.hello();
</script>
， hello javakc ， hello（）
。 ， window 。 ：
var a="javakc";
alert(window.a);
javakc。 ， ，
window 。
：
<frameset rows="30%,70%">
<frame src="left.html" name="link"/>
<frame src="main.html" name="show"/>
</frameset>
left.htm JavaScript ：
<script type="text/javascript">
var arrCars=new Array();
function addToCars(id){
arrCars.push(id);
}
</script>
main.html ：
<a href="void(0)" onclick="self.parent.link.addToCars('id')"> </a>第八章JavaScript異常処理
： ；
。JavaScript ，
。
1、 try-catch-finally
， ， catch
， ：
try{
//
}catch(e){
//
}finally{
// ，
}
java C# 。 ， ，
。 Ajax ， XMLHttpRequest
， ， ， 。
， ， ， ：
<script type="text/javascript">
var xmlhttp;
try{
// IE XMLHttpRequest
xmlhttp=new ActionXObject("Microsoft.XMLHTTP");
}catch(e){
try{
// IE XMLHttpRequest
xmlhttp=new XMLHttpRequest();
}catch(e){
}
}
</script>
， XMLHttpRequest 。
2、 throw
JavaScript ， ，
， ， ， throw ：“throw value”；
vlaue ， JavaScript ，
JavaScript ， e error ， new
Error（message） ， error message，
， 。 ， ， ，
， ， ， ：
<script type="text/javascript">
//
function sum(a,b){
a=parseInt(a);
b=parseInt(b);
// a b
if(isNaN(a) || isNaN(b)){
throw new Error(" ");
}
return a*b;
}
try{
//
var s=sum(1,"a");
}catch(e){
//
alert(e.message);
}
</script>
sum ， ，
catch ， alert ，第九章JavaScriptオブジェクトのカスタマイズ
JavaScript
， ，
（ ）。
JavaScript ：
<script language="javascript">
function HelloClass{
alert(" ");
//
HelloClass(v){
alert(" ");
}
}
new HelloClass();
</script>
HelloClass 。 ，
， 。 new ， ：
new Date();
var obj=new HelloClass();
， Date ，
JavaScript ， 。 new 。
javaScript ， （ ） ， （ ）
：
. （ ）
， ( ， ):
[" （ ） "]
， ：
var arrs=new Array();
arrs["push"]("javakc"); // ( )
var len=arrs["length"]; // ( )
alert(len);
：
var arrs=new Array();
arrs.push("javakc"); // ( )
var len=arrs.length; // ( )
alert(len);
（ ） ， JavaScript （ ）
。
， （ ） ，
， ， ，
：
<script language="javascript">
// User , name,age sex, 。
function User(){
this.name="Tom";
this.age=18;
this.sex=" ";
}
// User
var user=new User();
//
function show(slt){
if(slt.selectedIndex!=0){
alert(user[slt.value]);
}
}
</script>
<!-- -->
<select onchange="show(this)">
<option value="name"> </option>
<option value="age"> </option>
<option value="sex"> </option>
</select>
， User ， value
。
prototype
prototype 。 ，
function， prototype。Prototype ，
prototype 。 new ，prototype
。
prototype ， ：
<script language="javascript">
//
function HelloClass(){
}
// prototype ， method
HelloClass.prototype.method=function(){
alert("prototype ");
}
var obj=new HelloClass(); // HelloClass
obj.method(); // obj method
</script>
new ，prototype ， ：
<script language="javascript">
//
function HelloClass(){
this.name="javakc";
}
// prototype
HelloClass.prototype.showName=function(){
alert(this.name);
}
var obj=new HelloClass(); // HelloClass
// prototype showName
obj.showName();
</script>
prototype JavaScript ， prototype 、 。
JavaScript
，
， 。 C# Java ，
。 JavaScript for(…in…) ， ：
<script language="javascript">
for(var vs in obj){
//
if(typeof(obj[vs])=="function"){
obj[vs]();
// ，
}else{
alert(obj[vs]);
}
}
</script>
var vs obj （ ） ，
（ ） ， （ ） 。
obj ， ， ，
。 。 JavaScript ，
， 。
JavaScript
prototype
，
， （ ） 。
。
， ，
， 。 JavaScript
， prototype 。 ，
：
<script language="javascript">
function HelloClass(){
//
}
function HelloSubClass(){
//
}
HelloSubClass.prototype=HelloClass.prototype;
HelloSubClass.prototype.Propertys="name";
HelloSubClass.prototype.subMethods=function(){
//
alert("in Methods");
}
var obj=new HelloSubClass();
obj.subMethods();
</script>
， HelloSubClass HelloClass prototype，
， 。 ， prototype HelloSubClass
HelloSubClass HelloClass ， 。
JavaScript instanceof ， obj
， ：
obj instanceof HelloSubClass //true
obj instanceof HelloClass //true
JavaScript ， ， property
HelloSubClass HelloClass， HelloSubClass method ， ：
<script language="javascript">
// HelloClass
function HelloClass(){
//
}
// HelloClass
HelloClass.prototype={
f1:function(){
alert("in HelloClass");
}
}
// HelloSubClass
function HelloSubClass(){
//
}
// HelloSubClass HelloClass
HelloSubClass.prototype=HelloClass.prototype;
// HelloSubClass method
HelloSubClass.prototype.Propertys="name";
HelloSubClass.prototype.method=function(){
//
alert("in HelloSubClass");
}
//
var obj1=new HelloClass();
var obj2=new HelloSubClass();
// method
obj1.method();
obj2.method();
</script>
， HelloSubClass 。 ，
HelloSubClass prototype ，HelloClass prototype ，
HelloSubClass prototype ， HelloClass ，
HelloClass HelloSubClass ， ，
HelloClass HelloSubClass prototype ， 。
JavaScript ， （ 、 、 ），
， ， HelloSubClass prototype
HelloClass prototype， 。
instanceof ， prototype ，
obj1 obj2 prototype， instanceof 。
prototype
prototype ， ，
prototype， ， 。
， for(…in…) prototype ，
prototype ， ：
<script language="javascript">
// HelloClass
function HelloClass(){
//
}
// HelloClass
HelloClass.prototype={
method:function(){
alert("in HelloClass method");
},
method2:function(){
alert("in HelloClass method2");
}
}
// HelloSubClass
function HelloSubClass(){
//
}
// HelloSubClass HelloClass
for(var p in HelloClass.prototype){
HelloSubClass.prototype[p]=HelloClass.prototype[p];
}
// HelloClass method
HelloSubClass.prototype.method=function(){
//
alert("in HelloSubClass method");
}
//
var obj1=new HelloClass();
var obj2=new HelloSubClass();
// method
obj1.method();
obj2.method();
// method2
obj1.method2();
obj2.method2();
</script>
，obj2 method method ，
method2 ， obj1 method 。
， ， ， ：
// inherit
Function.prototype.inherit=function(baseClass){
for(var p in baseClass.prototype){
this.prototype[p]=baseClass.prototype[p];
}
}
（ ） Function ，
inherit ， 。 ， ：
// HelloSubClass HelloClass
HelloSubClass.inherit(HelloClass);
， ， 。
1. ：（A）
A. var obj = ( );
B. var obj = [ ];
C. var obj = { };
D. var obj = //;
2. javascript ：（B）
A. with
B. parent
C. class
D. void
3. ：（C）
A. null instanceof Object
B. null === undefined
C. null == undefined
D. NaN == NaN
4. javascript ：(ABCD)
A.JScript javascript
B.javascript Java ， Java
C.FireFox IE javascript
D.AJAX javascript
5. foo att ， att ， ：（ACE）
A. foo.att
B. foo("att")
C. foo["att"]
D. foo{"att"}
E. foo["a"+"t"+"t"]
6. ， HTML ：（AB）
A.<TEXTAREA></TEXTAREA>
B.<INPUT type="text"/>
C.<INPUT type="hidden"/>
D.<DIV></DIV>
7. javascript ：（ABC）
A.escape
B.parseFloat
C.eval
D.setTimeout
E.alert
8. IFrame ：(ABCD)
A. IFrame， ，
B. ， IFrame
C. ， IFrame
D. IFrame
9. ：（ABCDE）
A. TBODY
B. CAPTION
C. TBODY
D. COLGROUP
E. COL
10. IE window ：（ACD）
A.window.opener window
B.window.reload()
C.window.location="a.html" window.location.href="a.html"
a.html
D. g； window.g
11. select ？
12. JavaScript foo() ？
13. form input readonly disable， ？