Javascript 01 fundamentals

Comparison Operators Assume variable A holds 10 and variable B holds 20 Operator Description == Equal Checks if the value of two operands are equal or not, if yes, then the condition be

Fundamentals

1 Why JavaScript?

 JavaScript is a lightweight, interpreted programming

language It is designed for creating network-centric

applications JavaScript is very easy to implement because it

is integrated with HTML It is open and cross-platform

 Applications of JavaScript Programming

– Client side validation

– Manipulating HTML Pages

– User Notifications (pop-up)

– Back-end Data Loading (Ajax)

– Presentations (animation, effect)

– Server Applications (NodeJS)

 JavaScript frameworks: Angular, React, jQuery, Vue.js, Ext.js, Ember.js, Meteor, Mithril, Node.js, Polymer, Aurelia,

Backbone.js

2 JavaScript Versions

3 Server-Side & Client-Side Programming

 Server-side programming: the program code is run from the server hosting the website

 Client-side programming: programs are run on the user’s computer using scripts that are downloaded along with the HTML and CSS files.

4 Introducing JavaScript

 JavaScript is an interpreted language, meaning that the

program code is executed directly without requiring an

application known as a compiler to translate the code into

machine language

 You need only two things to use JavaScript: a text editor to write the JavaScript code and a browser to run the

commands

 JavaScript code can be inserted directly into an HTML file, or

it can be placed in a separate text file that is linked to the

HTML file

Inserting the script Element

 To link a web page to an external script file, add the following script element to the HTML file

<script src="url"></script>

 To embed a script within the HTML file, add the following

Loading HTML & JavaScript code

5 Placement in HTML File

6 Debugging Your Code

 Press F12 or Right click then select “Inspect” to show developer tools

7 The Basics

7.1 Syntax

7.2 Variables

7.3 Operators

7.2 Variables

 Datatypes

– Numbers: 123, 120.50,

– Strings: "This text string",

– Booleans: true or false.

– Objects: {firstName:"John", lastName:"Doe", age:50}

– Arrays: ["Saab", "Volvo", "BMW"]

– null or undefined

 Variable Names

– Should not use any of the JavaScript reserved keywords as a variable name ex break or boolean variable names are not valid.

– Should not start with a numeral (0-9) They must begin with a letter or

an underscore character ex 123test is an invalid variable name but

_123test is a valid one.

– Variable names are case-sensitive ex Name and name are two

different variables

7.3 Operators

7.3.1 Arithmetic Operators7.3.2 Comparison Operators7.3.3 Logical Operators

7.3.4 Assignment Operators7.3.5 Ternary Operator

7.3.6 typeof Operator

7.3.2 Comparison Operators

 Assume variable A holds 10 and variable B holds 20

Operator Description

==

(Equal) Checks if the value of two operands are equal or not, if yes, then the condition becomes true.

Ex: (A == B) is not true.

!=

(Not Equal) Checks if the value of two operands are equal or not, if the values are not equal, then the condition becomes true.

Ex: (A != B) is true.

>

(Greater than) Checks if the value of the left operand is greater than the value of the right operand, if yes, then the condition becomes true.

Ex: (A > B) is not true

Checks if the value of the left operand is less than or equal to the value

of the right operand, if yes, then the condition becomes true.

Ex: (A <= B) is true.

7.3.3 Logical Operators

 Assume variable A holds 10 and variable B holds 20

Operator Description

&&

(Logical AND) If both the operands are non-zero, then the condition becomes true.

Ex: (A && B) is true.

||

(Logical OR) If any of the two operands are non-zero, then the condition becomes true.

Ex: (A || B) is true.

!

(Logical NOT) Reverses the logical state of its operand If a condition is true, then the Logical NOT operator will make it false.

Ex: ! (A && B) is false.

8 Conditional Statements

8.1 if else Statement

8.2 Switch Case

8.2 Switch Case

 Use a switch statement which handles multiple if else if statements

 Syntax

9.1 While Loop

 while loop is to execute a statement or code block repeatedly as long as an expression is true Once the expression becomes false, the loop terminates

 Syntax

9.2 do…While Loop

 The do while loop is

similar to the while loop

except that the condition

check happens at the end

of the loop This means

that the loop will always be

executed at least once,

even if the condition is

false

 Syntax

– The test statement: test if a

given condition is true or not.

• True: the code given inside will

be executed.

• False: stop the loop.

– The iteration statement:

increase or decrease the

counter.

 Syntax

9.5 Loop Control

 break Statement is used to exit a loop early

 continue Statement tells the interpreter to immediately start the next iteration of the loop and skip the remaining code block

10 Functions

10.1 Function Definition10.2 Calling a Function

10.3 Function Parameters10.4 The return Statement

10.1 Function Definition

 The most common way to define a function in JavaScript is by using the function keyword, followed by a unique function

name, a list of parameters (that might be empty), and a

statement block surrounded by curly braces

 Syntax

10.3 Function Parameters

 A function can take one or many parameters separated by comma

10.4 The return Statement

 A JavaScript function can have an optional return statement This is required if you want to return a value from a function

11 Running Timed Commands

 Two ways to update the current time and the remaining time constantly

– Time-delayed commands

– Timed-interval commands

11.1 Working with Time-Delayed

Commands

 Time-delayed command - run after a specified amount of

time has passed

 Time delay is defined using the following:

setTimeout(“command”, delay);

delay is the delay time in milliseconds before a browser runs the command

 The command must be placed within either double or single quotation marks

 To cancel a time-delayed command:

11.2 Running Commands at

Specified Intervals

 A timed-interval command instructs browsers to run a

command repeatedly at a specified interval

 Timed-interval command syntax:

setInterval("command", interval);

where interval is the interval in milliseconds before

the command is run again

 Timed-interval commands are halted using the following

statement:

clearInterval();

 Distinguish one timed-interval command from another by storing the time ID in a variable

var timeID = setInterval("command", interval);

 Halt the timed-interval command by applying the

clearInterval() method with

timeID as the parameter value:

clearInterval(timeID);

THE END