Java Script

- It makes a HTML document dynamic and responsive

- It is a client size scripting language (Java script needs HTML
elements to carry out the actions) / Web browsers execute Java
Script

Document Object Model

- DOM is a W3C (World wide web consortium) standard

- DOM is an API (Application programming interface)
- It acts as an intermediate between java and webpages
- In DOM we identify the elements as objects
- Actions are methods
- Values are known as properties.
Ex- [Link]=””;
- JS can be inserted
Externally or internally
 Javascript output:

- Writing into an HTML element, using innerHTML

- Writing ingo the HTML output using [Link]()
- Writing into an alert box, using [Link]()
- Writing into the console using [Link]()

1) InnerHTML
-Most popular/common method

2) [Link] ()
- For testing purposes, it is convenient to use a [Link]()

3) [Link] ()
- Output using an alert box
 4) Console. Log
- Used for debugging and diagnostic purposes of JS
- This will be displayed in the console, not in the body

Comments

- To make the programming code more readable

- It can also be used to prevent execution, when testing
alternative code

1) Single line comments

- Single line comments start with //
- Any text between // and the end of the line will be ignored by
java script (will not be executed)
 Variables
- Containers for storing data

Variable Constant
- A storage container - A storage container
- Holds data - Holds data
- The value/data inside - The value/data won’t
the variable can be change (fixed)
changed throughout the
program

• Identified using identifiers

(Identifier is a unique name given to an object (variable,
constant, function)

Ex: example = 20

JavaScript’s variables can be decaled in 4 ways:

• Automatically (x=5)
• Using “var” (var x=5)
• Using “let” (let x=5)
• Using “const” (constant = value wont change) (const x=5)

Note
- The var keyword should only be used in code written
for older browsers

- Var was used in 1995 to 2015

 Identifiers
- All javascript variables must be identified with unique names
- These unique names are called identifiers
- The general rules for constructing identifiers (unique
identifiers) are:

5) First name (wrong)

- firstName (correct)
- first_name (correct)

Operators
1) Arithmetic Operators
- Perform arithmetic on numbers (literals or variable)
- +, -, *, /
Ex- 2**3 = 2 x 2 x 2 (2 into 2 - 4 times)
Ex- 9% 2=1
 Ex: 5++ = 6
Ex- 5-- = 4 (you don’t write the 1 (so its just subtracts one and in
the above example they add one))

2) Assignment Operators
- Used to assign a value to a variable
- The addition assignment operator (+=) adds a value to a
variable

Ex: x = 5

X+ = 2
X = x+2
X=5+2
X=7
 3) Comparison Operators
- Mostly used with control structures
- Comparison operators always return to “true” or “false”

JavaScript logical operators

- Used to determine the logic between variables or values

 (A STRING IS AN OBJECT THAT REPRESNTS A SEQUENCE OF
CHARACTERS)

Data types

1) String
2) Number
3) Boolean
4) Null
5) Arrays
6) Object

1) A string (or a text string) is a series of characters

- Strings are written with quotes. You can use double or single
quotes

2) Numbers are stored as decimal numbers (floating point)

- Numbers can be written with or without decimals
- If you add a number and string; the result will be a string
 34 + 34.5 = 68.5

3) Booleans can only have two values: true or false.

Arrays
- They are written with square brackets
- Can be used to store multiple values
- They are separated by commas
- They are declared using the “const” keyword but it doesn’t
mean that the values won’t change
- Arrya index’s are zero-based, which means that the 1st item is
0.
- Ex –

- INDEX’S (according to the picture above)

 Syntax of an array : const array_name = [item1, item2,…];

- Adding list items after declaring an array

- Accessing and array item/ element using a variable

1) Ex:- Creating an array using the following items:
Apple, banana, orange, grapes

2) By using a variable, output the value in the 2nd index

3) Add a new item “pineapple” to the array you have created

4) Display all the array items

ANSWER:

Length property
- Length Property
- Returns the number of items in an array
EX:- let lenCars = [Link];

- The Pop () method

- Removes the last time of the array
EX:- [Link]()

- Push() method
- Add an item to the end of an array
 EX:- [Link](“Toyota”);

- Shift () method
- Removes the 1st element of an array
EX:-[Link]();

-Unshift Method
- Add an item to the beginning of the array
EX:- [Link](“Honda”)

Multi-Dimensional Array

- A 2D array is created by nesting arrays within another way.

Each nested array represents a “row” and each element within
a row represents a “column”.

- The creation of a 2D array

- Syntax Commented [JP1]:
Commented [JP2R1]:
 -
Use const instead of let

JAVA ARRAYS (not relevant to the note, miss send the q on the
group)

Declaration of array – Method 2

- Declares the array 1st and adding the list items next
- For 2 rows
const cars = [ [], [] ]
cars [0][0] = “Toyota”

1st row cars [0] [0] =”Toyota”

Cars [0] [1] = “BMW”
2nd row cars [1] [0] = “Volvo”
Cars [1] [1] = “Honda”

• We can add as much columns as we want but rows can be

added up to the number we have declared.

Displaying the data items from a 2D array

1st Method

cars [0] [0]

//displays the item in the 1st row

2nd Method – (using a variable)

Let item01 = cars [0] [0]

[Link](item01)

3rd Method – Displaying a whole row

Cars = [0]
//Displays the 1st row

Programming Control Structures

1) Sequence
• The statements follow on after another

2) Selection/ Decision
• Have to make a decision at some point of the program
 3) Repetition/ Iteration/ Loops
• Some statements will be repeated

Conditional Statements/ They are Selections

1) The if statement
- Use to specify a code block to be executed, if a specified
condition is true.

- QUESTION
- Write a JS program to get the age of a person and display
“you’re eligible to vote” if he is 18 or more.
-

2) The if… else…. Statement

- Use to specify a new condition to test, if the first condition is
false.
- QUESTION
- Amend the code above to display “You’re not eligible to vote” if
the condition Is false

3) The else if statement

 - Use else if to specify a new condition to test, if the 1st condition
is false

- QUESTION

- Amend the number check question to display “zero” if the

number is exactly zero

The for loop

- The for statement creates a loop with 3 optional expressions:

Example:
For (let I = 0; I < 5, i++) {
Text ++ “The number is “ + I +”<br>”;
}
Write a JS program to print the sum of 5 numbers using the
loop

-Accessing array items using the “for loop”

 1) While loops

- While loops execute a block of code as long as specified

condition is true
- JS has two types of while loops
- The while loop
- The do while loop

An example –

2) The do while loop – this loop will execute the code block
once, before checking If the condition is true then it will
repeat the loop as long as the condition is true .
 The Array Filter

- The filter () method creates a new array filled with elements

that pass a test provided by a function

Syntax:- Arrayfilter(function(arrayitem){return condition;})

HTML Events

- HTML events are things that happen to HTML elements

Example of events:
• An html button is clicked
• A web page has finished loading
• The mouse moves over an element
• A keyboard is pressed
• An HTML input field is changed

- HTML DOM allows JavaScript to react to HTML events while

executing a code.

Event
Triggers
:

Syntax:
<element evet= “JavaScript code”>
 Example:-

Subprograms

Sort List

- The simplest is bubble sort. It involves repeatedly comparing

adjacent value in an array and swapping them around if the
left-hand value in the pair is larger than the right-hand value.

1) Using two “for loops”

- Outer loop should be controlled using [Link] – 1

- Inner loop should be controlled by [Link]-i-1

• “i” (simple i) is the outerloops variables value

2) Using sort () method

- A list can be sorted in the ascending order = [Link]()

3) Using reverse () method

- A list can be sorted in the descending order = [Link]()
 Regular expression (RegEx)

- A regular expression (RegEx) is a pattern used to match text.

- In JavaScript it is used for:

• Validating forms (email, phone number, password)

• Searching text
• Replacing text
• Extracting specific data

Basic Structure of RegEx:

Syntax = /pattern/flags

Example = let pattern = /hello/i;

Common flags
• (i) – case insensitive
• Global - (find all matches)
• Multiline
 The TRY statement

- In JS the try statement is used to handle errors (also called

exceptions) that may occur during code execution – without
stopping the entire program.

- The try statement works together with catch

The TRY block

- The try block contains the code that might throw an error
- If NO error occurs the catch block is skipped

The Throw Errors

- When an error occurs, JS will normally stop and generate an

error message.
- The technical term for this is: JS will throw an exception (throw
an error)