JavaScript学習ノート-000日目

JavaScript書籍おすすめ
入門レベルJavaScript権威ガイドJavaScript高度プログラム設計JavaScript粋JavaScript設計モードJavaScript設計モードと開発実践JavaScriptフレームワーク設計JavaScript&jQueryインタラクティブwebフロントエンド開発
JavaScriptの詳細
JavaScriptで何ができるか
1.コンテンツへのアクセス-ユーザーが入力する値をフォームから取得する.コンテンツの変更-例えば、マルチキャスト広告の画像3を変更する.作成ルール-例えば、入力が有効かどうかをチェックし、タイマーを設定してマルチキャスト広告を制御する.レスポンスイベント-レスポンスボタンやリンクのクリック、フォームのコミットの処理など
ECMAScript

変数およびデータ型変数は、データを格納するためのメモリ空間変数の命名規則であり、Javaと一致するJavaScriptには6種類のデータ型があり、String、Number、Boolean、Undefind、Nullは基本データ型に属し、Objectは複雑なデータ型に属し、数グループおよび関数はObjectである.JavaScriptは弱い言語です.

配列配列配列は、複数の値を格納するために使用できる特殊な変数です.配列はオブジェクトです.

式および演算子式は、値を生成するプロセスで演算子を使用して演算できる値を生成することができる.デフォルトのタイプ変換メカニズムがあるため、JavaScriptの各値はtrueまたはfalseとして処理できます.厳密イコール演算子と厳密イコール演算子を使用して、デフォルトのタイプ変換を回避できます.短絡演算子を使用する場合,決定された結果が得られるとすぐに演算(短絡)が停止するが,返される値は必ずしもtrueやfalseで処理されるとは限らない.厳密イコール演算子と厳密イコール演算子を使用して、デフォルトのタイプ変換を回避できます.短絡演算子を使用する場合、決定された結果が得られると、直ちに演算(短絡)が停止するが、返される値はtrueまたはfalse

とは限らない.

関数は、特定のタスクを実行するために一連の文を全体にまとめることができます.これらのタスクを繰り返し実行する必要がある場合は、繰り返しコードを書くのではなく、関数を直接呼び出すことができます.匿名関数と関数式を使用したり、即時呼び出し関数式を書くこともできます.関数によって局所的な役割ドメインを構築することができ、関数以外の変数はグローバルな役割ドメインを持つ.関数もオブジェクトです.

オブジェクトオブジェクトは、実世界のトランザクションを表現するために使用できる変数と関数のセットを結合します.オブジェクトを作成するには、字面量構文とコンストラクション関数構文を使用します.オブジェクトにアクセスするプロパティとメソッドは、ポイント構文を使用します.thisキーワードは、異なるコンテキスト環境で異なる意味を持ち、通常は現在の関数で操作されているオブジェクトを指します.JavaScriptには、String、Number、Boolean、Date、Math、RegExなどのグローバルオブジェクトがたくさんあります.

ブランチおよびループブラウザは、JavaScriptに遭遇するとJavaScriptコードの実行が終了するまですべての作業を停止し、ループの実行時間が長い場合やデッドループが発生するとページのロードに影響を与えるため、JavaScriptコードは一般的にページの最後の面に配置されます.

BOM
DOM
ドキュメント・オブジェクト・モデルでは、ブラウザがHTMLページのモデルを作成する方法と、JavaScriptが閲覧にアクセスまたは変更する方法を規定しています.
ビューウィンドウの内容.DOMはHTMLの一部でもJavaScriptの一部でもない、一連の独立した
ルールは、すべてのブラウザプロバイダがこれらのルールを実現しています.DOMツリーは、ドキュメントノード、要素ノード、属性ノード、テキストノードを含むWebページのモデルです.

単一要素ノードgetElementById()/querySelector()

を選択

複数の要素getElementsByClassName()/getElementsByTagName()/querySelectorAll()、

を選択

テキストノードnodeValue

へのアクセス/更新

HTMLコンテンツinnerHTML/textContent/createElement()/createTextNode()/appendChile()/removeChild()

を操作する

プロパティ値className/id/hasAttribute()/getAttribute()/setAttribute()/removeAttribute()

へのアクセスまたは更新
≪イベント｜Events｜ldap≫
イベント分類

UIイベントload/unload/error/resize/scroll

キーボードイベントkeydown/keyup/keypress

マウスイベントclick/dbclick/mousedown/mouseup/mousemove/mouseover/mouseout

フォーカスイベントfocus(focusin)/blur(focusout)

フォームイベントinput/change/submit/reset/cut/copy/paste/select

イベントフロー

イベントバブル:イベントは、ほとんどのブラウザでサポートされているイベントフローのデフォルトのタイプであり、特定のノードから最上位のノードに伝播します.

イベントキャプチャ:イベントは最上位ノードから特定のイベントノードに内側に伝播します.

イベントのバインド
イベントを要素にバインドするには、次の3つの方法があります.

HTMLイベントハンドラ(推奨しない)

従来のDOMイベント処理

第2段DOMリスナーelement.addEventListener(イベント、コード、イベントフロー);

イベントオブジェクト

プロパティ:target/type/cancelable

メソッド:preventDefault()/stopPropagation()

jQuery
jQueryはJavaScriptコードライブラリであり、多くの一般的なJavaScriptタスクを実現するための迅速で便利な方法を提供しています.簡単なセレクタで、より少ないコードでより多くのことをすることができ、すべての主流ブラウザで互換性を維持することができ、煩雑なバックアップコードを書く必要はありません.

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script>
  window.jQuery || document.write('<script src="js/jquery-

1.10.2.min.js">');

その他のJavaScriptライブラリ

DOMおよびイベント

ユーザインタフェース

グラフィックおよびグラフ

テンプレートエンジン

フロントエンドMVC

衝突の予防
AjaxとJSON
API
フォーム検証と正規表現
例

var a = 1.2; // number
var b = true; // boolean
var c = "'hello'" // string
var d = null; // object --> null
var e; // undefined
var f = new Date(); // object
var g = function() {}; // function --> object

document.write("
" + typeof a + "
");

var array = ['hello', 'apple', 'grape', 'zoo', 'juice'];
/*array[0] = 'apple';
array[1] = 'banana';
array[99] = 'zealot';*/
array.sort();
array.unshift('shit');
array.pop();
array.push('elephant')
array.shift();

/*for (var i = 0; i < array.length; i++) {
    console.log(array[i]);
}*/
for (var x in array) {
    console.log(array[x]);
}
var x = 1;
var y = '';
var foo = window.addEventListener || window.attachEvent;
if (y) {
    // window.alert("Good");
}
else {
    // swindow.alert("Shit");
}
// window.alert(x == y);
// window.alert(x === y);

console.log(add(1,2));
function add(a, b) {
    return a + b;
}
//       
(function (a, b) {
    // window.alert(a * b);
}(3, 4));

+function (a, b) {
    // window.alert(a * b);
}(3, 4);

var stu = {
    "name": "Kygo",
    "age": 20,
    "car": {
        "brand": "QQ",
        "maxSpeed": 120,
        "run": function() {
            //       this     
        //  window.alert(this.name + "    ");
        }
    },
    "friendName": ["   ", "     "],
    "study": function(courseName) {
        window.alert(this.name + "    " + courseName);
    }
};

function Student(name, age) {
    var obj = new Object();
    // obj ---> constructor --> Student
    if (this instanceof Student) {
        this.name = name;
        this.age = age;

        this.study = function(courseName) {
            window.alert(this.name + " is studying " + courseName);
        };      
    }

    Student.foo = function() {
        window.alert("      foo");
    };

    Student.prototype.study = function(courseName) {
        window.alert(this.name + "    " + courseName)
    };

    return obj;
}


var stu2 = new Student("kygo", 23);
// stu2.study("Java");
var stu2 = Student("kygo", 23);
// window.study("Java");

console.log(stu.name);
console.log(stu.age);
// stu.study("Java");
// stu.car.run;
// stu2.foo(); error
// Student.foo();

/*function showTime() {
    var elem = document.getElementById('time');
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    elem.innerHTML = year + " " + month + " " + day + " " +
    hour + ":" + minute + ":" + second;
    window.setTimeout(showTime, 1000)
}
window.addEventListener('load', showTime);*/
/*
window.addEventListener('load', function ) {
    var elem = document.getElementById('time');
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    elem.innerHTML = year + " " + month + " " + day + " " +
    hour + ":" + minute + ":" + second;
    window.setTimeout(arguments.callee, 1000)
});*/

function Clock() {
    this.reset();
}

Clock.prototype.reset = function() {
    var date = new Date();
    this.year = date.getFullYear();
    this.month = date.getMonth() + 1;
    this.day = date.getDate();
    this.hour = date.getHours();
    this.minute = date.getMinutes();
    this.second = date.getSeconds();
}

Clock.prototype.run = function() {
    this.second += 1;
    if (this.second == 60) {
        this.second = 0;
        this.minute += 1;
        if (this.minute == 60) {
            this.minute = 0;
            this.hour += 1;
            if (this.hour == 24 ) {
                this.reset();
            }
        }
    }
};

Clock.prototype.show = function() {
    return this.year + " " + this.month + " " + this.day + " " +
    this.hour + ":" + this.minute + ":" + this.second;
}

var elem = document.getElementById('time');
var clock = new Clock();
window.addEventListener('load', function () {
    elem.innerHTML = clock.show();
    clock.run();
    window.setTimeout(arguments.callee, 1000);
});

var x = /^\w{6,20}$/;