JavaScript の基本メモ
JavaScript
1. JS と DOM の関係
ブラウザには HTML コードをレンダリングする機能があり、HTML ソースコードはメモリ上にドキュメントである DOM オブジェクトを形成します。 object
v8 エンジンを使用する chrome など、ブラウザ内に JS インタープリタ/実行/エンジンがあります。
HTML に JS コードを記述し、JS コードがエンジンによって実行されます。実行の結果は DOM 操作です。これは、画像が浮かんだり、テキストの色が変化したりするなど、よく見られる特殊効果です。
ブラウザが実行されると、HTML コードに遭遇するとレンダリングされます。は js に遭遇すると解釈して実行されるため、ページ全体の表示を確実にするために、通常は最後に js を記述します、つまり、最初にページをレンダリングしてから DOM
2 を操作します。変数の数
var name = 'jquery';
注:
大文字と小文字は厳密に区別されます;
変数名: 数字、文字、アンダースコア。変数名の先頭としては使用できません。変数名は $ で始めることもできます (非推奨)
var を使用しないとグローバル変数が汚染されます;
var を追加するということは、この変数
#Debug: console.log();## 関数を実行して値を代入するだけですが、そうでない場合は単なる代入処理なので外部で検索されます。 # document.write(string);
alert(string);
3. 変数の種類
3 つの主要カテゴリ (8 つのデータ型)
# -従来型 Number (数値型) String(文字列型) Boolean(ブール型) - 複合型type Object(オブジェクト型) PHP の連想配列に似たもの {name: ' tom', age: 18} ', 年齢: 18歳} (関数型) - 特殊型 unknown (未定義型) 初期値なしで変数が宣言された場合、変数のデータ型は未定義です。 # ネイティブデータなし 構成： 1. 関数名# - 関数名の先頭に数字、文字、アンダースコア、数字は使用できません。
- 関数名はできるだけ意味のあるものにする必要があります。関数名にはキャメルケースの命名規則を使用することをお勧めします。
2. パラメーター (オプション)、関数には最大 255 個のパラメーターを含めることができます。
3. 関数本体.
4. 戻り値(任意)
# 関数宣言
# 1.function 関数名 ([パラメータ...] ){
関数本体;
戻り値;
}
2.var 関数名 = new Function(パラメータ...関数本体);
3. 匿名関数
var test = function([parameter...]){
関数本体;
戻り値;
}
関数呼び出し
1. コード セグメント内の関数名を直接呼び出します。
2. ハイパーリンクの形式でカスタム関数を呼び出します。
>カスタム関数を呼び出してください。
# scope of変数
#グローバルスコープとローカルスコープ
1.グローバルスコープ
関数変数、スコープはグローバル スコープです。
2. ローカル スコープ
関数本体で宣言された変数、スコープはローカル スコープです。
4.Operation
演算関数による分割
# -四則演算
# - - * / % -- (正) -(負)
-論理演算 (JS) 、論理演算、式の結果を決定できる最も古い値を返します) - 比較演算
< /= %=
-接続演算 (不正な数値に遭遇すると、次の
## 演算数で割る
# - 単項演算
exp2：exp3
# exp1がtrueである場合、exp2を実行し、それ以外の場合はexp3を実行します。 ..else ...
If...else if....
switch()
6. ループ
for
WHILE
…可能 ...
While と Do ... While:
Do ... While ループはループですbody はループ条件が満たされない場合にも 1 回実行されます while はループ条件が満たされない場合はループ本体を実行しません
7. JavaScript 組み込みオブジェクト
js 内のすべてはオブジェクトとして理解でき、メソッドが呼び出されるとその時点でオブジェクトにパッケージ化されます
1. オブジェクト宣言
var o = new Object ();
var o = {};
var o = {name:'tom',age:10}
2. オブジェクト内のメンバーにアクセスするメソッド
オブジェクト名。オブジェクト内のメンバー (プロパティとメソッド)
##- String object var s = new String(); var s = new String("hello"); var s = "hello"; プロパティとメソッド プロパティ: length 文字列の長さを取得します。長さ メソッド: Object.indexof(substring) 関数: オブジェクト内で部分文字列が最初に出現する位置を決定します。 0 戻り値: 位置 部分文字列がオブジェクトに現れない場合は、-1 を返します。 Object.toUpperCase(); 関数: オブジェクトを大文字に変換します。 Object.toLowerCase(); 関数: オブジェクトを小文字に変換します。 Object.substr(start [,length]) 関数: 文字列インターセプト。長さ length は開始位置からインターセプトされます。 length オプション パラメーターは、デフォルトでは文字列の末尾までインターセプトされません。 Object.slice(start[,end]) 関数: 文字列インターセプト。開始位置からインターセプトを開始し、終了位置までインターセプトします。end オプション パラメーターは、デフォルトでは文字列の末尾までインターセプトしません。Object.replace(str1,str2)
- 配列オブジェクト
ステートメント:
var a = new Array();
var a = [];
var a = new Array('チーム',1);
var a = ['チーム',1...];
var a = new Array(7); //7 は配列の長さです
配列の出力:
document.write(配列の名前);
配列の代入
a[0] = 'nico';
属性:
length 配列の長さ
メソッド:
Array object.concat (Array object)
関数: 2 つの配列オブジェクトを接続します。
戻り値: 新しくマージされた配列。新しい配列内の要素の順序は、順序に依存します。
Array object.pop()
関数: 配列オブジェクトの最後の要素をポップします。
戻り値: ポップされた (削除された) 配列element.
Array object.push(array element)
関数: 配列の末尾に要素を追加します。
戻り値: 長さ追加された要素の後の配列。
配列 object.shift()
関数: 配列の先頭から要素をポップします。
戻り値: ポップされた配列要素。
配列 object.unshift(要素名)
関数: 配列の先頭に要素を追加します。
戻り値: 追加された要素の後の配列の長さ。
配列 object.join(',')
配列 object.split(',')
配列 object.reverse()
配列 object.sort()
- 日付オブジェクト
var d = new Date()
メソッド:
Object.getFull Year()
関数: 4桁の年を取得
Object.getMonth()
関数: 月、月(0~11)を取得
Object.getDate()
関数: 曜日を取得します。
# Object.getHours() 関数: 時間数を取得します。# # Object.getMinutes()
関数: 分の値を取得します。
Object.getSeconds()
関数: 秒の値を取得します。
Object.getDay ()
関数: 現在の週の値を取得します (日曜日 0 ～ 土曜日 6 日)
- 数学 (Math) オブジェクト
インスタンス化なし、PHP による静的呼び出しと同等クラス名
属性:
PI 割り当て値
メソッド:
Math.ceil (変数)
関数: 切り上げ
Math.floor(変数)
関数: 切り捨て
Math.round(変数)
関数: 丸め
Math.abs(variable)
関数: 絶対値を取得します
Math.random()
関数: 擬似乱数値を返します。以上です。 0 および 1 未満 [0,1).
Math.max(variable..)
関数: 変数のうち大きい方を返します。
Math.min (変数..)
関数: 変数の小さい方を返します。
8. ブラウザ ウィンドウ オブジェクト
注: ウィンドウ オブジェクトはブラウザ ホストです。オブジェクトには何もありません。 JS言語でやる
windowオブジェクトのメソッド:
window.alert(message);
window.confirm(message);
window.prompt();
window.open();
window.close();
window.print();
window.setInterval();
window.setTimeout();
window.clearInterval();
window.clearTimeout();
Sub - ウィンドウ オブジェクトのオブジェクト:
1.ナビゲーター ブラウザ情報オブジェクト
2.場所アドレス バー オブジェクト
3.history 履歴レコード
# 4.screen 画面オブジェクト
# 5.ドキュメント オブジェクト (DOM オブジェクト)
6. ストレージ オブジェクト
Web ストレージ API は 2 つのストレージ オブジェクトを提供します。 sessionStorage (セッションstorage) と localStorage (ローカル ストレージ) を使用して、Web ページ データを追加、削除、変更、クエリします。
sessionStorage は、同じウィンドウ（またはタブページ）のデータを一時的に保存するために使用されます。これらのデータは、ウィンドウまたはタブページを閉じると削除されます。
LocalStorage は Web サイト全体のデータを長期間保存するために使用され、保存されたデータには手動で削除するまで有効期限がありません。
9.DOM オブジェクトの操作
DOM (Document Object Model ドキュメント オブジェクト モデル)
ドキュメント HTML/XML
## (拡張マークアップ言語) オブジェクト HTML を JavaScript オブジェクトに変換します。 tag) 戻り値: オブジェクトの配列。 - document.getElementsByName (HTML タグの name 属性値) 戻り値: オブジェクトの配列。
- document.getElementById(HTML タグの id 属性値) 戻り値: object. - document.getElementsByClassName (HTML タグの class 属性値)
戻り値: オブジェクトの配列 window.document が前のウィンドウを省略できるのはなぜですか? 回答: これはまだスコープの問題です。内部で見つからない場合は、次を参照してください。 window.document Model Model HTML文書を逆ツリー構造とみなすと、文書内のHTMLタグ、テキスト、コメント、属性はツリー構造上のノードとみなすことができ、ノード同士は関連性を持っています。ノードの 1 つを選択すると、ツリー構造上のすべてのノードを見つけることができます。
注: 空白とコメントはすべてノードです。 ノード: ノード名 (nodeName),
ノード タイプ (nodeType). 一部のノードにはノード値 (nodeValue). 親ノード: ノード object.parentNode 子ノード: Node object.childNodes 配列を返します (空のノードを含む) # Node Object .Children 非標準属性ですが、空のノードを除いて互換性があります
最後の子オブジェクトのノード
兄弟ノード:
ノード オブジェクト.previousSibling
前の兄弟ノード
ノード オブジェクト.nextSibling
次の兄弟ノード
document.createElement(HTML タグ タグ)
関数: 新しい HTML オブジェクトを作成します
戻り値: Object
Parent object.appendChild(child object)
関数: 子オブジェクトを親オブジェクトに追加します。
親オブジェクト.removeChild (parent object.lastChild)
関数: オブジェクトの最後の子ノードを削除します。
操作オブジェクト
プロパティ
1. 属性の読み取り
オブジェクト.属性名
2. 属性の変更
## オブジェクト.属性名 = 属性値 テキスト 1. Read Object.innerText Object.innerHTML // タグ内のすべての HTML コード 2.オブジェクトを変更します。 innerText = 変更されたテキスト Object.innerHTML = 変更されたテキスト innerHTML は HTML タグを解析しますが、innerText は HTML タグを解析しません。 Style
1. 読み取り(style 属性の後にオブジェクトが続いているため、アクセスを続けるには . を使用する必要があり、内部スタイルの値のみを読み取ることができ、<style> の値は読み取ることができないためです)
# # Object . style. 属性名;
2. 修正
Object.style.属性名 = 属性値;
属性名 注: 背景色には「-」が必要です" を削除します。次に、次の単語の最初の文字、つまり小さなキャメル ケースの属性名を大文字にします。
3. スタイルを一括変更します。
Object.className = クラス スタイル名
ランタイム スタイル オブジェクトを取得します:
Obj.currentStyle[attr] と getComputedStyle(obj, null)[attr] は、次の情報を取得するために使用されます。
前者は IE と Opera でのみサポートされ、後者は IE9 以降でもサポートされます。 2 番目のパラメータは疑似要素です。
10.Event
1.イベント ソース
すべての HTML タグをイベント ソースと見なすことができます
2.イベント
CLICK イベントをクリック
DBLCLICK イベントをダブルクリック
マウスオーバー マウスを
# マウスアウト マウス
## キーダウン キーボード キーを押す キーボードを押す # ドキュメントの読み込み # n ぼかしフォーカスを失う フォームの変更 submit submit (form 要素に属し、return false により送信が阻止されます) 3. イベント ハンドラー - <tag onevent="イベント ハンドラー"> イベント ハンドラーには、JavaScript コードまたはカスタム関数の名前を指定できます。 - Object.on イベント = イベント ハンドラー イベント ハンドラーは匿名関数です。11. Timer n 秒後に実行 Timer clearTimeout() メソッドは、setTimeout() で設定されたタイミング操作をキャンセルできます。方法。 clearTimeout() メソッドのパラメータは、setTimeout() によって返される ID 値である必要があります。 注: clearTimeout() メソッドを使用するには、スケジュールされた操作を作成および実行するときにグローバル変数を使用します。 タイマーは n 秒ごとに実行されます setInterval() メソッドは、指定された期間 (ミリ秒単位) に従って関数を呼び出したり、式を計算したりできます。 setInterval() メソッドは、clearInterval() が呼び出されるかウィンドウが閉じられるまで、関数を呼び出し続けます。 setInterval() によって返される ID 値は、clearInterval() メソッドの引数として使用できます。ヒント: 1000 ミリ秒 = 1 秒。
ヒント: 1 回だけ実行したい場合は、setTimeout() メソッドを使用できます。
