Introduction to JavaScript and Basic Syntax

What is JavaScript?

The JavaScript JS is a programming language that allows us to make web pages interactive. While HTML and CSS only deal with content and style, JavaScript lets us create dynamic interactions like responding to clicks, form submissions, and more.

Adding JavaScript to the HTML page with multiple ways

• The JavaScript can be added to an HTML file either by using a <script> tag within the HTML file or by linking to an external .js extention file.

JavaScript inside the script tag

JS inside the head tag

JS inside the body tag

External JavaScript Method

External JS scripts are practical when the same code is used in multiple website pages.

JavaScript Output & Display

JavaScript can output the data in many ways.

• Writing code into an HTML elements through innerHTML or innerText.
• Writing scripts into the HTML output using document.write().
• Writing into the browser console, using console.log().

Using document.write() way

Basic Syntax, Structure & Variables in JavaScript

What are JS values?

The JavaScript syntax defines two types of values

• Literals are Fixed values And Variables are variable values.

JavaScript Strings

JS Strings are text, written within double or single quotes.

What are Variables?

• A variable is like a container that stores information we can use later. Just like how you might store books in a box, in programming, we store values like numbers or words in variables.
• Imagine a variable as a labeled box. You can store something inside like a number, a word, etc. And whenever you need it, you can retrieve it using the label.
• let name = "Sara"; is like labeling a box “name” and putting “Sara” inside it.

JavaScript Keywords for Variables

There are three ways to declare variables.

• The let keyword is used when we might want to change the value later.
• The const keyword is used when the value should stay the same.
• And the last var keyword is the old way of declaring variables, but we avoid using this now.

JS Variables

JS Data Types

• The Strings are the text enclosed in single or double quotes.
• The Numbers are integers and decimals 5, 12.99.
• The Booleans are to be true or false.

Basic JavaScript Operations

JS Operators are for Mathematical and Logical Computations.

• The Arithmetic signs are +, -, *, /, % remainder.
• The String Concatenation mark is to combine strings using the + operator.

JavaScript Arithmetic Operators

The Js Arithmetic Operators are used to perform arithmetic operations on numbers.

How to Open the Console

• In Chrome or Firefox, open DevTools F12 or Ctrl+Shift+I and go to the Console tab. Console.log() is used to print output to the console for debugging purposes.
• Console Operations, Using the console is a tool that allows developers to output messages, inspect code behavior, and debug.

Creating and Linking a JavaScript File

• To Create a new JavaScript file name myScripts.js.
• And then Link the JavaScript file to their landing page HTML file.

Understanding Conditionals and Functions

• Conditionals in JavaScript are used to perform different actions based on different conditions. They help the program decide what to do next.

If Syntax

The If Else Syntax

If Else Statement

JS Comparison & Logical Operators

• The Comparison Operators comparison operators are used to compare two values to be true or false and by using these operators like == equality, === strict equality, > greater than, < less than.
• The Logical operators are used to determine the logic between variables or values, and are used to combine boolean expressions.

Comparison Operators

Logical Operators

Introduction to Functions

• A JS function is a reusable block of code designed to perform a particular task, which can be called as many times as needed and they are executed when they are called or invoked.

Creating Function & Understand the Syntax

The JS function can be created with the function keyword, a name, and parentheses.

Parameters and Return Values

• The Parameters are like ingredients for your recipe. They allow you to pass values into functions, and the Return values let you get something back from a function, like the final dish from your recipe.

Loops and Basic DOM Manipulation

What is a Loop?

• A loop in programming is a control flow statement that repeats a block of code multiple times based on a condition.
• Think of checking every mailbox in an apartment building one by one; this repetitive action is similar to what loops do in a program.

Js loop

Types of Loops

• The For Loop is used when the number of iterations is known before the loop starts.

This is a For Loop

• The While Loop is used when the condition needs to be evaluated before each iteration, and the number of iterations is not known beforehand.

This is a while Loop

• It is similar to the while loop, but guarantees that the loop will execute at least once

Do While Loop

Introduction to JS DOM Manipulation

What is the DOM?

• The DOM Document Object Model is a programming API for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content.
• Diagram & Visuals Provide a simple visual of a DOM tree with elements like, <html> ,<body>, <div> , <p> and text nodes.
• When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM model is constructed as a tree of Objects:

With the object model, JavaScript gets all the power it needs to create dynamic HTML

• The JavaScript can change all the HTML elements in the page.
• The JavaScript can change all the HTML attributes in the page.
• The JavaScript can change all the CSS styles in the page.
• The JavaScript can remove existing HTML elements and attributes.
• The JavaScript can add new HTML elements and attributes.
• The JavaScript can react to all existing HTML events in the page.
• The JavaScript can create new HTML events in the page.

The HTML DOM is a standard object model and programming interface for HTML and It defines. The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

• The HTML elements as objects.
• The properties of all HTML elements.
• The methods to access all HTML elements.
• The events for all HTML elements.

Accessing Elements Through DOM

• The getElementById retrieves an element by its ID.
• The querySelector returns the first element matching a specified CSS selector.
• The querySelectorAll returns all elements matching a specified CSS selector as a NodeList.