JavaScript の基本メモ

Question

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() メソッドを使用できます。