TIL 21|HTML-JS接続、演算子、パラメータ

さまざまな方法でJavaとHTMLを接続
HTMLをJavaScriptに接続する場合、スクリプトを挿入する場所はどちらでも構いません.head finally,body finallyなど多くの方法があり,これまでbodyの最後に挿入したほうがよいと考えられていた.これにより、ブラウザ操作中にHTMLのロードが完了すると、JavaScriptの実行が遅延したり、まだ生成されていないDOMツリーを操作したりしてエラーが発生しないようにすることができます.今回はheadに追加する方法について説明します.async <script async src="script.js">JavaScriptのダウンロードとHTMLパケットを並行して行います.以下の手順で動作します.

HTMLパケット

途中でJavaScriptタグに遭遇し、並行してダウンロード(fetch)

を実行

JavaScriptのダウンロードが完了したら、HTMLパケットを一時停止

JavaScriptを実行

JavaScriptの実行後、HTMLパケットを復元

この方式の問題は、HTMLが未読の場合、すなわちDOMツリーが生成されていない場合にJSを実行すると、生成されていないDOMの操作中にエラーが発生する可能性があるということである.
HTMLパケットとJavaScriptダウンロードを並行して行う利点deferを利用しながら、これらの問題を改善する方法である.defer <script defer src="script.js">推奨メソッドdeferは、次の順序で操作されます.

HTMLパケット

途中でJavaScriptタグに遭遇し、並行してダウンロード(fetch)

を実行

javascriptダウンロード完了後、直ちに実行を停止

HTMLパケット完了後、JavaScript

を実行
HTMLスライスとJavaScriptダウンロードを同時に行い、HTMLを読み込んだ後、JavaScriptダウンロードを待つ必要はありません.また、JavaScriptのダウンロードを先に完了しても、JavaScriptを実行するにはHTMLパーティションを完了しなければならないため、asyncのようなエラーは発生しません.use strictバニラJavaScriptを使用して開発する場合は、jsファイルの上部にuse strictstrictモードを掛ける必要があります.エンジンの稼働効率が高いため、性能が改善された.
✨ Javascript Operator
単独で勉強しなくても、常識的に(?)みんなが知っている以外に、新しい知り合いのものを整理してください.
String concatenation

文字列データsam's bookを入力する場合は、中間の「\とともに使用します.
ex) 'sam\'s book'でも実はそうじゃなくても"sam's book"

特殊文字列を使用できます.\n:改行\t:tab

増分、減算演算子+、--
割り当て、更新の順序に違いがある2つの方法.

pre increment

    const preIncrement = ++counter; 
    // 위의 코드는 아래와 같다
    counter = counter+1;
    preIncrement = counter;

post imcrement

    const postIncrement = counter++;
    // 위의 코드는 아래와 같다
    postIncrement = counter;
    counter = counter+1;

Logical operator

&&演算子は、最初の条件がfalseの場合に停止し、|演算子は、最初の条件がtrueの場合に停止します.後の条件を判別しない.

したがって、比較演算子を使用する場合は、条件関数のように演算時間が長いものを入れる場合は、最後に置くのが望ましい.

関数パラメータ

デフォルトパラメータの設定:パラメータが渡されていない場合のデフォルト値を設定できます.

    function greeting (name = 'stranger') {
      console.log(`Hello, ${name}!`)
    }

    greeting('Nick') // Hello, Nick!
    greeting() // Hello, stranger!

...args:配列としてパラメータのリストを使用できます.

    function test(...args) {
      console.log(args); // [1,2,3,4,5]
      console.log(Array.isArray(args)); // true
    }
    console.log(test(1, 2, 3, 4, 5));