JavaScript基礎精講

11360 ワード
JavaScript js。 関数 dom bom
----------------------------------------------------------------------------[著作権申明:本文は著者オリジナルで、転載は出典を明記してください.]文章の出所:http://blog.csdn.net/sdksdk0/article/details/51596213 作者:朱培-----------------------------------------------------
本論文は主にjavascriptの紹介から始まり、Js文法、JS関数、BOMプログラミングとDOMプログラミングに関する知識を共有する.
一、JS概要
1.1プロファイル
JavaScriptは直訳式スクリプト言語で、ダイナミックタイプ、弱タイプ、プロトタイプに基づく言語で、サポートタイプを内蔵しています.そのトランシーバーはJavaScriptエンジンと呼ばれています.ブラウザの一部として、クライアントのスクリプト言語に広く使われています.最初はHTML(標準共通マーク言語の下のアプリケーション)ページで使用されています.HTMLページにダイナミック機能を追加します.
1.2構成部分
コア(ECMAScript):データタイプ、ステートメント、ステートメントなど.コアオブジェクト
ドキュメントオブジェクトモデル(DOM):Dockment Object Model(XML DOMとHTML DOM)
ブラウザ対象モデル(BOM):BrowserObject Model(コアオブジェクト:window、locationなど)
1.3作成方式
直接イベントで呼び出す:
onClick="alert('hello');"
内部編集方式:
<script  type="text/javascript" >
    alert("hello good mi");
</script>
外部モード:
<script type="text/javascript"  src="1.js" ></script>
二、JS文法
2.1基本文法
jsの文法の多くはjavaと似ていますが、また違っています.特に言うべきはjavaとjavascriptは全く違っています.雷鋒と雷鋒塔のようです.よく使われる変数やデータの種類を見てみましょう.
・var合法的な変数名.
        変数名はキーワードを使用できません.複数の変数はカンマで区切られます.
      ·演算記号はJavaと同じです.
      · if(表現){}
          else{}
      · for(初期化;条件;増分または減量){}
      ·while(条件){}
      ·switch(表現)
          {case定数値1:JavaScript文;
            case定数値2:JavaScript文;
            default:JavaScript文;
       •タイプ:number/null/bollan/string/object/undefinde
       •タイプ変換:パーrseFloat()とパーrseInt()関数を把握する.
       •ポイント定義関数:function関数名(パラメータリスト){}
              注:パラメータがなくても大丈夫です.
              コール機能:イベント名=「関数名()」
               フォームデータの取得:document.フォーム名.フォーム要素名.value
例:
<script type="text/javascript" >                                                                                                                          var v2="abc";
alert(typeof v2);
var v3=100;
alert(typeof v3);  //number  
var v5=new Date();
alert(typeof v5);  //object                                                                                                                            </script>
2.2 データの種類
変数、関数、演算子は大文字と小文字を区別します.変数は弱いタイプで、var a=10;コメント://と/**/5種類のオリジナルデータタイプ:Under fined、Null、Boolean、Number、String JavaScriptはダイナミックタイプを持っています.これは同じ変数が異なるタイプとして利用できることを意味します.
JavaScriptは一つの数字タイプしかありません.数字は小数点を持ってもいいし、持たなくてもいいです.
オブジェクトはかっこで区切られます.括弧内では、オブジェクトの属性は名前と値のペアとして定義されます.属性はコンマで区切られています.
JavaScriptの基本的なデータタイプは、数字型、文字列型、ブール値の3種類があり、基本的なデータタイプ以外に、JavaScriptは対象、配列、関数、null、undefinedデータタイプもサポートしています.JavaScriptは他の言語と同様に定数と変数もサポートされていますが、JavaScriptの変数は無タイプで、つまり任意のデータタイプのデータを格納することができます.
JavaScriptでは演算子が多く、演算子、関係演算子、文字列演算子、割当値演算子、論理演算子、ビット単位演算子、その他の演算子の7つのカテゴリーに分けることができます.使用中
JavaScriptの演算子は、異なる演算子の優先順位に注意します.
三、JS関数
3.1基本関数
 形式パラメータ:関数を定義するときに関数によって定義されるパラメータです.パラメータの種類と位置を表します.
        実際のパラメータ:関数を呼び出すと、関数のパラメータ値に渡されます.
        呼び出し時:実参の値を形参に渡す.
        関数名は、大文字と小文字を区別します.
        複数のパラメータをカンマで区切って、関数を呼び出すには、カンマで区切られた各パラメータに対応する値を指定しなければなりません.
        結果を返す必要があるなら、return文を使います.
書き方:
方式1 関数名([パラメータ]){関数体}
戻り値があります.直接return
方式2 var関数名=function([パラメータ]){関数体}
方式3 var関数名=new function([パラメータ],関数体)
 3.2常用関数の方法
Arayは可変長配列である.contact();複数の配列をリンクして、新しい配列を返します.
ジョイン:配列要素をリンクし、指定された文字を使用します.pop、push、スタック構造valueOf()は、配列の元の値を返します.
sort()は、文字順に並べ替えられます.
3.3例
var arr1=["a","b","c"];
	alert(arr1.length);
	var arr2=new Array();  //   
	alert(arr2.length);
	arr2[0]="a";
	alert(arr2.length);
	*/
	//     ，    
	/*var arr4=new Array("a","b","c");
	for(var i=0;i<arr4.length;i++){
		alert(arr4[i]);
	}
	*/
	//contact();      ，       
	/*var arr1=["a","b"];
	var arr2=["b","d"];
	var arr3=arr1.concat(arr2);
	for(var i=0;i<arr3.length;i++){
		document.write(arr3[i]+"<br />");
	}
	*/
	//join:      ，      。
	/*var arr1=[2016,6,2];
	var result=arr1.join("-");
	document.write(result);	
	*/
	//pop、push
	//        
	/*function comp(a,b){
		return a-b;	
	}
	var arr1=[1,3,100,5,4,9,7];
	arr1.sort(comp);
	for(var i=0;i<arr1.length;i++){
		document.write(arr1[i]+"<br />");
	}
	*/
	/*var v1="  ";
	if(v1){
		alert("true");
	}else{
		alert("false");	
	}
	*/
	/*var now=new Date();
	document.write(now.toLocaleDateString()+"<br />");
	document.write(now.getTime());
	*/
	/*for(var i=0;i<100;i++){
		document.write(Math.random());
	}
	*/
	/*var s1="abc"+"ddd";
	document.write(s1.bold());
	*/
	/*var s1="jbjlnxln";
	alert(s1.substr(1,3));
	alert(s1.substring(2,9));
	*/
	//var reg1=new RegExp("^\\d+$");
	/*var s1="1234";
	var s2=s1.match(reg1); //  s1        
	alert(s2);
	var reg1=/^\d+$/;
	*/
四、BOMベース
4.1 Bom概要
BOMはbrowser object modelの略語で、ブラウザオブジェクトモデルと略称される.
BOMは、コンテンツとは独立してブラウザウィンドウと対話するオブジェクトを提供する.
BOMは主にウィンドウとウィンドウの間の通信を管理するために用いられているので、そのコアオブジェクトはwindow である.
BOMは一連の関連するオブジェクトから構成され、各オブジェクトには多くの方法と属性が提供されている.
BOMは標準に欠けています.JavaScript文法の標準化組織はECMAで、DOMの標準化組織はW 3 C です.
BOMは最初にNetscapeブラウザ標準の一部であるです.
windowの対象はBOMのトップ(核心)の対象で、すべての対象はそれを通じて(通って)伸びてきたのです.windowとも言える子供の対象はwindowがトップの対象なので、そのサブオブジェクトを呼び出した時に表示されない指定windowオブジェクトです.
4.2例1:ボタンをクリックすることにより、シャッター操作がある.
demo 4.htmlの中で
<script type="text/javascript">
	/*function chose(){
		var rtValue=window.showModalDialog("demo3.html","","dialogHeight:100px,dialogwidth:100px");
		document.getElementById("name").value=rtValue;
		
	}*/
	function chose(){
		window.showModalDialog("demo3.html",window,"dialogHeight:100px,dialogwidth:100px");
	}
	

</script>

<body>

<input type="text" id="name" name="name"  value="" />
    <input type="button" value="  "  onclick="chose()" />


</body>
はdemo 3.htmlにあります.
<script type="text/javascript">
  	function rtValue(inputObj){
		/*var v=inputObj.value;
		window.opener.document.getElementById("name").value=v;
		window.close();
		*/
		
		/*window.returnValue=inputObj.value;
		window.close();
		*/
		
		var rtValue=inputObj.value;
		window.dialogArguments.document.getElementById("name").value=rtValue;
		window.close();
	}
  </script>
  
<body>
    <input type="radio" name="type"  value="    "  
    onclick="rtValue(this)" />    <br />
    <input type="radio" name="type"  value="    " 
    onclick="rtValue(this)"/>    <br />
    <input type="radio" name="type"  value="    " 
    onclick="rtValue(this)"/>    <br />
    <input type="radio" name="type"  value="    " 
    onclick="rtValue(this)"/>    <br />

</body>
4.3例2:ウェブページ時間の動的表示
<script type="text/javascript">
  	/*function showTime(){
		var date=new Date();
		document.getElementById("time").innerHTML=date.toLocaleString();	
		window.setTimeout("showTime()",1000);
	}
	window.setTimeout("showTime()",1000);
		*/
		
	function showTime(){
		var date=new Date();
		document.getElementById("time").innerHTML=date.toLocaleString();	
	}
	var i1=window.setInterval("showTime()",1000);	
	
	function stop(){
		window.clearInterval(i1);	
	}
	function start(){
		i1=	window.setInterval("showTime()",1000);
	}
		
  </script>
  
<body>
         ：<span id="time" ></span>
    <input type="button" value="  "  onclick="stop()" />
    <input type="button" value="  "  onclick="start()" />

</body>
4.4 history対象
ウェブページの次のステップ、または前のページの内容に戻ります.
<script type="text/javascript">

function jump(){
	window.location.href="http://www.tianfang1314.cn";	
}
</script>

<body>

<a href="javascript:window.history.back()" >  </a>
<a href=" javascript:window.history.forward()">  </a>   
<input type="button" value="  " onclick="jump()" />
五、DOMベース
5.1 Domの構造
DOM(Dcument Object Model)標準はW 3 Cです.文書を木のような構造とする
ノード:DOMの中ではすべてノードです.
Element:元素ノード
Attr:プロパティノード
Text:テキストノード
document:ドキュメントノード
5.2 Nodeでの一般的な属性と方法
JavaScript基础精讲_第1张图片
例:ホームページの全選択と逆選択
<script  type="text/javascript">
	window.onload=function(){
		document.getElementById("b1").onclick=function(){
			//  name  checkbox  
			//XMLDOM  
			/*var hobbyNodes=document.getElementsByName("hobby");
			for(var i=0;i<hobbyNodes.length;i++){
				hobbyNodes[i].setAttribute("checked","checked");
			}*/
			
			//HTML DOM
			var hobbyNodes=document.getElementsByName("hobby");
			for(var i=0;i<hobbyNodes.length;i++){
				hobbyNodes[i].checked=true;
			}
		}
		document.getElementById("b2").onclick=function(){
				var hobbyNodes=document.getElementsByName("hobby");
				for(var i=0;i<hobbyNodes.length;i++){
					hobbyNodes[i].checked=false;
				}	
		}
			document.getElementById("b3").onclick=function(){
				var hobbyNodes=document.getElementsByName("hobby");
				for(var i=0;i<hobbyNodes.length;i++){
					hobbyNodes[i].checked=!hobbyNodes[i].checked;
				}	
			}
			document.getElementById("c1").onclick=function(){
				
				var hobbyNodes=document.getElementsByName("hobby");
				for(var i=0;i<hobbyNodes.length;i++){
					hobbyNodes[i].checked=this.checked;
				}	
			}
		
	}

</script>
<body>
	       ：<br />
    <input type="checkbox" id="c1" />  /   <br />
    <input type="checkbox" name="hobby" value="fb" checked="checked"/>  
    <input type="checkbox" name="hobby" value="bb" />  
 	<input type="checkbox" name="hobby" value="ppb" />   
  	<input type="checkbox" name="hobby" value="ymb" />   
	<br />
    <input  type="button" id="b1" value="  "  />
    <input  type="button" id="b2" value="   "  />
    <input  type="button" id="b3" value="  "  />
    
</body>
まとめ:Javascript全体の知識は比較的に些細で素晴らしいです.公式文書は実は私達が必要なツールです.文書を確認し、正確に文書を使うことは開発者に必要なスキルです.もっと勉強したいのは私のブログに注目してもいいです.同時に下記のオススメの良い本を見てもいいです.「JavaScript権威の手引き」、「JavaScript DOMプログラミング芸術」、「鋭いJQuery」、「深入りNode.js」.
Unbale to list target plot forms.When I try to build to Andriod on Mac
Java日記学習一:Log 4 jとcommons-logingの関係