Web Engineering
Muhammad Asim Siddique
1
Muhammad Asim Siddique, PUCIT
2
JavaScript
• JavaScript is the scripting language of the Web.
• JavaScript is used in mill...
Muhammad Asim Siddique, PUCIT
3
What is JavaScript?
• JavaScript was designed to add interactivity to HTML
pages
• JavaScr...
Muhammad Asim Siddique, PUCIT
4
Example
<html>
<body>
<script type="text/javascript">
document.write("This is my first Jav...
Muhammad Asim Siddique, PUCIT
5
How to Handle Simple Browsers
• Browsers that do not support JavaScript, will display
Java...
Muhammad Asim Siddique, PUCIT
6
Example
The two forward slashes at the end of comment line (//) is
the JavaScript comment ...
Muhammad Asim Siddique, PUCIT
7
What can a JavaScript do?
• JavaScript gives HTML designers a programming
tool
• JavaScrip...
Muhammad Asim Siddique, PUCIT
8
How To Use?
• <script> tag is used to insert a JavaScript into an
HTML page.
• Between <bo...
Muhammad Asim Siddique, PUCIT
9
How To Use (Cont.)?
• JavaScripts in the body section will be executed
WHILE the page load...
Muhammad Asim Siddique, PUCIT
10
JavaScript Statements
• JavaScript is case sensitive.
• Use of semicolon(;) in the end of...
Muhammad Asim
Siddique, PUCIT
11
JavaScript Comments
• Single line comments start with //.
• Multi line comments start wit...
Muhammad Asim
Siddique, PUCIT
12
JavaScript Variables
• JavaScript variables are used to hold values or
expressions.
x=5, ...
Muhammad Asim Siddique, PUCIT
13
JavaScript Variables
• Declaration
var x;
var carname;
• Assign Values
x=5;
carname=“Toyo...
Muhammad Asim Siddique, PUCIT
14
JavaScript Arithmetic Operators
• Y=5
Muhammad Asim Siddique, PUCIT
15
JavaScript Assignment Operators
• x = 5 and y=10
Muhammad Asim Siddique, PUCIT
16
+ Operator and Strings
• To add two or more string variables together, use
the + operator.
Muhammad Asim Siddique, PUCIT
17
Comparison Operators
Muhammad Asim
Siddique, PUCIT
18
Logical Operators
Muhammad Asim Siddique, PUCIT
19
If...Else Statements
• used to perform different actions based on different
conditions.
•...
Muhammad Asim Siddique, PUCIT
20
Example (If)
Muhammad Asim Siddique, PUCIT
21
Example (If...else)
Muhammad Asim Siddique, PUCIT
22
Example(If...else if...else)
Muhammad Asim Siddique, PUCIT
23
Switch Statement
• used to perform different actions based on
different conditions.
Muhammad Asim Siddique, PUCIT
24
Example (Switch)
Muhammad Asim Siddique, PUCIT
25
Popup Boxes
• Alert Box
alert(“Hello Every body!!");
• Confirm Box
confirm("Press a butto...
Muhammad Asim Siddique, PUCIT
26
Functions
• A function will be executed by an event or by a
call to the function.
Muhammad Asim Siddique, PUCIT
27
Example (Function)
Muhammad Asim
Siddique, PUCIT
28
JavaScript Loops
You want the same block of code to run over and
over again in a row. Ins...
Muhammad Asim Siddique, PUCIT
29
The for Loop
Muhammad Asim Siddique, PUCIT
30
While Loop
Muhammad Asim Siddique, PUCIT
31
The break Statement
• The break statement will break the loop and
continue executing the ...
Muhammad Asim Siddique, PUCIT
32
The continue Statement
• The continue statement will break the current
loop and continue ...
Muhammad Asim Siddique, PUCIT
33
JavaScript Events
• Events are actions that can be detected by
JavaScript.
• Examples of ...
Muhammad Asim Siddique, PUCIT
34
Events
• onLoad and onUnload
• onFocus, onBlur and onChange
• onSubmit
• onMouseOver and ...
Muhammad Asim
Siddique, PUCIT
35
JavaScript Objects
• JavaScript is an Object Oriented Programming
(OOP) language.
• An OO...
Muhammad Asim Siddique, PUCIT
36
JavaScript Objects and Properties
• Properties are the values associated with an
object.
Muhammad Asim Siddique, PUCIT
37
JavaScript String Object
• The String object is used to manipulate a stored
piece of text...
Muhammad Asim Siddique, PUCIT
38
JavaScript Date Object
• The Date object is used to work with dates and
times.
Muhammad Asim Siddique, PUCIT
39
Date Comparison
?
Muhammad Asim Siddique, PUCIT
40
JavaScript Array Object
• The Array object is used to store multiple values
in a single v...
Muhammad Asim Siddique, PUCIT
41
JavaScript Math Object
• The Math object allows you to perform
mathematical tasks.
Math.P...
Muhammad Asim Siddique, PUCIT
42
JavaScript Navigator Object
• The Navigator object allows you to
check/validate your Brow...
Upcoming SlideShare
Loading in...5
×

Java script

477

Published on

It is a leading step to php

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
477
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Java script

  1. 1. Web Engineering Muhammad Asim Siddique 1
  2. 2. Muhammad Asim Siddique, PUCIT 2 JavaScript • JavaScript is the scripting language of the Web. • JavaScript is used in millions of Web pages to add functionality, validate forms, detect browsers, and much more.
  3. 3. Muhammad Asim Siddique, PUCIT 3 What is JavaScript? • JavaScript was designed to add interactivity to HTML pages • JavaScript is a scripting language • A scripting language is a lightweight programming language • JavaScript is usually embedded directly into HTML pages • JavaScript is an interpreted language (means that scripts execute without preliminary compilation) • Everyone can use JavaScript without purchasing a license
  4. 4. Muhammad Asim Siddique, PUCIT 4 Example <html> <body> <script type="text/javascript"> document.write("This is my first JavaScript!"); </script> </body> </html>
  5. 5. Muhammad Asim Siddique, PUCIT 5 How to Handle Simple Browsers • Browsers that do not support JavaScript, will display JavaScript as page content. • The HTML comment tag should be used to "hide" the JavaScript. • Just add an HTML comment tag <!-- before the first JavaScript statement, and a --> (end of comment) after the last JavaScript statement.
  6. 6. Muhammad Asim Siddique, PUCIT 6 Example The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag.
  7. 7. Muhammad Asim Siddique, PUCIT 7 What can a JavaScript do? • JavaScript gives HTML designers a programming tool • JavaScript can put dynamic text into an HTML page JavaScript can react to events • JavaScript can read and write HTML elements • JavaScript can be used to validate data • JavaScript can be used to detect the visitor's browser • JavaScript can be used to create cookies
  8. 8. Muhammad Asim Siddique, PUCIT 8 How To Use? • <script> tag is used to insert a JavaScript into an HTML page. • Between <body> tag • Between <head> tag
  9. 9. Muhammad Asim Siddique, PUCIT 9 How To Use (Cont.)? • JavaScripts in the body section will be executed WHILE the page loads. • JavaScripts in the head section will be executed when CALLED.
  10. 10. Muhammad Asim Siddique, PUCIT 10 JavaScript Statements • JavaScript is case sensitive. • Use of semicolon(;) in the end of statement is optional. document.write("Hello"); document.write("Hello")
  11. 11. Muhammad Asim Siddique, PUCIT 11 JavaScript Comments • Single line comments start with //. • Multi line comments start with /* and end with */.
  12. 12. Muhammad Asim Siddique, PUCIT 12 JavaScript Variables • JavaScript variables are used to hold values or expressions. x=5, y=6, z=x+y Rules for JavaScript variable names: • Variable names are case sensitive (y and Y are two different variables) • Variable names must begin with a letter or the underscore character
  13. 13. Muhammad Asim Siddique, PUCIT 13 JavaScript Variables • Declaration var x; var carname; • Assign Values x=5; carname=“Toyota";
  14. 14. Muhammad Asim Siddique, PUCIT 14 JavaScript Arithmetic Operators • Y=5
  15. 15. Muhammad Asim Siddique, PUCIT 15 JavaScript Assignment Operators • x = 5 and y=10
  16. 16. Muhammad Asim Siddique, PUCIT 16 + Operator and Strings • To add two or more string variables together, use the + operator.
  17. 17. Muhammad Asim Siddique, PUCIT 17 Comparison Operators
  18. 18. Muhammad Asim Siddique, PUCIT 18 Logical Operators
  19. 19. Muhammad Asim Siddique, PUCIT 19 If...Else Statements • used to perform different actions based on different conditions. • if statement - use this statement to execute some code only if a specified condition is true • if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false • if...else if....else statement - use this statement to select one of many blocks of code to be executed • switch statement - use this statement to select one of many blocks of code to be executed
  20. 20. Muhammad Asim Siddique, PUCIT 20 Example (If)
  21. 21. Muhammad Asim Siddique, PUCIT 21 Example (If...else)
  22. 22. Muhammad Asim Siddique, PUCIT 22 Example(If...else if...else)
  23. 23. Muhammad Asim Siddique, PUCIT 23 Switch Statement • used to perform different actions based on different conditions.
  24. 24. Muhammad Asim Siddique, PUCIT 24 Example (Switch)
  25. 25. Muhammad Asim Siddique, PUCIT 25 Popup Boxes • Alert Box alert(“Hello Every body!!"); • Confirm Box confirm("Press a button"); • Prompt Box prompt(“Your name","")
  26. 26. Muhammad Asim Siddique, PUCIT 26 Functions • A function will be executed by an event or by a call to the function.
  27. 27. Muhammad Asim Siddique, PUCIT 27 Example (Function)
  28. 28. Muhammad Asim Siddique, PUCIT 28 JavaScript Loops You want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform a task like this. In JavaScript, there are two different kind of loops: • for - loops through a block of code a specified number of times • while - loops through a block of code while a specified condition is true
  29. 29. Muhammad Asim Siddique, PUCIT 29 The for Loop
  30. 30. Muhammad Asim Siddique, PUCIT 30 While Loop
  31. 31. Muhammad Asim Siddique, PUCIT 31 The break Statement • The break statement will break the loop and continue executing the code that follows after the loop (if any).
  32. 32. Muhammad Asim Siddique, PUCIT 32 The continue Statement • The continue statement will break the current loop and continue with the next value.
  33. 33. Muhammad Asim Siddique, PUCIT 33 JavaScript Events • Events are actions that can be detected by JavaScript. • Examples of events: A mouse click A web page or an image loading Mousing over a hot spot on the web page Selecting an input field in an HTML form Submitting an HTML form A keystroke
  34. 34. Muhammad Asim Siddique, PUCIT 34 Events • onLoad and onUnload • onFocus, onBlur and onChange • onSubmit • onMouseOver and onMouseOut
  35. 35. Muhammad Asim Siddique, PUCIT 35 JavaScript Objects • JavaScript is an Object Oriented Programming (OOP) language. • An OOP language allows you to define your own objects and make your own variable types. • We will start by looking at the built-in JavaScript objects.
  36. 36. Muhammad Asim Siddique, PUCIT 36 JavaScript Objects and Properties • Properties are the values associated with an object.
  37. 37. Muhammad Asim Siddique, PUCIT 37 JavaScript String Object • The String object is used to manipulate a stored piece of text. • Some String Methods search() toLowerCase() toUpperCase()
  38. 38. Muhammad Asim Siddique, PUCIT 38 JavaScript Date Object • The Date object is used to work with dates and times.
  39. 39. Muhammad Asim Siddique, PUCIT 39 Date Comparison ?
  40. 40. Muhammad Asim Siddique, PUCIT 40 JavaScript Array Object • The Array object is used to store multiple values in a single variable. • An array can be defined in three ways.
  41. 41. Muhammad Asim Siddique, PUCIT 41 JavaScript Math Object • The Math object allows you to perform mathematical tasks. Math.PI Math.E Math.sqrt(number) Math.round(4.7)
  42. 42. Muhammad Asim Siddique, PUCIT 42 JavaScript Navigator Object • The Navigator object allows you to check/validate your Browser. • Navigator.appName,; • Navigator.appVersion
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×