DeveloperBreeze

Hello World and Comments

javascript
#clean code #JavaScript tutorial #JavaScript for beginners #JavaScript basics #Hello World #JavaScript syntax #comments in JavaScript #single-line comments #multi-line comments #first JavaScript program #debugging comments

Chapter 2: Basics of JavaScript

Section 2.1: Syntax and Basics

Tutorial 2.1.1: Hello World and Comments

Hello World and Comments in JavaScript

The first step in learning JavaScript is to write a simple program that outputs "Hello, World!" to the console. Additionally, understanding how to use comments is essential for writing clean, maintainable code.

Writing Your First JavaScript Program

  1. Creating a Script:
  • Open a code editor (e.g., VS Code) or a browser console.
  1. The Code:
  • In your script file or console, type:
     console.log("Hello, World!");
  • What happens?
  • The console.log() function outputs text to the console.
  • "Hello, World!" is a string (text) enclosed in double quotes.
  1. Running the Code:
  • In a browser:
  • Open the console (Ctrl+Shift+J or Cmd+Option+J) and type the code.
  • In Node.js:
  • Save the code in a file (e.g., hello.js) and run it using:
       node hello.js
  • The output will be:
     Hello, World!

Comments in JavaScript

Comments are notes in the code that are ignored by the JavaScript engine. They are useful for explaining what the code does or for temporarily disabling parts of the code.

  1. Single-Line Comments:
  • Begin with //.
  • Example:
     // This is a single-line comment
     console.log("Hello, World!"); // Outputting to the console
  1. Multi-Line Comments:
  • Enclosed within /<em> </em>/.
  • Example:
     /*
      This is a multi-line comment.
      It spans multiple lines.
     */
     console.log("Hello, World!");
  1. Uses of Comments:
  • Documenting code logic.
  • Temporarily disabling code during debugging.
  • Adding notes or reminders for developers.

Common Errors to Avoid

  1. Missing Quotes Around Strings:
  • Incorrect:
     console.log(Hello, World!);
  • Correct:
     console.log("Hello, World!");
  1. Unmatched Parentheses:
  • Incorrect:
     console.log("Hello, World!";
  • Correct:
     console.log("Hello, World!");

Exercise

  1. Write a script that outputs your name to the console.
  • Example:
     console.log("My name is Alice.");
  1. Add comments to explain each line of your script.

Continue Reading

Discover more amazing content handpicked just for you

Tutorial
javascript

Comparison and Logical Operators 

let age = 20;
let hasID = true;

if (age >= 18 && hasID) {
  console.log("Access granted.");
} else {
  console.log("Access denied.");
}
// Output: "Access granted."
  • == performs type coercion.
  • === ensures both value and type match.

Dec 11, 2024
Read More
Tutorial
javascript

Arithmetic Operators

  • Modulus with Negative Numbers:
  • Be cautious, as the result can be negative.
    console.log(-10 % 3); // -1

Dec 11, 2024
Read More
Tutorial
javascript

Non-Primitive Data Types (Objects, Arrays, and Functions) 

  const add = function (a, b) {
    return a + b;
  };
  console.log(add(3, 5)); // 8
  • Arrow Functions (ES6):

Dec 11, 2024
Read More
Tutorial
javascript

Primitive Data Types 

  let currentUser = null;
  console.log(currentUser); // null

Symbols are unique identifiers.

Dec 11, 2024
Read More
Tutorial
javascript

Variables and Constants 

     let score = 10;
     score += 5; // score is now 15
  • Use const for constants or variables that should remain unchanged.
  • Example:

Dec 10, 2024
Read More
Tutorial
javascript css +1

How to Create a Chrome Extension for Automating Tweets on X (Twitter)

Before diving into the code, let's set up the structure for our Chrome extension. You'll need:

Create a new folder for your project, and within it, create the following files:

Dec 10, 2024
Read More
Tutorial
php

Creating Custom Blade Components and Directives 

   php artisan make:component Button

This creates:

Nov 16, 2024
Read More
Tutorial
javascript

Easy JavaScript Tutorial for Beginners

Place JavaScript in an external file and link it in the HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>JavaScript Example</title>
    <script src="script.js" defer></script>
</head>
<body>
    <button id="myButton">Click Me</button>
</body>
</html>

Sep 18, 2024
Read More
Tutorial
javascript

JavaScript Tutorial for Absolute Beginners

Conditional statements allow you to perform different actions based on different conditions.

let score = 85;

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else {
  console.log("D");
}

Sep 02, 2024
Read More
Tutorial
javascript

Creating a Dropdown Menu with JavaScript

To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Familiarity with DOM manipulation in JavaScript will be helpful but isn’t required.

The first step in creating a dropdown menu is to build the basic HTML structure. We’ll create a navigation bar with a dropdown menu that is initially hidden.

Sep 02, 2024
Read More
Tutorial
javascript

Understanding JavaScript Classes 

class Animal {
  constructor(type, name) {
    this.type = type;
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super('Dog', name);
    this.breed = breed;
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Buddy', 'Golden Retriever');
dog.speak(); // Output: Buddy barks.

The super keyword is used to call the constructor or methods of the parent class. This is particularly useful when you need to add functionality to a subclass while still retaining the behavior of the parent class.

Sep 02, 2024
Read More
Tutorial
javascript

Asynchronous JavaScript: A Beginner's Guide 

async function fetchData() {
    console.log("Start");

    const message = await new Promise((resolve) => {
        setTimeout(() => {
            resolve("Data fetched");
        }, 2000);
    });

    console.log(message);
    console.log("End");
}

fetchData();
Start
Data fetched
End

Aug 30, 2024
Read More
Tutorial
javascript

Understanding the DOM in JavaScript: A Comprehensive Guide

You can dynamically change the styles of an element using the style property.

const element = document.getElementById('myElement');
element.style.color = 'blue';
element.style.fontSize = '20px';

Aug 30, 2024
Read More
Tutorial
javascript

Advanced JavaScript Patterns: Writing Cleaner, Faster, and More Maintainable Code

The Factory Pattern is used to create objects without exposing the creation logic to the client. Instead of using new to instantiate an object, you use a factory method.

function Car(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
}

const CarFactory = {
    createCar: function(make, model, year) {
        return new Car(make, model, year);
    }
};

const myCar = CarFactory.createCar('Toyota', 'Camry', 2020);
console.log(myCar.make); // Output: Toyota

Aug 27, 2024
Read More

Discussion 2

Please sign in to join the discussion.

Y

yussf

February 11, 2025

lllllllllllll

Y

yussf

February 11, 2025

lllllllllllll