SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs...
Transcript of SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs...
![Page 1: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/1.jpg)
SEEM4570 System Design and Implementation
Lecture 2 – JavaScript
![Page 2: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/2.jpg)
Preparation
• In this course, we focus on app development. • Prepare your project based on P.24 of Lecture Note 1.
© 2018 Gabriel Fung 2
![Page 3: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/3.jpg)
JavaScript (JS) Usages
• Handle Events• E.g. when you clicked a button. “clicked” is an event
• Validate input• E.g. check your input email address is well-formatted.
• Run animations• …
© 2018 Gabriel Fung 3
![Page 4: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/4.jpg)
JS Properties
• JavaScript is a Scripting Language• A scripting language is usually lightweight.
• JavaScript does nothing with Java.• Easy to learn.• It is an Object Oriented Programming Language• Some people may argue with me… But that's fine as
different people may have different opinions• A good article: http://www.sitepoint.com/oriented-programming-1/
• We will discuss more about OOP later in this course (UML). Let us focus on how to use it at the moment.
© 2018 Gabriel Fung 4
![Page 5: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/5.jpg)
More about JS
• Developed by Netscape• Past: designed for browsers to use
• Run programs from browsers (HTML is a layout engine and not programmable)
• Now: JavaScript everywhere paradigm • E.g. Node.js
• Supposed to call ”Mocha", but changed to "JavaScript”• There is no relationship between Java and JavaScript
© 2018 Gabriel Fung 5
![Page 6: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/6.jpg)
JS Programs
• A computer program is a list of instructions to be executed by a computer.• These instructions are called statements.• So each JS statement is a command. The purpose of
the statements is to tell the computer what to do.• You can add semicolon or not add semicolon at the
end of a JS statement
© 2018 Gabriel Fung 6
![Page 7: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/7.jpg)
JS Inside HTML
• JavaScript must be written in <script> … </script>• You can put <script>…</script> anywhere.• All are correct:
• <html><head><script></script></head>…</html>
• <html>…</html><script></script>
• <html>…<body><script></script></body></html>
© 2018 Gabriel Fung 7
![Page 8: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/8.jpg)
First JS
• <script>alert("My First JavaScript");</script>• Old examples write <script type="text/javascript"> instead
of <script>. This is no longer required because JavaScript is THE scripting language in all modern browsers.• alert() is a built-in function.
© 2018 Gabriel Fung 8
![Page 9: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/9.jpg)
JS in External File
• You can put JS in an external file. • Suppose we have the following structure:
• +– www+– index.html+– my_script.js
• In the html file:• …
<script src="my_script.js"></script>…
• In my_script.js (note: no need to write <script></script>):• alert("My First JavaScript");
© 2018 Gabriel Fung 9
![Page 10: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/10.jpg)
JS Comment
• Similar to C or Java, we use /**/ or // to write comment:• <script>
/* Write some useful information in this block.You can write many lines here.*/alert("hello");
// This is another line of comment.// This is another line of comment.alert("yeah");</script>
© 2018 Gabriel Fung 10
![Page 11: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/11.jpg)
Note
• In the following slides, we will assume everything is written inside <script></script> and omit it for the sake of clarity.
© 2018 Gabriel Fung 11
![Page 12: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/12.jpg)
JS Variables
• In a programming language, variables are used to store values.• JavaScript uses the keyword var to declare variables.• E.g.: var x;• By default, a variable has the value undefined unless you
assign a value to it.• An equal sign is used to assign values to variables.• var x = 10;• var name = “john”;• var pi = 3.1415
© 2018 Gabriel Fung 12
![Page 13: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/13.jpg)
JS Debug
• For debugging, you can use console.log() to display some information:• <script>
var x = 10;console.log(x);</script>
• In the following slides, always try to use console.log(…) to show the output.
© 2018 Gabriel Fung 13
![Page 14: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/14.jpg)
JS Data Types
• Technically, every variable in JS has a data type:• Undefined• Number• Boolean• String • Null• Array (a kind of Object)• Object
• Yet, as JS is dynamic typing – it will assign the expected data type to each variable. You do not need to define them explicitly.
© 2018 Gabriel Fung 14
![Page 15: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/15.jpg)
JS Boolean
• A Boolean is a logical entity that consists of either a true or a false value:• var x = true;• var y = false;
© 2018 Gabriel Fung 15
![Page 16: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/16.jpg)
JS Numbers
• You can do arithmetic operations on numbers.• var radius = 10;• var pi = 3.1415; • var area =pi * radius * radius;
• JS numbers are stored as double precision floating point. Sometimes the calculation may be wrong:• var x = 0.2 + 0.1; // x may be 0.3000000000000000001
• One simple way to solve the above problem:• var x = (0.2 * 10 + 0.1 * 10) / 10
© 2018 Gabriel Fung 16
![Page 17: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/17.jpg)
JS Numbers (cont’d)
• You can do common arithmetic like all programming languages
© 2018 Gabriel Fung 17
+ Addition– Subtraction* Multiplication
/ Division% Modulus
![Page 18: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/18.jpg)
JS Strings
• A string can be any text inside quotes. You can use single and double quotes:• var s1 = "Hello";• var s2 = 'Hello';• var statement1 = "He is 'John'." ;• var statement2 = 'He is "John".' ;
• If you want the same quote inside and surround a string, you need to use “escape character” (i.e. \):• var statement3 = "He is \"John\"." ;• var statement4 = 'He is \'John\'.' ;
© 2018 Gabriel Fung 18
![Page 19: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/19.jpg)
JS Strings (cont’d)
• Since escape character is a backslash (i.e. \), so if you need to show a backslash in a string, you need to encode it using escape character:• var tricky_statement =”one backslash here: \\ OK?";
© 2018 Gabriel Fung 19
![Page 20: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/20.jpg)
JS Strings (cont’d)
• You can concatenate strings using “+”:• var s1 = "How";
var s2 = "are";var s3 = "you?";var s4 = s1+s2+s3; // s4 becomes “Howareyou?”var s5 = s1+" "+s2+" "+s3; // s5 becomes “How are you?”
• Note: if you use “+” between a number and a string, then JS will treat the number as a string.• var a = 10;
var b = 20;var s1 = “total is ” + a + b; // s2 becomes “total is 1020”var s2 = “total is ” + (a + b); // s2 becomes “total is 30”
© 2018 Gabriel Fung 20
![Page 21: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/21.jpg)
JS Null and Undefined
• Variables can be emptied by assigning their values to null• var s1; // s1 is undefined. NOT null
var s2 = null; // s2 is null
© 2018 Gabriel Fung 21
![Page 22: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/22.jpg)
JS Arrays
• An array is a special object. It holds more than one value at a time.• Strictly speaking, there is no “array” data type. But because
of their special properties, we always refer them as “array” instead of “object”.
• We usually group logically related items into an array.• Instead of writing:• var car1 = "Toyota";
var car2 = "Volvo";var car3 = "BMW";
• Consider:• var cars = ["Toyota", "Volvo", "BMW"];
© 2018 Gabriel Fung 22
![Page 23: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/23.jpg)
JS Arrays (cont’d)
• You access the elements inside an array by referring to its index.• var cars = ["Toyota", "Volvo", "BMW"];
console.log(cars[0]);
• Some books may write this:• var cars = new Array(“Toyota”, “Volvo”, “BMW”);• It is an old school style.
• Programing just like fashion, some “styles” will be ”outdated”!!!
© 2018 Gabriel Fung 23
![Page 24: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/24.jpg)
JS Functions
• We define functions using the keyword “function”:• function output(){
console.log(“Hello!”);}output();
© 2018 Gabriel Fung 24
![Page 25: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/25.jpg)
JS Functions (cont’d)
• Like all languages, function can return values:• function outputPie(){
return 3.14;}var x = outputPie();console.log(x);
• We can pass values to and return values from functions:• function calculateSquareArea(width, length){
return width * length;}var area = calculateSquareArea(5, 10);console.log(area);
© 2018 Gabriel Fung 25
![Page 26: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/26.jpg)
JS Functions (Advance Level)
• We can define function as a variable as well:• var calculateSquareArea = function(width, length){
return width * length;};var area = calculateSquareArea(5, 10);console.log(area);
© 2018 Gabriel Fung 26
![Page 27: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/27.jpg)
JS Functions (Advanced Level) (cont’d)
• Functions can be “self-invoked” as well:• (function () {
console.log(“I am called automatically!“);})();• The above is essentially the same as:
• function callMe() {console.log(“I am called automatically!“);
}callMe();
© 2018 Gabriel Fung 27
![Page 28: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/28.jpg)
JS Objects
• An object contains properties and methods• Let’s consider there is an object “car”:
• Properties: • Brand: BMW• Model: 330i
• Methods:• Engine Start• Engine Stop
• A property has a name and a value (i.e. store some information).• A method can be regarded as a function (i.e. do
something).
© 2018 Gabriel Fung 28
![Page 29: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/29.jpg)
JS Objects (cont’d)
• There are two ways to create an object:• Define as a single object using object literal.• Define as a prototype, and then create some objects later.
© 2018 Gabriel Fung 29
![Page 30: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/30.jpg)
Create Object using Object Literal
• Example 1 (declare an object, then add properties and methods later):• var car ={}; // declare an object
car.brand = “BMW”; // add propertiescar.model = “330i”;car.engineStart = function(){ // add methods
return “engine started!”;}car.engineStop = function(){
return “engine stopped!”;}• Note: some books write “var car = new Object()” (an old
school style) instead of “var car={}”.
© 2018 Gabriel Fung 30
![Page 31: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/31.jpg)
Create Object using Object Literal (cont’d)
• Example 2 (declare properties and methods when you declare the object):• var car = {
brand: “BMW”,model: “330i”,engineStart: function(){
return “engine started!”;},engineStop: function(){
return “engine stopped!”;}
}
© 2018 Gabriel Fung 31
![Page 32: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/32.jpg)
Create Object using Object Literal (cont’d)
• Example 3 (declare some properties and some methods when you declare the object, and add more later):• var car = {
brand: “BMW”,engineStart: function(){
return “engine started!”;},
};car.model = “330i”;car.engineStop = function(){
return “engine stopped!”;}
© 2018 Gabriel Fung 32
![Page 33: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/33.jpg)
Create Object using Object Literal (cont’d)
• To return the values of properties or call the methods:• console.log(car.brand);
console.log(car.engineStart());
© 2018 Gabriel Fung 33
![Page 34: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/34.jpg)
A Special Keyword “this”
• Inside an object, we can use a special keyword “this” to refer to the object itself.• var car = {
brand: “BMW”,model: “330i”,engineStart: function(){
return this.brand + “ engine started!”;},engineStop: function(){
return this.brand + “ engine stopped!”;}
}
© 2018 Gabriel Fung 34
![Page 35: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/35.jpg)
Create Object Using Prototype
• The object literal method can only create one single object.• What if we want to create many similar objects?• We can define the skeleton of the object first, then
create it later.• The skeleton is called “prototype”. We then create the
object on demand.• Sometimes, we call “prototype” as “class” as well. They may
use interchangeably.
© 2018 Gabriel Fung 35
![Page 36: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/36.jpg)
Create Object Using Prototype (cont’d)
• Example:• function CarFactory(brand, model){
this.brand = brand;this.model = model;this.engineStart = function(){
return this.brand + “ engine started”;}
}var car1 = new CarFactory(“BMW”, “330i”);var car2 = new CarFactory(“Toyota”, “Aqua”);console.log(car1.engineStart());console.log(car2.engineStart());• Note: we usually use Sentence Case for prototype
(CarFactory vs. carFactory).© 2018 Gabriel Fung 36
![Page 37: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/37.jpg)
Create Object Using Prototype (cont’d)
• To add properties or methods to a prototype:• CarFactory.prototype.engineStop = function(){
return this.brand + “ engine stopped”;}• Note: you MUST have the keyword “prototype” in this case.
• Only modify your own prototypes. Never modify the prototypes of standard JavaScript objects (although it is always possible to do).
© 2018 Gabriel Fung 37
![Page 38: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/38.jpg)
Create Object Using Prototype (cont’d)
• To add properties or methods to an object created by a prototype :• var car = CarFactory(“bmw”, “330i”);
car.color = “red”; // you can add properties to an objectcar.standby = function(){…); // you can add methods
© 2018 Gabriel Fung 38
![Page 39: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/39.jpg)
Useful Objects/Prototypes/Functions
• Math• var radius = 10;
var area = Math.PI * radius * radius;console.log(Math.round(area));• Reference:
• https://www.w3schools.com/jsref/jsref_obj_math.asp
• Date• var currentDate = new Date();
console.log(currentDate);• Reference:
• https://www.w3schools.com/jsref/jsref_obj_date.asp
© 2018 Gabriel Fung 39
![Page 40: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/40.jpg)
Useful Objects/Prototypes/Functions (cont’d)
• String• var s = “Welcome to the class”;
console.log( s.length() );console.log( s.toUppserCase() );console.log( s.charAt(1) );console.log( s.replace(”o”, “0”) );• Reference:
• https://www.w3schools.com/jsref/jsref_obj_string.asp
© 2018 Gabriel Fung 40
![Page 41: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/41.jpg)
Useful Objects/Prototypes/Functions (cont’d)
• Array methods:• var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits);fruits.pop(); // Removes Mango” (last element);console.log(fruits);• Reference:
• https://www.w3schools.com/jsref/jsref_obj_array.asp
© 2018 Gabriel Fung 41
![Page 42: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/42.jpg)
Useful Objects/Prototypes/Functions (cont’d)
• Number:• var x = 10;
var y = 5 / 0;console.log( Number.isInteger(x) );console.log( Number.isNaN(y) ); // NaN: Not a number• Reference:
• https://www.w3schools.com/jsref/jsref_obj_number.asp
© 2018 Gabriel Fung 42
![Page 43: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/43.jpg)
Useful Objects/Prototypes/Functions (cont’d)
• typeof• var a = 10; // number
var b = “A word”; // stringvar c = [“bmw”, “volvo”]; // arrayvar d = yes; // booleanvar e = {}; // empty objectconsole.log( typeof(a) );console.log( typeof(b) );console.log( typeof(c) );console.log( typeof(d) );console.log( typeof(e) );
© 2018 Gabriel Fung 43
![Page 44: SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs •Acomputer programis a list of instructions to be executed by a computer. •These instructions](https://reader033.fdocuments.in/reader033/viewer/2022050315/5f77e494026f7c75de2aee5b/html5/thumbnails/44.jpg)
If-then-else, Loops, try-catch-finally
• JS handles “if-then-else”, ”for”, “try-catch”:• for(i = 0; i < 10; i++) {
…}• if(i != 10){
…}• try{
…}catch(error){
…}
© 2018 Gabriel Fung 44