JS に関する基本的な質問-jsチュートリアル-php.cn

JS に関する基本的な質問

jacklove

リリース： 2018-05-21 10:21:12

オリジナル

1552 人が閲覧しました

開発や学習では、js の問題によく遭遇します。この記事では、関連する js の基本的な問題をいくつか紹介します。

CSS と JS が Web ページに配置される順序は何ですか?

通常、CSS を head タグに配置し、JS コードを body コードの最後に配置します。

<!DOCTYPE html><html><head>
  <meta charset="utf-8">
  <title>JS基础</title>
  <style>
    
    /* 这里放css代码 */      
    
  </style></head><body>
  <!-- 这里放HTML代码 -->
    
  <script>

ログイン後にコピー

白画面とFOUCの説明

白画面: CSS スタイル一部のシナリオ (新しいウィンドウを開く、更新するなど) では、@import タグを使用すると、コンテンツが徐々に表示されずにページに白い画面が表示されます。 CSS内にリンクを配置して先頭に置くと、白画面現象が発生する場合もあります。

スクリプトは後続のコンテンツの表示をブロックします

スクリプトは後続のコンポーネントのダウンロードをブロックします
画像と CSS の場合、それらは同時に読み込まれます (1 つのドメイン名で 2 つのファイルを同時に読み込むなど)。 JS をロードするときに同時実行性が無効になり、他のコンテンツがダウンロードされなくなるため、JS をページの上部に配置すると白い画面が表示されます。

FOUC (スタイルのないコンテンツのフラッシュ): IE ブラウザーの場合、CSS スタイルを下部に配置すると、一部のシナリオ (リンクをクリックする、URL を入力する、ブックマークを使用して入力するなど) で、FOUC 現象が発生します。 (スタイルのないコンテンツが徐々に読み込まれ、CSS が読み込まれた後にページに突然スタイルが表示されます。) Firefox の場合、FOUC 現象が必ず発生します。

async と defer の機能は何ですか?違いは何ですか

async と defer を使用しないと、ブラウザーの読み込み時に現在のスクリプトがすぐに読み込まれて実行され、ブラウザーは script タグの下にあるドキュメント要素のレンダリングをブロックされます。ただし、async と defer を使用すると、ブラウザーはブロックされます。後続のドキュメントをロードしてレンダリングできます。このプロセスは、JS スクリプトのロードおよび実行と並行して実行されます。つまり、ロードは非同期です。

2 つの違い: 主な点は、スクリプトがダウンロードされた後にいつ実行するかです。 Defer はドキュメントが解析されて表示されるまで、読み込み順序に従ってスクリプトの実行を遅らせますが、async はすぐに実行されます。宣言した順序に関係なく、ロードされるとおりです。
一般的に言えば、延期の方が使用シナリオに沿っています。

Web ページのレンダリングメカニズム

HTML タグを解析し、DOM ツリーを構築します

CSS タグを解析し、CSSOM ツリーを構築します

DOM と CSSOM を組み合わせて基本レイアウト用のレンダーツリーを作成します

各ノードの幾何学的構造を計算します

各ノードを画面に描画し、ユーザーに提示します

JavaScript はいくつのデータ型を定義しますか? 単純型はどれですか? 複合型はどれですか?

Null: null ポインターです

Underfined: ポインターはありますが、何も指しません。 Space

Boolean: ブール値、true、false (true、false)

Number: 数値型。

String: 一重引用符または二重引用符で表される文字列タイプ。

オブジェクト: オブジェクト、JS の中心概念、最も重要なデータ型。 (すべてがオブジェクトです)

最初の 5 つの型は単純型で、Object は複合型です。

NaN、未定義、null はそれぞれ何を表しますか?

NaN: 数値ではない、それ自体を含むどの値にも等しくない (どの値にも等しくない数値型) を意味します

underfined : は Underfined の唯一の値です。これは、変数が宣言されただけで初期化されていないことを意味します。つまり、このポインターは存在しますが、このポインターはスペースを指していません

null: の唯一の値です。 Null は、null ポインター、つまり存在しないものを意味します

typeof と instanceof の関数と違いは何ですか? typeof の関数は、戻り値のデータ型を決定し、それをオペランドの前に置くことができます。オペランドは任意の型にすることができます。

function a(){}

a(){}typeof a"function" //オペランドは関数であり、functiontypeof 123421"number"typeof "32423423423""string"typeof true"boolean" typeof unknown"unknown" を返します// 未定義の変数をチェックするためにこれを使用します。 typeof window "object" // 他のすべては object を返します

instanceof は、変数がオブジェクトのインスタンスであるかどうかを判断するために使用されます。typeof は、null、配列に遭遇したときにオブジェクトの型を返すためです。、またはオブジェクトなので、オブジェクトが配列であるかどうか、または変数がオブジェクトのインスタンスであるかどうかを判断したい場合は、instanceof を使用する必要があります

コードの問題

1 次のコードは、変数がであるかどうかを判断します。数値、文字列、ブール値、関数

function isNumber(el){ 
 if ((typeof el)==="Number"){   return true;
   }  else { 
return false
  };
}function isString(el){ 
  if ((typeof el)==="String"){   return true;
   }  else { 
return false
  };
}function isBoolean(el){ if ((typeof el)==="Boolean"){   return true;
   }  else { 
return false
  };
}function isFunction(el){  if ((typeof el)==="Function"){   return true;
   }  else { 
return false
  };
}var a = 2, 
b = "jirengu", 
c = false;alert( isNumber(a) ); //truealert( isString(a) ); //falsealert( isString(b) ); //truealert( isBoolean(c) ); //truealert( isFunction(a)); //falsealert( isFunction( isNumber ) ); //true

ログイン後にコピー

2. 次のコードの出力結果は?

JS に関する基本的な質問

私は写真です

3. 次のコードの出力結果は?

var a = 1;

a+++a;typeof a +2;

結果はnumber2です(typeofの優先順位が非常に高いため、typeof aが最初に計算され、結果はnumberとなり、2が加算されるため、 number2)

4. 配列を走査し、配列の各項目を出力します

var arr = [3,4,5]// todo..// 出力 9, 16, 25

以下:

JS に関する基本的な質問

私はグラフです

5. JSON をトラバースし、内部の値を出力します

var obj = { name: 'hunger', sex: 'male', age: 28}//todo ...// 出力名: 'hunger', 性別: 男性, 年齢: 28

コードは次のとおりです。図: (この参照はどこでも)

JS に関する基本的な質問

私は写真です

6. 次のコードの出力は何ですか? Why

console.log(a);var a = 1;console.log (a);console.log( b);

JS はグローバル変数をプロモートし、a は宣言されるだけで割り当てられないため、最初の console.log(a); 出力は不十分です。
2 番目の console.log(a); の出力は、var a =1; の後に a に 1 を代入するため、1 になります。
3 番目の console.log(b); 出力では、b が宣言されていない、または値が割り当てられていないため、エラーが報告されます。

この記事では、いくつかの基本的な導入問題を紹介します。さらに関連した知識が必要な場合は、php 中国語 Web サイトに注目してください。