クイックキャンパス百万バイト学校Day 6(第2週月曜日からWeb Programming 2)

11891 ワード
テキストリンク

Today Topic : Web Programming 2


🗝 Keywords


JSとWeb
JSのサーバ利用(node.js)
Htmlタグの使用の重要性
✅ Html outline
⌝CSSはなぜこんなに重要ですか?

1.JSとWeb


🚀 JavaScriptのWeb上での働き方(1)
  • scriptタグでhtml要素値を検索し、textContentというプロトタイプ関数というコードとプロシージャ
    • を使用する.
    🚀 JavaScriptのWeb上での働き方(2)
  • レンダリングエンジン:ドームのエンジントークンを処理するhtml、css
  • jsエンジン:scriptラベル上で実行されるトークン発行量
    • 🚀 JavaScriptのWeb上での働き方(3)
  • jsエンジンがJavaScriptコードに移動するステップ
  • var a = 5;UTF-8辞書を使用して、
    • をバイナリ形式で保存します.
  • lexer,独自のルールを用いて記号の基礎的意味を与える
    • .
  • astオブジェクト:解析器はアセンブリ形式で実行され、ツリー構造
    • が使用されます.
  • アセンブリ:astを使用してアセンブリ形式で翻訳します.
  • マシンコード:
    • cpuを駆動する計算回路
  • ecma scriptによりjsエンジンが人間向けの符号化表現をcpu向けの機械コマンドに変換して動作させるプロセスは
    • である.
  • に変換するマシン命令の中間ステップは、大きなツリー構造(プロジェクトごとにグループ化)
    • になる.

    2.JSのサーバ利用(node.js)


    🚀 JSエンジンのオペレーティングシステム運転
  • javascriptはブラウザで実行され始めたが、jsエンジンが外に拡張するにつれてosに直接コマンドを発行し、htmlを必要とせずに使用できる言語となった.
  • は、したがってjsエンジンをノードとして使用する.jsが使用可能になります.ということでモダンなJavaScriptを使っていると言えます.
  • エレクトリックピアノでインストールされたプログラムは、JavaScriptで記述できるなど.
    • JSローカルサーバの作成Webページの作成
    const http = require('http');
const fs = require('fs');
function mySet(req,res) {
    let url = req.url ;
    if (req.url === '/') {
        url = '/index.html';
    } 
    if (req.url === '/') {
        url = '/about.html';
    } 
    res.writeHead(200);
    let htmlFile = fs.readFileSync(__dirname + url);
    res.end(htmlFile);
};
var app = http.createServer(mySet);
app.listen(8080);
    <!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">
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    <title>About</title>
</head>
<body>
    <h1>첫 페이지입니다.</h1>
    <img src='./door.png'>
</body>
</html>
    🚀 JSを使用したサーバーの作成
    JavaScriptサーバは、前の
  • に示すように、独自に作成することができる.
    上記のjavascriptを
  • ノードに実行し、localhost:8080に接続してjavascriptのサーバ
    • をアクティブにします.
  • しかし、このようにしてすべてのサーバを実行するには時間がかかるため、ウェブサーバツール
    • を使用する.
  • Webサーバがどのように作成されているかはわかりませんが

    3.Htmlタグの使用の重要性




    🚀 Htmlタグの使用の重要性
  • htmlのラベルは
    • を使用することをよく考慮する必要があります.
  • のようなh 1タグであっても、ポリシーによっては異なるポリシーを用いて検索エンジン内のコンテンツを暴露することができる.
  • 元はh 1元で、
    • 元未満です.
  • フロントエンド開発者はpsd->htmlを
    • に移動するだけではない.
  • データを公開できるように、html構造を組織し、意味化がうまくできるかどうかが重要です.
    • だからhtmlは先端を作るほど難しいです.🚀 Htmlの重要度に応じてタグを区別する
  • ヘッダー、main、フッターは影響を受けません.
  • section、article、aside、navは、意味構造
    • に影響を与えるパーティションタグである.

    4. Html Outline


    🚀 NaverとTossのHtml outline比較

  • html outline outline outline profileは、ChromeブラウザのHTML 5 Outlinerプログラムがインストールされた後、アウトラインがどのように適用されているかをWebページで見ることができる
    • です.
  • outlineが重要なのは、htmlでディレクトリアプリケーションとして使用されているためです.すなわち、htmlコンポーネントの優先度は何ですか.
  • 検索エンジンは何を中心に構成できるのか.
    • 🚀 プロファイルを考慮したHTML構造の設計

    🚀 私が作ったコードコメント
  • ヘッダー、main、aside、フッターの分割が行われます.
  • h 1は他の検索エンジンに露出することができますが、そうであれば残りのラベルをきちんと整理する必要があります.
  • ヘッダーとフッターは、Webページ内に複数作成できます.ヘッダーとフッター
    • は、1つのパッケージにヘッダーを配置するよりも、他のパッケージで使用するほうがよい.
  • html構造を考慮すると,1)seo露出2)コラボレーション3)css順序を考慮すべきである.cssを優先する必要はありません.どうして.cssはどうしても作成できるからです.だからcssの実力は重要です.

    • 5.CSSはなぜ重要なのか。


    🚀 CSS開発ツールを使用して検査する
  • domはhtmlによって作成され、cssはcssomによって作成された
  • domはPropertyで、cssは計算で確認できます.
  • 常にウェブページを作成し、開発者ツールで確認する習慣を身につけましょう!
    • 🚀 CSS思考を行う
  • フロントエンドの開発者は、1)cssメカニズムを理解する2)頭の中に箱を描くと話しています.2つの能力が必要です.
  • 年以上の経験を通じて、感覚と正確にどのような動作原理でCSSを作成するかが大きく異なることを知っています.
    たとえば、divラベルを作成するときに発生するラベルの余白はなぜですか?16ピクセルですが、開発者ツールで確認すると、19ピクセル、なぜか知っていますか?
  • 県工業では、サービスをaからzに設計するには、その部分を知らなければ大きな困難に直面するので、基本原理を徹底的に理解しなければならない.
    • 杭電oj Lowest Common Multiple Plus
    インテリジェント取引の特性