HTML --- JavaScriptの研究ノート

免責事項：この記事はブロガーオリジナル記事です、続くBY-SAのCC 4.0を著作権契約、複製、元のソースのリンクと、この文を添付してください。

このリンク： https://blog.csdn.net/qq_44779847/article/details/102742112

JavaScriptの###

• 役割：ページへの動的効果と動的データを追加し、HTMLページが構造と内容、CSSの造園ページを構築するための責任がある
  ### JS履歴

1995年（NetScapeの）会社ネットスケープ、LiveScript、同じ年ではJavaScriptが改名された、Java言語で発行され、摩擦加熱するために、何もない
### JSの機能を

1. スクリプト言語に属し、コンパイルを必要とせず、ブラウザの実行により解釈
2. HTMLページに埋め込むことができますJS言語
3. jsオブジェクト指向言語
4. jsが弱い型付け言語されています
5. 高いインタラクティブ
6. 安全なJS言語はブラウザだけで種々のデータにアクセスすることができ、ブラウザは外でアクセスすることはできませんデータ
   導入方法### JS言語

• インライン：イベントが発生したときのjsコードが実行され、要素のイベント属性にjsのコードを追加します。
• 内側：htmlページを追加

1. 値の種類数
2. 文字列型文字列
3. ブール値の型boolean
4. 不定不定タイプ
5. カスタム型オブジェクト

変数の宣言と代入####

• 弱い型付けされた言語に属するJS
• Javaの：int型のx = 10;
• JS：VARのx = 10; P = "ABC" でした。偽/ B = Trueのでした。

プレゼンテーションの####の一般的なタイプ

1. 数値型

• JSは、使用時に自動的に数値下層のfloat型、整数または小数変換され
  たJavaのint INT 5 X = Y = Z = 2 INT X / Y; Z = 2つの
  JSするvar X = Y = 2.5のvar VAR Z = X / Y; Z = 2.5
• NaN：非数は、変数が数値型であるかどうかを決定するため、数ではありません、ますisNaNを決定するためのisNaN（変数）（X）を使用し、trueまたはfalse、真実ではない代表的な数の戻り値は、偽の数の代表です

2. ブール型
   のvar B =真/偽。
3. 文字列
   のvar S = "ABC";
   VAR S = 'ABC';
4. 不定不定タイプ

• 変数宣言が割り当てられていない場合にのみ、この変数は、型なしで
  型の間の暗黙的な変換は、###

1. 数値型

• 文字列の転送：直接24>「24」に
• ブールターン：0およびNaNのターンがtrueに他の偽に変換

2. ブール値の型

• 文字列の転送：直接trueに - > "真" "ABC" +真
• 数値回転：真陽性> 1偽> 0 18 +真= 19

3. 文字列型

• 数値回転：直接のNaN行くに好転することができない
  文字列「20」は、+ 5 =「205」になります加算値を
  保存乗算および除算が「20」の文字列値に変わります= 15 -5
  、任意の数および任意のNaNを演算の結果はNaNであります
• ブールターン：他偽真空の文字列転送

4. 不定不定

• 転送値：NaNの
• 文字列の転送：直接転送「ABC」+未定義「abcundefined」
• （未定義）{警告（ "AAA"）}場合はfalse：ブールを回し

5. ヌル

• 値をONにする：0
• ブール値をONにする：偽
• 文字列の転送：直接転送"ABC" = +ヌル"abcnull"
  ####演算子+ - * /％=> <> = <= = ==！
• そして、ずっと同じJava
• と= ==最初の統一型===比較値と、次に比較的等しい値の入力した場合、再び最初のタイプを比較すること
• 部門は自動的に整数や小数に変換します
• typeof演算のx; typeof演算66 + 6 =「number6」
  *** ####语句他にいる間は、スイッチケースのためながら行う場合
• そして、ずっと同じJava ***
• 違い：

1. 括弧内の内容はない暗黙のブール自動的ブールに変換する場合ながら場合
2. 私は、ループの拡張、変更VAR I（新しい）をサポートしていないループのためにint型

####メソッド宣言

• ジャワます。public voidメソッド名（パラメータリスト）{}その方法
• JS：関数のメソッド名（パラメータリスト）は{}メソッド

- 一般的な4つの方法：

1. いいえ参照なし戻り値
2. パラメータはありません値を返します
3. 戻り値のパラメータはありません
4. パラメータと戻り値があります。

- メソッド宣言形式の三種類：

1. メソッド関数名（パラメータリスト）は{}メソッド
2. メソッドVAR名=関数（パラメータリスト）{}メソッド本体。
3. メソッドVAR名=新しい機能（「パラメータ1」、「パラメータ2」、「ボディ法」）。

###ページの要素と関連した方法

1. ページ要素法のIDを取得
   するvar D =のdocument.getElementById（「D1」は ）。
2. テキストコンテンツへのアクセスおよび変更の要素
   d.innerText
   d.innerText =「ABC」;
3. テキストボックスの取得および変更するための値
   私は=のdocument.getElementById（「I1」）VARを、
   i.value取得
   i.value =「XXX」。
4. HTMLコンテンツ取得および要素を変更する
   d.innerHTML
   ; d.innerHTML = "ABC </ H. 1> <のH1>"
   ; "ABC <の/ H1> <のH1>"を追加+ = d.innerHTMLを
   （ここで、複数のスペースを支払います）

関連する###文字列

1. 文字列を作成します

• VAR S1 = "ABC"; //単一引用符と二重引用符されています
• VAR s2を=新しい文字列（「ABC」）;

2. 文字列値に変換

• parseFloatは（「8」）8
• parseInt（8.5）8
• 番号（「8.5」）8.5 parseFloatはアクションなど

3. 文字列のトランスファーケース

• 資本str.toUpperCase（）を回します。
• 小さな文字str.toLowerCase（）;

4. 表示された文字列を取得します

• ゼロの最初の発生から位置str.indexOf（「B」）
• 位置str.lastIndexOf（「B」）出現し、最後

5. 傍受文字列

• str.substring（開始、終了？）。

6. 置換文字列

• str.replace（旧新）;のみの交換

7. スプリット文字列

• VAR ARR = str.split（ ""）;

###数学的な相関関係

1. 乱数Math.random（）。3 * 0-1
   3-5 + 0-2。3
   25-36 25 0-11
   100-200 100 0-100 +
   のparseInt（Math.random（）* 101）+100
   6- 9
   parsetInt（Math.random（）* 4）+6。
2. 丸め
   num.toFixed（m）を、mは予約小数点表現
   18.23456.toFixed（4）18.2346

####アレイ関連

1. 配列を作成します

• var arr1 = [“小明”,18,true];
• VaRのARR2 =新しい配列（）;

2. 配列にコンテンツを追加します。

• arr.push（ "アンディ"）;
• arr.push（18）。

3. Javaの配列トラバーサルのような
   VaRのARR = [ "ボブ"、18はtrueに、である];
   のための（VARのI = 0; I <arr.length; I ++）{
   アラート（ARR [I]）;
   }
4. 取得し、配列の長さを変更するには

• 配列のJava不変の長さ
  arr.length //取得
  arr.lenght = 3;

5. アレイ）（arr.reverse逆。
6. ソートarr.sort（）アレイと、第二よりも第1の完全なデフォルトの照合は、Unicodeでエンコードされたソート次いで比

• カスタムソーティング：
  VAR = ARR [18,11,26,22,2,7,3];
  //カスタム規則化法の
  関数mysort（A、B）{
  戻りBAを; //昇順降順BA代表示す
  }
  アラート（ arr.sort（mysort））。

• arr.sort（新機能（「A」、「B」、「ABを返します;」））;

日によって###

• クライアントサーバーの時間と時間

1. クライアントの時間を取得
   するvar dは=新しい日付を（）;
2. 文字列をオンにする時間が時間午前14時37分30秒2019年5月8日オブジェクト
   VAR日新しい新しいD =（「2019年5月8日午前14時37分30秒を」）;
3. 取得および設定したタイムスタンプを（1970年1月1日から午前8時00分00秒）
   d.getTime（）;
   d.setTime（）;
4. 取得時間コンポーネント
   d.getFullYear（）; //年
   d.getMonth（）; 0 +1から月
   d.getDate（）;日
   d.getDay（）;週
   d.getHours（）; //時間
   D。 getMinutes（）;分
   d.getSeconds（）;秒
5. 議事録は、日付を取得し、取得
   d.toLocaleDateString（）;
   d.toLocaleTimeStringを（）;

###正規表現

• シナリオ：
  1. コンテンツを探します
  2. テキストをチェック
• 。：改行以外の任意の文字と一致
• \ W：アンダースコア、任意の数、文字にマッチします
• \ D：任意の数と一致します
• \ S：空白にマッチします
• ^：ビギニング
• $：終了
• 例えば：
  1. M ^ Mで始まります
  2. 最後にN個の$ nを
  3. D \ 2桁を含有する{2}
  4. 2桁のみ^ \ dの{2} $
  5. 3 ^ \ dで始まる番号{3}
  6. Y Xの中間端で始まる5桁^ X \ D {5}のY $
  7. Mは中間体3-5桁^ m個の\ D {3,5} N $ nの開始端部を有します
  8. 6-10英数字は^ \ W {6,10} $を強調している
     二つの方法で定期的にオブジェクトを作成します-

1. VAR REG = /ルール/パターン（二つのモード：私は場合、Gグローバル検索を無視する）
   REG = / ^ \ {W} $ 6,10 /。
2. VaRのREG =新しい正規表現（ "規則"、 "モード"？）;
   REG =新しい新しい正規表現（ "^ \ W {6,10} $"）;
   -メソッドに関連する通常のオブジェクト
3. reg.execどのメソッド（文字列）の検索
   VAR STR = "あなたはCAN NOはNOあなたBBアップCAN";
   VAR = REG / NO /。
   • Gあなたは毎回が見つからない場合は、最初にある
     reg.exec（STR）;
   • あなたはリターンヌル見つけることができませんでした時間まで各1を見つけるために、次を検索から、テキストグラムに追加する場合は
     、VAR = REG / NO / gで
     reg.exec（STR）を、
4. メソッドreg.test（STR）をキャリブレーション;
   VARのREG = / ^あなた/;
   reg.test（STR）;
   -標準的な文字列と関連する方法
5. 何str.match（REG）検索
   • この方法は、グローバル検索は、アレイに1回のリターンのすべてを見つける見つけることであるならば
6. 代替方法str.replace（REG、新しい新しい）;
   REG = / NO / G;
   str.replace（REG、 "NO"）。

要素の####変更されたクラスの属性値

• div.className =「XXX」。

###ページの要素の隠蔽の作り方

1. 表示：なし要素隠され、ドキュメントフローのうち、ショーが戻ってきた場合、バック要素のデフォルト値に変更する必要があります
2. 可視性：非表示（非表示）/可視（表示）ドキュメントフローから逸脱することなく、要素を非表示にします

###カスタムオブジェクト

	/* function Person(name,age){
	//添加属性
	this.name=name;
	this.age=age;
	//添加方法
	this.run = function(){
		alert("我叫："+this.name+
				"今年"+this.age);
	}
}
//实例化对象
var p = new Person("张三",5);
p.run(); */

function Person(){}
var p = new Person();
//动态添加属性和方法
p.name = "张三";
p.age = 18;
p.run = function(){
	alert("我叫："+this.name+
			"今年"+this.age);
}
//调用 
//p.run();
//第二种实例化对象的方式 
var p2 = {
		"name":"李四",
		"age":18,
		"run":function(){
			alert("我叫："+this.name+
					"今年"+this.age);
		}
}
p2.run();

### DHTML

• はじめに：ダイナミック（動的）HTMLではなく、新しい技術は、HTML、CSSの開発を通じて、一緒にページを組み合わせることで、JavaScriptはダイナミックHTMLと呼ばれます
• DHTMLが含まれます：BOM、DOMを
• BOM：ブラウザオブジェクトブラウザオブジェクトモデルのモデル、およびブラウザ関連のコンテンツが含まれて
• DOM：ドキュメントオブジェクトモデルドキュメントオブジェクトモデル、および関連するコンテンツを含むページ
  ### BOMブラウザオブジェクトモデル
  ####ウィンドウオブジェクトの
  呼び出し時にグローバルメソッドと呼ばれるグローバルプロパティ、メソッドは、省略することができるというプロパティ内のウィンドウオブジェクトを
  ＃を####共通メソッド内窓
  1. parseFloatは和のparseInt（）（）
  2. 警告（）プロンプトボックス
  3. （）チェックボックスを確認
  4. プロンプト（）ポップアップテキストボックス
  5. ますisNaN（）
     共通の属性で#####窓

1. 場所場所

• アクセスアドレスにアクセスして変更するLOCATION.HREFブラウザ
  LOCATION.HREF得ることが
  LOCATION.HREF =「http://www.tmooc.cn」を修正。
• location.reload（）;更新

2. 現在のウィンドウの履歴履歴史

• history.lengthページ数
• history.back（）裏面
• history.forward（）次のページに移動します
• history.go（n）は、nは正、負フォワード戻る更新0

3. スクリーン画面

• 画面の解像度を得るためにscreen.width /高さ
• screen.availWidth /身長可能な画面解像度与えるために、

4. ナビゲーターのナビゲーションヘルプ

• navigator.userAgent;のためのブラウザのバージョン情報
  ####ウィンドウ関連のイベント
• ウィンドウのクリックのonclickイベント
• ページロードonloadイベント
• フォーカスイベントのためのページONFOCUS
• onblurページ失われたフォーカスイベント
  ####のeval（）
• これは、文字列コードJSの形で実施することができます

#### jsのコードでスタイル要素を追加します

• 。.Style要素オブジェクトのスタイル名=「値」;
  ####タイマー
• イベントのコードの実行期間のすべての作品
• フォーマット：のsetInterval（メソッド、時間間隔）
  のsetInterval（関数（）{
  アラート（ "HA"）
  ;}、1000）
  タイマ停止###
  VARタイマ=たsetInterval（関数（）{}、1000）;
  てclearInterval（タイマー）;

### DOMドキュメントオブジェクトモデル
要素を見つける####

1. ページ要素IDによって取得された
   VAR =のdocument.getElementById D（ "D1"）。
2. タグ名で要素を取得
   するvar ARR = document.getElementsByTagName（ "DIV" ）;
3. クラス属性値要素で検索
   するvar ARR = document.getElementsByClassName（「クラス」 ）;
4. name属性値要素で検索
   するvar ARR = document.getElementsByName（ "名前" ）;
5. ボディ取得
   document.body
   ####作成された要素オブジェクトを

• D =のdocument.createElementのVAR（ "DIV"）;
  ####添加元素
  親要素.appendChild（対象要素）の、
  ####の要素を挿入する
  親要素.insertBefore（新しい要素、兄弟要素）
  ####削除要素
  親要素.removeChild（削除された要素）。

###イベントに関連したコンテンツ

• イベント：イベントが時間内にいくつかの特定のポイントで、イベントが含まれます：マウスイベント、キーボードイベント、状態変化イベント
  ####イベントカテゴリを

1. マウスイベント：マウスモーションイベント、onMouseUpのマウスアップイベント、れるonmousedownマウスダウンイベント、ONMOUSEOUT、onclickのイベントをクリックしてのonmouseoverマウスイベントを移動し、マウスアウトイベントれるonmousemove

2. キーボードイベント：キーボードアップイベントonkeydownをキーボードのプレスイベントonkeyupの

3. 状態変更イベントは：ONFOCUSフォーカスウィンドウサイズのonblur失わフォーカスを取得すると、さらにonResize変更
   フォームの送信ページロードonloadイベントをonSubmitイベントのonchange値変更イベントを

####イベントオブジェクトのイベント

• Eventオブジェクトは、イベントに関連する情報を保持しています

1. マウスイベント情報event.clientXマウス/ Yの座標を保存します
2. キーボードイベントは、キー情報を保存するためにevent.keyCodeに、String.fromCharCode（65）。
3. 任意のイベントは、イベントのソースオブジェクトを取得することができる
   イベントソースは、タグイベントを追加することである
   （書き込み互換性を解決する）; VAR OBJ = event.target || event.srcElement
   ###イベントバインド
   -結合する二つの異なる方法があるが
   1. タグイベントの内部を通ってwindowオブジェクトのイベントメソッドを表し、このプロパティを追加します。
   2. 動的バインディング：これを追加するためのイベント実行方法は、によって要素にイベントソースを表すコードをJS
      イベント（イベントバブリングを）###送信します

• イベントに応答して、範囲内の要素が複数存在する場合、イベントの配信順序は、（SOイベントバブリングと呼ばれる泡に類似）下から上に転送されます