[学習ノート]JavaScriptの基礎

111024 ワード

JavaScriptの概要
1.JavaScript定義
JavaScriptはNetscape社が開発したものです.
オブジェクトと
イベントドリブン
スクリプト言語弱いタイプの言語です.ブラウザでしか説明できません.
その中:
スクリプト言語:解釈実行
(ブラウザで説明して実行する)
を選択します
オブジェクトに基づいて:いくつかの内蔵オブジェクトを共有していますが、完全に継承、パッケージ、多状態を実現することはできません.
イベントドリブン:必ずイベントによってトリガーされます.
2.JavaScriptの発展過程
1995年には、ネットスケープ(Netscape)がNetscapeで
ブラウザで初めて設計が実現されました.ネットスケープは昇陽(Sun)と提携しているので、ネットスケープの管理層構造はJavaのように見えるように外観を望んでいます.そのため、JavaScriptと名付けられました.しかし、実際には、その文法的なスタイルはSelfとSchemeに近いです.

技術的な優位を獲得するために、マイクロソフトはJScriptを発売しました.CEnviはScript Easeを発売しました.JavaScriptと同じようにブラウザで実行できます.規格を統一するために、1997年には、ECMA(ヨーロッパコンピュータメーカー協会)の調整のもと、ネットスケープ、昇陽、マイクロソフト、Borlandからなる作業グループが統一規格を確定しました.JavaScriptはECMA規格に対応しているので、ECMAScriptとも呼ばれています.
現在の仕様:ECMA-226.
3.JavaScriptの特徴
相互性(情報の動的なインタラクション)クロスプラットフォーム性(ローカルハードディスクへの直接アクセスは許可されていません)セキュリティ(Jsを説明できるブラウザであれば、すべて実行できます.プラットフォームとは関係ありません.)JavaScriptの言語構成
1.核心文法(ECMA Core)
2.ブラウザ対象モデル(BOM、Browser Object Model)
3.ドキュメントオブジェクトモデル(DOM,Dcument Object Model)
JavaScriptとHTMLの結合方式
方法1:
イベントに直接書いて、ブラウザが正しく解釈できない場合、前に「javascript:」を付けます.例えば、javascript:alert('はイベントに書いてあります.)


    
    
    
    
     
     
     
      
      <input type="button" value="  1" onclick="alert('     ')" />

方法2:
scriptタグを使って、ラベルにjsコードを書きます.注意:スクリプトラベルは、独立した終了ラベルが必要です.


    
    
    
    
     
     
     
      
      <script type="text/javascript" > 
     
     
     
     
      
      function _second(){ 
     
     
     
     
      
       alert("  script  ，     js  "); 
     
     
     
     
      
      } 
     
     
     
     
      
      </script> 
     
     
     
     
      
        
     
     
     
     
      
      <input type="button" value="  2" onclick="_second()" />

方法3:
外部のjsファイルを導入して、と間
JavaScriptコードがあってはいけません.


    
    
    
    
     
     
     
      
      <script type="text/javascript" src="demo.js" ></script> 
     
     
     
     
      
        
     
     
     
     
      
      <input type="button" value="方法3" onclick="_third()" />

注意:
JavaScriptの各文の最後のセミコロンは必須ではないですが、追加してください.JavaScriptの変数、方法と演算子は大きさの書き込みに敏感です.JavaScriptはウェブページのラベル内のどこにでも書いてもいいですが、普通は「head」のラベルの中にあります.JavaScriptを使って出力をプリントしてこそ、JavaScriptを＜body＞ラベルに書くことができます.JavaScriptの基本文法
1.コメント

2.変数定義
varキーワードを使って変数定義をしても、使わなくてもいいです.


    
    
    
    
     
     
     
      
      var a = 1; 
     
     
     
     
      
      a = "test"; 
     
     
     
     
      
      a = 3.1415926; 
     
     
     
     
      
      a = false; 
     
     
     
     
      
      b = 3;

JavaScriptは弱いタイプの言語なので、データの種類は値によって決まります.
3.変数の種類
5つの基本的なデータのタイプ:Udefined、Null、Boolean、Number、Stringは、スタックエリアに格納されます.
参照データの種類:ヒープ領域に格納します.


    
    
    
    
     
     
     
      
      var v1 = 10; //number 
     
     
     
     
      
      var v2 = 15.6; //number 
     
     
     
     
      
      var v3 = "abc"; //string 
     
     
     
     
      
      var v4 = false; //boolean 
     
     
     
     
      
      var v5; //undefined 
     
     
     
     
      
      var v6 = null; //基本数据类型是null，用typeof验证的时候是object

Unidefined:typeof()はUnidefinedとして試験します.null:typeof()はObjectとして試験します.var str=「abc」基本データタイプ文字列.var str=new String(abc);データタイプの文字列オブジェクトを参照します.基本データタイプ文字列は、JavaScriptが弱いタイプの言語なので、文字列オブジェクトを直接呼び出す方法があります.4.弱タイプ変換


    
    
    
    
     
     
     
      
      var v1 = "1.5"; 
     
     
     
     
      
      var v2 = 3; 
     
     
     
     
      
      var v3 = v2 + v1; //string 
     
     
     
     
      
      var v4 = v2 - v1; //number 
     
     
     
     
      
      var v5 = v2 * v1; //number 
     
     
     
     
      
      var v6 = v2 / v1; //number

5.演算子
加減乗除:文字列＋数字は文字列で、残りは全部numberに戻ります.和と非:& 左右両方とも成立すれば真;𞓜𞓜:左右に一方があるのは本当です.逆を取る条件演算、2つの等号の比較値の内容、3つの等号の比較は値の内容とデータの種類です.例


    
    
    
    
     
     
     
      
      var u = 10; 
     
     
     
     
      
      var t = "10"; 
     
     
     
     
      
      alert(u==t); // true 
     
     
     
     
      
      alert(u===t); // false

三項演算子:判定式?式1:式2;javaScriptの中で、'、0、false、undefined、NaN、nullはうそで、残りは全部本当です.例


    
    
    
    
     
     
     
      
      var v = NaN ? 10 : 20; // 20

6.フロー制御
6.1条件

その中で、else ifとelseは必須ではない.
6.2サイクル
方式一:
while(condition){
statement
)
方式二:
ド{
statement
｝while(condition);
方式三:
for(初期化式、循環条件式、循環後動作式)｛
statement
)
whileサイクルは先に判断して実行します.do-whileサイクルは先に実行して判断します.forサイクルはまず初期化式を行い、循環条件式を判断し、満足したら循環体を実行し、その後循環後の動作式を実行し、満たされないまで循環条件式を判断します.すなわち初期化表現は最初に一回だけ実行され、次に条件式->循環体->動作式のループ実行が行われます.6.3複数選択


    
    
    
    
     
     
     
      
      switch 
        
      ( 
      choice 
      ) 
        
      { 
     
     
     
     
      
        
      case 
        
      1 
      : 
     
     
     
     
      
       statement1 
      ; 
     
     
     
     
      
        
      break 
      ; 
     
     
     
     
      
        
      case 
        
      2 
      : 
     
     
     
     
      
       statement2 
      ; 
     
     
     
     
      
        
      break 
      ; 
     
     
     
     
      
        
      default 
      : 
     
     
     
     
      
        
      // bad input 
     
     
     
     
      
       statement3 
      ; 
     
     
     
     
      
        
      break 
      ; 
     
     
     
     
      
      }

caseラベルは、任意のデータタイプvarであってもよい.switch文は、オプション値にマッチしたcaseタブから、break文に出会うか、またはswitch文の終了まで実行します.マッチしたcaseタグがない場合、default子句がある場合は、このサブフレーズを実行します.6.4ケース
動的印刷テーブル


    
    
    
    
     
     
     
      
      <html> 
     
     
     
     
      
        
     
     
     
     
      
      <head> 
     
     
     
     
      
       <title>动态打印表格</title> 
     
     
     
     
      
      </head> 
     
     
     
     
      
        
     
     
     
     
      
      <body> 
     
     
     
     
      
       <script type="text/javascript"> 
     
     
     
     
      
       //document 是DOM中的内置对象,有一个输出方法write() 
     
     
     
     
      
       document.write("<table border='1' width='600px' height='300px'>"); 
     
     
     
     
      
       for (var i = 0; i < 5; i++) { 
     
     
     
     
      
       document.write("<tr>"); 
     
     
     
     
      
       for (var j = 0; j < 5; j++) { 
     
     
     
     
      
       document.write("<td align='center'>第" + (i + 1) + "行，第" + (j + 1) + "列</td>"); 
     
     
     
     
      
       } 
     
     
     
     
      
       document.write("</tr>"); 
     
     
     
     
      
       } 
     
     
     
     
      
       document.write("</table>"); 
     
     
     
     
      
       </script> 
     
     
     
     
      
      </body> 
     
     
     
     
      
        
     
     
     
     
      
      </html>

効果
逆三角形を印刷


    
    
    
    
     
     
     
      
      <script type="text/javascript"> 
     
     
     
     
      
      var icon = "\u263a"; 
     
     
     
     
      
      for (var i = 0; i < 6; i++) { 
     
     
     
     
      
       for (var j = 0; j < i; j++) { 
     
     
     
     
      
       document.write("  "); 
     
     
     
     
      
       }; 
     
     
     
     
      
       for (var j = 0; j < (6 - i); j++) { 
     
     
     
     
      
       document.write(icon+"  "); 
     
     
     
     
      
       }; 
     
     
     
     
      
       document.write("<br />"); 
     
     
     
     
      
      }; 
     
     
     
     
      
      </script>

効果
JavaScript方法の定義
メソッドのキーワードを指定します.
方法1:
functionメソッド名(パラメータ)｛
方法体
(戻り値がある可能性があります.戻り値がない可能性があります.)
)
例


    
    
    
    
     
     
     
      
      //没有参数没有返回值 
     
     
     
     
      
      function _myfunction() { 
     
     
     
     
      
       alert("hello world"); 
     
     
     
     
      
      } 
     
     
     
     
      
      //调用方式  
     
     
     
     
      
      _myfunction(); 
     
     
     
     
      
        
     
     
     
     
      
      //没有参数，有返回值 
     
     
     
     
      
      function _myfunction() { 
     
     
     
     
      
       return "hello world"; 
     
     
     
     
      
      } 
     
     
     
     
      
      //调用方式 
     
     
     
     
      
      alert(_myfunction()); 
     
     
     
     
      
        
     
     
     
     
      
      //有参数，没有返回值 
     
     
     
     
      
      function _myfunction(str) { 
     
     
     
     
      
       alert(str); 
     
     
     
     
      
      } 
     
     
     
     
      
      //调用方式 
     
     
     
     
      
      _myfunction("hello World"); 
     
     
     
     
      
        
     
     
     
     
      
      //有参数和返回值 
     
     
     
     
      
      function _myfunction(str) { 
     
     
     
     
      
       return ("hello javascript " + str); 
     
     
     
     
      
      } 
     
     
     
     
      
      //调用方式 
     
     
     
     
      
      alert(_myfunction("test"));

方法2:
varメソッド名=function(パラメータ)｛
方法体
(戻り値があるかもしれないし、ないかもしれない)
)
例


    
    
    
    
     
     
     
      
      var _myfunc = function() { 
     
     
     
     
      
       alert("hello second defined function "); 
     
     
     
     
      
      } 
     
     
     
     
      
        
     
     
     
     
      
      //调用方式 
     
     
     
     
      
      _myfunc(); 
     
     
     
     
      
      alert(_myfunc); // 把等号后面的内容当成变量的值输出 
     
     
     
     
      
      alert(_myfunc()); // 先运行方法体，然后输出undefined

方法3(一般的ではない):
varメソッド名=new Function(パラメータ1、パラメータ2、パラメータn、メソッド内容)
例


    
    
    
    
     
     
     
      
      var _mytest = new Function("a", "b", "return a+b;"); 
     
     
     
     
      
        
     
     
     
     
      
      //调用方式 
     
     
     
     
      
      alert(_mytest(1, 2));

JavaScriptグローバルアプローチ
1.isNaN
数字ではない場合はtrueに戻り、数字の場合はfalseに戻ります.


    
    
    
    
     
     
     
      
      var a = "test"; 
     
     
     
     
      
      alert(isNaN(a)); // true

2. parseInt,parseFloat
文字列を解析します.パーrseIntは整数に解析され、整数であれば正常に解析され、浮動小数であれば整数部分を返し、数字でなければNaNに戻る.パーrseFloatは浮動小数点に解析し、浮動小数点であれば正常に解析し、一つの数字でなければNaNに戻る.
例


    
    
    
    
     
     
     
      
      var s = "1"; 
     
     
     
     
      
      alert(parseInt(s)+1); // 2 
     
     
     
     
      
      var t = "s"; 
     
     
     
     
      
      alert(parseInt(t)); // NaN 
     
     
     
     
      
      var u = 3.1415926; 
     
     
     
     
      
      alert(parseInt(u)); // 3 
     
     
     
     
      
        
     
     
     
     
      
      var a = "3.1415926"; 
     
     
     
     
      
      alert(parseFloat(a)); // 3.1415926 
     
     
     
     
      
      var b = "test"; 
     
     
     
     
      
      alert(parseFloat(b)); // NaN

3. エバー
evalのパラメータをjsコードとして実行します.


    
    
    
    
     
     
     
      
      eval("alert(1+2)"); // 3

4. escapeとunescape
文字列を符号化し、復号することで、プラットフォームの影響を受けずにすべてのコンピュータで文字列を読み取ることができる.


    
    
    
    
     
     
     
      
      var v1 = " test"; 
     
     
     
     
      
      var v2 = "你好"; 
     
     
     
     
      
      alert(escape(v1)); // "%20%20%20%20%20%20test" 
     
     
     
     
      
      alert(escape(v2)); // "%u4F60%u597D" 
     
     
     
     
      
        
     
     
     
     
      
      var v3 = "%20%20%20%20%20%20test"; 
     
     
     
     
      
      var v4 = "%u4F60%u597D"; 
     
     
     
     
      
      alert(unescape(v3)); // " test" 
     
     
     
     
      
      alert(unescape(v4)); // "你好"

5. encodeURIとdecodeURI
文字列をURIとして符号化・復号する.


    
    
    
    
     
     
     
      
      var uri = " test你好"; 
     
     
     
     
      
      document.write(encodeURI(uri)); // "%20%20%20%20%20%20test%E4%BD%A0%E5%A5%BD" 
     
     
     
     
      
      var _uri = "%20%20%20%20%20%20test%E4%BD%A0%E5%A5%BD"; 
     
     
     
     
      
      document.write(decodeURI(_uri)); // " test你好"

JavaScript常用対象
1.アラy
配列定義は、配列長を指定せずに、配列内のデータタイプを任意に混合することができます.配列を初期化する方法は自由です.方法はわりに多くて、具体的に文書を調べます.


    
    
    
    
     
     
     
      
      var arr = new Array(); // 创建数组 
     
     
     
     
      
      arr[0] = "a"; 
     
     
     
     
      
      arr[1] = 3; 
     
     
     
     
      
      arr[15] = 5; 
     
     
     
     
      
      alert(arr[14]); // undefined 
     
     
     
     
      
        
     
     
     
     
      
      var arr1 = new Array(5); // 初始化一个数组，长度为5 
     
     
     
     
      
      var arr2 = new Array(1, 2, 3, 4); // 初始化一个数组长度为4，并初始化了元素 
     
     
     
     
      
      var arr3 = [5]; // 初始化一个数组长度为1，并初始化了元素

一般的な方法
指定されたセパレータで文字列join()に変換します.
配列の末尾に要素push()pop()を追加して削除します.
配列を辞書で並べ替えるsort()2.String
基本データタイプStringタイプ変数に対してStringオブジェクトメソッドを使用することができます.一般的な方法(多くはJavaと似ている)
文字列はsubString(a,b)を切り取ります.aからbを切り取ります.頭は尾を含みません.subStr(a,b):aからb文字を切り取ります.方法はわりに多くて、具体的に文書を調べます.例


    
    
    
    
     
     
     
      
      var s = "hello-world"; 
     
     
     
     
      
      var s1 = s.substring(2,5); 
     
     
     
     
      
      document.write(s1+"<br />"); // "llo" 
     
     
     
     
      
      var s2 = s.substr(2,5); 
     
     
     
     
      
      document.write(s2+"<br />"); // "llo-w"

3.Date
Javaに似ています
方法はわりに多くて、具体的に文書を調べます.


    
    
    
    
     
     
     
      
      var mydate = new Date(); 
     
     
     
     
      
      alert(mydate.getDate()); // 日：15 
     
     
     
     
      
      alert(mydate.getMonth()); // 月1：0 
     
     
     
     
      
      alert(mydate.getDay()); // 星期四：4

4.Math
Javaに似ています
方法はわりに多くて、具体的に文書を調べます.


    
    
    
    
     
     
     
      
      var t = Math.random(); // 返回的是0-1之间的随机数 
     
     
     
     
      
      var f = Math.floor(-5.9999); // 下舍入：-6 
     
     
     
     
      
      var s = Math.round(-3.5); // 四舍五入：-3

5. RegExp
5.1正規表現オブジェクトの作成
newを使ってオブジェクトを作成:var_reg=new RegExp(「正規表現」)正規表現を直接使用してオブジェクトを作成します.reg=/^正規表現/ダブルクォーテーションは不可です.5.2正規表現の使用
test()メソッドは正規表現と整合するために使用されます.
方法はわりに多くて、具体的に文書を調べます.


    
    
    
    
     
     
     
      
      <script type="text/javascript"> 
     
     
     
     
      
      function _check() { 
     
     
     
     
      
       var _reg = /^[0-9]{11}/; 
     
     
     
     
      
       var _tel = document.getElementsByName("tel")[0].value; 
     
     
     
     
      
       if (_reg.test(_tel)) { 
     
     
     
     
      
       alert("是一个电话号码"); 
     
     
     
     
      
       } else { 
     
     
     
     
      
       alert("不是一个电话号码"); 
     
     
     
     
      
       } 
     
     
     
     
      
      } 
     
     
     
     
      
      </script> 
     
     
     
     
      
      电话号码： 
     
     
     
     
      
      <input type="text" name="tel" /> 
     
     
     
     
      
      <br/> 
     
     
     
     
      
      <input type="button" value="检查是否是电话号码" onclick="_check()" />

先端モジュール化仕様ノート