JavaScript基礎（2）
11887 ワード
Arayオブジェクト:
配列の作成:
作成方式1.1：ダイナミック初期化に相当する。
var arr=new Aray(3);
作成方式1.2：
var arr=new Aray(); //は、0個の長さを表し、その後、配列に値を割り当てます。
作成方法1.3：配列内の具体的な要素を直接指定する。
var arr=new Aray（「hello」、100、true、'a'）
作成方式2.1：配列の要素を直接指定し、new Aray（）;
var arr=[10]「hello」「world」「true」
常用方法： ジョイン()：配列中のすべての要素を記号でつづり合わせて、新しい文字列を返します。
reverse()：配列中の要素を反転させます。
注意: 1> jsでは、配列は任意の種類の要素を記憶することができる。 2> jsでは、配列の角標本の境界線が存在しないという説がありますが、配列中の要素の数は絶えず増加することができます。異常が発生することはありません。
例:
方式1：参画構造のある形式。
方式2：無参構造の形式。
方式3：Objectオブジェクトを利用して、Objectオブジェクトはjsの中で任意のオブジェクトの一つのテンプレートを表します。
方式4:
作用：jsの中の内蔵対象に追加する方法で使用します。
1>各js内蔵オブジェクトにはプロトタイプの属性があります。
2>原型オブジェクトに方法を追加すると、この方法は自動的に内蔵オブジェクトに追加されます。
3>プロトタイプの属性は、直接に内蔵されたオブジェクトに呼び出されて追加する方法です。
例:
機能：ブラウザのウィンドウを表します。
フレームに関する方法：window.alert（「ヒントボックス」）:/windowは省略できます。window.co nfirm（「メッセージダイアログ」）：確認ボックスがあり、キャンセルボックスがあります。prompt：ヒントダイアログがあります。メッセージと入力ボックスがあります。
タイマーに関する方法:
setInterval(タスク、時間ミリ秒値)：このタスクは何ミリ秒後に繰り返し実行されますか？
clear Interval（）：set Intervalに関するタスクをキャンセルする。
window.clear Interval(iIntervalID)：これはIdを挿入します。
setTimeout（タスク、時間ミリ秒値）：何ミリ秒後に一回だけ実行しますか？
clearTimeout（）：setTimeoutに関するタイムアウトイベントをキャンセルする。
例:
現在のURLに関する情報を含みます。
主に属性の一つの方法を学びます。
href属性：ページのhref属性を変更してページジャンプを実現できます。
reload()：タイミング更新；
例:
機能：ユーザが閲覧したURLの情報を含みます。
方法:
forward()：履歴リストに次のurlを入れます。
back()：履歴リストに入る前のurl;
go（正の整数または負の整数）：履歴リストからurlに移動します。
例:
役割：顧客画面とレンダリング能力に関する情報を含む。
通常の属性: availHeight：システム画面の作業領域の高さを取得し、Microsoftを排除する。® Windows® タスクバー
avail Width：同上。
例:
1>、クリックに関するイベント：
クリックイベント：onclick
ダブルクリックイベント:ondbclick
2>焦点に関するイベント:
フォーカスイベントを取得:onfocus
焦点を失う事件：onblur
例：クリックとフォーカスに関するイベント。
3> タブの変化に関するイベント：onchange
4> マウス関連のイベント:
マウスを使ったイベント：onmouseover
マウスの移動イベント：onmousout
5> ページ読み込みに関するイベント：onload
注意：bodyで使用されていますが、bodyの内容がロードされた後にこのイベントが発生します。
例:
配列の作成:
作成方式1.1：ダイナミック初期化に相当する。
var arr=new Aray(3);
作成方式1.2：
var arr=new Aray(); //は、0個の長さを表し、その後、配列に値を割り当てます。
作成方法1.3：配列内の具体的な要素を直接指定する。
var arr=new Aray（「hello」、100、true、'a'）
作成方式2.1：配列の要素を直接指定し、new Aray（）;
var arr=[10]「hello」「world」「true」
常用方法： ジョイン()：配列中のすべての要素を記号でつづり合わせて、新しい文字列を返します。
reverse()：配列中の要素を反転させます。
注意: 1> jsでは、配列は任意の種類の要素を記憶することができる。 2> jsでは、配列の角標本の境界線が存在しないという説がありますが、配列中の要素の数は絶えず増加することができます。異常が発生することはありません。
例:
var arr = ["java","php","python","hadoop"] ;
// "-"
arr = arr.join("-") ;
document.write("arr:"+arr);
document.write("<hr/>") ;
document.write(" :") ;
for(var i = 0 ; i<arr.length ; i++){
document.write(arr[i]+" ") ;
}
document.write("<hr/>") ;
//
arr = arr.reverse() ;
document.write(" :") ;
for(var i = 0 ; i<arr.length ; i++){
document.write(arr[i]+" ") ;
}
方式1：参画構造のある形式。
//
function Person(name,age){ //this:
//
this.name = name ;
this.age = age ;
//
this.speak = function (){
alert(" ...")
}
}
//
var p = new Person(" ",28);
// for-in ,
document.write(p.name+"
") ;
document.write(p.age+"
") ;
//
p.play();
方式2：無参構造の形式。
//
function Person(){
}
//
var p = new Person() ;
//
p.name = " " ;
p.age = 38 ;
//
p.speak = function(){
alert(" ...")
}
// for-in ,
document.write(p.name+"
") ;
document.write(p.age+"
") ;
//
p.play();方式3：Objectオブジェクトを利用して、Objectオブジェクトはjsの中で任意のオブジェクトの一つのテンプレートを表します。
//
function Person(){
}
//
var p = new Object() ;
//
p.name = " " ;
p.age = 29 ;
//
p.play = function (){
alert(" ...") ;
}
// for-in ,
document.write(p.name+"
") ;
document.write(p.age+"
") ;
//
p.play();方式4:
var p = {
// json
//
"name":" ",
"age":28,
"play":function(){
alert(" ...")
}
};
// for-in ,
document.write(p.name+"
") ;
document.write(p.age+"
") ;
//
p.play();作用：jsの中の内蔵対象に追加する方法で使用します。
1>各js内蔵オブジェクトにはプロトタイプの属性があります。
2>原型オブジェクトに方法を追加すると、この方法は自動的に内蔵オブジェクトに追加されます。
3>プロトタイプの属性は、直接に内蔵されたオブジェクトに呼び出されて追加する方法です。
例:
//
// Array search
Array.prototype.search = function(target){
// Array
for(var i = 0 ; i< this.length ; i++){
//
if(this[i] == target){
return i ;
}
}
// , -1
return -1 ;
}
// max()
Array.prototype.max = function(){
//
var max = this[0] ;
//
for(var i = 1 ; i < this.length; i++){
//
if(this[i] > max){
max = this[i] ;
}
}
return max ;
}
//// ,
var arr = [43,65,13,87,3,19] ; //var arr = new Array(43,65,13//) ;
var index = arr.search(3) ;
document.write(" :"+index+"<br/>") ;
var max = arr.max() ;
document.write(" :"+max) ;
機能：ブラウザのウィンドウを表します。
フレームに関する方法：window.alert（「ヒントボックス」）:/windowは省略できます。window.co nfirm（「メッセージダイアログ」）：確認ボックスがあり、キャンセルボックスがあります。prompt：ヒントダイアログがあります。メッセージと入力ボックスがあります。
タイマーに関する方法:
setInterval(タスク、時間ミリ秒値)：このタスクは何ミリ秒後に繰り返し実行されますか？
clear Interval（）：set Intervalに関するタスクをキャンセルする。
window.clear Interval(iIntervalID)：これはIdを挿入します。
setTimeout（タスク、時間ミリ秒値）：何ミリ秒後に一回だけ実行しますか？
clearTimeout（）：setTimeoutに関するタイムアウトイベントをキャンセルする。
例:
// open
function testOpen(){
// open
window.open("06. .html","_blank") ;
}
//
// id
var taskId ;
function testSetInterval(){
// 2 testOpen
taskId = window.setInterval("testOpen()",2000) ;
}
// setInterval
function testClearInterval(){
//
window.clearInterval(taskId) ;
}
// id
var timeoutId ;
//setTimeOut
function testSetTimeout(){
// 3 testOpen
timeoutId = window.setTimeout("testOpen()",3000) ;
}
function testClearTimeout(){
window.clearTimeout(timeoutId)
}
//alert
function testAlert(){
//window.alert(" ....");
alert(" ....");
}
function testConfirm(){
//
var flag = window.confirm(" ? , !!") ;
if(flag){
alert(" ")
}else{
alert(" ") ;
}
}
// ,
function testPrompt(){
var flag = window.prompt(" u !") ;
if(flag){
alert(" ");
}else{
alert(" ");
}
}
現在のURLに関する情報を含みます。
主に属性の一つの方法を学びます。
href属性：ページのhref属性を変更してページジャンプを実現できます。
reload()：タイミング更新；
例:
ハイパーリンク
//loaction:
function testHref(){
//alert(window.location.href) ;
// location href
window.location.href="06. .html" ; //location href
}
function testRelod(){
// reload
window.location.reload() ;
}
//
// : setTimeout() reload() ,
// setTimeout() , setInterval()
window.setTimeout("testRelod()" ,1000) ;
機能：ユーザが閲覧したURLの情報を含みます。
方法:
forward()：履歴リストに次のurlを入れます。
back()：履歴リストに入る前のurl;
go（正の整数または負の整数）：履歴リストからurlに移動します。
例:
ハイパーリンク
function testForward(){
//
//window.history.forward() ;
window.history.go(1) ;
}
役割：顧客画面とレンダリング能力に関する情報を含む。
通常の属性: availHeight：システム画面の作業領域の高さを取得し、Microsoftを排除する。® Windows® タスクバー
avail Width：同上。
例:
document.write(screen.availHeight+"<br/>") ; //
document.write(screen.height+"<br/>") ; //
document.write(screen.availWidth+"<br/>") ; //
document.write(screen.width+"<br/>") ;
1>、クリックに関するイベント：
クリックイベント：onclick
ダブルクリックイベント:ondbclick
2>焦点に関するイベント:
フォーカスイベントを取得:onfocus
焦点を失う事件：onblur
例：クリックとフォーカスに関するイベント。
//
function testClick(){
alert(" ...") ;
}
//
function testDbClick(){
alert(" ...") ;
}
// ( js , , id,id )
function testFocus(){
// id
var usrename = document.getElementById("username") ; //
username.value =""<span style="white-space:pre;"> </span> ;
}
// ( )
function testBlur(){
//
var username = document.getElementById("username").value ;
// span
var nameTip = document.getElementById("nameTip") ;
// "eric",
if(username =="eric"){
// nameTip innerHTML
nameTip.innerHTML = " , ".fontcolor("#00ff00") ;
}else {
nameTip.innerHTML =" ".fontcolor("#ff0000");
}
}
3> タブの変化に関するイベント：onchange
4> マウス関連のイベント:
マウスを使ったイベント：onmouseover
マウスの移動イベント：onmousout
5> ページ読み込みに関するイベント：onload
注意：bodyで使用されていますが、bodyの内容がロードされた後にこのイベントが発生します。
例:
// onchange
function testChange() {
//alert(" ") ;
// id id="jiguan"
var jiguan = document.getElementById("jiguan").value;
//alert(jiguan) ;
// id="city" select
var city = document.getElementById("city");
// , city innerHTML
city.innerHTML = "";
//
if(jiguan == " ") {
//
//
//
var arr = [" ", " ", " "];
//
for(var i = 0; i < arr.length; i++) {
//arr[i]
city.innerHTML += "<option value='" + arr[i] + "'>" + arr[i] + "</option>";
}
}
//
if(jiguan == " ") {
//
//
//
var arr = [" ", " ", " "];
//
for(var i = 0; i < arr.length; i++) {
//arr[i]
city.innerHTML += "<option value='" + arr[i] + "'>" + arr[i] + "</option>";
}
}
//
if(jiguan == " ") {
//
//
//
var arr = [" ", " ", " "];
//
for(var i = 0; i < arr.length; i++) {
//arr[i]
city.innerHTML += "<option value='" + arr[i] + "'>" + arr[i] + "</option>";
}
}
}
//
function testMouseOver() {
alert(" ...");
}
//
function testMouseOut() {
alert(" ...");
}
//
function testLoad() {
alert(" body ...");
}
:
: