SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs...

SEEM4570 System Design and Implementation

Lecture 2 – JavaScript

Preparation

• In this course, we focus on app development. • Prepare your project based on P.24 of Lecture Note 1.

© 2018 Gabriel Fung 2

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• …


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.


http://www.sitepoint.com/oriented-programming-1/

http://www.sitepoint.com/oriented-programming-1/

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


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


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>


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.


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");


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>


Note

• In the following slides, we will assume everything is written inside <script></script> and omit it for the sake of clarity.


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


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.


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.


JS Boolean

• A Boolean is a logical entity that consists of either a true or a false value:• var x = true;• var y = false;


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


JS Numbers (cont’d)

• You can do common arithmetic like all programming languages


+ Addition– Subtraction* Multiplication

/ Division% Modulus

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\'.' ;


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?";


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”


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


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"];


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”!!!


JS Functions

• We define functions using the keyword “function”:• function output(){

console.log(“Hello!”);}output();


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);


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);


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();


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).


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.


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={}”.


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!”;}

}



• 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!”;}



• To return the values of properties or call the methods:• console.log(car.brand);

console.log(car.engineStart());


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!”;}

}


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.


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


• 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).



• 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


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


https://www.w3schools.com/jsref/jsref_obj_math.asp

https://www.w3schools.com/jsref/jsref_obj_date.asp

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


https://www.w3schools.com/jsref/jsref_obj_string.asp


• 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


https://www.w3schools.com/jsref/jsref_obj_array.asp


• 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


https://www.w3schools.com/jsref/jsref_obj_number.asp


• 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) );


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){

…}


Date post:	27-Jul-2020
Category:	Documents
Upload:	others
View:	1 times
Download:	0 times

SEEM4570 System Design and Implementationseem4570/2019/Lecture/lecture02.pdf · JS Programs...

Documents