Ardhi UniversityLecture_3_part_b 2023

What is String?

 JavaScript strings are for storing and manipulating text.

 You can write by using single or double quotes.

let carName1 = "Volvo XC60"; // Double quotes

let carName2 = 'Volvo XC60'; // Single quotes

String Escape character

 If you what to include special characters into string then use The backslash (\) escape character

Code Result What is inserted in a string

\' ' Single quote

\" " Double quote

\\ \ Backslash

let text = "We are the so-called \"Vikings\" from the north.";

Other list is

\b Backspace

\f Form Feed

\n New Line

\r Carriage Return

\t Horizontal Tabulator

\v Vertical Tabulator

\ Line continuation character or break line

String comparison

 When using the == operator, x and y are equal.

 When using the === operator, x and y are not equal.

String Methods

String length let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

let length = text.length;
 Ardhi UniversityLecture_3_part_b 2023

String slice() let text = "Apple, Banana, Kiwi";

let part = text.slice(7, 13);
NB: First index inclusive , last
index exclusive OR

let part = text.slice(7);

OR

let part = text.slice(-12);

String substring() let str = "Apple, Banana, Kiwi";

let part = str.substring(7, 13);
NB: No negative index is
supported like slice, all
negative index will be treated
as zero

String substr() let str = "Apple, Banana, Kiwi";

let part = str.substr(7, 6);
NB: The second parameter is
length to be extracted and not OR
index
let part = str.substr(7);

OR

let part = str.substr(-4);

String replace() let text = "Please visit Microsoft!";

let newText =
NB: By default, the replace() text.replace("Microsoft", "W3Schools");
method replaces only the first
match. OR what is output of below

NB: By default, the replace() let text = "Please visit Microsoft!";

method is case sensitive. let newText =
Writing MICROSOFT (with text.replace("MICROSOFT", "W3Schools");
upper-case) will not work.

String replaceAll() let text = "Please visit Microsoft!";

let newText = text.replaceAll("i", "A");

String toUpperCase() let text1 = "Hello World!";

let text2 = text1.toUpperCase();
 Ardhi UniversityLecture_3_part_b 2023

String toLowerCase() let text1 = "Hello World!"; // String

let text2 = text1.toLowerCase(); // text2 is
text1 converted to lower

String concat() let text1 = "Hello";

let text2 = "World";
let text3 = text1.concat(" ", text2);

OR you may use + operator

Let text3 = "Hello" + " " + "World!";

String trim() let text1 = " Hello World! ";

let text2 = text1.trim();

String trimStart() The trimStart() method works like trim(), but

removes whitespace only from the start of a string

String trimEnd() The trimEnd() method works like trim(), but

removes whitespace only from the end of a string.

String padStart() let text = "5";

let padded = text.padStart(4,"0");

String padEnd() let text = "5";

let padded = text.padStart(4,"x");

String charAt() let text = "HELLO WORLD";

let char = text.charAt(0);

String charCodeAt() let text = "HELLO WORLD";

let char = text.charCodeAt(0);
NB:
The charCodeAt() method
returns the unicode of
the character at a
specified index in a
string:

The method returns a

UTF-16 code (an integer
between 0 and 65535).
 Ardhi UniversityLecture_3_part_b 2023

String split() text.split(",") // Split on commas

text.split(" ") // Split on spaces
NB: If the separator is text.split("|") // Split on pipe
omitted, the returned
array will contain the
whole string in index
[0].

If the separator is "",

the returned array will
be an array of single
characters.

indexOf() let text = "Please locate where 'locate'

occurs!";
let index = text.indexOf("locate");

OR

let index = text.indexOf("locate",15);

lastIndexOf() let text = "Please locate where 'locate'

occurs!";
let index = text.lastIndexOf("locate");

OR

let index = text.indexOf("locate", 15);

search() let text = "Please locate where 'locate'

occurs!";
text.search("locate");

match() let text = "The rain in SPAIN stays mainly in

the plain";
text.match("ain");

matchAll() let text = "The rain in SPAIN stays mainly in

the plain";
text.matchAll("ain");

includes() let text = "Hello world, welcome to the

universe.";
text.includes("world");
 Ardhi UniversityLecture_3_part_b 2023

startsWith() let text = "Hello world, welcome to the

universe.";
text.startsWith("world")

endsWith() let text = "Hello world, welcome to the

universe.";
text.endsWith("world", 11);

String template literals

 Uses back-tick `` instead of quotes for a string and they are used for variable manipulations of a
string

The syntax is:

${...}

let firstName = "John";

let lastName = "Doe";

let text = `Welcome ${firstName}, ${lastName}!`;

OR

let price = 10;

let VAT = 0.25;

let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

Array

 An array is a special variable, which can hold more than one value.

const cars = ["Saab", "Volvo", "BMW"];

Syntax:

const array_name = [item1, item2, ...];

NB: Note the const is used as a common practice

const cars = [];

cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
 Ardhi UniversityLecture_3_part_b 2023

OR

const cars = new Array("Saab", "Volvo", "BMW");

NB: Do not use new Array approach if your element during declare and
initialization is one, will results into undefined

// Create an array with one element ???

const points = new Array(40);

A Common Error
const points = [40];

is not the same as:

const points = new Array(40);

Changing array

const cars = ["Saab", "Volvo", "BMW"];

cars[0] = "Opel";

Assign the whole array

const cars = ["Saab", "Volvo", "BMW"];

document.getElementById("demo").innerHTML = cars;

Array object or simply object (Array as object , in Python are called Dictionary)

 Instead of using index to manipulated array items, they use key. The key or ID should be a string
pattern.
 Array object uses {} while array uses [] and map uses ()

const person = {firstName:"John", lastName:"Doe", age:46};

Array Elements

 Can be normal data type such as number

 Can be an another array
 Can be object(Dictionary in tem of python)
 Can be function

Adding Array Elements

 Ardhi UniversityLecture_3_part_b 2023

const fruits = ["Banana", "Orange", "Apple"];

fruits.push("Lemon"); // Adds a new element (Lemon) to fruits

Looping Array Elements

 Ardhi UniversityLecture_3_part_b 2023

Array method and properties

length const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.length;

Sort
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

OR for numbers

const points = [40, 100, 1, 5, 25, 10];

points.sort(function(a, b){return a - b});

OR
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});

For accuracy of number sorting use Fisher Yates shuffle

const points = [40, 100, 1, 5, 25, 10];

for (let i = points.length -1; i > 0; i--) {

let j = Math.floor(Math.random() * (i+1));
let k = points[i];
points[i] = points[j];
points[j] = k;
}

For Objects element in array such as

const cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];

The sorting is done by compare properties

cars.sort(function(a, b){return a.year - b.year});
isArray() Array. isArray(person)
instanceof person instanceof Array
reverse() const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();
Math.min() const points = [40, 100, 1, 5, 25, 10];
Math.min.apply(null,points);
Math.max() const points = [40, 100, 1, 5, 25, 10];
Math.max.apply(null,points);
forEach() const numbers = [45, 4, 9, 16, 25];
 Ardhi UniversityLecture_3_part_b 2023

let txt = "";

numbers.forEach(myFunction);

function myFunction(value, index, array) {

txt += value + "<br>";
}

Note that the function takes 3 arguments:

 The item value

 The item index
 The array itself

const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);

function myFunction(value) {
txt += value + "<br>";
}
map() const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {

return value * 2;
}

here numbers2 is also array

Or
const newArr = numbers1.flatMap((x) => x * 2);
filter() const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {

return value > 18;
}
every() const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {

return value > 18;
}
some() const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {

 Ardhi UniversityLecture_3_part_b 2023

return value > 18;

}
indexOf() const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
lastIndexOf() const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
findIndex() const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {

return value > 18;
}
Array.from() Array.from("ABCDEFG");
keys() const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keyscollection = fruits.keys();

To use keyscollection
Let text;
for (let x of keyscollection) {
text += x + "<br>";
}
then assign text to ularray.children[1].innerHTML or
ularray.children[1].textContent or
ularray.children[1].innerText

includes() const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.includes("Mango"); // is true

Array Spread (…)

const q1 = ["Jan", "Feb", "Mar"];

const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];

 Ardhi UniversityLecture_3_part_b 2023

Array const block scope

An array declared with const has Block Scope.An array declared in a block is not the same as an array
declared outside the block.

const cars = ["Saab", "Volvo", "BMW"];

// Here cars[0] is "Saab"
{
const cars = ["Toyota", "Volvo", "BMW"];
// Here cars[0] is "Toyota"
}
// Here cars[0] is "Saab"

But array with var has no block scope

var cars = ["Saab", "Volvo", "BMW"];

// Here cars[0] is "Saab"
{
var cars = ["Toyota", "Volvo", "BMW"];
// Here cars[0] is "Toyota"
}
// Here cars[0] is "Toyota"

Map

 A Map holds key-value pairs where the keys can be any datatype while in object only string
 A Map remembers the original insertion order of the keys.\

Create a Map

const fruits = new Map([

["apples", 500],
 Ardhi UniversityLecture_3_part_b 2023

["bananas", 300],
["oranges", 200]
])

Add elements to a Map

// Create a Map
const fruits = new Map();

// Set Map Values

fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

Replace Map element

fruits.set("apples", 200);

Get Map element

fruits.get("apples");

Delete Map Element

fruits.delete("apples");

Check if element is in Map

fruits.has("apples");

Check size of Map

Fruits.size()

NB: Object(Array Object) has no size function

Map Method

forEach() // Create a Map

const fruits = new Map();

// Set Map Values

fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

// List all entries

 Ardhi UniversityLecture_3_part_b 2023

let text = "";

fruits.forEach (function(value, key) {
text += key + ' = ' + value;
})
entries() // List all entries
let text = "";
for (const x of fruits.entries()) {
text += x;
}

Events

 HTML events are "things" that happen to HTML elements. Here are some examples of HTML
events:
- An HTML web page has finished loading
- An HTML input field was changed
- An HTML button was clicked

Structure:
1. Writing in HTML

<element event listener ="some JavaScript">

<button onclick="displayDate()">The time is?</button>

2. Writing in Javascript

button.addEventListener("click", myFunction);

1. Writing in HTML. In the following example, an onclick event listener (with

code), is added to a <button> element:

Example
<button onclick="document.getElementById('demo').innerHTML = Date()">The
time is?</button>

JavaScript code is often several lines long. It is more common to see event
attributes calling functions:

Example
<button onclick="displayDate()">The time is?</button>

Here is a list of some common HTML events listener:

 Ardhi UniversityLecture_3_part_b 2023

Event Description

onchange An HTML element has been changed

onclick The user clicks an HTML element

onmouseover The user moves the mouse over an HTML element

onmouseout The user moves the mouse away from an HTML element

onkeydown The user pushes a keyboard key

onload The browser has finished loading the page

2. Witting in JS.

In JavaScript click is the event, myFunction is the event handler:

button.addEventListener("click", myFunction);

List of Event, Clck, change, keydown,keypress, load,input,select, play, waiting AND …

Class

 Used to create class

 The constructor here has name constructor instead of same class name as in JAVA

class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}

Using class to create objects

const myCar1 = new Car("Ford", 2014);

const myCar2 = new Car("Audi", 2019);

class Methods

class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
 Ardhi UniversityLecture_3_part_b 2023

method_3() { ... }
}

class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
const date = new Date();
return date.getFullYear() - this.year;
}
}

const myCar = new Car("Ford", 2014);

document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";

Class Inheritance

 The keyword extends is used

class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return 'I have a ' + this.carname;
}
}

class Model extends Car {

constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model;
}
}
 Ardhi UniversityLecture_3_part_b 2023

let myCar = new Model("Ford", "Mustang");

document.getElementById("demo").innerHTML = myCar.show();

Creating getters and setters

class Car {
constructor(brand) {
this.carname = brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}

const myCar = new Car("Ford");

document.getElementById("demo").innerHTML = myCar.cnam;

Class static method

 Uses static keyword

class Car {
constructor(name) {
this.name = name;
}
static hello() {
return "Hello!!";
}
}

const myCar = new Car("Ford");

// You can call 'hello()' on the Car Class:

document.getElementById("demo").innerHTML = Car.hello();

// But NOT on a Car Object:

// document.getElementById("demo").innerHTML = myCar.hello();
// this will raise an error.
 Ardhi UniversityLecture_3_part_b 2023

JS DOM

Finding HTML Elements

Method Description

document.getElementById(id) Find an element by element id

document.getElementsByTagName(name) Find elements by tag name

document.getElementsByClassName(name) Find elements by class name

Changing HTML Elements

Property Description

element.innerHTML = new html content Change the inner HTML of an

element

element.attribute = new value Change the attribute value of an

HTML element

element.style.property = new style Change the style of an HTML

element

Adding and Deleting Elements

Method Description

document.createElement(element) Create an HTML element

document.removeChild(element) Remove an HTML element

document.appendChild(element) Add an HTML element

document.replaceChild(new, old) Replace an HTML element

document.write(text) Write into the HTML output stream

Adding Events Handlers

document.getElementById(id).onclick = function(){code}