Scribd
Upload
44 views

Lecture4 Javascript

JavaScript is the world's most popular programming language. It is the programming language of the Web and is easy to learn. JavaScript controls the behavior of web pages. Scripts can be placed in the <head> or <body> section of an HTML page, or both, and JavaScript can display data in different ways such as writing to HTML elements, alerts, or the browser console. Statements end with a semicolon and comments are used to explain code or hide code from execution.

Uploaded by

C - k
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
44 views

Lecture4 Javascript

JavaScript is the world's most popular programming language. It is the programming language of the Web and is easy to learn. JavaScript controls the behavior of web pages. Scripts can be placed in the <head> or <body> section of an HTML page, or both, and JavaScript can display data in different ways such as writing to HTML elements, alerts, or the browser console. Statements end with a semicolon and comments are used to explain code or hide code from execution.

Uploaded by

C - k
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 54

JAVASCRIPT

JavaScript is the world's most popular programming language.

JavaScript is the programming language of the Web.

JavaScript is easy to learn.

JavaScript is the control of the Web Page.


Javascript Practices In Head And Body

• You can place any number of scripts in an HTML document.

• Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in
both.

<head> <body>
<script> <script>
console.log(‘not best practice’); console.log(‘not best practice’);
</script> </script>
<script>
console.log(‘script2’); <h1>header 1</h1>
</script>
… <script>
</head> console.log(‘not best practice’);
</script>

<h2>header 2</h2>

<script>
console.log(‘above </body> is the best
practice’);
</script>

</body>
Javascript Outputs

JavaScript can "display" data in different ways:

• Writing into an HTML element, using innerHTML.


eg – document.getElementById(‘para1’).innerHTML = “JS Output”;

• Writing into the HTML output using document.write().


eg – document.write(“JS Output”);

• Writing into an alert box, using window.alert().


eg – alert(“JS Output”);

• Writing into the browser console, using console.log()


eg – console.log(“JS Output”);
Statement

• Statement
Statement end with ; in programming.
example =>
let a = 10;
let value = document.getElementById(‘textbox’).value;
Javascript Comment

// Single Line Comment


let x = 5; // Declare x, give it the value of 5
let y = x + 2; // Declare y, give it the value of x + 2

/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";

Comment Use Case


• Comment
• Code Hiding

Note – In visual studio code, you can comment the code with this shortcut (Ctrl + /).
Computer Memory
• Temporary Memory
All the data on the memory has lost when the electrictiy is off or the computer is
switched off.
eg - RAM (Random Access Memory)
• Permanent Memory
All the data on the memory retain when the electrictiy is off or the computer is
switched off.
eg - CD, Memory Stick, Hard Disk, SSD
Extensions
It a small program or feature that help the main software.
Extensions support the additional feature to the main software.
Variable

Variable is a location or storage on the computer memory (RAM).


Variable can keep single value.

Variable Declaration
let a; //declaration
let b; //declaration

Variable Assignment
a = 10; //assignment
b = 20; //assignment

Variable Declaration And Assignment


let c = 100; //declaration and assignment
let d = 200; //declaration and assignment
Variable Declaration Rules
- should
not start with capital letter. (eg. let Num1;)
- should
not start with number. (eg. let 1num1;)
- should
not use special character. (eg. let num^@1;)
- should
not use space. (eg. let number of person;)
- should
start with small letter. (eg. let num1;)
- should
use _ or camel case instead of space.
(eg. let numberOfPerson;[camel case])
(eg. let number_of_person;[_])
- must be meaningful;
How to store the variable in memory (background)

Example MEMORY (RAM)


let a; //step1 (declaration)
let b; //step1 (declaration) ADDRESS VALUE

a = 10; //step2 (assignment) a (step1) &a (0x0000) NULL


b = 20; //step2 (assignment)
b (step1) &b (0x0001) NULL
let c = 100; //step1 declaration & assignment
c = 200; //step2 assignment
a (step2) &a (0x0000) 10

b (step2) &b (0x0001) 20

&c (step1) &c (0x0002) 100

&c (step2) &c (0x0002) 200


Working Flow Of The Assign Operator (=)

let a = 100;
Left Value Assign Operator Right Value

Note - Assign operator assign the right value to the left value;
Data Types
Primitive Data Types Object Data types

• Boolean (true,false) • Object


let status = true; let mgmg = {
name: “mg mg”,
• Null (no value) age: 17,
let value = null; address: “Yangon”
};
• Undefined (a declared variable but hasn’t been
given a value) • Array
let value = undefined; let tempArray = [
“mg mg”,
• Number (integer,float,etc ..) 1.5,
let value = 13; 100,
let value2 = 3.14; true,
[1,2,3],
• String (an array of characters i.e words) {
let name = “Aung Aung”; name: “banana”,
color: “yellow”
}
];
Array
- array can keep multiple values.
- you can call its value by it’s index or it’s keys.
- [] represent the array
- array index start from 0;

Eg –
// array declaration and assignment
let arr = [1,2,3,100,200,300];

// call the array with index number


console.log(arr[3]); //100

// assignment the value to the array with index number


arr[2] = 500; // [1,2,500,100,200,300];
console.log(arr);

//calling array note


Index Array ဆရို င် index နခဲ့ ေါ်
Key Value Array ဆရ ို င် Key နခဲ့ ေါ်
Object
Object is everything in the real world.
There are two sectors in object.
• Properties
• Behaviors

Convert To Computerise
Object is object.
• Properties => Variable
• Behaviors => Function

Building Direct Object Building Template Object


Advantage Advantage
• can create object directly. • symmetric

Disadvantage Disadvantage
• not symmetric • To be symmetric, need to create template class
and need to create object from template class.
Object Example
Building Direct Object Building Template Class
class Person{
let mgmg = { name;
name: "mg mg", age;
age: 15, address;
profession: 'student', study() {
console.log('studying');
study: function(){ }
console.log('Studying'); eat() {
} console.log('Eat');
} }
}
Building Object From Template Class

let mm = new Person;


mm.name = 'MGMG';
mm.age = 32;
mm.address = 'yangon';
mm.eat();
console.log(mm);
Addition And Concatination of (+ operator)
+ operator work for two jobs in programming

(1)Addition
Integer + Integer

(2)Concatination
Integer + String
String + Integer
String + String
Operators (1)
Arithmetic Operators
Operators (2)
Assignment Operators
Operators (3)
Comparison Operators
Operators (4)
Logical Operators
Function
• Function ကလ
ို ပ
ို ်ငန််းစဉ်လခ
ို ဲ့ ေါ်တယ်။ မမလိုပ် ျင်ခ ော လိုပ်ငန််းစဉ်ခတွေကို Function ထမော ောွေ ်းခရ်းရပ မယ်။

• Function ည် reuse ပပန်လပ


ို ်လရ
ို ဲ့ ည်။

• Function မော အပင


ို ်း် နစ်ပင
ို ်း် ရတယ်
• Function Call
• Function Declaration
Note – Function မျော်း ည် Function Call မ ော အလိုပ်လပ
ို ် ည်။

Example

//function declaration
function a(){
console.log(“my first function”);
}

//function call
a();
Predefined & User Defined Function
Predefined Function
အလွေယတ် ကူ အဆင် င ်ဲ့ ခ ေါ်ယအ
ူ ်းို ပပြုနင
ို ခ
် အောင် ကကြုတင် တ်မတ်ထော်းခ ော Function မျော်း ပြစ် ည်။
Example –
alert(‘my first predefined function’);
console.log(‘my first predefined function’);

User Defined Function


ကယို တ
် ငို ် တ်မောခရ်းရခ ော Function မျော်း ပြစ် ည်။
Example –
//function declaration
function addTwoNumber(){
let num1 = 10;
let num2 = 20;
let result = num1 + num2;
console.log(result);
}

//function call
addTwoNumber();
Function Argument & Parameter
Function တွေင ်
• No Argument Function
• Argument Function ဟူ၍ နစ်မျြု်းရ ည်။

Argument နင ်ဲ့ Parameter ည် အတူတပ ူ င်ပြစ် ည်။ ထော်း ခ


ို ော ခနရောကွေ၍ အခ ေါ်အခ ေါ်ကွေ ောွေ ်း ည်။
• Function Declaration တွေင ် Argument လခ ို ဲ့ ပပ်း
• Function Call တွေင ် Parameter လခို ဲ့ ေါ် ည်။

No Argument Function
function addTwoNumber(){ No Argument ()
let num1 = 10;
let num2 = 20;
console.log(num1+num2);
}
addTwoNumber(); //result is 30

Argument Function
function addTwoNumber(num1,num2){ Two Arguments (num1,num2)
console.log(num1+num2);
}
addTwoNumber(50,100); //result is 150 Two Parameters (50,100)
Return & No Return Function
No Return Function
No Return Function မျော်း ည် Function အတွေင်း် ော လိုပ်ငန််းစဉ် ပပ်းခပမောက် ောွေ ်းကက ည်။ တစ်ပ ော်းခ ော အရောမျော်းနင ်ဲ့
တွေြက်လပ
ို ်ခဆောင်၍ မရ။

function addingTwoNumber(num1,num2){
console.log(num1+num2);
}
addingTwoNumber(20,40); // 60
addingTwoNumber(10,30); // 40

Return Function
Return Function မျော်း ည် တန်ြို်းတစ် ိုကို return(ပပန်ထတ ို )် ပပန် ည်။
ထို function ည် return ပပန်ခ ော တန်ြို်းရ ည်။
next process မျော်းကို ဆက်လပ
ို ်ရန် တစ်ပ ော်းခ ော အရောမျော်းနင် တွေြက်လပ ို ်ခဆောင်ရောတွေင ် ခရ်းခလဲ့ခရထရ ည်။

function addingTwoNumber(num1,num2){
return num1+num2;
}

let result = addingTwoNumber(50,60) + 100; // 210


Event And Event Handler
Event is a action.
example - mouseover, click, double click, text enter, focus
Note - Event ခနောက်မော Event Handler (function) တွေပ ခလဲ့ရတယ်။

Event Handler
Event Handler မျော်း ည် function မျော်းပြစ်ကကပပ်း Event မျော်းနင် တွေလျက်ရကက ည်။ Event ပြစ်တောနင်ဲ့
အလိုပ်လပ
ို ်ခ ော function မျော်းကို Event Handler ဟိုခ ေါ် ည်။

Click Event
<html>
<head>
<title>Event And Event Handler</title>
</head> Event Handler => showAlert()
<body>
<button onclick=“showAlert()" >alert</button>
<script>
function showAlert(){
alert('my first event and event handler');
}
</script>
</body>
</html>
Structure Programming (1)
Structure Programming
• Sequence Structure (အစဉ်အတငို ်း် အလိုပ်လပ
ို ်တဲ့ structure)
• Conditional Structure (အခပ အခနခပေါ်မတ ူ ည်ပပ်း အလိုပ်လပ ို ်တဲ့ structure)
• Iteration Structure (ထပ်တစ်လလလိုပ်မဲ့ structure)

Sequence Structure
Program တင ို ်း် ဟော Sequence အတင
ို ်း် Top to Bottom အလိုပ်လပ
ို ်ပ တယ်။
Note - Sequence Structure မော်းယွေင်း် ခ ောအ မန်ကန်ခ ော result မထွေကတ ် ောမျြု်း ( )ို ဲ့ Error
ပြစ်တောမျြု်းကကြုခတွေွေ့ရတက်ပ တယ်။

Conditional Structure
(i) if;
(ii) if else;
(iii) if elseif;
(iv) if elseif elseif;
(v) if elseif else;
(vi) if elseif elseif else;

Note - if ခတွေွေ့တင
ို ်း် condition င်စစ်မယ်
elseif က အခပေါ်က if န ဲ့ else if ခတွေအော်းလ်းို false ပြစ်မ condition င်စစ်မယ်
else က အခပေါ်က if န ဲ့ else if ခတွေအော်းလ်းို fasle ပြစ်မ အလိုပ်လပ
ို ်မယ်
- if န ဲ့ else if မော condition ပ တယ်။ else မပ ဘူ်း။
Structure Programming (2)
Iteration Structure (Or) Looping Structure
• for
• foreach
• forin
• forof
• while
• do while

Note - ကယ
ို လ
် ပ
ို ် ျင်တဲ့ process ကို အကကမ် အခရအတွေက် အမျော်းကက်း လိုပ် ျင်တအ
ဲ့ အ ်းို ပပြုပ တယ်
Loop Explanation
String Functions (1)
length (စာလုံးို အရေအတွကက
် ို သချင်ေင်သုံးို )
let txt = “apple”;
Console.log(txt.length); //5

slice() (စာထဲမှ ကယ ို လ
် ခ
ို ျင်တဲ့ဲ စာကို string position နဲ ဲ့ ဖြတ်ပ ုံး ယူတာ)
//အခရ ွေ့ကခနယူတပ
ဲ့ စ
ို
let str = “Apple, Banana, Kiwi”;
let part = str.slice(7,13); //Banana

//အခနောက်ကခနယူတပ ဲ့ စ
ို
let str = “Apple, Banana, Kiwi”;
let part = str.slice(-12,-6); //Banana

//pass ခပ်းလက
ို တ
် ဲ့ string position ကခနစပပ စောခနောက်ဆ်းို ထယူတပ
ဲ့ စ
ို (positive number)
let str = “Apple, Banana, Kiwi”;
let part = str.slice(7); //Banana, Kiwi

//pass ခပ်းလက
ို တ
် ဲ့ string position ကခနစပပ စောခနောက်ဆ်းို ထယူတပ
ဲ့ စ
ို (negative number)
let str = “Apple, Banana, Kiwi”;
let part = str.slice(-12); //Banana, Kiwi
String Functions (2)
substring() (စာထဲမှ ကယ ို လ
် ခ
ို ျင်တဲ့ဲ စာကို string position နဲ ဲ့ ဖြတ်ပ ုံး ယူတာ)
ခအောက်ပ Link တွေင ် ခလဲ့လောရန်
https://www.w3schools.com/js/js_string_methods.asp

replace() (စာအစာုံးထုံးို ေင်သုံးို )


let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools"); //Please visit W3Schools!

let text = "Please visit Microsoft!";


let newText = text.replace("MICROSOFT", "W3Schools"); //Please visit Microsoft!

let text = "Please visit Microsoft!";


let newText = text.replace(/MICROSOFT/i, "W3Schools"); //Please visit W3Schools!
Note – /i flag means insensitive case

let text = "Please visit Microsoft and Microsoft!";


let newText = text.replace(/Microsoft/g, "W3Schools"); //Please visit W3Schools and W3Schools!
Note – /g (global match) will replace all matches.
String Functions (3)
toUpperCase() (စာလုံးို အကကုံးရဖ ာင်ုံးေင်သုံးို )
let text1 = "Hello World!";
let text2 = text1.toUpperCase(); // HELLO WORLD

toLowerCase() (စာလုံးို အရသုံးရဖ ာင်ုံးေင်သုံးို )


let text1 = "Hello World!";
let text2 = text1.toLowerCase(); // hello world

concat() (စာရတွကို ဆက်ချင်ေင် သုံးို )


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

trim() (မလအို ် တဲ့ဲ space ရတွကို ဖြတ်ချင်ေင်သုံးို )


let text1 = " Hello World! ";
let text2 = text1.trim(); // Hello World

charAt() (ထညဲ့ လ
် က
ို တ
် ဲ့ဲ index မှာ ရှတဲဲ့ character ကလ
ို ခ
ို ျင်ေင်သုံးို )
let text = "HELLO WORLD";
let char = text.charAt(0); // H
String Functions (4)
charCodeAt() (ထညဲ့ လ
် က
ို တ
် ဲ့ဲ index မှာ ရှတဲဲ့ character code ကလ
ို ခ
ို ျင်ေင်သုံးို )
let text = "HELLO WORLD";
let char = text.charCodeAt(0); // 72

split() (string တစ်ခိုကို ထညဲ့ လ


် က
ို တ
် ဲ့ဲ splitter နဲ ဲ့ အခန်ုံးရတွဖြတ်ပ ုံး array တစ်ခို return ဖ န်ရ ုံးတယ်)
let text = "Welcome,To,Programming,World!";
const myArr = text.split(""); // ["Welcome","To","Programming","World"]
String Search (1)
indexOf() ( ထမဆုံးို ရတွွေ့တဲ့ဲ စာသာုံးေဲ ဲ့ position ၏ index ကို return ဖ န်ရ ုံးတယ်)
let str = "Please locate where 'locate' occurs!";
str.indexOf("locate"); //7

indexOf() ( ထမဆုံးို ရတွွေ့တဲ့ဲ စာသာုံးေဲ ဲ့ position ၏ index ကို return ဖ န်ရ ုံးတယ်, စရှာရြွရသာ position မှ
စရှာသည်)
let str = "Please locate where 'locate' occurs!";
str.indexOf("locate", 15); //21

lastIndexOf() (ရနာက်ဆုံးို ရတွွေ့တဲ့ဲ စာသာုံးေဲ ဲ့ position ၏ index ကို return ဖ န်ရ ုံးတယ်, စရှာရြွရသာ position မှ
စရှာသည်)
let str = "Please locate where 'locate' occurs!";
str.lastIndexOf("locate"); //21

indexOf() (ရနာက်ဆုံးို ရတွွေ့တဲ့ဲ စာသာုံးေဲ ဲ့ position ၏ index ကို return ဖ န်ရ ုံးတယ် , စရှာရြွရသာ position မှ
စရှာသည်)
let str = "Please locate where 'locate' occurs!";
str.indexOf("locate“,15); //21

Note – indexOf() and lastIndexOf() function သည် ရှာမရတွွေ့လျှင် (-1) return ဖ န်သည်
String Search (2)
search() ( ထမဆုံးို ရတွွေ့တဲ့ဲ စာသာုံးေဲ ဲ့ position ၏ index ကို return ဖ န်ရ ုံးတယ်)
let str = "Please locate where 'locate' occurs!";
str.search("locate"); // 7

match()
(/g (global) ည် regular expression ပြစ် ည် ain နင ်ဲ့ တူညခ ော အရောမျော်းကို ရောခြွေပပ်း ရ ခလောက် array
တစ် ိုအခနန ဲ့ return ပပန် ည်။)
let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/g); // ['ain','ain','ain’]

(/gi (global and case-insensitive) ည် regular expression ပြစ် ည် ain နင ်ဲ့ တူညခ ော အရောမျော်းကို
ရောခြွေပပ်း ရ ခလောက် array တစ် ိုအခနန ဲ့ return ပပန် ည်။)
let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/gi); // ['ain’,’AIN’,'ain','ain’]

includes() (သတ်မှတလ် က
ို ရ
် သာ စာသာုံးသည် ရှာချင်ရသာ စာသာုံးထဲတင
ွ ရ
် ှလျှင် true return ဖ န်သည်)
let text = "Hello world, welcome to the universe.";
text.includes("world"); // true
String Templates
String Template မျာုံးကို ရေုံးသာုံးောတွင ် double quote ("") အစာုံး back-ticks(``) ကို အသုံးို မျာုံးသည်
let text = `Hello World!`;

String ထဲမှာ Quote မျာုံးကို အသုံးို ဖ ြုနင


ို သ
် ည်။
let text = `He's often called "Johnny"`;

Multiline အသုံးို ဖ ြုလေတယ်


ို ဲ့ ။
let text =
`The quick
brown fox
jumps over
the lazy dog`;

Variable ရတွကို ဒလို တက


ို ရ
် ို က် ထညဲ့ သ
် င
ွ ုံး် အသုံးို ဖ ြုလေတယ်
ို ဲ့ ။
let name = "John Doe";
let text = `Welcome ${name}!`;

Calculation ရတွကို ဒလို တက


ို ရ
် ို က် ထညဲ့ သ
် င
ွ ုံး် အသုံးို ဖ ြုလေတယ်
ို ဲ့ ။
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
Number
let x = 3.14; // A number with decimals
let y = 3; // A number without decimals

let x = 123e5; // 12300000


let y = 123e-5; // 0.00123

Numeric Strings
let x = 100; // x is a number
let y = "100"; // y is a string

NaN – Not a Number


let x = 100 / "Apple"; // NaN

isNaN()
let x = 100 / "Apple";
isNaN(x); // true
Number Functions (1)
toString() (Number to String ရဖ ာင်ုံးေင်သုံးို တယ်)
let x = 123;
x.toString();

toExponential() (Exponential notation နဲ ဲ့ ဒသမကန်ုံး အရေအတွကက


် ို သတ်မှတေ
် င်သုံးို တယ်)
let x = 9.656;
x.toExponential(2); // 9.66e+0
x.toExponential(4); // 9.6560e+0
x.toExponential(6); // 9.656000e+0

toFixed() (ဒသမကန်ုံး အရေအတွကက


် ို သတ်မှတေ
် င်သုံးို တယ်)
let x = 9.656;
x.toFixed(0); //10
x.toFixed(2); //9.66
x.toFixed(4); //9.6560

toPrecision() (သတ်မှတလ် က
ို တ
် ဲ့ဲ length အတင
ို ုံး် ထွကတ
် ယ်)
let x = 9.656;
x.toPrecision(); // 9.656
x.toPrecision(2); // 9.7
x.toPrecision(4); // 9.656
Number Functions (2)
Number() (Number ရဖ ာင်ုံးေင်သုံးို တယ်)
Number(true); //1
Number(false); //0
Number("10"); //10
Number(" 10"); //10
Number("10 "); //10
Number("10.33"); //10.33
Number("10,33"); //NaN
Number("10 33"); //NaN
Number("John"); //NaN
Number(new Date("1970-01-02")) //86400000

parseInt() (Integer ရဖ ာင်ုံးေင်သုံးို )


parseInt("10"); //10
parseInt("10.33"); //10.33
parseInt("10 20 30"); //NaN

parseFloat() (Integer ရဖ ာင်ုံးေင်သုံးို )


parseFloat("10"); //10
parseFloat("10.33"); //10.33
parseFloat("10 20 30"); //NaN
Array Function (1)
toString() (Array ကို String ရဖ ာင်ုံးေင်သုံးို )
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
// Banana,Orange,Apple,Mango

join() (Array ထဲက value မျာုံးကို string တစ်ခိုအရနနဲ ဲ့ join ချင်ေင်သုံးို )


const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
// Banana * Orange * Apple * Mango

pop() (Array ထဲက ရနာက်ဆုံးို value ကို ထိုတေ


် င်သုံးို )
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();
// ["Banana", "Orange", "Apple"];

push() (Array ထဲ တန်ြိုုံးရတွထညဲ့ ခ


် ျင်ေင်သုံးို (ရနာက်ကရနထညဲ့ )
် )
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
// ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
Array Function (2)
shift() (Array ထဲက ရရှ ွေ့ဆုံးို value ကို ထိုတေ
် င်သုံးို )
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();
// ["Orange", "Apple", "Mango"];

unshift() (Array ထဲ တန်ြိုုံးရတွထညဲ့ ခ


် ျင်ေင်သုံးို (ရရှ ွေ့ကရနထညဲ့ )
် )
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Kiwi");
// [("Kiwi“, "Banana", "Orange", "Apple", "Mango"];

concat() (Arrays ရတွ merge (ရ ေါင်) ေင်သုံးို )


const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);
// ["Cecilie", "Lone", "Emil", "Tobias", "Linus", "Robin", "Morgan"];

Array Length
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.length); // 4
Array Function (3)
splice() (Array ထဲက value အသစ်ရတွကို ကယ ို ထ
် ညဲ့ ခ
် ျင်တရ
ဲ့ဲ နောက ထညဲ့ ခ
် ျင်ေင် သုံးို )
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let removed = fruits.splice(2, 2, "Lemon", "Kiwi");
// original fruits array => ["Banana", "Orange", "Apple", "Mango"];
// fruits array after splice => ["Banana", "Orange“ , “Lemon", “Kiwi", "Apple", "Mango"];
// removed array => [“Apple", “Mango“]

splice() (Array ထဲက value ရတွကို ကယ ို ြ


် ျက်ချင်တရ ဲ့ဲ နောက ြျက်ချင်ေင် သုံးို )
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1); // ["Orange", "Apple", "Mango"];
Note- first parameter (2) value အ စ်ခတွေထညဲ့မ ် ခ
ဲ့ နရောကို တ်မတ်ရန်
second parameter (0) remove လိုပ်မဲ့ value အခရအတွေက်
the rest parameter ("Lemon", "Kiwi“) အ စ်ထညဲ့မ ် ဲ့ values မျော်း

splice() (Array ထဲက value ရတွကို ကယ ို ြ


် ျက်ချင်တရ
ဲ့ဲ နောက ြျက်ချင်ေင် သုံးို )
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
fruits.slice(3); // ["Apple", "Mango"] (အစကခန value နစ် ိုကို ြျက်)
fruits.slice(1, 3); // ["Orange", "Lemon"]
Note- first parameter (1) ြျက်ရန် start point ကို တ်မတ်ရန် value
second parameter (3) ြျက်ရန် end point ကို တ်မတ်ရန် value, (3) index မပ လမ ို ဲ့ တ်ထော်းရမည်။
Array Sort (1)
sort() (Array ထဲက value ရတွကို a – z စချင်ေင်သုံးို )
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

reverse() (Array ထဲက value ရတွကို ရဖ ာင်ုံးဖ န်လို ် ချင်ေင်သုံးို )


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

numeric sort (ascending)


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

numeric sort (descending)


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

Math.min() (အနည်ုံးဆုံးို တန်ြိုုံးကရ


ို ှာ)
Math.min.apply(null, [1, 2, 3])
Array Sort (2)
Math.max() (အမျာုံးဆုံးို တန်ြိုုံးကရ
ို ှာ)
Math.max.apply(null, [1, 2, 3])

Sorting Object Array (Object Array ရတွကို property အလက


ို စ
် ောတွငသ
် ုံးို )
const cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];
cars.sort(function(a, b){return a.year - b.year});
Array Iteration (1)
forEach() (forEach method သည် array element တစ်ခိုချင်ုံးစတင
ို ုံး် အတွက် callback function ကရ
ို ခေါ်သည်)
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(
//callback function
(value)=>{
txt += value + "</br>";
}
);
// 45</br>4</br>9</br>16</br>25</br>

map()
map() function သည် အလို ် လို ် ပ ုံးတာနဲတာ
ဲ့ new array တစ်ခို ကို return ဖ န်တယ်။
map() function သည် original array ေဲ ဲ့ တန်ြိုုံးကို မရဖ ာင်ုံးလဲ ေါ။
map() function သည် empty array တွင ် အလို ် မလို ် ေါ
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(
(value,index,array)=>{
return value * 2;
}
);
// [90, 8, 18, 32, 50]
Array Iteration (2)
filter() (array ထဲက value ရတွကို စစ်ထတ
ို ခ
် ျင်ေင်သုံးို )
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(
(value,index,array)=>{
return value > 18
}
);
// [45,25]

reduce() (array ထဲမှာရှရသာ တန်ြိုုံးရတွအာုံးလုံးို ကို ရ ေါင်ုံးတဲအ


ဲ့ ခေါ အသုံးို ဖ ြုသည်)
The total (the initial value / previously returned value)
The item value
The item index
The array itself
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(
(total,value,index,array)=>{
return total + value;
}
);
// 99
Array Iteration (3)
ခလဲ့လောရန်
https://www.w3schools.com/js/js_array_iteration.asp
JS Date(2)
3 numbers specify year, month, day, hour:
const d = new Date(2018, 11, 24);
//Mon Dec 24 2018 00:00:00 GMT+0630 (Myanmar Time)

2 numbers specify year, month, day, hour:


const d = new Date(2018, 11);
//Mon Dec 01 2018 00:00:00 GMT+0630 (Myanmar Time)

new Date(dateString)
const d = new Date("October 13, 2014 11:13:00");
//Mon Oct 13 2014 11:13:00 GMT+0630 (Myanmar Time)

new Date(miliseconds)
const d = new Date(0);
//Thu Jan 01 1970 06:30:00 GMT+0630 (Myanmar Time)

const d = new Date(100000000000);


//Sat Mar 03 1973 16:16:40 GMT+0630 (Myanmar Time)
JS Date(1)
const d = new Date();
//Thu Mar 17 2022 18:44:49 GMT+0630 (Myanmar Time)

const d = new Date(2018, 11, 24, 10, 33, 30, 0);


//Mon Dec 24 2018 10:33:30 GMT+0630 (Myanmar Time)

Note – Javascript count months from 0 to 11.


January = 0, …, December = 11

Using 6,4,3, or 2 numbers


6 numbers specify year, month, day, hour, minute, second:
const d = new Date(2018, 11, 24, 10, 33, 30);
//Mon Dec 24 2018 10:33:30 GMT+0630 (Myanmar Time)

5 numbers specify year, month, day, hour, minute:


const d = new Date(2018, 11, 24, 10, 33);
//Mon Dec 24 2018 10:33:00 GMT+0630 (Myanmar Time)

4 numbers specify year, month, day, hour:


const d = new Date(2018, 11, 24, 10);
//Mon Dec 24 2018 10:00:00 GMT+0630 (Myanmar Time)
JS Date(3)
Displaying Date
const d = new Date();
d.toString(); // Thu Mar 17 2022 19:02:59 GMT+0630 (Myanmar Time)

const d = new Date();


d.toUTCString(); // Thu, 17 Mar 2022 12:33:20 GMT

const d = new Date();


d.toDateString(); // Thu Mar 17 2022

const d = new Date();


d.toISOString(); // 2022-03-17T12:34:23.365Z

Date Format ရတွရလဲ့လာေန်


https://www.w3schools.com/js/js_date_formats.asp
JS Date Get Methods (1)
getTime()
const d = new Date();
d.getTime(); // 1647520668780

getFullYear()
const d = new Date();
d.getFullYear(); // 2022

getMonth()
const d = new Date();
d.getMonth(); // 3

getDate()
const d = new Date();
d.getDate(); // today date (example - 17)

getHours()
const d = new Date();
d.getHours(); // current hour (example - 19 = 7:00PM)
JS Date Get Methods (2)
getMinutes()
const d = new Date();
d.getMinutes(); // current minutes (example -12)

getSeconds()
const d = new Date();
d.getSeconds(); // current seconds (example – 1)

getMilliseconds()
const d = new Date();
d.getMilliseconds(); // current milliseconds (example - 683)

getDay()
const d = new Date();
d.getDay(); // weekday as a number (0-6)
JS Date Set Methods (1)
setFullYear()
const d = new Date();
d.setFullYear(2020); // Tue Mar 17 2020 19:46:11 GMT+0630 (Myanmar Time)

const d = new Date();


d.setFullYear(2020, 11, 3); // Thu Dec 03 2020 19:46:51 GMT+0630 (Myanmar Time)

setMonth()
const d = new Date();
d.setMonth(11); // Sat Dec 17 2022 19:47:38 GMT+0630 (Myanmar Time)

setDate()
const d = new Date();
d.setDate(15); // Tue Mar 15 2022 19:48:01 GMT+0630 (Myanmar Time)

const d = new Date();


d.setDate(d.getDate() + 50); // Fri May 06 2022 19:48:59 GMT+0630 (Myanmar Time)

setHours()
const d = new Date();
d.setHours(22); // Thu Mar 17 2022 22:49:33 GMT+0630 (Myanmar Time)
JS Date Set Methods (2)
setMinutes()
const d = new Date();
d.setMinutes(30); // Thu Mar 17 2022 19:30:09 GMT+0630 (Myanmar Time)

setSeconds()
const d = new Date();
d.setSeconds(30); // Thu Mar 17 2022 19:51:30 GMT+0630 (Myanmar Time)

getMilliseconds()
const d = new Date();
d.getMilliseconds(); // current milliseconds (example - 683)

getDay()
const d = new Date();
d.getDay(); // weekday as a number (0-6)
Math
Math.PI; // 3.14
Math.round(4.6); // 5 (Returns x rounded to its nearest integer)
Math.ceil(4.3); // 5 (Returns x rounded up to its nearest integer)
Math.floor(4.7); // 4 (Returns x rounded down to its nearest integer)
Math.trunc(3.7) // 4 (Returns the integer part of x)
Math.sign(-4); // -1 (returns if x is negative, return -1 or if x is positive, return 1)
Math.pow(8,2) // 64 (returns the value of x to the power of y)
Math.sqrt(64); // 8 (returns the square root of x)
Math.abs(-4.7); // 4 ( returns the absolute (positive) value of x:)
Math.sin(90 * Math.PI / 180); // returns 1 (the sine of 90 degrees)
Math.cos(0 * Math.PI / 180); // returns 1 (the cos of 0 degrees)
Math.min(0, 150, 30, 20, -8, -200); // -200
Math.max(0, 150, 30, 20, -8, -200); // 150
Math.random(); // returns a random number between 0 (inclusive), and 1 (exclusive):

You might also like