Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
90 views

Javascript: 4/24/2019 1 Hassan Khan

JavaScript is a scripting language used to add interactivity to HTML pages. It allows dynamic text, reactions to events, and reading/writing HTML elements. JavaScript code is embedded directly into HTML and is executed without compilation. Common uses include form validation, detecting browsers, and adding basic interactivity. Key concepts include variables, operators, conditional statements, functions, loops, and objects.

Uploaded by

Syed Faiq Freelancer
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
90 views

Javascript: 4/24/2019 1 Hassan Khan

JavaScript is a scripting language used to add interactivity to HTML pages. It allows dynamic text, reactions to events, and reading/writing HTML elements. JavaScript code is embedded directly into HTML and is executed without compilation. Common uses include form validation, detecting browsers, and adding basic interactivity. Key concepts include variables, operators, conditional statements, functions, loops, and objects.

Uploaded by

Syed Faiq Freelancer
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

4/24/2019

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.

4/24/2019 Hassan Khan 1

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/24/2019 Hassan Khan 2

1
4/24/2019

Example

<html>
<body>

<script type="text/javascript">
document.write("This is my first JavaScript!");
</script>

</body>
</html>

4/24/2019 Hassan Khan 3

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.

4/24/2019 Hassan Khan 4

2
4/24/2019

Example

The two forward slashes at the end of comment line (//) is


the JavaScript comment symbol. This prevents
JavaScript from executing the --> tag.

4/24/2019 Hassan Khan 5

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

4/24/2019 Hassan Khan 6

3
4/24/2019

How To Use?

 <script> tag is used to insert a JavaScript into


an HTML page.

 Between <body> tag

 Between <head> tag

4/24/2019 Hassan Khan 7

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.

4/24/2019 Hassan Khan 8

4
4/24/2019

JavaScript Statements

 JavaScript is case sensitive.


 Use of semicolon(;) in the end of statement is
optional.

document.write("Hello");

document.write("Hello")

4/24/2019 Hassan Khan 9

JavaScript Comments

 Single line comments start with //.

 Multi line comments start with /* and end with


*/.

4/24/2019 Hassan Khan 10

5
4/24/2019

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

4/24/2019 Hassan Khan 11

JavaScript Variables

 Declaration
var x;
var carname;

 Assign Values
x=5;
carname=“Toyota";

4/24/2019 Hassan Khan 12

6
4/24/2019

JavaScript Arithmetic Operators

 Y=5

4/24/2019 Hassan Khan 13

JavaScript Assignment Operators

 x = 5 and y=10

4/24/2019 Hassan Khan 14

7
4/24/2019

+ Operator and Strings

 To add two or more string variables together,


use the + operator.

4/24/2019 Hassan Khan 15

Comparison Operators

4/24/2019 Hassan Khan 16

8
4/24/2019

Logical Operators

4/24/2019 Hassan Khan 17

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
4/24/2019 Hassan Khan 18

9
4/24/2019

Example (If)

4/24/2019 Hassan Khan 19

Example (If...else)

4/24/2019 Hassan Khan 20

10
4/24/2019

Example(If...else if...else)

4/24/2019 Hassan Khan 21

Switch Statement

 used to perform different actions based on


different conditions.

4/24/2019 Hassan Khan 22

11
4/24/2019

Example (Switch)

4/24/2019 Hassan Khan 23

Popup Boxes

 Alert Box
alert(“Hello Every Body");

 Confirm Box
confirm(“Press a button");

 Prompt Box
prompt("Your name","")
Hassan Khan
4/24/2019 24

12
4/24/2019

Functions

 A function will be executed by an event or by


a call to the function.

4/24/2019 Hassan Khan 25

Example (Function)

4/24/2019 Hassan Khan 26

13
4/24/2019

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

4/24/2019 Hassan Khan 27

The for Loop

4/24/2019 Hassan Khan 28

14
4/24/2019

While Loop

4/24/2019 Hassan Khan 29

The break Statement


 The break statement will break the loop and
continue executing the code that follows after
the loop (if any).

4/24/2019 Hassan Khan 30

15
4/24/2019

The continue Statement


 The continue statement will break the current
loop and continue with the next value.

4/24/2019 Hassan Khan 31

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

4/24/2019 Hassan Khan 32

16
4/24/2019

Events

 onLoad and onUnload


 onFocus, onBlur and onChange
 onSubmit
 onMouseOver and onMouseOut

4/24/2019 Hassan Khan 33

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.

4/24/2019 Hassan Khan 34

17
4/24/2019

JavaScript Objects and Properties

 Properties are the values associated with an


object.

4/24/2019 Hassan Khan 35

JavaScript String Object

 The String object is used to manipulate a


stored piece of text.
 Some String Methods

search()
toLowerCase()
toUpperCase()

4/24/2019 Hassan Khan 36

18
4/24/2019

JavaScript Date Object

 The Date object is used to work with dates


and times.

4/24/2019 Hassan Khan 37

Date Comparison

4/24/2019 Hassan Khan 38

19
4/24/2019

JavaScript Array Object


 The Array object is used to store multiple
values in a single variable.
 An array can be defined in three ways.

4/24/2019 Hassan Khan 39

JavaScript Math Object


 The Math object allows you to perform
mathematical tasks.

Math.PI
Math.E

Math.sqrt(number)
Math.round(4.7)

4/24/2019 Hassan Khan 40

20
4/24/2019

JavaScript Navigator Object

 The Navigator object allows you to


check/validate your Browser.

 Navigator.appName;
 Navigator.appVersion

4/24/2019 Hassan Khan 41

21

You might also like