HTML5 と CSS3 による動的 Web ページの実装 (パート 2)

js

完全な JavaScript は ECMAScript (構文) です。

ブラウザ オブジェクト (DOM BOM) のプロパティ。

// 一行コメント

/**/ 複数行のコメント

ECMASxript 内のすべて (変数関数名と演算子) は大文字と小文字が区別されます。

1: 識別子とは何ですか?

 变量 函数  属性的名字  或者函的参数

2: インジケーターの命名規則

  有字符 数字 下划线 或 $ 符号组成

  不能以数字开头 

  不能使用关键字 保留字 作为标识符

1: 変数宣言 var

   变量的声明要使用var 操作符

   语法  var  变量名 

2: 変数の代入

    声明同时赋值 var 变量名  =  值

    先声明后赋值 : 变量名  =  值

説明する

1: var を省略して宣言された変数はグローバル変数です

2: グローバル変数を定義するために var 演算子を省略することは推奨されません

JavaScript データ型

ECMAScript

5 つの単純なデータ型 未定義 NUll ブール値 数値文字列

複合データ型オブジェクト

typeof 関数はコマンドの種類を検出します

戻り値 文字列番号 boolean オブジェクト 未定義関数

未定義

未定義型には値が 1 つだけあり、特別な未定義型です。

説明する

一般に、変数を明示的に未定義に設定する必要はありません。

ヌル

1: null 値は null オブジェクト ポインタを表します。

2: 定義した変数を将来オブジェクトの保存に使用する場合は、次のようにするのが最善です。

初始化为null 而不是其他的值

未定義の値を指定する場合、派生語 null がその値に値するため、unknown == unll

      的返回结果是true 

1: マスター番号

2: マスターはNAN()

3: 数値変換をマスターする

  Number()

  parseInt()

  parseFloat()

数値: 整数または浮動小数点数を表します

NaN: Not a Number (Not a Number) は特別な数です

説明する

1: (NaN/10) などの NaN を含む演算はすべて NaN を返します。

2: NaN は、NaN 自体を含むどの値とも等しくありません。

はNaN

構文はNaN(n)

機能: n が「非数値」かどうかを検出します。 戻り値 boolean

パラメータ: パラメータ n は任意のタイプにすることができます

説明 isNaN() は、まず受け入れられた値を数値に変換しようとし、次にそれが数値以外であるかどうかを検出します。

数値変換

1: Number() は任意のデータ型に使用できます

2: parseInt() と parseFloat() は、文字列を数値に変換するために特別に使用されます。

3: parseInt() で操作される文字列は数字で始まる必要があります。

4: parseInt() は、最初の非スペースが見つかるまで、文字列の前のスペースを無視します。

説明する

 parseInt()转换空字符串返回NaN

 parseInt()这个函数提供第二个参数 转换时使用基数 即多少进制

プレスフロート

parseFloat: 無効な文字が見つかるまで、最初の文字から各文字まで解析します。

浮動小数点数字まで

説明する

有効な最初の小数点に加えて、parseFloat() と parseInt() の 2 番目の違いは次のとおりです。

先頭のゼロは常に無視されます

文法

str.toString()

関数: str を string に変換します。

1: マスターストリング

2: マスター文字列変換

String()

toString()

3: マスターブール値

4; マスター型変換

String 型は、0 個以上の 16 ビット Unicode 文字のシーケンスを表すために使用されます。

つまり、文字列には一重引用符または二重引用符を含めることができ、これらはペアで使用する必要があります。

構文 str.toString()

関数: str を string に変換します。

str のコピーを返します。

パラメータ: str は変換対象のコンテンツで、数値、ブール値、オブジェクト、文字列を指定できます。

説明する

変換される値が null か未定義かがわからない場合は、任意の型の値を文字列に変換できる String () 関数を使用することもできます。

型変換

1: 0 を除くすべての数値がブール値 true に変換されます。

2:「」を除くすべての文字はブール型に変換され、trueになります。

3: null および unknown は false に変換されます。

学習目標

1: 式とは何かをマスターする

2: JavaScript 演算子の分類をマスターする

3: 算術演算子をマスターする

表現とは何ですか

同じ種類のデータ (定常光、変数、関数など) は、演算記号を使用して一定の規則に従って理解され、意味のある式は式と呼ばれます。

オペレーターの分類

1: 算術演算子 + - *、/ %

2: 論理演算子

3: 代入演算子

4: 比較演算子

5: 三項演算子

増加と減少

1: インクリメント

++a と a++ は両方とも、a に対してインクリメント操作を実行します。

違い

++a は、インクリメント後に最初に a の値を返します。

a++ は、まず a の元の値を返し、次に増分された値を返します。

代入演算子

単純な代入 =

複合代入 += -= *= /= %=

比較演算子

< >= <= == === != !==

== 等価性は値が等しいかどうかのみを比較します

=== 等価比較は、データ型が等しいかどうかを同時に比較する価値があります。

!= 等しくない比較値を待機しないかどうか

== 不等価比較は、データ型が同時に等しくないかどうかを比較する価値があります。

戻り値:ブール型

三項演算子

文法

状態?コード1を実行:コード2を指定

説明する

単純な if ステートメントを置き換えることができます

条件が真の場合はコード 1 を指定し、そうでない場合はコード 2 を実行します

論理演算子

&&: AND (1 つの条件が true でない限り、false を返します)

説明する

最初の演算子がブール値ではない場合、論理 AND 演算は必ずしも値を返すとは限りません。

1: 第 1 オペランドの Hermit 型が true に変換された場合、第 2 オペランドが返されます。

2: 最初の演算の Hermit 型が false に変換された場合、最初のオペランドが直接返されます。

3: null未定義NaNがある限り、null未定義NaNを返します。

||: または (1 つの条件が true である限り、true を返します)

1: 最初の演算 Hermit 型変換型が true の場合、最初のオペランドが返されます。

2: 最初の演算 Hermit 型変換が false の場合、2 番目のオペランドを返します。

3: 両方のオペランドが null NaN 未定義の場合は、null NaN 未定義を返します。

:いいえ()

説明する

操作のデータ型に関係なく、論理否定はブール値を返します。

2 つの論理演算子を同時に使用する場合

最初の論理 NOT 演算は、演算に関係なくブール値を返します。

2 番目の論理否定はブール値を否定します。

1:曜日の取得方法をマスターする

2: マスタードキュメント.write()

3: 条件文スイッチをマスターする

構文: new Date().getDay()

機能: 曜日を取得する

戻り値: 数値(0-6)

switch ステートメント

文法

スイッチ(){

ケース値: ステートメント

壊す ;

ケース値: ステートメント

壊す;

デフォルト:ステートメント

}

出力

構文: document.write("コンテンツ")

機能: コンテンツをブラウザに出力します。

for ステートメント

文法

for(ステートメント; ステートメント2; ステートメント3){

実行中のコードのブロック

}

ステートメント 1: ループ (コード ブロック) が開始する前に実行されます。

ステートメント 2: ループを実行するための条件を定義します (コード ブロック)

ステートメント 3: ループ (コードのブロック) が実行された後に実行されます。

巣作り用

1: 外層が false の場合、内層は実行されません。

2: 制限的な外側の都市は、内側の層の条件が false になるまで内側の層を実行し、その後外側の層に戻って実行します。

do-while ステートメント

声明

する {

実行する必要があるコード

}while (条件)

この構文のループを少なくとも 1 回実行する必要があることを指定します

for は、特定の数のループに適したループ本体です。

位置ループの数に適した while ループ本体

1:break文の応用をマスターする

2: このサイクルを終了するための continue ステートメントの適用をマスターする

JavaScript の関数

1: 関数の役割をマスターする

2: 関数の定義をマスターする

3: マスター関数呼び出し

機能の内容

関数を通じて任意の数のステートメントをカプセル化でき、いつでもどこでも使用できます。

呼び出しの実行

関数 functionName([arg0,arg1,...agrn]){

}

例証します:

1: functionName は定義する関数名であり、識別子に属します。

2: [] 内の arg0、arg1。argn は関数のパラメータです

3: [] は内部の内容が不要であることを示し、構文ではありません

関数の戻り値を返す

どの関数も、return ステートメントの後にカルティベータによって返された値を通じて値を返します。

説明する

1: return 文の実行後、関数はただちに停止して終了します。

2: return ステートメントには戻り値を含めることもできません。戻り値は関数の実行を事前に停止するために使用され、値を返す必要はありません。

学習目標

1: 引数をマスターする

ECMAScript のパラメータは内部的に配列で表されます

関数本体の引数オブ​​ジェクトを通じてこの配列パラメータにアクセスします

説明する

1: 引数オブジェクトは配列に似ており、Array のインスタンスではありません。

2: [] 構文は各要素にアクセスします

3: length 属性により、渡されるパラメータの数が決まります

JavaScript の組み込みオブジェクト

1:配列

2:紐

3:数学

4:日付

配列

1: 配列の作成方法をマスターする

2: 配列要素の読み書きをマスターする

3: 配列の長さ属性をマスターする

配列を作成するには 2 つの基本的な方法があります

1: 配列コンストラクターを使用する

構文: new Array()

括弧 () の説明

(1) 配列に保存する項目数を事前に把握しておく

(2) 配列に含める項目を Array コンストラクターに渡します。

2: 配列リテラル表記を使用する

配列項目を含む角括弧 [] のペアがあり、複数の配列項目はカンマで区切られています。

配列要素の読み取りと書き込み

値の読み取りと設定を行う場合は、角括弧 [] を使用し、対応するインデックスを指定します。

説明: インデックスは 0 から始まる正の整数です。

配列の長さ

構文array.length

関数: 配列 array の長さを取得します。

戻り値: 数値

説明する

1: 長さを設定することで、配列の末尾から項目を削除したり、配列に新しい項目を追加したりできます

2: 現在の配列サイズを超える位置に値が配置されると、配列の長さの値が再計算され、長さの値は最後のインデックスに 1 を加えたものと等しくなります。

配列のスタックメソッドをマスターする

1:押す()

2:シフト解除()

3:ポップ()

4:シフト()

押す()

文法

arrayObject.push(newele1,newele2,....,neweX)

関数

パラメータをarrayObjectの末尾に順番に追加します。

戻り値

指定された値を配列または配列の長さに加算します。

シフト解除()

文法

arrayObject.unshift(new1,new2,...,newX)

関数:

そのパラメータをarrayObjectの先頭に順番に追加します。

戻り値

指定された値を配列の新しい長さに追加します

ポップ()

文法

arrayObject .pop ( )

関数

arrayObject の最後の要素を削除します

戻り値

削除された要素

シフト()

文法

arrayObject.shift()

関数

arrayObjectr の最初の要素を削除します

戻り値

削除された要素

参加する()

文法

arrayObject . join ( セパレータ )

関数

配列のすべての要素を文字列に入れるために使用されます

戻り値

弦。

リバース()

文法

stringObject.reverse()

関数

配列内の要素の順序を示すために使用されます。

戻り値: 配列

選別()

文法

arrayObject.sort(sortby)

関数

配列要素をソートするために使用されます

戻り値: 配列

注:
1: 配列内の各項目が数値であっても、sort() メソッドは文字列を比較します。

2: sort() メソッドは比較関数をパラメータとして受け入れることができます

sort(function(){a,b} return a<b)

1: 配列の操作方法をマスターする:

連結()

スライス()

concat()

文法

arrayObject.concat(arrayX,array<x,....,arrayX)

関数:

2 つ以上の配列を結合するために使用されます

戻り値

配列

スライス

文法

arrayObject.slice(開始,終了)

関数:

既存の配列から選択された要素を返します

パラメータ

start (必須) は、選択を開始する場所を指定します。負の数の場合は、配列の末尾から開始されます。

end (オプション) は、選択範囲を終了する場所を指定します。これは、配列フラグメントの末尾の配列添字です。

説明する

1;end が指定されていない場合、分割配列には配列の先頭から末尾までのすべての要素が含まれます。

2: スライス メソッドのパラメーターに負の数値がある場合、その数値を配列の長さに加算して、対応する位置を決定します。

戻り値: 配列

学習目標

1: splice() メソッドを使用して配列項目を削除する方法をマスターする

2: splice() メソッドを使用して配列項目を挿入する方法をマスターする

3: splice() メソッドを使用して配列項目を置き換える方法をマスターする

消去

文法

arrayObject.splice(インデックス,カウント)

関数

インデックスから始まる 0 個以上の要素を削除します。

戻り値

削除された要素を含む配列

説明する

count は解明する項目の数です。0 に設定すると、項目は削除されません。

設定されていない場合は、インデックスから始まるすべての値を削除します

入れる

arrayObject.splice(インデックス,0,アイテム1,....,アイテムX)

関数

指定した位置に値を挿入

パラメータ:

インデックス: 開始位置

0: 削除する項目

item...itemX: 挿入するアイテム

戻り値: 配列

交換する

文法

arrayObject.splice(インデックス,カウント,アイテム,....,アイテムX)

関数

任意の数の項目を削除しながら、指定された位置に値を挿入します

パラメータ

インデックス: 開始位置

count: 削除するアイテムの数

item, ...., itemX: 挿入するアイテム

戻り値: 元のデータから削除された項目 (項目が削除されなかった場合は空の配列を返します)

学習目標

1: 配列インスタンスに 2 つの位置を追加する ECMAScript メソッドをマスターする

の指標()

lastIndexOf()

の指標

文法

arrayObject.indexOf(searchvalue,startIndex);

関数

配列の先頭 (位置 0) から逆方向に検索します。

パラメータ

searchvalue: 検索する必要がある項目

startIndex: オプションの開始位置のインデックス

戻り値

数値 配列内の検索された項目の位置 見つからない場合は、-1 が返されます。

lastIndexOf()

文法

arrayObject.lastIndexOf(searchvalue,startIndex)

関数:

配列の末尾から順方向に検索します

パラメータ

searchvalue: 必須、検索する項目

startIndex: オプション、開始位置のインデックス

戻り値:

数値、配列内の検索された項目の位置、見つからない場合は -1 を返します

学習目標

1: 文字列オブジェクトのメソッドをマスターする

charAt()

charCodeAt()

の指標()

lastIndexOf()

charAt() と

文法

stringObject.charAt(インデックス);

関数:

stringObject のインデックス位置の文字を返します。

charCodeAt()

文法

撹拌オブジェクト.charCodeAt(インデックス)

関数

stringObject のインデックス位置にある文字の文字エンコーディングを返します。

ECMAScript5 は「角括弧と文字インデックス」を使用して文字列内の特定の文字にアクセスします

ただし、IE77 以前のブラウザでは未定義が返されます。

学習目標

1:文字列オブジェクトのインターセプト方法をマスターする

スライス()

置換()

部分文字列()

文法

stringObject.slice(開始,終了)

関数

部分文字列の切片

パラメータの説明

1: start: 必須、部分文字列の開始位置を指定します

2: end: 部分文字列の終了位置を示すオプション。end 自体はインターセプト範囲内にありません。

、省略した場合は文字列の末尾が切り捨てられます。

3: パラメータが負の数値の場合、受信した負の値が処理されて文字列の長さに追加されます。

説明する

1: 最後のパラメータを省略した場合、最後までインターセプトします。

2: パラメータが負の数値の場合、その値は文字列の長さ + 負の数値になります。

3: パラメータ自体を含まない

部分文字列()

注: 構文と関数は、slice() とまったく同じです。

違いは、

1: パラメータが負の数の場合、パラメータを自動的に 0 に変換します

部分文字列()

文法

stringObject.substr(開始,長さ)

関数

部分文字列の切片

パラメータの説明

1:start は部分文字列の開始位置を指定する必要があります

2: len はオプションで、インターセプトされた文字の長さを表します。省略した場合は、文字列の末尾まで切り捨てられます。

3: start が負の数の場合。受信した負の数値を処理し、文字列の長さに追加します。

4: len が負の数の場合、空の文字列を返します

学習目標 String の 2 つのメソッド split() replace()

スプリット()

交換する()

スプリット()

文法

stringObject.split(セパレータ)

関数

文字列を文字列の配列に分割する

戻り値配列

例証します:

区切り文字が必要です、区切り文字

交換する()

文法

stringObject.replace(regexp/substr,replacement)

関数

文字列内の一部の文字を他の文字に置換するか、正規表現に一致する部分文字列を置換します。

戻り値文字列

パラメータ:

regexp: 置換する部分文字列またはパターンを指定する必要がある RegExp オブジェクト

交換:必要です。文字列値

文字列メソッドをマスターするその他の方法

toUpperCase()

toLowerCase()

3: 文字列 broder-left-color を border-LeftColor に変換します。

toUpperCase() と toLowerCase()

文法:

stringObject.toUpperCase()

機能: 文字列を大文字に変換する

文法

stringObject.toLowerCase()

関数: 文字列を小文字に変換します。

数学オブジェクト

1: Mathオブジェクトのメソッドをマスターする

分()

最大()

天井()

床()

ラウンド()

腹筋()

Math.min()

文法

Math.min(num1,num2,...numN)

関数:

一連の数値の最小値を見つける

戻り値: 数値

Math.max()

文法

Math.max(num1,num2,..numN)

関数

本のセットの最大値を見つけます

戻り値: 数値

Math.ceil()

文法

Math.ceil(数値)

関数

切り上げ

つまり、num より大きい最小の整数を返します。

戻り値: 数値

Math.floor()

文法

Math.flor(数値)

関数

num の整数部分を切り捨てて返します。

戻り値: 数値

Math.round()

文法

数学ラウンド(数値)

関数:

値を最も近いフレーム番号に丸めます

戻り値: 数値

Math.abs()

文法

数学.abs(数値)

関数

num の絶対値を返します

戻り値番号

学習目標

1: Mathオブジェクトのrandom()メソッドをマスターする

2: n と m の間のランダムな整数を見つける関数をカプセル化します。

Math.random()

文法

Math.random()

関数

0以上1未満の乱数を返します。

戻り値番号

例証します:

n と m の間のランダムな整数の式を求めます。

ランダム= Math.floor(Math.random()*(m-n+1)+n);

JavaScriptの日付オブジェクト

1:日付オブジェクトの作成方法をマスターする

2:日付オブジェクトで日付と時刻を取得する方法をマスターする

3:日付オブジェクトに日付と時刻を設定する方法をマスターする

日付オブジェクトの作成方法

構文 new Date()

機能: 日時オブジェクトを作成する

戻り値: パラメーターを渡さずに、現在の日付と時刻オブジェクトを返します。

年、月、日、時、分、秒、曜日を取得する方法

1: getFull Year(): 4 桁の年を返します。

2: getMonth(): 日付の月を返します。戻り値は 0 ~ 11 です。

3: getDate(): 月の日数を返します。

4: getDay(): 曜日を返します。戻り値は 0 ~ 6 です。

5: getHours() は時間を返します

6: getMinutes(): 分を返します

7: getSconds() は秒を返します

8: getTime(): 日付を表すミリ秒数を返します。

年、月、日、時、分、秒、曜日の設定方法

1: setFull Year(year) は 4 桁の年を設定します

2: setMonth(mon) は日付の月を 0 から設定します。0 は 1 月を意味します

3: setDate(): 日付の設定

4: setDay() は 0 から始まる曜日を設定します。0 は曜日を表します

5: setHours() は時間を設定します

6: setMinutes() は分を設定します

7: setSeconds() は秒を設定します

8: setTime() は日付をミリ秒単位で設定します。日付全体が変更されます

日付オブジェクトの作成方法

構文; new Date()

機能: 日時オブジェクトを作成する

戻り値: パラメーターを渡さずに、現在の日付と時刻オブジェクトを返します。

説明する

属性の日付と時刻に基づいて日時オブジェクトを作成する場合は、属性を表す日付を渡す必要があります。

ミリ秒数、または年、月、日、時、分、秒を表すカンマ区切りのパラメータのセット

JavaScriptDOM の基本

完全な JavaScript は ECMAScript (文法) によって提供されます。

ブラウザ オブジェクト (DOM BOM) (プロパティ) で構成されます。

1:要素の取得方法

2: 要素のスタイルにアクセスする方法

3: 属性の設定と削除方法

1: 基本的な DOM 検索方法をマスターする

document.getElementByid()

document.getElementsByTagName()

2: DOM 要素のスタイルをマスターする

構文: document.getElementById("id")

機能: 指定された ID を持つ最初のオブジェクトへの参照を返します。

戻り値: DOM オブジェクト

説明: id は、DOM 要素の id 属性の値です。

構文: docment.getElemetnsByTagName("タグ")

機能: チーム内のすべてのタグタグ参照のコレクションを返します。

戻り値: 配列

説明: タグがタグの名前を取得する必要がある理由

要素のスタイルを設定する

構文: ele.style.styleNmae= styleValue

機能: ele要素のCSSスタイルを設定します。

説明する

1: ele は設定するスタイル DOM オブジェクトです

2: styleName は設定するスタイルの名前です

3: styleValue は設定されたスタイル値です

学習目標

1: innerHTML 属性の適用をマスターする

2: className 属性の適用をマスターする

3: DOM 要素の属性を追加、削除、取得する方法をマスターする

構文: ele.innerHTMl

機能: ele 要素の開始タグと終了タグの間の HTML を返します。

構文: ele.innerHTML= "html"

機能: ele要素の開始タグと終了タグの前のHTMLコンテンツをhtmlに設定します。

innerHTML: タグ間のテキストと HTML コンテンツを取得および設定します

クラス名

構文: ele.className

機能: ele要素のclass属性を返します。

構文: ele.className = "cls"

機能: ele要素のclass属性をclsに設定します。

要素の取得

DOM 要素のプロパティを取得する方法、または属性を追加する方法

文法: エレ。getAttribute("属性")

機能: ele要素のattribute属性を取得する

説明する

1: ele は操作対象の dom オブジェクトです

2:attribute は取得する HTML 属性 (id、type など)

プロパティを設定する

语法:ele.setAttribute("属性",value)

機能: ele 要素に属性を設定します。

説明する

1: ele は操作対象の dom オブジェクトです

2:attribute は設定する属性の名前です

3: value は属性属性セットの値です

属性の削除

構文: ele.reniveAttrubute("属性")

機能: ele の属性属性を削除します。

説明する

1: ele は操作対象の dom オブジェクトです

2:attribute は削除する属性の名前です。

JavaScriptの基本イベント

学習目標

1: イベントとは何かをマスターする

2: HTML イベントをマスターする

3: マスター DOM レベル 0 イベント

4: 一般的なマウスとキーボードのイベントをマスターする

5:方向性をマスターする

HTMLイベント

HTML要素タグ内に直接イベントを追加し、スクリプトを実行します。

構文 <tagevent="スクリプトの実行</tag>"

機能: HTML要素にイベントをバインドする

注: スクリプトの実行は、関数を呼び出すことで実行できます。

マウスイベント

  • onload: ページのロード時にトリガーされます。

-onclick: マウスのクリック時にトリガーされます

-onmouseover: マウスがロールオーバーするとトリガーされます

-onmouseout: マウスが離れるとトリガーされます

-onfoucs: フォーカスが取得されたときにトリガーされます

-onblur: フォーカスが失われたときにトリガーされます

-onchange: ドメインの内容が変更されたときに発生します。

DOM0レベルのイベント

構文: ele.event = スクリプトを実行

機能: DOM オブジェクトのイベントをバインドする

注: 実行スクリプトは、匿名関数または関数呼び出しにすることができます。

マウスイベント

-onsubmit: フォームの確認ボタンがクリックされたときに発生します。

-onmousedown: 要素上でマウス ボタンが押されたときに起動します。

-onmousemove: マウス ポインタが移動すると発生します

-onmouseup: 要素上でマウス ボタンが放されたときにトリガーされます。

-onresize: ブラウザウィンドウのサイズが変更されたときにトリガーされます。

-onscroll: スクロールバーがドラッグされたときにトリガーされます

キーボードイベントとkeyCode属性

onkeydown: ユーザーがキーボードのキーを押したときに発生します

onkeypress: キーボードのキーが押されて放されたときに発生します。

onkeyup: キーボードのキーが放されたときに発生します

keyCode: onkeypress onkeydown または onkeyup イベントによってトリガーされたキーの値を返します。

文字コードまたはキーコード

JavaScriptBOM の基本

BOM (ブラウザ オブジェクト モデル) ブラウザ オブジェクト モデル

BOM 内のオブジェクト

ナビゲーター

画面

歴史

位置

書類

イベント

ウィンドウはブラウザのインス​​タンスであり、ブラウザではウィンドウ オブジェクトには 2 つの役割があります。

JavaScript がブラウザ ウィンドウにアクセスするためのインターフェイスですか? ECMSScript に何か問題がありますか?

指定されたグローバルオブジェクト

すべてのグローバル変数とグローバル メソッドがウィンドウに割り当てられます

構文 window.alert("コンテンツ")

機能: メッセージと確認ボタンを含むアラート ボックスを表示します。

構文: window.confirm("メッセージ");

機能: 指定したメッセージと [OK] および [キャンセル] ボタンを含むダイアログ ボックスを表示します。

構文: window.prompt("テキスト","デフォルトテキスト");

パラメータの説明:

text: ダイアログボックスに表示されるプレーンテキスト (HTML 形式のテキストではありません)

defaultText: デフォルトの入力テキスト

戻り値:顧客がプロンプトボックスのキャンセルボタンをクリックした場合、nullが返されます。

顧客が確認ボタンをクリックした場合に入力フィールドに安全に表示されるテキストを返します。

ウィンドウオブジェクト

構文: window.open(ページURL,名前,パラメータ)

機能: 新しいブラウザ ウィンドウを開くか、名前付きウィンドウを検索します。

パラメータの説明:

pageURL: 子ウィンドウのパス

name: サブウィンドウハンドル (name は新しいウィンドウの名前を宣言します。これにより、後でサブウィンドウを名前で参照することが容易になります)

パラメータ: ウィンドウパラメータ (各パラメータはカンマで区切られます)

構文 window.close()

機能: ブラウザウィンドウを閉じる

ウィンドウオブジェクトタイマーのメソッド

1: マスタータイムアウトコール

2: 断続的な通話をマスターする

JavaScript はシングルスレッド言語であり、シングルスレッドとは、実行されるコードが順番に実行される必要があることを意味します。

構文: setTimeout(コード, ミリ秒)

関数: 指定されたミリ秒数後に関数または計算式を呼び出します。

パラメータの説明

1: code: 呼び出される関数または実行される JavaScript コード文字列

2: ミリ秒: コードを実行する前に待機するミリ秒数

タイムアウトコールをクリアする

構文 clearTimeout(id_of_settimeout)

機能: setTimeout()メソッドで設定したタイムアウトを解除します。

パラメータの説明:

1:id_of_settimeout: setTimeout() によって返される ID 値。キャンセルされる遅延実行コード ブロックを識別します。

断続的な通話

構文 setInterval(code,millisec)

機能: 指定した時間ごとにコードを実行します。

パラメータの説明:

1: code: 呼び出される関数または実行されるコードブロック

2: millsec: 定期的な実行またはコードの呼び出し間の時間間隔がミリ秒単位で計算されます。

構文: clearInterval(id_of_setinterval)

機能: setIntreval()メソッドで設定した間隔を解除します。

パラメータの説明:
1:id_of_setinterval: setInterval () によって返される ID 値

地域

1: 位置オブジェクトをマスターする

2: 位置オブジェクトの共通属性をマスターする

location オブジェクトは、現在のウィンドウにロードされているドキュメントに関する情報を提供し、いくつかのナビゲーションも提供します。

関数、これは window オブジェクトのプロパティと docuemnt オブジェクトのプロパティの両方です

位置オブジェクトの共通プロパティ

構文: location.href

機能: 現在ロードされているページの完全な URL を返します。

注: location.href は window.location.href と同等です。

構文: location.hash

機能: URL のハッシュ (# の後に 0 個以上の文字が続く) を返します。ハッシュが含まれていない場合は空を返します。

構文: location.host

機能: サーバー名とポート番号 (利用可能な場合) を返します。

構文: 場所.ホスト名

機能: ポート番号なしでサーバー名を返します。

構文: 場所.パス名

機能: URL 内のディレクトリ名やファイル名を返します。

構文: location.port

機能: URL で指定されたポート番号を返します。そうでない場合は、空の文字列を返します。

構文: location.protocol

機能: 月面で使用されているプロトコルを返す

構文: location.search

機能: URL のクエリ文字列を返します。この文字列は疑問符で始まります。

1: マスタポジション操作

2: マスター location.reaplace()

3: マスターロケーション.reload()

ブラウザの場所を変更する方法

location.href プロパティ

場所オブジェクトの他の属性によっても URL が変更される可能性があります

location.hash

場所.検索

構文: location.replace(url)

機能: リダイレクト URL

注: location.replace を使用しても、履歴に新しいレコードは生成されません。

location.reload()

構文: location.reload()

機能: 現在表示されているページをリロードします。

説明する

location.repoad() はキャッシュからロードされる可能性があります

location.reload(true) はサーバーからリロードします

BOM の履歴オブジェクトをマスターする

構文:history.back()

機能: 履歴の前のステップに戻ります。

注:history.go(-1) を使用するのと同等です。

構文: location.forward()

機能: 履歴の次のステップに戻ります。

注:history.go(1) を使用するのと同等です。

1: Screen オブジェクトとその共通プロパティをマスターする

構文: screen.availWidth

機能: 利用可能な画面幅を返します。

構文: screen.availHeight

機能: 利用可能な画面の高さを返します

ウィンドウドキュメント表示領域の高さと幅を取得するには、innerHeight と innerWidth を使用します。

表示画面の高さと幅を取得するには、availHeght と availWidth を使用できます。

ナビゲータオブジェクト

1: Navigator オブジェクトの userAgent 属性をマスターする

2: ブラウザの種類の判断方法をマスターする

3: デバイスの端末がモバイルかPCかを判断する方法をマスターする

UserAgent: ブラウザ名、バージョン、エンジン、オペレーティング システム、その他の情報とコンテンツを識別するために使用されます。

学習内容

1: フロントエンド開発プロセスと必要なツールの使用

2: HTML5のタグ、タグ構造、BEM開発モデル

3: css3 cssトランジションアニメーション フレームアニメーション

4: js要素の取得とイベントレスポンスの処理

拡張: フロントエンド開発プロセス

1: 分析が必要

2:ビジュアルデザイン、インタラクティブアニメーションデザイン

3: フロントエンドの静的ページ開発とアニメーション効果の開発

関連ツール

1: エディター Sublime3

2: アノテーションツール PxCook

3:カットツール:PhotoShop

開発プロセス

1: マーク

2: スプライト画像 GoPng

開発スキル

1: 大きいものから小さいものまで

2: BEM開発モデル

BEMはBlick Element Modifierの略です

センタリング方法のまとめ

1: テキストは垂直方向の中央に配置されます。

2: ブロック要素は親要素の垂直方向の中央に配置されます

3: ブロック要素(コンテナ)を水平方向に中央揃えにする

おすすめ

転載: blog.csdn.net/delishcomcn/article/details/132756833