Upload
moatazhesham
View
195
Download
2
Embed Size (px)
Citation preview
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 ?