MSTCCU'16 - Aspiration Webbers - Session 4 - intro. to JS

Aspiration Webbers

Workshop

Session # 4

Prepared & Presented By:

Moataz Hesham Gamal El-Din

MSTC’16

Introduction to JavaScript

Agenda• Revision

• JavaScript Syntax• Let’s try

• JavaScript Display Possibilities

Revision

Revision• HTML , CSS and JavaScript

What is

When to use JavaScript ? Why JavaScript ?

Where to Write JavaScript ?

?

• JavaScript:

Where to write JavaScript ?

Where to …… ? • HTML file : - i.e. <script > window. alert(“Hello JS");

</script>

• External:- i.e. file.js<script type="text/JavaScript" src=“file.js"> </script>

JavaScript Display Possibilities

JavaScript Display Possibilities

• Alert box : • Window.alert() ;

• HTML output: • document.write() ;

• HTML Element : • doucment.getElementById(“”).innerHTML = value ;

• Browser console : • Console.log();

JavaScript Syntax

Variables

<script>

var variable_name ;//ORvariable_name ;

</script>

Data Types• String :

<script>var name = ”Moataz” ;

</script>• number:

<script>var salary= 1250;

</script>• boolean:

<script>var discount= true;var discount= false;

</script>

Data Types• array:

<script>var cars= [ ”BMW”, ”Mercedes” ,

”Fiat” ];</script>• object: <script>

var person = { firstname : “Moataz“, lastname : “Hesham",

age : 21};

</script>

Conditions

JavaScript If...Else Statements• The if Statement :

if (condition) {    block of code to be executed if the

condition is true}

• Example:if (weather < 5){

document.write(“the weather is cold”);}

JavaScript If...Else Statements• The else Statement :

if (weather < 5){document.write(“the weather is

cold”);} else {

document.write(“the weather is fine”);}

JavaScript If...Else Statements• The else if Statement :

if (weather < 20){document.write(“the weather is

cold”);} else if (weather >30 ){

document.write(“the weather is hot”);}else {

document.write(“the weather is fine”);}

JavaScript If...Else Statements• General rule :

if (condition1) {    block of code to be executed if

condition1 is true} else if (condition2) {

    block of code to be executed if the condition1 is false and condition2 is true

} else {    block of code to be executed if the

condition1 is false and condition2 is false}

Operators

Arithmetic Operators

Logical Operators

Comparison Operators• Assume X = 10

Loops

Loops

Loops

• Different Ways :

1-for loop

2-while 3-do while

4-for/in loop

for loop

For syntax : for ( start ; condition ; change start value ){

// code}

for loopExample :

while loop

while syntax : while (condition){

// code}

while loopExample :

Functions

Functions

functions

• Function syntax :

function sum ( x , y ){ var result = x + y ;

document.write(result) ; }

Code Block

Function name

parameters

functions

• Function syntax :

function sum ( x , y ){ var result = x + y ;

return result ; }

Code Block

Function name

parameters

How to use functions

Answer :

1 - Call function.

2 - User event.

Call functions

Call functions

User event

LET’s Try !

Any Questions ?

/moataz.hesham.5

Contact Me:

moatazhesham2014@hotmail.com