Lecture ex1 - Advance JS
Lecture ex1 - Advance JS
Menu
Object, Array, for loop
Array Looping (for, while)
Scope
Basic Dom control in web js
Array
The
Array
object, as with arrays in other programming languages, enables storing a collection ofmultiple items
under a single variable name, and has members for performing common array operations.
AKA a data type that stores a lot of items in the same variables (as a big box).
Why Array
Assume you have a series of data to store
1,4,67,54,32,75
And without array, you would store the values like this:
let numberOne = 1;
let numberTwo = 4;
let numberThree = 67
let numberFour = 54
// Bad method ...
Instead of create a series of variables, we would store those data in a
single boxes
(array)
// Good method to store the series data
let numberArray = [1, 4, 67, 54, 32, 75];
We can easily sum up those data with array method.
// Bad method to sum
let numberOne = 1;
let numberTwo = 4;
let numberThree = 67;
let numberFour = 54;
let sum = numberOne + numberTwo + numberThree + numberFour;
// Good method to sum
let numberArray = [1, 4, 67, 54];
let sum = 0;
for(let val of numberArray){
sum += val
}
We can adjust the array in code instead of declare a new variable.
let numberArray = [1, 4, 67, 54];
numberArray.push(100); // Add 100 to the numberArray
console.log(numberArray) // 1, 4, 67, 54, 100
let numberArray = [1, 4, 67, 54];
numberArray.pop(); // Remove the last item in numberArray
console.log(numberArray) // 1, 4, 67
Array Rules One
In general, array can be store various item with same type
const numberArr = [1, 2, 56, 7]
const stringArr = ["tom", "may", "peter"]
const booleanArr = [false, false, true, true, true]
In js, you can mix up those type to store in the array (Not recommended)
const mixedArray = [1, "tom", true, 3249]
Array Rules Two
To access the array, we can do like this:
// 0 1 2 3 4
const stringArray = ["tom", "may", "peter", "alex", "reemo"]
console.log(stringArray[0]) // "tom"
console.log(stringArray[3]) // "alex"
Important: In general programming languages, the index
of the array start with 0
, means the stringArray
array, tom
is in stringArray[0]
.
Array Rules Three
To change the array content, we can do like this:
// 0 1 2 3 4
const stringArray = ["tom", "may", "peter", "alex", "reemo"]
stringArray[0] = "gordon" // change the "tom" to "gordon"
stringArray[3] = "joe" // change the "alex" to "joe"
console.log(stringArray) // ["gordon", "may", "peter", "joe", "reemo"]
Array Rules Four
Array can store another array too. (2D array)
const arr = [
[1,2], // 0
[3,5], // 1
[32,4], // 2
]
console.log(arr[0][1]) // 2
console.log(arr[1][1]) // 5
console.log(arr[2][0]) // 32
Common Array method
length
length
Get the array length (Count how many items are in the array)
// 0 1 2 3 4
const stringArray = ["tom", "may", "peter", "alex", "reemo"]
console.log(stringArray.length) // 5
push
push
push()
add the new item to the front of the array
// 0 1 2 3 4
const stringArray = ["tom", "may", "peter", "alex", "reemo"]
stringArray.push("dennis")
console.log(stringArray) // ["tom", "may", "peter", "alex", "reemo", "dennis"]
pop
pop
pop()
remove one front in the array
// 0 1 2 3 4
const stringArray = ["tom", "may", "peter", "alex", "reemo"]
stringArray.pop()
console.log(stringArray) // ["tom", "may", "peter", "alex"]
Common Array method with Loops
Loops can execute a block of code a number of times.
Assume we want to sum up the array
let numberArray = [1, 2, 8, 9, 67];
let sum = numberArray[0] + numberArray[1] + numberArray[2] + numberArray[3] + numberArray[4]
That's a bad pratice if the array have a lot of items. Let say 1000. Would you code those item 1000 times?
Instead of repeating, we would use loops to go through the array like this:
let numberArray = [1, 2, 8, 9, 67];
let sum = 0;
for(let i = 0; i < numberArray.length; i ++){
sum += numberArray[i]
}
console.log(sum) // 87
The for loop will loops through
the numberArray, and get each items in the array.
These two codes are the same
let numberArray = [1, 2, 8, 9, 67];
let sum = 0;
for(let i = 0; i < numberArray.length; i ++){
sum += numberArray[i]
}
console.log(sum) // 87
let numberArray = [1, 2, 8, 9, 67];
let sum = 0;
sum += numberArray[0]
sum += numberArray[1]
sum += numberArray[2]
sum += numberArray[3]
sum += numberArray[4]
console.log(sum) // 87
Different Kinds of Loops
JavaScript supports different kinds of loops:
for
- loops through a block of code a number of timesfor/of
- loops through the values of an iterable objectfor/in
- loops through the properties of an objectwhile
- loops through a block of code while a specified condition is truedo/while
- also loops through a block of code while a specified condition is true
References: https://www.w3schools.com/js/js_loop_for.asp
For Loop
The for
statement creates a loop with 3 optional expressions:
for (expression 1; expression 2; expression 3) {
// code block to be executed
}
Expression 1
is executed (one time) before the execution of the code block. Expression 2
defines the condition for executing the code block. Expression 3
is executed (every time) after the code block has been executed.
For loop with index
for (let i = 0; i < 5; i++) {
console.log(i)
}
Expression 1
: let i = 0
(Initial values) Init a variable call i
Expression 2
: i < 5
(Conditions) The loops will continus if this conditions is true Expression 3
: i++
(After a loop occur)
For loop with index
for (let i = 0; i < 5; i++) {
console.log(i)
}
// 0
// 1
// 2
// 3
// 4
For loop with index (array)
let arr = [1,2,3,4,5,6,7]
for (let i = 0; i < arr.length; i++) {
console.log("Hello: " + arr[i]);
}
Expression 1
: let i = 0
(Initial values) Expression 2
: i < arr.length
(Conditions) Expression 3
: i++
(After a loop occur)
For loop with index (array)
let arr = [1, 2, 66, 4, 5, 77]
for (let i = 0; i < arr.length; i++) {
console.log("Hello: " + arr[i]);
}
// "Hello: 1" => arr[0] = 1
// "Hello: 2" => arr[1] = 2
// "Hello: 66" => arr[2] = 66
// "Hello: 4" => arr[3] = 4
// "Hello: 5" => arr[4] = 5
// "Hello: 77" => arr[5] = 77
Javascript for/of
for/of
In javascript, instead of using index
, we can use for of loop
to loop through elements directly.
let arr = [1, 2, 66, 4]
for (let val of arr) {
console.log(val);
}
// 1
// 2
// 66
// 4
of loop
can loop the array without the index
let nameArr = ["hello", "yolo", "tom"]
for (let v of nameArr) {
console.log(v);
}
// "hello"
// "yolo"
// "tom"
Javascript for/in
for/in
in loop
will have you to loop the array with the index
, but do not need to init the index variables
let nameArr = ["hello", "yolo", "tom"]
for (let ind in nameArr) {
console.log(ind);
}
// 0
// 1
// 2
in loop
can get the array element with arr[i]
also, but we do NOT recommended to use for in
to loop the array in general situations.
let nameArr = ["hello", "yolo", "tom"]
for (let ind in nameArr) {
console.log(nameArr[ind]);
}
// "hello"
// "yolo"
// "tom"
The in loop
are powerful in looping the object
that we will cover in pages later.
Javascript while
while
while
loop is a loop logics which mainly use on looping thats We do not know how many times will the looping occur. Means in most of the time, we will use for/of
/ for/in
or index for
to loop a array.
while(<conditions>){
// do stuff
}
while(true){
console.log("Hello")
}
while
loop a array
while
loop a arraylet nameArr = ["hello", "yolo", "tom"]
let i = 0;
while(i < nameArr.length){
console.log(nameArr[i])
i++;
}
Javascript do while
do while
It is the same as the while
logics, but it will run the inside code ONCE no matter the while loops is true or false at first.
do{
// do something
} while(<conditions>)
do{
// do something
} while(true)
while Samples
while(false){
console.log("Hello")
}
//
Hello will NOT printed
do while Samples
do{
console.log("Hello")
} while(false)
// Hello
Hello will print once even the while(false)
Continue
and break
Continue
and break
In both for
and while
loop, if we want to skip a certain conditions or break the loop, we may use continue
and break
to achieve the situations.
while(true){
break;
}
while(true){
continue;
}
for(let i = 0; i < 6; i ++){
continue;
}
continue
continue
when a continue
occur, it will skip the current loop block.
for(let i = 0; i < 6; i ++){
if(i % 2 === 0){
continue; // skip the current loop
}
console.log(i)
}
// 1
// 3
// 5
break
break
when a break
occur, it will skip WHOLE loop block.
for(let i = 0; i < 6; i ++){
if(i === 3){
break; // escape the current loop
}
console.log(i)
}
// 0
// 1
// 2
Object
The Object type represents one of JavaScript's data types. It is used to store various keyed collections and more complex entities.
AKA we want to pack some variables together as a objects.
Assume we have a person data
let names = "tom"
let ages = 34
let gender = "F"
let hobby = ["coding", "running"]
Instead of split up those variables, we tend to create a object for this.
let people = {
names : "tom",
ages : 34,
gender : "F",
hobby : ["coding", "running"]
}
We can access the object like this:
let people = {
names : "tom",
ages : 34,
gender : "F",
hobby : ["coding", "running"]
}
// Access the people
console.log(people.name) // tom
console.log(people.hobby) // ["coding", "running"]
// Alternative method to access
console.log(people["name"]) // tom
console.log(people["hobby"]) // ["coding", "running"]
We tend to use object for a series of variables for functions
reuse.
let peopleOne = {
names : "tom",
ages : 34,
gender : "F",
hobby : ["coding", "running"]
}
let peopleTwo = {
names : "jason",
ages : 21,
gender : "M",
hobby : ["swimming", "jumping"]
}
function.js
function printPeople(ppl){
console.log("Hello this is " + ppl.names);
console.log("I am age of " + ppl.ages);
}
printPeople(peopleOne)
// "Hello this is tom"
// "I am age of 34"
printPeople(peopleTwo)
// "Hello this is jason"
// "I am age of 21"
Object array
We can fit the object into array too
let objectArray = [
{ names: "tom", ages: 32, gender: "M" },
{ names: "may", ages: 23, gender: "F" },
{ names: "peter", ages: 65, gender: "M" },
]
console.log(objectArray[1].name) // may
Object array loop
Loop the whole object
let objectArray = [
{ names: "tom", ages: 32, gender: "M" },
{ names: "may", ages: 23, gender: "F" },
{ names: "peter", ages: 65, gender: "M" },
]
for(let val of objectArray){
console.log(val)
}
// { names: "tom", ages: 32, gender: "M" }
// { names: "may", ages: 23, gender: "F" }
// { names: "peter", ages: 65, gender: "M" }
Loop the whole object, print the name only
let objectArray = [
{ names: "tom", ages: 32, gender: "M" },
{ names: "may", ages: 23, gender: "F" },
{ names: "peter", ages: 65, gender: "M" },
]
for(let val of objectArray){
console.log(val.name)
}
// "tom"
// "may"
// "peter"
Loop the whole object with index
let objectArray = [
{ names: "tom", ages: 32, gender: "M" },
{ names: "may", ages: 23, gender: "F" },
{ names: "peter", ages: 65, gender: "M" },
]
for(let i = 0; i < objectArray.lengthl i ++){
console.log(objectArray[i])
}
// { names: "tom", ages: 32, gender: "M" }
// { names: "may", ages: 23, gender: "F" }
// { names: "peter", ages: 65, gender: "M" }
As we mentions before, we can loop the object too by for/in
let peopleOne = {
names : "tom",
ages : 34,
gender : "F",
hobby : ["coding", "running"]
}
for(let key in peopleOne){
//key, values
console.log(key, peopleOne[key])
}
// names "tom",
// ages 34,
// gender "F",
// hobby ["coding", "running"]
Scope
Scope determines the accessibility (visibility) of variables.
JavaScript has 3 types of scope:
Block scope
Function scope
Global scope
Block / Local Scope
{
let myNumber = 2;
console.log(myNumber); // 2
}
// myNumber can NOT be used here
console.log(myNumber) // Uncaught ReferenceError: myNumber is not defined
let myNumber = 999;
{
let myNumber = 100;
console.log(myNumber); // 100
}
console.log(myNumber); // 999
loopSamples.js
for(let i = 0; i < 10; i ++){
// some code
}
console.log(i) // Uncaught ReferenceError: i is not defined
Global scope
If the variable is in global, all the blobk, function and section can be access the variable.
let myNum = 123;
function printNum(){
console.log(myNum); // 123
}
console.log(myNum); // 123
{
console.log(myNum); // 123
}
Basic Dom control in web js
Document Object Model (DOM)
Last, we will learn how to add interactions in web
Let's assume we have the html like this
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3 id="msg">Hello mate</h3>
<h3 class="yolo">yolo hi</h3>
</body>
</html>
Get the DOM elements
In general, we have these functions to get the regarding elements. Both functions are built in for web.
// getElementBy
const msgBox = document.getElementById('msg');
const yoloBox = document.getElementsByClassName("yolo"); // Is a array
// querySelector
const msgBoxQu = document.querySelector('#msg');
const yoloBoxQu = document.querySelector(".yolo"); // Not a array
// Since msg is a id, so we need to add #
// Since yolo is a class, so we need to add .
Those function can help us to get the regarding elements.
Add interactions to boxes
In general, we can add events to the DOM elements:
const msgBox = document.getElementById('msg');
// When the msgBox box clicked, a message box will be pop up
msgBox.addEventListener("click", function() {
alert("Hello mate")
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3 id="msg">Hello mate</h3>
<h3 class="yolo">yolo hi</h3>
<script>
const msgBox = document.getElementById('msg');
// When the msgBox box clicked, a message box will be pop up
msgBox.addEventListener("click", function() {
alert("Hello mate")
});
</script>
</body>
</html>
Advance control
You can control the message of the elements by innerHTML
too.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3 id="msg">Hello mate</h3>
<h3 class="yolo">yolo hi</h3>
<script>
const msgBox = document.getElementById('msg');
const yoloBox = document.getElementsByClassName("yolo");
// When the msgBox box clicked, a message box will be pop up
msgBox.addEventListener("click", function() {
yoloBox[0].innerHTML = "hello ar"
});
</script>
</body>
</html>
counter.html
<body>
<h3 id="counter">0</h3>
<button id="addCount">add num</button>
<script>
const counterNumber = document.getElementById('counter');
const addCount = document.getElementById('addCount');
addCount.addEventListener("click", function() {
let originalNUmber = parseInt(counterNumber.innerHTML)
originalNUmber ++;
counterNumber.innerHTML = originalNUmber
});
</script>
</body>
Last updated