WEBフロントエンド学習(三)——JavaScript

23524 ワード
Webフロントエンド
文書ディレクトリ
  • JavaScriptベース
  • JavaScript紹介
  • JavaScript実装
  • JavaScript出力
  • JavaScript構文
  • JavaScriptコメント
  • JavaScript変数
  • JavaScriptデータ型
  • JavaScript構文
  • JavaScript演算子
  • JavaScript条件文
  • JavaScriptループ文
  • JavaScriptジャンプ文
  • JavaScript関数
  • 関数
    • の理解
  • 定義関数
  • 関数呼び出し
  • パラメータ付き関数
  • 戻り値付き関数
  • グローバル変数およびローカル変数
  • JavaScript例外取得
  • 異常捕獲
  • イベント
  • JavaScriptDOMオブジェクト概要
  • DOM概要
  • DOM操作HTML
  • DOM操作CSS
  • DOM EventListener
  • JavaScriptイベント詳細
  • JavaScriptイベントフロー
  • イベント処理
  • イベントオブジェクト
  • JavaScript内蔵オブジェクト
  • オブジェクト
    • とは
  • String文字列オブジェクト
  • Date日付オブジェクト
  • Array配列オブジェクト
  • Mathオブジェクト
  • JSDOMオブジェクト制御HTML要素詳細
  • JSブラウザオブジェクト
  • windowオブジェクト
  • タイマー
  • Historyオブジェクト
  • Locationオブジェクト
  • JS滝流効果
  • JSオブジェクト向け
  • 認識対象
  • オブジェクト向け
    • JavaScriptベース
    JavaScriptの紹介
    JacaScriptはインターネット上で最も流行しているスクリプト言語であり、WEBやHTMLに使用でき、サーバ、PC、モバイルに広く使用されている.
    JavaScriptスクリプト言語:
  • JSは軽量級のプログラミング言語
    • である.
  • JSはHTMLページに挿入可能なプログラミングコード
  • JS HTMLページを挿入すると、すべてのブラウザで
    • を実行できます.
    JavaScript実装
  • JS用法:
  • HTMLのスクリプトは、/ラベルの間にある必要があります.
  • スクリプトは、HTMLページの「body」および「head」セクションの
    • に配置することができる.
  • JSタグ
  • JS使用制限
  • HTMLでは、スクリプト数
    • に制限はありません.
  • は、通常、ページコンテンツ
    • に干渉することなく、スクリプトをラベルに配置する.
    JavaScript出力
  • JSは通常HTML
    • を操作するために使用される
  • ドキュメント出力:
          document.write("
    this is my first JS
    ");
    • JavaScript構文
  • JS文:ブラウザにコマンドを発行し、ブラウザに何をすべきかを教える
  • セミコロン:オプション
  • JSコード:実行順作成順実行
  • 識別子:
  • は、アルファベット、下線、またはドル記号で
    • を開始する必要があります.
  • JSキーワードは使用できません
  • スペース:JSは余分なスペース
    • を無視します
  • コード改行
  • リザーブ
    • JavaScriptコメント
  • 単行コメント:
  • //
  • 複数行コメント:/**/
    • JavaScript変数
    情報を格納するコンテナ
    JavaScriptデータ型
  • 文字列(String)
  • 数字(Number)
  • ブール(Boolean)
  • 配列(Array)
  • オブジェクト(Object)
  • null
  • 未定義
  • はnullにコピーすることによって変数
    • をクリアすることができる.
            // No.1
        var arr=["jjike", "fjdk", 3, 4];
        document.write(arr[1]);
        // No.2
        var num = new Array( );
        num[0] = 1;
        num[1] = 2;
        num[3] = 4;
        document.write(num[0]);
        // N0.3
         var num = new Array("hello","guys","welcome");
        document.write(num[0]);

    JavaScript構文
    JavaScript演算子
  • 算術演算子
  • 賦値演算子
  • 文字列アクション
  • 比較演算子
    • === !==
  • 論理演算子
  • 条件演算子
    • // 孩子啊，长点心吧
 <p>i = 10, j = 10; i + j = ?</p>
    <p id="sumid"></p>
    <button onclick="mysum()">结果</button>
    <script>
        function mysum() {
            var i = 10;
            var j = 10;
            var m = i + j;
            document.getElementById("sumid").innerHTML=m;

        }
    </script>

    JavaScript条件文
  • if…else
  • switch

    • JavaScriptループ文
  • forサイクル、for/in
  • whileサイクル、do...whileサイクル
    • JavaScriptジャンプ文
  • break
  • continue

    • JavaScript関数
    関数の理解
  • 関数:イベントによって駆動する、または呼び出されたときに実行される再利用可能なコードブロック
    • .
       <script>
        function demo(a, b) {
            var sum = a+b;
            return sum;
        }
        var v1 = demo(10, 10);
        alert(v1);  // 弹出对话框
   </script>

    関数の定義
  • 定義関数
    • function 函数名（）{
     函数体；
}
  • 注意:大文字と小文字が極めて敏感
    • 関数呼び出し
    呼び出し方法:
  • ラベル内で
    • を呼び出す
  • HTMLファイルで
    • を呼び出す.
       <script>
        function demo() {
            var a = 10;
            var b = 10;
            var sum = a+b;
            alert(sum);
        }
    </script>
    <button onclik="demo()">按钮<button>

    パラメータ付き関数
    戻り値付き関数
    グローバル変数とローカル変数
    JavaScript例外取得
    例外キャプチャ
  • 異常:JSエンジンがJSコードを実行する時、エラーが発生し、プログラムの運行を停止する
  • 異常放出:異常が発生すると、この異常はエラー情報
    • を生成する.
  • 異常キャプチャ:
    • try{
		发生异常的代码块；
}catch(err){
		错误信息处理；
}

        <script>
        function demo() {
            try{
                alert(str);
            }catch(err){
                alert(err)
            }
        }
       demo();
    </script>
  • Throw文:throw文によるカスタムエラー
    • を作成
    <body>
    <form>
        <input id="txt" type="text">
        <input id="btn" type="button" onclick="demo()" value="按钮">
    </form>

    <script>
        function demo() {
            try {
                var e = document.getElementById("txt").value;
                if (e == "") {
                    throw "请输入";
                }
            }catch(err){
                alert(err);
            }
        }
       demo();
    </script>

</body>

    ≪イベント｜Events｜ldap≫
  • イベント:JSによって検出可能な動作
  • 主要イベント
    • ≪イベント｜Events｜ldap≫
    説明
    onClick
    イベントをクリック
    onMouseOver
    マウスがイベントを通過
    onMouseOut
    イベントをマウスで移動
    onChange
    テキスト内容変更イベント
    onSelect
    テキストボックス選択イベント
    onFocus
    カーソル集約イベント
    onBlur
    カーソルイベントの移動
    onLoad
    Webロードイベント
    onUnload
    Webイベントを閉じる
    //页面效果need
// HIML
    <div class="div" onmouseout="onOut(this)" onmouseover="onOver(this)"></div>
    <script>
        function onOver(ooj){
            ooj.innerHTML = "hello";
        }
        function onOut(ooj) {
            ooj.innerHTML = "world";
        }
    </script>
 // CSS
.div{
    width: 100px;
    height: 100px;
    background-color: #99CC33;
}

    //账号输入，密码输入need

    <form>
        <input type="txt" onchange="changedemo(this)">
    </form>
    <script>
        function changedemo(bg) {
            alert("hello,内容被改了");
        }
    </script>

    JavaScriptDOMオブジェクトの概要
    DOMの概要
  • HTML DOM:Webページがロードされると、ブラウザはページのドキュメントオブジェクトモデル(Document Object Model)
    • を作成します.
    Document
    Root element < html>
    Element:< head>
    Element < body>
    Element: < title>
    Text:my title
    Element: < a>
    Element: < h1>
    Attribute href
    Text:My link
    Text: My header
    DOM操作HTML
  • JSは、ページ内のすべてのHTML要素
    • を変更することができる
  • JSページ内のすべてのHTML属性を変更できる
  • JSページ内のすべてのCSSスタイルを変更できる
  • JSページ内のすべてのイベントに反応できる
    • DOM操作CSS
  • HTML出力ストリーム
    • を変更する.
    ドキュメントのロードが完了した後にdocumentを使用しないでください.write()は、ドキュメントを上書きします.
    
// 覆盖文档
    <p>hello</p>
    <button onclick="demo()">按钮</button>
    <script>
        function demo() {
            document.write("world");
        }
    </script>
  • 要素
    • を探しています
  • idでHTML要素
    • を見つける
  • タグ名でHTML要素を見つける
  • HTMLの内容を変更する:属性を使用する:innerHTML
  • HTMLプロパティを変更する:使用プロパティ:attribute
  • DOMオブジェクトによりCSS構文を変更する:document.getElementById(id).style.property=new style

    • DOM EventListener
  • DOM EventListenerメソッド:addEventListener()/removeEventLister()
  • addEventListener()メソッドは、指定された要素にイベントハンドル
    • を追加するために使用される.
  • removeEventListener(); 削除方法追加イベントハンドル
    • JavaScriptイベントの詳細
    JavaScriptイベントフロー
    イベント処理
    イベントオブジェクト
    JavaScript組み込みオブジェクト
    オブジェクトとは
    String文字列オブジェクト
    Date日付オブジェクト
    Array配列オブジェクト
    Mathオブジェクト
    JSDOMオブジェクト制御HTML要素の詳細
    JSブラウザオブジェクト
    Windowsオブジェクト
    タイマ
    Historyオブジェクト
    Locationオブジェクト
    JS滝の流れ効果
    JSオブジェクト向け
    対象を認識する
    オブジェクト向け
    jQuery->子孫要素を取得する3つの方法
    華氏温度を摂氏温度に変換するプログラム