実践による JavaScript の基礎

JavaScriptJavaScriptBeginner
今すぐ練習

This tutorial is from open-source community. Access the source code

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、JavaScript プログラミング言語の基本を学びます。この実験は、変数、データ型、制御構造、関数など、JavaScript の基本をしっかりと理解するのに役立つように設計されています。一連の実践的な演習と例を通じて、参加者は JavaScript でコードを書き、簡単なプログラムを作成する方法を学びます。この実験は、ほとんどまたはまったくプログラミング経験のない初心者に適しています。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") subgraph Lab Skills javascript/variables -.-> lab-28602{{"実践による JavaScript の基礎"}} javascript/data_types -.-> lab-28602{{"実践による JavaScript の基礎"}} javascript/arith_ops -.-> lab-28602{{"実践による JavaScript の基礎"}} javascript/comp_ops -.-> lab-28602{{"実践による JavaScript の基礎"}} end

RGB から HSB への変換

RGB カラー タプルを HSB 形式に変換するには、次の手順に従います。

  1. ターミナル/SSH を開き、コーディングの練習を始めるために node と入力します。
  2. RGB から HSB の変換式 を使用して、RGB カラー タプルを適切な HSB 形式に変換します。
  3. 入力パラメータの範囲は [0, 255] ですが、結果の値の範囲は次のとおりです。
  • H: [0, 360]
  • S: [0, 100]
  • B: [0, 100]

次に、JavaScript の関数です。

const RGBToHSB = (r, g, b) => {
  r /= 255;
  g /= 255;
  b /= 255;
  const v = Math.max(r, g, b),
    n = v - Math.min(r, g, b);
  const h =
    n === 0
      ? 0
      : n && v === r
        ? (g - b) / n
        : v === g
          ? 2 + (b - r) / n
          : 4 + (r - g) / n;
  return [60 * (h < 0 ? h + 6 : h), v && (n / v) * 100, v * 100];
};

この関数を次のように呼び出すことができます。

RGBToHSB(252, 111, 48);
// [18.529411764705856, 80.95238095238095, 98.82352941176471]

まとめ

おめでとうございます!RGB から HSB の実験を完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。