Lecture Notes Of Day 2

JavaScript Syntax and Basic Output

Objective

By the end of this lesson, students will:

Understand the basics of JavaScript syntax.
Learn about declaring variables using let, const, and var.
Learn how to display outputs using console.log(), alert(), and document.write().
Understand how to use comments in JavaScript.

1. Introduction to JavaScript Syntax

JavaScript syntax is the set of rules and structure that defines how JavaScript code is written and interpreted. Proper syntax helps the computer understand what you’re trying to do with your code.

Key Syntax Elements

Statements: Instructions that perform actions, usually ending with a semicolon (;).
Whitespace: Spaces, tabs, and line breaks improve readability but are ignored by JavaScript.
Case Sensitivity: JavaScript is case-sensitive, so myVariable and myvariable are considered different.

2. Variables

Variables are containers for storing data values. In JavaScript, you can declare a variable using three keywords: let, const, and var.

2.1 `let`

The let keyword allows you to declare a variable that can be changed later in the code.
Example:

let age = 25;

age = 26; // The value of age can be updated

Use let when you know that the value of a variable might change during program execution.

2.2 `const`

The const keyword declares a constant, a variable that cannot be reassigned once it’s set.
Example:

const pi = 3.14159;

// pi = 3.14; // This will cause an error because `pi` is a constant

Use const when you want to ensure the variable's value remains the same throughout the code.

2.3 `var`

var is an older way to declare variables in JavaScript, and it has different scoping rules than let and const.
Example:

var name = "John";

Note: In modern JavaScript, let and const are preferred over var because they help avoid certain issues related to variable scope.

3. Output in JavaScript

JavaScript provides several ways to display outputs or results. Here, we’ll cover three common methods:

3.1 `console.log()`

Outputs data to the console, which is useful for testing and debugging.
To view the console, you can press F12 on your browser, then go to the "Console" tab.
Example:

console.log("Hello, world!");

3.2 `alert()`

Displays a popup message in the browser.
Useful for getting a user’s attention, but can be intrusive if used too often.
Example:

alert("Welcome to JavaScript!");

3.3 `document.write()`

Writes output directly to the HTML document (the webpage itself).
Typically used for simple scripts or for learning purposes, as it can overwrite the entire document.
Example:

document.write("This is displayed on the webpage.");

4. Comments in JavaScript

Comments are notes in the code that are ignored by the browser and do not affect the program’s behavior. They are useful for documenting code and explaining parts of the code to others (or to yourself when you revisit the code later).

4.1 Single-line Comments

Begin with // and comment out one line.
Example:

// This is a single-line comment

let x = 5; // This comment is also single-line

4.2 Multi-line Comments

Start with /* and end with */. They can span multiple lines.
Example:

/*

  This is a multi-line comment.

  It can span multiple lines.

*/

let y = 10;

5. Practical Examples

Example 1: Declaring Variables and Using Output Methods

let name = "Alice";

const age = 30;

console.log("Name:", name);

console.log("Age:", age);

alert("Hello, " + name + "!");

document.write("Welcome to JavaScript learning, " + name + "!");

 Example 2: Using Comments

// Declare a constant for pi

const pi = 3.14;

Calculating the area of a circle

with a radius of 5

let radius = 5;

let area = pi * radius * radius;

console.log("Area of the circle:", area);

 Summary

JavaScript syntax includes variables, statements, and proper use of whitespaces and cases.
Use let for variables that may change, const for constants, and var sparingly.
Output can be displayed with console.log(), alert(), and document.write().
Comments improve code readability, with // for single-line and /* */ for multi-line comments.

Practice Exercises

1. Declare Variables: Create three variables: one with let, one with const, and one with var. Assign them values and display their values using console.log().

2. Use alert(): Write a JavaScript program that declares a variable for a user’s name, assigns it a value, and then displays an alert saying, “Welcome, [name]!”

3. Document Writing: Create a script that writes “Hello, this is JavaScript!” directly to the document.

4. Add Comments: Write a JavaScript program that includes both single-line and multi-line comments explaining the code.

Lecture Notes Of Day 2 - JavaScript Syntax and Basic Output