ホームページ >ウェブフロントエンド >jsチュートリアル >その日、何を学びましたか

その日、何を学びましたか

Linda Hamiltonオリジナル: 2024-12-24 05:03:13908ブラウズ

Day , what did learn

私はゲーム開発者になるために C を学んでいますが、それを使って Web 開発を学べばいいと思い、フロントエンドを学び始めました。さあ。

簡単な参照用に、単一ページのフロントエンド開発チートシートを示します。

HTML (ハイパーテキストマークアップ言語)

基本構造:

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Title</title>
    </head>
    <body>
      <header></header>
      <main></main>
      <footer></footer>
    </body>
  </html>

要素:
- 基本タグ:
  、
  、
  -
  、
  、、、
共通属性:
- ID、クラス、ソース、href、alt、スタイル

CSS (カスケードスタイルシート)

構文:

  selector {
    property: value;
  }

セレクター:
- 要素、.class、#id、element.class、element#id
- 疑似クラス: :hover、:active、:focus
- 疑似要素: ::before、::after

レイアウトテクニック:

フレックスボックス:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row; /* or column */
}

グリッド:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

配置:
- 静的、相対、絶対、固定、スティッキー
ボックスモデル:
- マージン、パディング、ボーダー、コンテンツ

  div {
    margin: 10px;
    padding: 20px;
    border: 1px solid #000;
  }

メディアクエリ (応答性のため):

  @media screen and (max-width: 768px) {
    .container {
      display: block;
    }
  }

JavaScript

変数:

  let variable = "value"; // Mutable
  const constant = "value"; // Immutable

機能:

  function myFunction() {
    console.log("Hello");
  }

  const myArrowFunction = () => console.log("Hello");

DOM 操作:

要素にアクセスして変更します:

const el = document.getElementById('id');
el.style.color = "red";
el.innerHTML = 'New Content';

イベント処理:

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Title</title>
    </head>
    <body>
      <header></header>
      <main></main>
      <footer></footer>
    </body>
  </html>

配列メソッド:
- map()、filter()、reduce()、forEach()

  selector {
    property: value;
  }

React.js (基本)

コンポーネントの作成:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row; /* or column */
}

JSX 構文:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

状態とプロパティ:

  div {
    margin: 10px;
    padding: 20px;
    border: 1px solid #000;
  }

useEffect フック:

  @media screen and (max-width: 768px) {
    .container {
      display: block;
    }
  }

バージョン管理 (Git)

基本コマンド:
- git init - リポジトリを初期化します
- git status - 現在のステータスを確認します
- git add 。 - すべての変更をステージング
- git commit -m "メッセージ" - 変更をコミットします
- git Push - リモートリポジトリにプッシュします
- git pull - 更新を取得します

共通ツール

npm (ノードパッケージマネージャー) コマンド:
- npm install <パッケージ> - パッケージをインストールします
- npm start - アプリケーションを開始します
コードフォーマッタ:
- Prettier - コードの自動フォーマット
- ESLint - 潜在的なエラーを検出するためのリンティング

以上がその日、何を学びましたかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css html npm Static Array for foreach format catch Filter auto class Event map JS dom href margin padding border ul li git Access Game

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript でオブジェクトが等しいかどうかを効果的に比較するにはどうすればよいですか?次の記事：JavaScript でオブジェクトが等しいかどうかを効果的に比較するにはどうすればよいですか?

続きを見る