08 JavaScript(js)
143732 ワード
JavaScript(js)
一.引用
二.最初のjsプログラム
三.jsの構文
四.関数タイプ【ポイント】
五.オブジェクトタイプ
六.配列Array
七.jsの一般的な組み込みオブジェクト
八.jsの一般的な実行方法
九.DOMプログラミング–document object modelドキュメントオブジェクトモデル
十.ドロップダウンリストの処理
十一.BOM—browser object modelブラウザオブジェクトモデル
輪番図
十二.コード構造の調整
二.最初のjsプログラム
三.jsの構文
四.関数タイプ【ポイント】
五.オブジェクトタイプ
六.配列Array
七.jsの一般的な組み込みオブジェクト
八.jsの一般的な実行方法
九.DOMプログラミング–document object modelドキュメントオブジェクトモデル
十.ドロップダウンリストの処理
十一.BOM—browser object modelブラウザオブジェクトモデル
十二.コード構造の調整
一.引用
1. Javascript（js）： ， ，
2. ：
---- C C++ （ ， ） --
---- html js （ ， ） --
---- java C# （ ， ） -- .class -- jvm
3. ： html ， “ ”
1）html + css --- （ ）
2）servlet + jsp --- （ java ）
3）js --- （ ， ）， ，
。
二.最初のjsプログラム
1. html js
<head>
<script type="text/javascript"> js </script>
</head>
2. js API
1） HelloWorld
document.write("HelloWorld"
);
2）
window.alert("HelloWorld");
： window ， window
3） ， java System.out.println();
console.info("HelloWorld");
三.jsの構文
1.js
java -- （ ）
int a = 3; String str="hehe";
js -- （ ， ）
var a = 3; a ="hehe";
2.js
1） ，
2）
java --》 if(true){ int a=3; }
System.out.println(a); ---error
js ---> if(true) { var a = 3; }
alert(a); ---- ok
3) ， var ， “ ”，
4) var “ ”，
3.
1）
--
-- ， 'hehe'
-- true|false 0 | 0(false) | null（false）
if(a!=null){} <---> if(a){} if(3)<-->if(true)
2）
null undefined NaN(not a number)
3) ：
4.
1） ： + - * / %
： ，js 。
2) ： == ===
==
var a=3; var b="3"; alert(a==b); --> true
===
var a=3; var b="3" alert(a===b) --> false
3) typeof
5. --- java
四.関数タイプ【ポイント】
1. js ， “ ”，
2.
1） function
java -- ( ,....) { }
public int add(int a,int b){ return a+b; }
js -- function ( ，....){ }
function add(a,b){ return a+b; }
2）
：var = function( ){ }
function ， ， 。
：var add = function(a,b){ return a+b; }
： ( );
3）
var f1 = function(){ return "hehe" } ;
var f2 = f1 ; --> f1 “ ” f2， f2 ，
var f3 = f1(); --> f1 f2 ， f2 f1 （ ）
3. ：
1)js “ ”， or 。js arguments 。
// ： ，
function sumArgs(){
// ---- arguments
var result = 0;
for( var i=0;i<arguments.length;i++){
result += arguments[i];
}
return result;
}
alert( sumArgs(1,2,"3",true));
2) ， ， “ ”
五.オブジェクトタイプ
1. js ， 。
2.
： var obj = { : ， ： ，......... };
obj. = ;
var stu1 = {id:1,name:" ",age:15};
stu1.sex = "male";
stu1.mattied = false;
3.
1） ： . [" "]
alert(stu1.name); alert(stu1["name"]);
2) ： for( in ){ [ ] }
， ， 。
for(pro in stu1){
alert(pro+"------"+stu1[pro]);
}
4.js ， ， java
// name age ， getName ， play （play ）
var stu ={ name:"zhangsan" , age:18 , getName:function(){ return this.name; } ,
play:function(){ return "hehe";} };
// ， ： ， 。
for(pro in stu){
if( typeof stu[pro] == "function" ){
document.write(""
+stu[pro]()+"");
}else{
document.write(""
+pro+"---"+stu[pro]+"");
}
}
六.配列Array
1. ：js ， ； 。
2. ：var = [ 1， 2，..... ];
， 。
3. ：
1） （ ， 0 ） --- arr1[3]
2） ( java ， for )
for(var i=0;i<arr1.length;i++){ arr1[i] }
4.
.sort() --->
.sort( ) --->
function abc(a,b){ return b-a;}
arr2.sort(abc);
七.jsの一般的な組み込みオブジェクト
1.
var str = "hehe";
var str2 = new String("hehe");
： length ， length
2.Math ： java ， java ， Math
var ran = Math.random();
3. Date
1）var d1 = new Date(); -->
var d2 = new Date("1992-04-01"); ---> date
2） ：
getFullYear() --->
getMonth() ---> （0~11）
。。。。。
八.jsの一般的な実行方法
1.js ， ， js 。
： （ ） （ ）
：
1） （ html ），
2） ， js
html
------> js
---》js ，
eg:
2.
onclick *
ondblclick
onmouseover *
onmouseout *
onmousemove
onmousedown
onmouseup
, body
onKeyDown *
onKeyUp
body
onload = fun // *****
onunload （ ， ， ， ...）
onscroll
onresize
form ****
onblur
onchange ， ( value )
onsubmit ( )
3.
1） ：
=== event.cancelBubble=true;
event -- ， event.clientX-- event.clientY --
event.source --
2）
--> フォームラベル-->九.DOMプログラミング–document object modelドキュメントオブジェクトモデル
.
1. xml ： dom sax
dom -- html ， “ ”，html “ ” “ ” 。
（ ）
sax -- ， （ ）
dom
document --- （ body ， ， ）
window ---- ，document window ， window ，window
2. html
1） ： ，
2）API
var tag = document.getElementById(" id "); 【 】element
var tags = document.getElementsByTagName(" "); ---
.getElementsByTagName(" ");
var tags = document.getElementsByName(" name "); --- name
var tags = document.getElementsByClassName(" class "); --- css
3）
--- tag. =
--- var value = tag.
-- css tag.style.color="red" tag.style.backgourndColor="blue"
-- tag.className =" class "
3.
1）innerHTML： （ ， ）
2) this :
4.
1) parentTag.removeChild(childTag); ---
2） ：
tag.parentNode --- tag
tag.childNodes --- tag （ ， ）
tag.firstChild --- tag
tag.lastChild
tag.nextSibling --- tag
tag.previousSibling --- tag
： ， 。
3） js ， tbody
<table>
<tbody>
<tr> .... </tr>
</tbody>
</table>
4) ：
var ba = window.confirm(" "); ---》 boolean
5.
1） -- var tag = document.createElement(" ");
eg: <h1>HelloWorld</h1>
var tag = document.createElement("h1");
tag.innerHTML = "HelloWorld";
2）
parentTag.appendChild(newTag); ---> newTag ，
parentTag.insertBefore(newTag,oldTag); ---> newTag oldTag
3）
newTag.onclick = function(){ js }
6.
parentTag.replaceChild(newTag,oldTag); -->
Dom ： innerHTML（ ） value（ ）
//
function selectAll() {
//1. checkbox
var inps = document.getElementsByTagName("input");
for(var i=0;i<inps.length;i++){
if(inps[i].type == "checkbox"){
//2. checked true
inps[i].checked = true;
}
}
}
十.ドロップダウンリストの処理
1. options -- ， 。 option
2. selectedIndex -- ， option
3. onchange （ ）
4. ： tag.options.length = 0;
5. option ： var opt = new Option(text,value);
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8"/>
<title>CITYJS</title>
<script type="text/javascript">
var liaoning = [{text:" ",value:"shengyang"},{text:" ",value:"dalian"},{text:" ",value:"tieling"}];
var shanxi = [{text:" ",value:"shuozhou"},{text:" ",value:"taiyuan"},{text:" ",value:"yuncheng"}];
var jiangsu = [{text:" ",value:"nanjing"},{text:" ",value:"wuxi"},{text:" ",value:"xuzhou"}];
function getCityArray(proValue) {
if(proValue == "liaoning") return liaoning;
if(proValue == "shanxi") return shanxi;
if(proValue == "jiangsu") return jiangsu;
}
// ， 。 city
function initCity(tag) {
// tag pro
//1.
var proValue = tag.options[tag.selectedIndex].value;
//2.
var cityArray = getCityArray(proValue);
//3. ， option，
var citySelect = document.getElementById("city");
citySelect.options.length = 1;//
for (var i=0;i<cityArray.length;i++){
var obj = cityArray[i]; // （ text，value）
var opt = new Option(obj.text,obj.value); // option
// opt citySelect
citySelect.options[i+1] = opt;
}
}
</script>
</head>
<body>
<select name="pro" onchange="initCity(this)">
<option> </option>
<option value="liaoning"> </option>
<option value="shanxi"> </option>
<option value="jiangsu"> </option>
</select>
<select name="city" id="city">
<option> :</option>
</select>
</body>
</html>
十一.BOM—browser object modelブラウザオブジェクトモデル
1.bom -- （window）
2.window （ window ， window）
1）open("url") --- ， url 。 ，
var w = window.open("url");
close() ---
2）
-- window.alert("......");
-- var ba = window.confirm("....");
--- var str = window.prompt("....");
3）
var id = window.setTimeout(fun,time); --- time ， fun
window.clearTimeout(id); ---
var id = window.setInterval(fun,time); --- ， time ， fun
window.clearInterval(id);
eg:
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>SYSDATE</title>
<style type="text/css">
#d1{width: 38%;height: 50px;background: #5494F3}
</style>
<script type="text/javascript">
function fun() {
var d1 = document.getElementById("d1");
d1.innerHTML = new Date();
}
window.setInterval(fun,1000);// （1 ）
function fun2() {
var d2 = document.getElementById("d2");
d2.innerHTML = d2.innerHTML+".";
}
var interval2 = window.setInterval(fun2,1000);
function fun3() {
window.clearInterval(interval2);
location.href="/mavenweb/emp/showEmp";
}
window.setTimeout(fun3,5000);//5 showEmp(action)
</script>
</head>
<body>
<div id="d1"></div>
<div id="d2"> </div>
</body>
</html>
4）location -- window ， location href ， js （ ）
location.href = "url";
5）history -- window
history.back() --
history.forward() --
history.go(num) -- num ，num ， num 0
輪番図
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>LunBoTu</title>
<style type="text/css">
#d1{width:300px;height: 420px;margin: 10px auto}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
var imageArray = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg"];
var num = 0;
function changeImageSrc() {
if(num==5){num=0;}
var image = document.getElementById("image");
image.src="../viewjs/image/"+imageArray[num++];
}
var id1 = window.setInterval(changeImageSrc,1000);
function stop() {
window.clearInterval(id1);
}
function start() {
id1 = window.setInterval(changeImageSrc,1000);
}
</script>
</head>
<body>
<div id="d1" onmouseout="start()" onmouseover="stop()">
<img src="../viewjs/image/1.jpg" id="image"/>
</div>
</body>
</html>
十二.コード構造の調整
1.
1）
< onclick="js ">
2）
<script type="text/javascript">
XXXXXXX ------------ ， html ， body
// ， function
window.onload = function(){
XXXXXXXXX ---- （body ）
var tag = ;
tag.onclick = function(){
js
};
}
</script>
2. js .js ， <script>
<head>
<link rel="stylesheet" type="text/css" href="css "/>
<style type="text/css"> ...... </style>
<script type="text/javascript" src=" js "></script>
<script type="text/javascript">
js
</script>
</head>
<img src="/*****/imageAction" click="fun" /> <a href="" onclick="img.onclick();"> .... </a>
1. Javascript（js）： ， ，
2. ：
---- C C++ （ ， ） --
---- html js （ ， ） --
---- java C# （ ， ） -- .class -- jvm
3. ： html ， “ ”
1）html + css --- （ ）
2）servlet + jsp --- （ java ）
3）js --- （ ， ）， ，
。
二.最初のjsプログラム
1. html js
<head>
<script type="text/javascript"> js </script>
</head>
2. js API
1） HelloWorld
document.write("HelloWorld"
);
2）
window.alert("HelloWorld");
： window ， window
3） ， java System.out.println();
console.info("HelloWorld");
三.jsの構文
1.js
java -- （ ）
int a = 3; String str="hehe";
js -- （ ， ）
var a = 3; a ="hehe";
2.js
1） ，
2）
java --》 if(true){ int a=3; }
System.out.println(a); ---error
js ---> if(true) { var a = 3; }
alert(a); ---- ok
3) ， var ， “ ”，
4) var “ ”，
3.
1）
--
-- ， 'hehe'
-- true|false 0 | 0(false) | null（false）
if(a!=null){} <---> if(a){} if(3)<-->if(true)
2）
null undefined NaN(not a number)
3) ：
4.
1） ： + - * / %
： ，js 。
2) ： == ===
==
var a=3; var b="3"; alert(a==b); --> true
===
var a=3; var b="3" alert(a===b) --> false
3) typeof
5. --- java
四.関数タイプ【ポイント】
1. js ， “ ”，
2.
1） function
java -- ( ,....) { }
public int add(int a,int b){ return a+b; }
js -- function ( ，....){ }
function add(a,b){ return a+b; }
2）
：var = function( ){ }
function ， ， 。
：var add = function(a,b){ return a+b; }
： ( );
3）
var f1 = function(){ return "hehe" } ;
var f2 = f1 ; --> f1 “ ” f2， f2 ，
var f3 = f1(); --> f1 f2 ， f2 f1 （ ）
3. ：
1)js “ ”， or 。js arguments 。
// ： ，
function sumArgs(){
// ---- arguments
var result = 0;
for( var i=0;i<arguments.length;i++){
result += arguments[i];
}
return result;
}
alert( sumArgs(1,2,"3",true));
2) ， ， “ ”
五.オブジェクトタイプ
1. js ， 。
2.
： var obj = { : ， ： ，......... };
obj. = ;
var stu1 = {id:1,name:" ",age:15};
stu1.sex = "male";
stu1.mattied = false;
3.
1） ： . [" "]
alert(stu1.name); alert(stu1["name"]);
2) ： for( in ){ [ ] }
， ， 。
for(pro in stu1){
alert(pro+"------"+stu1[pro]);
}
4.js ， ， java
// name age ， getName ， play （play ）
var stu ={ name:"zhangsan" , age:18 , getName:function(){ return this.name; } ,
play:function(){ return "hehe";} };
// ， ： ， 。
for(pro in stu){
if( typeof stu[pro] == "function" ){
document.write(""
+stu[pro]()+"");
}else{
document.write(""
+pro+"---"+stu[pro]+"");
}
}
六.配列Array
1. ：js ， ； 。
2. ：var = [ 1， 2，..... ];
， 。
3. ：
1） （ ， 0 ） --- arr1[3]
2） ( java ， for )
for(var i=0;i<arr1.length;i++){ arr1[i] }
4.
.sort() --->
.sort( ) --->
function abc(a,b){ return b-a;}
arr2.sort(abc);
七.jsの一般的な組み込みオブジェクト
1.
var str = "hehe";
var str2 = new String("hehe");
： length ， length
2.Math ： java ， java ， Math
var ran = Math.random();
3. Date
1）var d1 = new Date(); -->
var d2 = new Date("1992-04-01"); ---> date
2） ：
getFullYear() --->
getMonth() ---> （0~11）
。。。。。
八.jsの一般的な実行方法
1.js ， ， js 。
： （ ） （ ）
：
1） （ html ），
2） ， js
html
------> js
---》js ，
eg:
2.
onclick *
ondblclick
onmouseover *
onmouseout *
onmousemove
onmousedown
onmouseup
, body
onKeyDown *
onKeyUp
body
onload = fun // *****
onunload （ ， ， ， ...）
onscroll
onresize
form ****
onblur
onchange ， ( value )
onsubmit ( )
3.
1） ：
=== event.cancelBubble=true;
event -- ， event.clientX-- event.clientY --
event.source --
2）
--> フォームラベル-->九.DOMプログラミング–document object modelドキュメントオブジェクトモデル
.
1. xml ： dom sax
dom -- html ， “ ”，html “ ” “ ” 。
（ ）
sax -- ， （ ）
dom
document --- （ body ， ， ）
window ---- ，document window ， window ，window
2. html
1） ： ，
2）API
var tag = document.getElementById(" id "); 【 】element
var tags = document.getElementsByTagName(" "); ---
.getElementsByTagName(" ");
var tags = document.getElementsByName(" name "); --- name
var tags = document.getElementsByClassName(" class "); --- css
3）
--- tag. =
--- var value = tag.
-- css tag.style.color="red" tag.style.backgourndColor="blue"
-- tag.className =" class "
3.
1）innerHTML： （ ， ）
2) this :
4.
1) parentTag.removeChild(childTag); ---
2） ：
tag.parentNode --- tag
tag.childNodes --- tag （ ， ）
tag.firstChild --- tag
tag.lastChild
tag.nextSibling --- tag
tag.previousSibling --- tag
： ， 。
3） js ， tbody
<table>
<tbody>
<tr> .... </tr>
</tbody>
</table>
4) ：
var ba = window.confirm(" "); ---》 boolean
5.
1） -- var tag = document.createElement(" ");
eg: <h1>HelloWorld</h1>
var tag = document.createElement("h1");
tag.innerHTML = "HelloWorld";
2）
parentTag.appendChild(newTag); ---> newTag ，
parentTag.insertBefore(newTag,oldTag); ---> newTag oldTag
3）
newTag.onclick = function(){ js }
6.
parentTag.replaceChild(newTag,oldTag); -->
Dom ： innerHTML（ ） value（ ）
//
function selectAll() {
//1. checkbox
var inps = document.getElementsByTagName("input");
for(var i=0;i<inps.length;i++){
if(inps[i].type == "checkbox"){
//2. checked true
inps[i].checked = true;
}
}
}
十.ドロップダウンリストの処理
1. options -- ， 。 option
2. selectedIndex -- ， option
3. onchange （ ）
4. ： tag.options.length = 0;
5. option ： var opt = new Option(text,value);
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8"/>
<title>CITYJS</title>
<script type="text/javascript">
var liaoning = [{text:" ",value:"shengyang"},{text:" ",value:"dalian"},{text:" ",value:"tieling"}];
var shanxi = [{text:" ",value:"shuozhou"},{text:" ",value:"taiyuan"},{text:" ",value:"yuncheng"}];
var jiangsu = [{text:" ",value:"nanjing"},{text:" ",value:"wuxi"},{text:" ",value:"xuzhou"}];
function getCityArray(proValue) {
if(proValue == "liaoning") return liaoning;
if(proValue == "shanxi") return shanxi;
if(proValue == "jiangsu") return jiangsu;
}
// ， 。 city
function initCity(tag) {
// tag pro
//1.
var proValue = tag.options[tag.selectedIndex].value;
//2.
var cityArray = getCityArray(proValue);
//3. ， option，
var citySelect = document.getElementById("city");
citySelect.options.length = 1;//
for (var i=0;i<cityArray.length;i++){
var obj = cityArray[i]; // （ text，value）
var opt = new Option(obj.text,obj.value); // option
// opt citySelect
citySelect.options[i+1] = opt;
}
}
</script>
</head>
<body>
<select name="pro" onchange="initCity(this)">
<option> </option>
<option value="liaoning"> </option>
<option value="shanxi"> </option>
<option value="jiangsu"> </option>
</select>
<select name="city" id="city">
<option> :</option>
</select>
</body>
</html>
十一.BOM—browser object modelブラウザオブジェクトモデル
1.bom -- （window）
2.window （ window ， window）
1）open("url") --- ， url 。 ，
var w = window.open("url");
close() ---
2）
-- window.alert("......");
-- var ba = window.confirm("....");
--- var str = window.prompt("....");
3）
var id = window.setTimeout(fun,time); --- time ， fun
window.clearTimeout(id); ---
var id = window.setInterval(fun,time); --- ， time ， fun
window.clearInterval(id);
4）location -- window ， location href ， js （ ）
location.href = "url";
5）history -- window
history.back() --
history.forward() --
history.go(num) -- num ，num ， num 0
十二.コード構造の調整
1.
1）
< onclick="js ">
2）
<script type="text/javascript">
XXXXXXX ------------ ， html ， body
// ， function
window.onload = function(){
XXXXXXXXX ---- （body ）
var tag = ;
tag.onclick = function(){
js
};
}
</script>
2. js .js ， <script>
<head>
<link rel="stylesheet" type="text/css" href="css "/>
<style type="text/css"> ...... </style>
<script type="text/javascript" src=" js "></script>
<script type="text/javascript">
js
</script>
</head>
<img src="/*****/imageAction" click="fun" /> <a href="" onclick="img.onclick();"> .... </a>