webフロントエンドの基礎復習day 06_JavaScript

19869 ワード
webフロントエンド js。 javascript 先端
JavaScript
一.概要
1.概念
  • クライアントスクリプト言語
  • は、クライアントブラウザで実行される.各ブラウザにはJavaScriptの解析エンジン
    • があります.
  • スクリプト言語:コンパイル不要で、直接ブラウザ解析によって実行できます.
    • 2.機能
  • は、ユーザーとhtmlページのインタラクションプロセスを強化することができ、html要素を制御して、ページに動的な効果を持たせ、ユーザーの体験を向上させることができる.
    • 3.発展史
  • 1992年、Nombase社は第一のクライアントスクリプト言語を開発し、フォームの検証に特化しました.名前は:C--で、後で名前を変えます.Script Ease
  • 1995年、Netscape(ネットスケープ)は、クライアントスクリプト言語:LiveScriptを開発しました.その後、SUN会社の専門家を呼んで、LiveScriptを修正して、JavaScript
    • と名づけました.
  • 1996年、マイクロソフトはJavaScriptをパクってJScript言語を開発しました.
  • 1997年、ECMA(ヨーロッパコンピュータメーカー協会)は、クライアントスクリプト言語の標準を制定しました.ECMAScriptは、すべてのクライアントスクリプト言語の符号化方式を統一しました.
  • JavaScript=ECMAScript+JavaScript自分だけのもの(BOM+DOM)
    • 二.基本文法
    1.書き方
    埋め込み型
    ①概要
  • jsコードをタグに いてください.
    • ② 
    <script type="text/javascript">
    var number = 1;
    console.log(number);
</script>
    ③
  • タグは のペアがあり る.
  • タグは、HTMLドキュメントのどこに いてもいいです.
  • タグはHTML 5のドキュメントに、type を かなくてもいいです.

    • ①
  • のjsファイルを し、タグのsrc によって される.
    ② 
    <script src="static/js/index.js"></script>
    ③
  • のHTML には、 の のjsファイルを に することができます.
  • じタグは、jsファイルを したり、jsコードを いたりするために に できません. つのことしかできません.

    • ①
  • jsコードを HTMLのラベルに く
    • ② 
    <button onclick="return confirm('       ?')">  </button>
    2.コメント
    ① コメント:// 
    <script type="text/javascript">
    var number = 1;
    // console.log(number);
</script>
    ② のコメント:/* */
    <script type="text/javascript">
    /*var number = 1;
    console.log(number);*/
</script>
    3.
    ①
  • さいサイズのデータを するメモリ
    • ②Java は いタイプの であり、JavaScriptは いタイプの である.
  • タイプ: を く に、 に に されるデータのデータタイプを します. タイプのデータしか できません.
  • タイプ: を くとき、 の の データタイプを せずに、 のタイプのデータを することができます.
    • ③ :
  • var = .
    • ④typeof : の を します.
  • :null に られるのは、Object
    • です.
    4.データタイプ
    ① データタイプ
  • String: . 「abc」「a」「abc」
  • Number: です. / /NaN(not a number つは ではない タイプ)
  • Boolean:trueとfalse
  • undefined: です. が に えられていない 、デフォルトの り てはundefined
    • になります.
  • null:オブジェクトが のプレースホルダ
    • ② データタイプ
  • :データのセットです.
  • :
  • var numbers = [1,2,3,4];
  • var arr = new Array();
  • オブジェクト: と で されています.オブジェクトの は で、オブジェクトの は です.
  • var object = new Object();: のオブジェクトを する.
  • object.username = "admin";:オブジェクトに を する.
    • 5.
    ①1 :1つの だけの
  • ++ --: ( )
  • ++(--)は、 に ( )してから、
    • を する.
  • ++(--)は に、 に して、 に ら します(マイナスします)
  • +(-)
  • :JSで が に されるタイプでないと、jsエンジンは に をタイプ します.
  • tringはnumberを します. の によって します. の の が でない は、NaN( ではない )
    • になります.
  • bootleanはnumberに します.trueは1になります.falseは0
    • になります.
    ②
    -+ - * / % ... の …
    ③
  • = += -+....はプラスイコールマイナス …
    • ④
  • > < >= <= == ===( )
  • ==と===の い
  • ==の : じタイプの : ;タイプが なる :まずタイプ を い、
    • を する.
  • ===は、 にタイプを し、もしタイプが なるならば、 falseに る.
    • ⑤
  • && || !
  • のタイプのブーメラン:
  • number:0またはNaNは で、その は
    • です.
  • string: の (")を いて、 はすべてtrue
    • です.
  • null&undefined: false
    • です.
  • オブジェクト:すべてのオブジェクトはtrue
    • です.
    ⑥
  • : ? 1: 2;
  • は の を し、trueであれば1を り、falseであれば2を る.
    • var a = 3;
var b = 4;

var c = a > b ? 1:0;
    6. フロー
    ①if…else…
  • :if ( 1) { 1 } else if ( 2) { 2 } else { 3 } 
    • <script>
    var number = 5;
    if (number % 2 == 0) {
     
        console.log(number + "     ");
    } else {
     
        console.log(number + "     ");
    }
</script>
    ②スイッチ:
  • :
    • switch(  ):{
     
	case  1: 
            1;  
         break; 
	case  2:  
            2;  
         break;
    ...  
	default: 
		   n; 
}
  • JSにおいて、switch は のオリジナルデータタイプ
    • を け れることができる.
    • <script>
    var week = 3;
    switch (week) {
     
        case 1:
            console.log("   ");
            break;
        case 2:
            console.log("   ");
            break;
        case 3:
            console.log("   ");
            break;
        // ...
        default:
            console.log("         !")
    }
</script>
    ③for
  • :
    • for (     ;      ;     ) {
     
	   ;
}

    • for (var i = 0; i < 10; i++) {
     
    console.log(i);
}
    ④while
  • :
    • while (     ) {
     
	   ;
	    ;
}
    ⑤ド…while
  • :
    • do {
     
	   ;
	    ;
}while (     );
    します
  • は、99 テーブル
    • をページに する.
    
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>99   title>
        <style>  
            td{
      
                border: 1px solid;
            }

        style>

        <script>

            document.write("");//1.     for    ，     for(var i =1; i <=9; i++){
      
                document.write("");for(var j =1; j <=i ; j++){
      
                    document.write("");}
               
                document.write("");}//2.      
            document.write("
    
            
                 
    
                   ");

                    //    1 * 1 = 1
                    document.write(i + " * " + j + " = " + ( i*j) +"   ");

                    document.write("
                
    
            

            
    "    );

            script>
    head>
    <body>

    body>
html>
    JavaScriptの中の深いコピーと浅いコピー