JavaScript Basics Through Hands-on

JavaScriptJavaScriptBeginner
Practice Now

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

Introduction

In this lab, we will explore the fundamentals of JavaScript programming language. The lab is designed to help participants gain a solid understanding of the basics of JavaScript, including variables, data types, control structures, functions, and more. Through a series of hands-on exercises and examples, participants will learn how to write code in JavaScript and build simple programs. This lab is suitable for beginners with little to no prior programming experience.


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 Basics Through Hands-on`"}} javascript/data_types -.-> lab-28602{{"`JavaScript Basics Through Hands-on`"}} javascript/arith_ops -.-> lab-28602{{"`JavaScript Basics Through Hands-on`"}} javascript/comp_ops -.-> lab-28602{{"`JavaScript Basics Through Hands-on`"}} end

RGB to HSB Conversion

To convert a RGB color tuple to HSB format, you can follow these steps:

  1. Open the Terminal/SSH and type node to start practicing coding.
  2. Use the RGB to HSB conversion formula to convert the RGB color tuple to the appropriate HSB format.
  3. The input parameters range is [0, 255], while the resulting values have a range of:
  • H: [0, 360]
  • S: [0, 100]
  • B: [0, 100]

Here is the function in 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];
};

You can call the function like this:

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

Summary

Congratulations! You have completed the RGB to HSB lab. You can practice more labs in LabEx to improve your skills.

Other JavaScript Tutorials you may like