JavaScript Review

JavaScript

JavaScript is a client-side scripting language – the code is executed by the web browser
JavaScript is an embedded language – it relies on its host environment for IO
JavaScript IO options:
- console.log: writes output to the browser console
- document.write: writes output to the HTML document
- alert: writes output to pop-up window
- prompt: modal window with text input
- confirm: modal window with OK and Cancel buttons

The `script` Element

JavaScript source code is placed in an HTML document within the script element
An external JavaScript source file can be imported with the src attribute:
```
<script src="url/file.js"></script>
```
The <noscript> tag defines alternate content when JavaScript is disabled or not available

Basic Syntax

A statement does not need to be terminated by a semicolon when it is the only statement on a line
Line comments are denoted by //
Block comments are denoted by /* ... */

Simple Example

<!DOCTYPE html>
<html>
<head>
  <title>Hello World</title>
</head>
<body>
  <script>
    document.write("Hello World");
  </script>
  <noscript>
    Your browser does not support or has 
    disabled JavaScript
  </noscript>
<body>
</html>

JavaScript Variable Naming Rules

A variable may include only the characters a-z,A-Z,0-9, the $ symbol, and the underscore (_)
No other characters are allowed in a variable name
The first character in a variable name must be a letter, $, or _
Variable names are case sensitive

JavaScript Types

JavaScript data types:
- Object
- Function
- Number: (Integer and Float)
- BigInt: integer of arbitrary length
- String
- Boolean
- Null
- Undefined
JavaScript is dynamically typed – types of variables do not need to be declared
JavaScript is weakly typed – some type conversions are automatic

The String Type

The string type represents a sequence of characters
The string type must be enclosed by single quotes, double quotes, or backticks
The escape character is the backslash (\)
The plus (+) operator performs string concatenation

String Interpolation

A string delimited by backticks can embed expressions with the syntax ${ expression }and directly substitute the evaluated expression into the string.

Example:

let name = "Bob";
alert( `Hello, ${name}`);

Multi-line strings

A string can be defined over multiple lines by escaping the newline character
```
name = "first_name \
    last name";
```

Arithmetic Operators

Operator	Description	Example
`+`	Addition	`a + 3`
`-`	Subtraction	`a - 3`
`*`	Multiplication	`a * 3`
`/`	Division	`a / 3`
`%`	Modulus	`a % 3`
`++`	Increment	`++a`
`–`	Decrement	`–a`

Assignment Operators

Operator	Example	Equivalent to
`=`	`a = 3`	`a = 3`
`+=`	`a += 3`	`a = a + 3`
`+=`	`a += 3`	`a = a + "text"`
`-=`	`a -= 3`	`a = a - 3`
`*=`	`a *= 3`	`a = a * 3`
`/=`	`a /= 3`	`a = a / 3`
`%=`	`a %= 3`	`a = a % 3`

JavaScript Implicit Type Coercion

The type of a variable is implicitly converted based on the context in which the variable is used
```
<script>
  x = "10"; // string
  y = 3.14; // number
  z = x * y; // number
</script>
```
The typeof function returns a string representation of a variable’s type

Explicit Type Casting Functions

parseInt() cast to Int, Integer
Boolean() cast to boolean
parseFloat() cast to Float, Double, Real
String() cast to string
split() cast to array

Equality & Comparison Operators

Operator	Description	Example
`==`	equal to	`a == 3`
`===`	identical to	`a === 3`
`!=`	not equal to	`a != 3`
`!==`	not identical to	`a !== 3`
`>`	greater than	`a > 3`
`<`	less than	`a < 3`
`>=`	greater than or equal to	`a >= 3`
`<=`	less than or equal to	`a <= 3`

Logical Operators

Operator	Description	Example
`&&`	and	`a == 3 && b == 0`
`\|\|`	or	`a == 3 \|\| b == 0`
`!`	not	`!(a == b)`

Selection

if, else, and else if

if      (a > 100) {document.write(">")}
else if (a < 100) {document.write("<")}
else              {document.write("=")}

switch

switch (page) {
    case ("Home"):
        document.write("Home");
        break;
    case ("About"):
        document.write("About");
        break;
    default:
        break;

Iteration

while loops
do while loops
for loops

Example:

for (var count = 1; count <= 10; ++count) {
  document.write("Count:" + count + "<br>");
}

break and continue

Defining a JavaScript Function

function function_name([parameter [, ...]])
{
    // Statements

    [return]
}

A definition starts with the word function
Next is the name of the function, which must start with a letter or underscore, followed by any number of letters, numbers, or underscores
Function names are case sensitive
The parentheses are required
Zero or more parameters, separated by commas
A value can be returned from a function with the return keyword

Variable Scope

Local variables are accessible in context in which they are defined
Global variables are accessible from all parts of the code
Function parameters have local scope
The let keyword defines a local variable with a scope of the current block

Example:

function test() {
    a = 123 // global
    let b = 456 // local
    if (a == 123) {
        let c = 789 // local
    }
}

JavaScript Objects

A JavaScript object groups data with functions that manipulate it
The data members of an object are referred to as properties
The functions of an object are referred to as methods

JavaScript Object Literal Syntax

object_name = {
    property1: value1,
    property2: value2,
    method1: function (parameters) {
        function_body
    }
};

Accessing Object Properties and Methods

Syntax to access properties

object_name.property_name;
// or
object_name["property_name"];

Syntax to access methods
```
object_name.method_name(parameters);
```

JavaScript Numeric Arrays

JavaScript numeric arrays are special objects with numeric indices
Array creation syntax:
```
array_name = [item1, item2, ...];
```
Array access syntax:
```
array_name[index];
```
The length property of an array stores the number of elements in an array:

Some JavaScript Array Methods

toString: converts an array to a string
join: converts an array to a string with specified separator
pop: removes the last element of the array
push: adds a new element to the end of an array
sort: sorts an array in place

JavaScript Associative Arrays

JavaScript associative arrays are objects
The use of named indices converts an array to an object
The array methods and properties are incompatible with the object type

JavaScript Review

JavaScript

The script Element

Basic Syntax

Simple Example

JavaScript Variable Naming Rules

JavaScript Types

The String Type

String Interpolation

Multi-line strings

Arithmetic Operators

Assignment Operators

JavaScript Implicit Type Coercion

Explicit Type Casting Functions

Equality & Comparison Operators

Logical Operators

Selection

Iteration

Defining a JavaScript Function

Variable Scope

JavaScript Objects

JavaScript Object Literal Syntax

Accessing Object Properties and Methods

JavaScript Numeric Arrays

Some JavaScript Array Methods

JavaScript Associative Arrays

The `script` Element