最初のJS

12006 ワード
フロントエンド Java Script テキストリンク

JSの歴史


Java ScriptとJavaの関係?
ほとんど関係ない!既存名LiveScriptからJavaScriptに名前を変更
その後、MSはJavaScriptに倣ってJscriptを作成する
文法などをECMAScriptに統合することで、より大きな混乱を招く
JQuery Dojoのようなライブラリもたくさんあります
Chrome登場!JSの運行が早すぎる!!
ECMAScript 10など毎年出てきます!!
ChromeのJSエンジンV 8はNodeです.jsおよびmicrosoft edge用
Babel:ECMAScriptの最新バージョンを使用し、導入時にECMAScript 5または6のJSコンパイラに置き換えます.
単一ページアプリケーション(SPA):フレームワーク、ライブラリ(NGUAR、Reactなど)を使用して、1ページにローカル更新を行います.
JavaScriptを勉強してからWebAPIを勉強します.

ビジュアルコードの使用


EllyのVisual Code Extension、ショートカットキー推奨ビデオを見ることで、Web開発の基本的な設定とテクニックを理解しました!
Node.jsも公式サイトからダウンロードしました
初めてJavaScriptで書いたコードは….
console.log('Hello World!');
Node.jsがインストールされている場合は、cmdウィンドウでディレクトリに移動します.
nodeファイル名.jsを打つとハローワールド!出力が見える
Web API(アプリケーションプログラミングインターフェース)は、Web開発言語自体が提供または使用するものではありません.Node.jsやブラウザで認識される関数がいくつかあります!

ChromeなどのブラウザのコンソールウィンドウでもJS操作を実行できます!
  • https://developer.mozilla.org/ko/docs/Web/JavaScript
    JS関連の公式サイトです!ECMAScriptも公式ですが、わかりづらいですね
  • jsの最初の行「use strict」.追加してスタート!!
    jsは柔軟であるため,開発者エラーもex)宣言X変数に
    • を割り当てる.

    async vs defer


    jss scriptタグをhtmlのどの位置に置くのが一番いいですか?Araboza!!
    1.タイトルに含める
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="main.js"></script> 
</head>

<body>

</body>

</html>

    HTMLを読むときの真ん中のmainjsを取得して実行し、jsファイルの容量が大きいと本当に時間がかかります...bad one
    2.bodyの尾を入れる
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
</head>
<body>
    <div></div>
    <script src="main.js"></script>
</body>

</html>

    終了時にjsファイルを用意しますが、js依存性が高い場合はhtmlのみをプレビューできるため、より長い時間がかかります.
    3. head + async
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script asyn src="main.js"></script> 
</head>
<body>
    <div></div>
</body>

</html>

    jsファイルfetch、execute並列処理-jsはhtmlが実行される前に実行される場合があります.
    4. head + defer
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="main.js"></script> 
</head>
<body>
    <div></div>
</body>

</html>

    best!! fetch優先のみ、executeはhtml解析が完了した後に実行されるため、ユーザーにページを表示した後にjsを起動する
    vs async:シーケンス優先X->ダウンロードしてjsファイルを優先的に実行
    REACT_FULLSTACK [4] Client2(validation)
    [プログラマ]回転マトリクスの枠線