1

INTRO TO JAVASCRIPT
SESSION 12

Aptech Computer Education

Presented by Muhammad Ehtisham Siddiqui (BSCS)
 Objectives
2

 Explain scripting
 Explain the JavaScript language
 Explain the client-side and server-side JavaScript
 List the variables and data types in JavaScript
 Describe the JavaScript methods to display
information
 Explain escape sequences and built in functions in
JavaScript
 Explain events and event handling
 Explain jQuery
 Describe how to use the jQuery Mobile
Presented by Muhammad Ehtisham Siddiqui (BSCS)
 CASE
3

CASE:
Consider an organization that provides a Web site that allows its customers to view
their products. The company has received frequent customer feedbacks to provide
the shopping facility online. Therefore, the company has decided to add the
shopping facility in their Web site by creating dynamic Web pages. These Web
pages will allow the user to shop for the products online. Here, the main task of the
developer is to validate the customer’s inputs while they shop online. For example,
details such as credit card number, email, and phone number entered by the
customer must be in a proper format. Further, the developer also needs to retrieve
the chosen products and their quantity to calculate the total cost.
SOLUTION
The developer can handle all these critical tasks by using a scripting language. A
scripting language refers to a set of instructions that provides some functionality
when the user interacts with a Web page.

Presented by Muhammad Ehtisham Siddiqui

(BSCS)
 SCRIPTING
4

 displays the need for scripting

Presented by Muhammad Ehtisham Siddiqui

(BSCS)
 Scripting
5

 Scripting refers to a series of commands that are interpreted and executed

sequentially and immediately on occurrence of an event.
 This event is an action generated by a user while interacting with a Web page.
 Examples of events include button clicks, selecting a product from a menu, and so
on.

 Scripting languages are often embedded in the HTML pages to change the behavior
of the Web pages according to the user’s requirements.

 There are two types of scripting languages. They are as follows:

Presented by Muhammad Ehtisham Siddiqui

(BSCS)
 Intro to JavaScript
6

 JavaScript is a scripting language that allows you to build dynamic Web pages
by ensuring maximum user interactivity.

 JavaScript language is an object-based language, which means that it

provides objects for specifying functionalities.

 In real life, an object is a visible entity such as a car or a table. Every object
has some characteristics and is capable of performing certain actions.

 Similarly, in a scripting language, an object has a unique identity, state, and

behavior.

 The identity of the object distinguishes it from the other objects of the same
type. The state of the object refers to its characteristics, whereas the behavior
of the object consists of its possible actions.

 The object stores its identity and state in fields (also called variables) and
exposes
Presented its behavior
by Muhammad Ehtishamthrough
Siddiqui functions (actions).
(BSCS)
 Intro to JavaScript
7

 Display the object

Presented by Muhammad Ehtisham Siddiqui

(BSCS)
 Client-side JavaScript
8

 JavaScript is a scripting language, which can be executed on the client-side

and on the
server-side.

 A client-side JavaScript (CSJS) is executed by the browser on the user’s

workstation.

 A client-side script might contain instructions for the browser to handle

user interactivity.
 . Examples include displaying a welcome page with the username,
displaying date and time, validating that the required user details are filled,
and so on.

Presented by Muhammad Ehtisham Siddiqui

(BSCS)
 Server-side JavaScript
9

 A server-side JavaScript (SSJS) is executed by the Web server when an HTML page
is requested by a user.

 The output of a server-side JavaScript is sent to the user and is displayed by the
browser.

 .In this case, a user might not be aware that a script was executed on the server to
produce the desirable output.
 Suppose, if the browser does not support the <video> element then the content
between the start tag and end tag is displayed on the browser.

 A server-side JavaScript can interact with the database, fetch the required
information specific to the user, and display it to the user. This means that server-
side scripting fulfills the goal of providing dynamic content in Web pages. Unlike
client-side JavaScript, HTML pages using server-side JavaScript are compiled into
bytecode files on the server. Compilation is a process of converting the code into
machine-independent code. This machine-independent code is known as the
bytecode, which is an executable file. The Web server runs this executable to
Presented by Muhammad
generate Ehtisham
the desired Siddiqui
output.
(BSCS)
 Server-Side JavaScript
10

Presented by Muhammad Ehtisham Siddiqui

(BSCS)
 <Script> Tag
11

 The <script> tag defines a script for an HTML page to make them interactive

 The browser that supports scripts interprets and executes the script specified under
the <script> tag when the page loads in the browser.

 You can directly insert a JavaScript code under the <script> tag. You can define
multiple <script> tags either in the <head> or in the <body> elements of an HTML
page.

 In HTML5, the type attribute specifying the scripting language is no longer required
as it is optional.

 There are two main purposes of the <script> tag, which are as follows:
 Identifies a given segment of script in the HTML page
 Loads an external script file

Presented by Muhammad Ehtisham Siddiqui

(BSCS)
 JavaScript Code
12

 <!DOCTYPE html>
 <html>
 <head>
 <script>
 document.write(“Welcome to the Digital World”);
 </script>
 </head>
 <body>
 <h1>This is First JavaScript Code</h1>
 </body>
 </html>

Presented by Muhammad Ehtisham Siddiqui

(BSCS)
 JavaScript Code
13

<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>

Presented by Muhammad Ehtisham Siddiqui

(BSCS)
 Variable
14

 A variable refers to a symbolic name that holds a value, which keeps changing.

 For example, age of a student and salary of an employee can be treated as

variables.

 A real life example for variables includes the variables used in algebraic
expressions that store values.

 You can do variable initialization at the time of variablecreation or at a later point in

time when you need that variable.

Presented by Muhammad Ehtisham Siddiqui

(BSCS)
 Declaring Varibles
15

 The syntax demonstrates how to declare variables in

JavaScript.
 Syntax
<variableName> = <value>;
where, =: Is the assignment operator used to assign values.
 Code:
var studID;
var studName;
studID = 50;
StudName = “David Fernando”

Presented by Muhammad Ehtisham Siddiqui (BSCS)

 Methods
16

 JavaScript allows you to display information using the methods

of the document object.
 The document object is a predefined object in JavaScript, which
represents the HTML page and allow managing the page
dynamically.
 Each object in JavaScript consists of methods, which fulfills a
specific task.
 There are two methods of the document object, which displays
any type of data in the browser. These methods are as follows:
 write(): Displays any type of data.
 writeln(): Displays any type of data and appends a new line
character.
 SYNTAX:
Presented by Muhammad Ehtisham Siddiqui (BSCS)
document.write(“<data>” + variables);
 Functions
17

 A JavaScript function is a block of code designed to

perform a particular task.
 A JavaScript function is executed when "something"
invokes it (calls it).
 A JavaScript function is defined with
the function keyword, followed by a name, followed by
parentheses ().
 Syntax:
function name(parameter1, parameter2, parameter3) {
code to be executed
}

Presented by Muhammad Ehtisham Siddiqui (BSCS)

 Functions Code
18

<!DOCTYPE html>
<html><head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed.";
}
</script>
</head>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

Presented by Muhammad Ehtisham Siddiqui (BSCS)

 Functions Code (Change CSS)
19

<!DOCTYPE html>
<html><head>
<script>
function ChangeCss(){
document.getElementById("JCss").style.backgroundColor="Red";
}
</script></head>
<body>
<h1>A Web Page</h1>
<p id="demo">This is Iran</p>
<p id="JCss">This is Pakistan</p>
<button id="btn" onClick="myFunction()">Check Function</button>
<button id="btn" onClick="ChangeCss()">Change Css</button>
</body>
</html>

Presented by Muhammad Ehtisham Siddiqui (BSCS)

 Built-in Functions
20

Functions Description Example

alert() Displays a dialog box with some alert(“Please fill all the fields
information and OK button of the form”); Displays a
message box with the
instruction
confirm() Displays a dialog box with OK and confirm(“Are you sure you
Cancel buttons. It verifies an action, want to close the page?”);
which a user wants to perform Displays a message box with
the question
parseInt() Converts a string value into a numeric parseInt(“25 years”);
value
prompt() Displays a dialog box that accepts an prompt(“Enter your name”,
input value through a text box. It also “Name”); Displays the
accepts the default value for the text box. message in the dialog box
and Name in the text box.
eval() Evaluates an expression and returns the eval(“2+2”); Returns 4
evaluated result
Presented by Muhammad Ehtisham Siddiqui (BSCS)
 Alert (Try Code)
21

<!DOCTYPE html>
<html>
<head><title>JS Alert</title>
<script>
function myFunction() {
alert("You have created alert box");
}
</script></head>
<body>
<h2>JavaScript Alert</h2>
<button onclick="myFunction()">Try it</button>
</body>
</html>

Presented by Muhammad Ehtisham Siddiqui (BSCS)

 Prompt (Try Code)
22

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var person = prompt("Please enter your name", "Harry Potter");
if (person != null) {
document.getElementById("demo").innerHTML =
"Hello " + person + "! How are you today?"; }}
</script>
</head>
<body>
<p>Click the button to demonstrate the prompt box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
</body>
</html>

Presented by Muhammad Ehtisham Siddiqui (BSCS)

 TASK
23

Take 2 input from user by prompt and display by

multiplying it.

Presented by Muhammad Ehtisham Siddiqui (BSCS)

 Event Handling
24

 Event handling is a process of specifying actions to be performed

when an event occurs.
 This is done by using an event handler.
 An event handler is a scripting code or a function that defines the
actions to be performed when the event is triggered.
 When an event occurs, an event handler function that is associated
with the specific event is invoked.
 The information about this generated event is updated on the event
object.
 It specifies the event state, which includes information such as the
location of mouse cursor, element on which an event occurred, and
state of the keys in a keyboard.

Presented by Muhammad Ehtisham Siddiqui (BSCS)

 Event Handling
25

Presented by Muhammad Ehtisham Siddiqui (BSCS)

 Event Handling
26

Presented by Muhammad Ehtisham Siddiqui (BSCS)

 Event Handling Life Cycle
27

The event
The event
The event bubbling
The user handler is
object is occurs as the
performs an The event is invoked that
updated to event bubbles
action to raise fired. performs the
determine the through the
an event. specified
event state. elements of
actions.
the hierarchy.

Presented by Muhammad Ehtisham Siddiqui (BSCS)

 Some events
28

Events Description
onmousedo Occurs when the mouse button is pressed
wn
onmouseup Occurs when the mouse button is released
onclick Occurs when the mouse button is pressed and release
ondblclick Occurs when the mouse button is double-clicked
onmousemo Occurs when the mouse pointer is moved from one location to
ve other
onmouseove Occurs when the mouse pointer is moved over the element
r
onmouseout Occurs when the mouse pointer is moved out of the element

Presented by Muhammad Ehtisham Siddiqui (BSCS)

 Some events
29

Events Description
onmousedo Occurs when the mouse button is pressed
wn
onmouseup Occurs when the mouse button is released
onclick Occurs when the mouse button is pressed and release
ondblclick Occurs when the mouse button is double-clicked
onmousemo Occurs when the mouse pointer is moved from one location to
ve other
onmouseove Occurs when the mouse pointer is moved over the element
r
onmouseout Occurs when the mouse pointer is moved out of the element

Presented by Muhammad Ehtisham Siddiqui (BSCS)

 External JavaScript
30

 Scripts can also be placed in external files:

myScript.js
<!DOCTYPE html>
<html>
function myFunction() {
<body>
<h2>External JavaScript</h2> document.getElement
<p id="demo">A Paragraph.</p> ById("demo").innerHTM
<button type="button" L = "Paragraph
onclick="myFunction()">Try changed.";
it</button> }

<p>(myFunction is stored in an
external file called "myScript.js")</p>
<script src="myScript.js"></script>
</body></html>

Presented byHTML File Ehtisham Siddiqui (BSCS)

Muhammad
 External JavaScript
31

 External scripts are practical when the same code is used in many different web
pages.
 JavaScript files have the file extension .js.
 To use an external script, put the name of the script file in the src (source) attribute of
a <script> tag.

 External JavaScript Advantages:

1. It separates HTML and code
2. It makes HTML and JavaScript easier to read and maintain
3. Cached JavaScript files can speed up page loads

 To add several script files to one page - use several script tags:
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

Presented by Muhammad Ehtisham Siddiqui (BSCS)

 Questions?
32

Presented by Muhammad Ehtisham Siddiqui (BSCS)