CS 409 - Module 2

Introduction to Javascript

JavaScript

Most popular programming language and the programming language of the Web

JavaScript runs

• In browsers (client-side)

• On servers and other devices with JavaScript engines (e.g., Node.js)
  

Examples of engine codenames

• V8 (Chrome, Opera)

• SpiderMonkey (Firefox)

• Trident, Chakra (Internet Explorer, Edge)

• Nitro, SquirrelFish (Safari)

JavaScript Engine

1. Parses the script (reads code)

2. Compiles the script into machine code

3. Runs the machine code efficiently

What Can In-Browser JavaScript Do?

• Manipulate webpage content: add, change HTML and CSS styles.

• Respond to user interactions: mouse clicks, key presses, pointer movement.

• Perform asynchronous network requests (AJAX, COMET).

• Manage cookies, interact with users via prompts and messages.

• Store data locally on the client-side (localStorage)

What Cannot In-Browser JavaScript Do?

• No arbitrary file system access (read/write/execute) on user’s device without explicit user action.

• Cannot run or install programs on the host OS.

• Access to hardware devices (camera, microphone) requires explicit user permission.

• Restrictions on inter-window/tab communication from different origins (Same Origin Policy):

• Cannot receive data from other domains without CORS (Cross-Origin Resource Sharing) permission.

• Prevents malicious web pages from stealing private info or harming user data.

<script> Tag

Used to embed or link JavaScript code in HTML

Inline <script>

<script>

  alert("Hello, world!");

</script>

<script> Attributes

• Type: Rarely used now; defaults to JavaScript

• Language: Obsolete

External JavaScript Files

Use the src attribute, where external files are cached by browsers, improving speed

innerHTML (Displaying Output in JavaScript)

Modify HTML content of elements

document.write()

Writes HTML into the document. Use only for testing; overwrites the document if used after load

alert()

Shows a popup alert box

console.log()

Logs messages to the browser console (used for debugging)

Declaration and Assignment (Javascript Variables)

Containers for storing data values

var

Older, function-scoped

let

Block-scoped

const

Block-scoped, constant

Rules for naming variables

• Can contain letters, digits, _, $

• Must start with a letter, $, or _

• Case-sensitive (y and Y are different)

• Cannot use reserved keywords

Dynamic Typing

Variables can hold values of any type and can change type at runtime

Primitive Data Types

• String

• Number

• Boolean

• Undefined

• Null

Arrays

Objects for storing multiple values

Adding a number and string (Type Coercion)

Results in string concatenation

typeof Operator

Used to check the type of a variable or expression

if Statement

Executes a block of code only if a specified condition is true

if Statement (Syntax)

if (expression) {

   // statements to execute if expression is true

}

if…else Statement

Provides an alternative block to execute when the condition is false

if…else Statement (Syntax)

if (expression) {

   // statements if true

} else {

   // statements if false

}

if…else if…else Statement

Used to test multiple conditions in sequence

if…else if…else Statement (Syntax)

if (expression1) {

   // code if expression1 is true

} else if (expression2) {

   // code if expression2 is true

} else if (expression3) {

   // code if expression3 is true

} else {

   // code if none are true

}

for Loop

Most compact form of looping in JavaScript

Three parts of the for Loop

• Initialization: Set the starting value of the loop counter

• Test Condition: A condition checked before each iteration; if true, loop executes; if false, loop ends

• Iteration: Updates the counter (increment/decrement) after each loop cycle

for Loop (Syntax)

for (initialization; test condition; iteration) {

   // statements to execute

}

for...in Loop

Used to iterate over properties of an object through property name assigned to a variable in every iteration

for...in Loop (Syntax)

for (variable in object) {

   // statements to execute

}

Function

Reusable block of code designed to perform a particular task

Function Definition

Defined using the function keyword, followed by a unique name, optional parameters inside parentheses, and a block of statements inside {}

Function (Syntax)

function functionName(parameter1, parameter2, ...) {

   // statements to execute

}

Calling a Function

Use the name followed by parentheses

Function Parameters

Can accept multiple parameters separated by commas and be used inside the function for processing or output.

return Statement

Used to return a value from a function