Javascript session 1

INTRO TO JAVASCRIPT
SESSION 12
Aptech Computer Education
Presented by Muhammad Ehtisham Siddiqui (BSCS)
1

Objectives
 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
2

CASE
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
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.

SCRIPTING
(BSCS)
4
 displays the need for scripting

Scripting
(BSCS)
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:

Intro to JavaScript
(BSCS)
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 its behavior through functions (actions).

Intro to JavaScript
(BSCS)
7
 Display the object

Client-side JavaScript
(BSCS)
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.

Server-side JavaScript
(BSCS)
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
generate the desired output.

Server-Side JavaScript
(BSCS)
10

<Script> Tag
(BSCS)
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

JavaScript Code
(BSCS)
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>

JavaScript Code
(BSCS)
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>

Variable
(BSCS)
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.

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”

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:
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
}

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>

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>

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

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

Prompt (Try Code)
22
<!DOCTYPE html>
<html>
<head>
<script>
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>

TASK
23
Take 2 input from user by prompt and display by
multiplying it.

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.

Event Handling
25

Event Handling
26

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

Some events
28
Events Description
onmousedo
wn
Occurs when the mouse button is pressed
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
ve
Occurs when the mouse pointer is moved from one location to
other
onmouseove
r
Occurs when the mouse pointer is moved over the element
onmouseout Occurs when the mouse pointer is moved out of the element

Some events
29
Events Description
onmousedo
wn
Occurs when the mouse button is pressed
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
ve
Occurs when the mouse pointer is moved from one location to
other
onmouseove
r
Occurs when the mouse pointer is moved over the element
onmouseout Occurs when the mouse pointer is moved out of the element

External JavaScript
30
 Scripts can also be placed in external files:
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button"
onclick="myFunction()">Try
it</button>
<p>(myFunction is stored in an
external file called "myScript.js")</p>
<script src="myScript.js"></script>
</body></html>
HTML File
myScript.js
document.getElement
ById("demo").innerHTM
L = "Paragraph
changed.";
}

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>

Questions?
32

Javascript session 1

Recommended

More Related Content

Similar to Javascript session 1 (20)

More from Muhammad Ehtisham Siddiqui (20)

Recently uploaded (20)

Javascript session 1

Editor's Notes