JavaScript Introduction

JavaScript

• Programming language for the web

• An interpreted programming language

• Used for creating interactive web pages

• Could be used as a server-side programming language using Nodejs, Deno, or Bun

What is JavaScipt?

• Created in just 10 days by Brendan Eich for Netscape Navigator

• Originally named Mocha

• There's no actual relation to Java

• One of the most popular languages

• Runs everywhere

• Supports multiple programming paradigms (Object-Oriented, Functional, and Procedural)

• Asynchronous by Nature

Cool facts about JavaScript

Multiple Choice

JavaScript is not

• Compiled

• Asynchronous

• Object-Oriented Programming

• Client-Side programming language

Multiple Choice

JavaScript is related to Java

• Yes

• No

Where is the output?

​JavaScript output could be shown in...
1. HTML. Using DOM API
2. Dialog. Using `alert`
3. Console. Using `console` API.

DOM/HTML Output

alert / Browser Dialogs

Console Outputs

Running JavaScript using <script> tag

​<script> tag could be used anywhere in the html file

Running external JavaScript using <script> tag

In JavaScript statements are separated by semicolons (;)

JavaScript Syntax

JavaScript Comments

JavaScript Blocks

​JavaScript could grouped together by using code blocks.
In JavaScript, we're using curly braces to indicate code blocks.

JavaScript Blocks

• The var keyword was used in all JavaScript code from 1995 to 2015.

• The let and const keywords were added to JavaScript in 2015.

• The var keyword should only be used in code written for older browsers.
  
  

JavaScript Variables

JavaScript Variables

Multiple Choice

What is the correct way to create a multi-line comment

Multiple Choice

What is the output of the code?

• ReferenceError: color is not defined

• yellow

• undefined

• "yellow"

Multiple Choice

What is the value of color?

• blue

• green

• SyntaxError: Identifier 'color' has already been declared

JavaScript Arithmetic

JavaScript Assignment

JavaScript Data Types

• Boolean (true or false)

• Number (64-bit floating point)

• BigInt (A new data type introduced in ES2020)

• String (Any text)

• Undefined (A variable/type that is undefined)

• Null (Represents absence of value)

• Object (A variable that may contain properties)

• Symbol (Guaranteed unique value)

JavaScript Data Types are Dynamic

Multiple Choice

What is the value of color?

• Null

• Symbol(color)

• False

• Undefined

Multiple Choice

What is the value of "total"?

• 10

• 1010

• Error

• "1010"

Multiple Choice

What is the value of "total"?

• "0"

• 0

• Error

Multiple Choice

`!!` is used to convert any truthy or falsy value to boolean.

In this case, what is the value of "a"?

• True

• False

Multiple Select

Select correct ways to get a property from an object

• a.name

• a['name']

• a.get('name')

• a.getName()

• const { name } = a

JavaScript Function

DOM API

• ​DOM stands for Document Object Model

• A platform and a language neutral interface to access and modify content, structure, and style of a document

DOM API: Selecting an Element

DOM API: Changing Elements

DOM API: addEventListener()

​`addEventListener()` would allow us to attach functions to a DOM elements events.

Common events are:
- click
- mouseover
- submit

Full List at https://www.w3schools.com/jsref/dom_obj_event.asp

DOM Manipulation

Multiple Choice

To select button using DOM API we must use...

• document.getElementById("button1")

• document.getById("button1")

• document.getElementById("#button1")

• document.getElement("#button1")

Multiple Select

Choose all the correct ways to select the button

• document.getElementsByClassName("btn btn-primary")

• document.querySelector("button[class='btn btn-primary']")

• document.getElementById("btn btn-primary")

• document.querySelector(".btn.btn-primary")