JavaScriptチートシート

JavaScriptチートシートPDF以下は、.pdfとテキストのJavascriptチートシートです。.


JavaScriptチートシート

  • リンクをダウンロード

JavaScriptの基本

基本から始めましょう– WebサイトにJavaScriptを組み込む方法.

JavaScriptをHTMLページに含める

ページ内にJavaScriptを含めるには、JavaScriptをラップする必要があります

この入力により、ブラウザーはコードを正しく識別して実行できます.

外部JavaScriptファイルを呼び出す

JavaScriptを独自のファイルに配置して、HTML内で名前を付けることもできます。こうすることで、さまざまな種類のコードを互いに分離して、より適切に編成されたファイルを作成できます。コードが呼ばれるファイルにある場合 myscript.js, あなたはそれを呼び出すでしょう:

コメントを含む

コメントは、他の人がコードで何が行われているのかを理解したり、自分で何かを忘れた場合に思い出させるために重要です。ブラウザがそれらを実行しようとしないように、適切にマークする必要があることに注意してください.

JavaScriptでは、2つの異なるオプションがあります。

  • 単一行コメント — 1行に制限されているコメントを含めるには、その前に //
  • 複数行コメント —複数行の間に長いコメントを書きたい場合は、それを / * そして * / 実行されないようにする

JavaScriptの変数

変数は、操作の実行に使用できる代替値です。あなたは数学のクラスからそれらに精通している必要があります.

var, const, させる

JavaScriptで変数を宣言する方法は3つあり、それぞれに独自の特徴があります。

  • var —最も一般的な変数。これは再割り当てできますが、関数内でのみアクセスできます。で定義された変数 var コードが実行されたときに一番上に移動する.
  • const —コード内に表示されるまで、再割り当てやアクセスはできません.
  • させる - に似ている const, の させる 変数は再割り当てできますが、再宣言できません.

データ型

変数には、さまざまなタイプの値とデータタイプを含めることができます。あなたが使う = それらを割り当てるには:

  • 数字— 変数年齢= 23
  • 変数— var x
  • テキスト(文字列)— var a = "init"
  • オペレーション - 変数b = 1 + 2 + 3
  • 正誤問題— var c = true
  • 定数— 定数PI = 3.14
  • オブジェクト— var name = {firstName: "John"、lastName: "Doe"}

より多くの可能性があります。変数では大文字と小文字が区別されることに注意してください。つまり 苗字 そして 苗字 2つの異なる変数として処理されます.

オブジェクト

オブジェクトは特定の種類の変数です。これらは、独自の値とメソッドを持つことができる変数です。後者は、オブジェクトに対して実行できるアクションです.

var person = {
firstName: "ジョン",
lastName: "Doe",
年齢:20歳,
国籍:「ドイツ語」
};

次のレベル:配列

JavaScriptチートシートの次は配列です。配列は、さまざまなプログラミング言語の一部です。これらは、変数とプロパティをグループに編成する方法です。 JavaScriptで作成する方法は次のとおりです。

var fruit = ["バナナ"、 "リンゴ"、 "ナシ"];

これで、配列と呼ばれる フルーツ 将来の操作に使用できる3つのアイテムが含まれています.

配列メソッド

配列を作成したら、それらを使用して実行できることがいくつかあります。

  • concat() —複数の配列を1つに結合する
  • の指標() —指定されたエレメントが配列に現れる最初の位置を返します
  • join() —配列の要素を単一の文字列に結合し、文字列を返す
  • lastIndexOf() -与えられた要素が配列に現れる最後の位置を与えます
  • ポップ() —配列の最後の要素を削除します
  • 押す() -最後に新しい要素を追加する
  • 逆行する() -要素を降順にソートする
  • シフト() —配列の最初の要素を削除する
  • スライス() —配列の一部のコピーを新しい配列にプルします
  • ソート() -要素をアルファベット順にソートします
  • スプライス() -指定された方法と位置で要素を追加します
  • toString() —要素を文字列に変換します
  • unshift() -新しい要素を最初に追加します
  • valueOf() —指定されたオブジェクトのプリミティブ値を返します

オペレーター

変数がある場合は、それらを使用してさまざまな種類の操作を実行できます。そのためには、演算子が必要です.

基本的な演算子

  • + —追加
  • - —減算
  • * —乗算
  • / —部門
  • (...) —グループ化演算子、括弧内の操作は外部の操作よりも早く実行されます
  • —係数(剰余)
  • ++ —番号を増やす
  • -- —デクリメント番号

比較演算子

  • == - に等しい
  • === -等しい値と等しいタイプ
  • != —等しくない
  • !== -等しくない値または等しくないタイプ
  • > —より大きい
  • < - 未満
  • > = - 以上
  • <= —以下
  • ? —三項演算子

論理演算子

  • && —論理的および
  • || —論理または
  • ! —論理的ではない

ビット演算子

  • — ANDステートメント
  • | — ORステートメント
  • —ない
  • ^ — XOR
  • << - 左方移動
  • >> —右シフト
  • >>> —ゼロフィル右シフト

機能

JavaScript関数は、特定のタスクを実行するコードのブロックです。基本的な関数は次のようになります。

関数名(パラメータ1、パラメータ2、パラメータ3){
//関数が行うこと
}

ご覧のとおり、 関数 キーワードと名前。関数のパラメーターは括弧内にあり、関数の実行内容を中括弧で囲んでいます。独自に作成することもできますが、人生を楽にするために、デフォルトの関数もいくつかあります.

データの出力

関数の一般的なアプリケーションは、データの出力です。出力には、次のオプションがあります。

  • アラート() -ブラウザウィンドウの警告ボックスにデータを出力する
  • 確認() -yes / noダイアログを開き、ユーザーのクリックに応じてtrue / falseを返します
  • console.log() —情報をブラウザのコンソールに書き込みます。デバッグに適しています。
  • document.write() — HTMLドキュメントに直接書き込む
  • 促す() -ユーザー入力のダイアログを作成します

グローバル機能

グローバル関数は、JavaScriptを実行できるすべてのブラウザーに組み込まれた関数です.

  • decodeURI() —をデコードします Uniform Resource Identifier(URI) によって作成された encodeURI または類似
  • decodeURIComponent() — URIコンポーネントをデコードする
  • encodeURI() — URIをUTF-8にエンコードする
  • encodeURIComponent() —同じですが、URIコンポーネントの場合
  • eval() —文字列として表されたJavaScriptコードを評価します
  • isFinite() —渡された値が有限数かどうかを判別します
  • isNaN() —値がNaNかどうかを決定します
  • 数() -引数から変換された数値を返します
  • parseFloat() —引数を解析し、浮動小数点数を返します
  • parseInt() —引数を解析して整数を返す

JavaScriptループ

ループはほとんどのプログラミング言語の一部です。これらを使用すると、さまざまな値でコードブロックを必要な回数実行できます。

for(ループ前;ループ条件;ループ後実行){
//ループ中に何をするか
}

ループを作成するには、いくつかのパラメーターがあります。

  • ために — JavaScriptでループを作成する最も一般的な方法
  • ながら -ループが実行される条件を設定する
  • 一方を行います —と同様 ながら ループしますが、少なくとも1回は実行され、最後にチェックを実行して、条件が満たされ、再度実行されるかどうかを確認します
  • ブレーク -特定の条件でサイクルを停止および終了するために使用されます
  • 継続する —特定の条件が満たされた場合、サイクルの一部をスキップします

もしそうしないと ステートメント

これらのタイプのステートメントは理解しやすいです。それらを使用して、コードが実行される条件を設定できます。特定の条件が当てはまる場合は、何かが行われ、そうでない場合は、何かが実行されます.

if(条件){
//条件が満たされた場合の処理
} そうしないと {
//条件が満たされない場合の対処
}

と同様の概念 そうでなければ それは スイッチ ステートメント。ただし、スイッチを使用して、実行するいくつかのコードブロックの1つを選択します。.

文字列

文字列は、JavaScriptがテキストを呼び出すもので、機能は実行しませんが画面に表示されます。.

var person = "John Doe";

この場合, ジョン・ドウ 文字列です.

エスケープ文字

JavaScriptでは、文字列は一重引用符または二重引用符でマークされます。文字列で引用符を使用する場合は、特殊文字を使用する必要があります。

  • \ ' —単一引用符
  • 「」 —二重引用符

それとは別に、追加のエスケープ文字もあります。

  • \\ —バックスラッシュ
  • \ b —バックスペース
  • \ f —フォームフィード
  • \ n —新しい行
  • \ r - キャリッジリターン
  • \ t —水平タブレーター
  • \ v —垂直タブレーター

文字列メソッド

文字列を操作するにはさまざまな方法があります。

  • charAt() —文字列内の指定された位置にある文字を返します
  • charCodeAt() —その位置にある文字のUnicodeを提供します
  • concat() — 2つ以上の文字列を1つに連結(結合)する
  • fromCharCode() —指定されたUTF-16コード単位のシーケンスから作成された文字列を返します
  • の指標() —文字列内で指定したテキストが最初に出現する位置を提供します
  • lastIndexOf() - と同じ の指標() しかし最後の出現で、後方検索
  • 一致() —検索パターンに対する文字列の一致を取得します
  • replace() -文字列内の指定されたテキストを検索して置換する
  • 探す() -一致するテキストの検索を実行し、その位置を返します
  • スライス() —文字列のセクションを抽出し、それを新しい文字列として返します
  • スプリット() —文字列オブジェクトを指定された位置で文字列の配列に分割します
  • substr() - に似ている スライス() しかし、指定された文字数に応じて部分文字列を抽出します
  • substring() —同様に スライス() しかし、負のインデックスを受け入れることはできません
  • toLowerCase() —文字列を小文字に変換する
  • toUpperCase() —文字列を大文字に変換する
  • valueOf() —文字列オブジェクトのプリミティブ値(プロパティもメソッドも持たない)を返します

正規表現の構文

正規表現は、文字列内の文字の組み合わせを照合するために使用される検索パターンです。検索パターンは、テキスト検索およびテキスト置換操作に使用できます.

パターン修飾子

  • e —交換を評価する
  • —大文字と小文字を区別しないマッチングを実行する
  • g —グローバルマッチングを実行する
  • メートル —複数行のマッチングを実行する
  • s —文字列を1行として扱う
  • バツ —パターンでコメントと空白を許可する
  • U —貪欲なパターン

ブラケット

  • [abc] -大括弧内の任意の文字を検索します
  • [^ abc] —括弧内にない文字を検索します
  • [0-9] — 0から9までの数字を検索するために使用されます
  • [A-z] -大文字のAから小文字のzまでの任意の文字を検索する
  • (a | b | c) —で区切られた選択肢のいずれかを見つける |

メタキャラクター

  • . -改行または行末記号を除く単一の文字を検索します
  • \ w —単語文字
  • \ W —非単語文字
  • \ d —数字
  • \ D —非数字文字
  • \ s —空白文字
  • \ S —非空白文字
  • \ b —単語の最初/最後で一致を見つける
  • \ B —単語の最初/最後以外の一致
  • \ 0 — NUL文字
  • \ n —改行文字
  • \ f —フォームフィード文字
  • \ r —復帰文字
  • \ t —タブ文字
  • \ v —垂直タブ文字
  • \ xxx — 8進数xxxで指定された文字
  • \ xdd — 16進数ddで指定された文字
  • \ uxxxx — 16進数XXXXで指定されたUnicode文字

数量詞

  • ん+ —少なくとも1つのnを含む任意の文字列に一致します
  • n * —ゼロ個以上のnの出現を含む任意の文字列
  • ん? — nが0回または1回出現する文字列
  • n {X} — X nのシーケンスを含む文字列
  • n {X、Y} — XからYまでのnのシーケンスを含む文字列
  • n {X、} -少なくともX nのシーケンスを含む任意の文字列に一致します
  • n $ —末尾にnがある任意の文字列
  • ^ n —先頭にnがある文字列
  • ?= n —特定の文字列nが後に続く任意の文字列
  • ?!ん —特定の文字列niが続かない文字列

数字と数学

JavaScriptでは、数値、定数を操作して、数学関数を実行することもできます.

番号のプロパティ

  • MAX_VALUE — JavaScriptで表現可能な最大数値
  • MIN_VALUE — JavaScriptで表現可能な最小の正の数値
  • NaN —「非数」の値
  • NEGATIVE_INFINITY —負の無限大値
  • POSITIVE_INFINITY —正の無限大の値

数値メソッド

  • toExponential() —指数表記として書き込まれた丸められた数値を含む文字列を返します
  • toFixed() —指定された小数点以下の桁数の数値の文字列を返します
  • toPrecision() —指定された長さで記述された数値の文字列
  • toString() —数値を文字列として返す
  • valueOf() —数値を数値として返す

数学のプロパティ

  • E —オイラーの数
  • LN2 — 2の自然対数
  • LN10 — 10の自然対数
  • LOG2E — Eの2を底とする対数
  • LOG10E — Eの10を底とする対数
  • PI —数値PI
  • SQRT1_2 — 1/2の平方根
  • SQRT2 — 2の平方根

数学メソッド

  • abs(x) — xの絶対(正)値を返す
  • acos(x) —ラジアンでのxの逆余弦
  • asin(x) — xの逆正弦、ラジアン
  • atan(x) —数値としてのxのアークタンジェント
  • atan2(y、x) —その引数の商の逆正接
  • ceil(x) — xの値を最も近い整数に切り上げ
  • cos(x) — xのコサイン(xはラジアン)
  • exp(x) — Eの値バツ
  • 床(x) — xの値を最も近い整数に切り捨て
  • ログ(x) — xの自然対数(底E)
  • max(x、y、z、...、n) -値が最も高い数値を返します
  • min(x、y、z、...、n) —値が最も小さい数についても同じ
  • pow(x、y) — Xのy乗
  • ランダム() — 0から1までの乱数を返す
  • ラウンド(x) —最も近い整数に丸められたxの値
  • 罪(x) — xのサイン(xはラジアン)
  • sqrt(x) — xの平方根
  • タン(x) —角度の正接

JavaScriptで日付を処理する

JavaScriptを使用して日付と時刻を操作および変更することもできます。これはJavaScriptチートシートの次の章です.

日付の設定

  • 日付() —現在の日付と時刻で新しい日付オブジェクトを作成します
  • 日付(2017、5、21、3、23、10、0) —カスタム日付オブジェクトを作成します。数字は年、月、日、時、分、秒、ミリ秒を表します。年と月以外は何でも省略できます.
  • 日付( "2017-06-23") —文字列としての日付宣言

日付と時刻の値を取得する

  • getDate() -月の日を数値として取得(1-31)
  • getDay() —数値としての曜日(0-6)
  • getFullYear() — 4桁の数字で表した年(yyyy)
  • getHours() —時間を取得(0〜23)
  • getMilliseconds() —ミリ秒(0〜999)
  • getMinutes() —分を取得(0-59)
  • getMonth() —月を数値で(0〜11)
  • getSeconds() — 2番目を取得(0-59)
  • 時間をもらう() — 1970年1月1日からのミリ秒を取得します
  • getUTCDate() —世界時に基づき、指定された日付の月の日(日付)(日、月、通年、時間、分などでも使用可能)
  • 解析する —日付の文字列表現を解析し、1970年1月1日からのミリ秒数を返します

日付の一部を設定する

  • setDate() —日を数値として設定します(1-31)
  • setFullYear() —年を設定します(オプションで月と日)
  • setHours() —時間を設定します(0〜23)
  • setMilliseconds() -ミリ秒を設定(0〜999)
  • setMinutes() —分を設定します(0〜59)
  • setMonth() —月を設定します(0-11)
  • setSeconds() —秒を設定します(0〜59)
  • setTime() —時間を設定します(1970年1月1日からのミリ秒)
  • setUTCDate() —指定された日付の日付を世界時に従って設定します(日、月、通年、時間、分などでも使用可能)

DOMモード

DOMは ドキュメントオブジェクトモデル ページの。ウェブページの構造のコードです。 JavaScriptには、HTML要素(ノードと呼ばれる)を作成および操作するためのさまざまな方法が付属しています.

ノードのプロパティ

  • 属性 -要素に登録されているすべての属性のライブコレクションを返します
  • baseURI — HTML要素の絶対ベースURLを提供します
  • childNodes -要素の子ノードのコレクションを提供します
  • 第一子 —要素の最初の子ノードを返します
  • 最後の子 —要素の最後の子ノード
  • nextSibling -同じノードツリーレベルで次のノードを提供します
  • nodeName -ノードの名前を返します
  • nodeType —ノードのタイプを返します
  • nodeValue —ノードの値を設定または返します
  • ownerDocument —このノードのトップレベルのドキュメントオブジェクト
  • parentNode —要素の親ノードを返します
  • previousSibling —現在のノードの直前のノードを返します
  • textContent —ノードとその子孫のテキストコンテンツを設定または返します

ノードメソッド

  • appendChild() —新しい子ノードを最後の子ノードとして要素に追加します
  • cloneNode() — HTML要素を複製します
  • compareDocumentPosition() — 2つの要素のドキュメントの位置を比較します
  • getFeature() —指定された機能のAPIを実装するオブジェクトを返します
  • hasAttributes() —要素に属性がある場合はtrue、それ以外の場合はfalseを返します
  • hasChildNodes() —要素に子ノードがある場合はtrue、それ以外の場合はfalseを返します
  • insertBefore() —指定された既存の子ノードの前に新しい子ノードを挿入します
  • isDefaultNamespace() —指定された名前空間URIがデフォルトの場合はtrue、それ以外の場合はfalseを返します
  • isEqualNode() — 2つの要素が等しいかどうかを確認します
  • isSameNode() — 2つの要素が同じノードであるかどうかを確認します
  • isSupported() —指定された機能が要素でサポートされている場合はtrueを返します
  • lookupNamespaceURI() —指定されたノードに関連付けられている名前空間URIを返します
  • lookupPrefix() —存在する場合、指定された名前空間URIの接頭辞を含むDOMStringを返します
  • ノーマライズ() —隣接するテキストノードを結合し、要素内の空のテキストノードを削除します
  • removeChild() —要素から子ノードを削除します
  • replaceChild() —要素の子ノードを置き換えます

要素メソッド

  • getAttribute() -要素ノードの指定された属性値を返します
  • getAttributeNS() —指定された名前空間と名前を持つ属性の文字列値を返します
  • getAttributeNode() —指定された属性ノードを取得します
  • getAttributeNodeNS() —指定された名前空間と名前を持つ属性の属性ノードを返します
  • getElementsByTagName() —指定したタグ名を持つすべての子要素のコレクションを提供します
  • getElementsByTagNameNS() —指定された名前空間に属する特定のタグ名を持つ要素のライブHTMLCollectionを返します
  • hasAttribute() —要素に属性がある場合はtrueを返し、それ以外の場合はfalseを返します
  • hasAttributeNS() —特定の名前空間の現在の要素に指定された属性があるかどうかを示すtrue / false値を提供します
  • removeAttribute() —指定された属性を要素から削除します
  • removeAttributeNS() —特定の名前空間内の要素から指定された属性を削除します
  • removeAttributeNode() -指定された属性ノードを取り除き、削除されたノードを返します
  • setAttribute() —指定された属性を指定された値に設定または変更します
  • setAttributeNS() —新しい属性を追加するか、指定された名前空間と名前で属性の値を変更します
  • setAttributeNode() -指定された属性ノードを設定または変更します
  • setAttributeNodeNS() —新しい名前空間付き属性ノードを要素に追加します

ユーザーブラウザの操作

HTML要素に加えて、JavaScriptはユーザーのブラウザーを考慮し、そのプロパティをコードに組み込むこともできます。.

ウィンドウのプロパティ

  • 閉まっている —ウィンドウが閉じられているかどうかを確認し、trueまたはfalseを返す
  • defaultStatus —ウィンドウのステータスバーにデフォルトのテキストを設定または返します
  • 資料 —ウィンドウのドキュメントオブジェクトを返します
  • フレーム —すべてを返す