Scribd
Upload
25 views17 pages

Mirpur University of Science and Technology: Deparment Software Engineering

This document discusses a lecture on client-side scripting using JavaScript. The lecture covers JavaScript language basics like variables, operators, functions, conditions and loops. It also discusses how to use JavaScript dialog boxes and the HTML Document Object Model (DOM) to manipulate web pages. The key topics covered are JavaScript syntax and programming, integrating JavaScript into HTML, and using the DOM to select and modify HTML elements.

Uploaded by

ahsan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views17 pages

Mirpur University of Science and Technology: Deparment Software Engineering

This document discusses a lecture on client-side scripting using JavaScript. The lecture covers JavaScript language basics like variables, operators, functions, conditions and loops. It also discusses how to use JavaScript dialog boxes and the HTML Document Object Model (DOM) to manipulate web pages. The key topics covered are JavaScript syntax and programming, integrating JavaScript into HTML, and using the DOM to select and modify HTML elements.

Uploaded by

ahsan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

MIRPUR UNIVERSITY OF SCIENCE AND TECHNOLOGY

DEPARMENT OF SOFTWARE ENGINEERING


Client-side Scripting – JavaScript
(lecture # 11)

Engr. Muhammad Raees


(Lecturer)

Date: April 23, 2020


LECTURE CONTENTS

• JavaScript
• Language Basics, Variables, operators, input, output, functions, conditions, loops
• Dialog boxes in JavaScript
• HTML Document Object Model (DOM)

Web Design & Development 3


JavaScript

• A client-side scripting (and interpreted) language for interactivity with HTML pages
• It is used in Web to improve the design, validate forms, create cookies, and much more
• There is a free license for JavaScript and it is the most popular scripting language on
the internet, and works in all major browsers, such as Internet Explorer, Mozilla,
Firefox, Netscape, Opera
• There are two methods to embed JavaScript in to HTML code
• Internal Script
• Directly written in HTML code
• External Script
• Written in separate file
• <script> tag is used to tell the browser that a script follows

Web Design & Development


Internal Scripts
• The <SCRIPT> tag is used to embed JavaScript code in HTML documents
• JavaScript can be placed anywhere between <HTML> and </HTML> tags
• Two possibilities are the
• <HEAD>…</HEAD>
• <BODY>…</BODY>

• <HTML>
• <HEAD><TITLE>Using Multiple scripts</TITLE>
• <SCRIPT LANGUAGE="JavaScript">
• [JavaScript statements...]
<H1>This is another script</H1>
• </SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
• <SCRIPT LANGUAGE="JavaScript">
[JavaScript statements...]
• [JavaScript statements...] </SCRIPT>
• </SCRIPT> </BODY></HTML>
• </HEAD>
• <BODY>

Web Design & Development 5


External Scripts

• SRC attribute of the <SCRIPT> is used to include the external JavaScript file in
HTML
• <script src="myscripts.js"> </script>

• Program that execute on client side ,by the web browser instead of server side
• Upon request, the necessary files are sent to the user's computer by the web server
on which they reside.
• Allow for interactivity by immediately responding to user actions.
• Execute quickly because they don't require a trip to the server.

Web Design & Development 6


Conventions

• Using the Semicolon


• document.write("Hello");
• Case Sensitivity
• Comments:
• single line //
• Multiple lines /* */
• Using Quotes
• Quotes
• document.write(“<font color=“red”>Hello World</font>”)
• document.write(“<font color=‘red’>Hello World</font>”)

7
Web Design & Development
Variables and Operators
• Variables
• There are four common data types in JavaScript
• Numbers, strings, Boolean, null values
• JavaScript is a loosely typed language
• The word “var” is used to declare a variable
• var LastName = “Smith”; var AccountNumber = 1111
• First character can not be a digit
• Other characters may be digits, letters or underscore
• Operators
• Assignment Operator: =
• Arithmetic Operators: +, - , *, /, %, ++, --
• Logical Operators: &&, ||, !
• Comparison Operators: ==, ===, !=, !==, <, >, <=, >=
8
Web Design & Development
Functions, Input and Output
• Functions are defined using the keyword function, followed by the name of the
function and list of parameters
• function functionName([parameters])
•{
• [statements]
•}
• Some common predefined
• Calling a function math functions
• functionName([arguments]) Math.sqrt
Math.pow
Math.abs
• write(); is used to write on browser Math.max
• document.write(“hello world”) Math.min
Math.floor
• prompt(); is used to take input from users Math.ceil
• var num = prompt(“Please Enter a Number”, 0) Math.round
Math.random
9
Web Design & Development
Conditions and Loops
• For loop
• If statement
• for(var i=1; i<10; i++)
• if(condition)
• {
• { statements }
• Document.write(“hello world”)
• If-else statement
• }
• if(condition)
• While loop (do while)
• {statement}
• While(condition)
• else
•{
• {statements}
• }

10
Web Design & Development
JavaScript Dialogs
• JavaScript provides the ability to pickup user input or display small amounts of text to the
user by using dialog boxes
• An alert box is simply a small message box that pops up and gives the user some
information
• Used to give a warning message to the users
• When an alert box pops up, the user will have to click "OK" to proceed
• Syntax:
• alert(“message”)
• A prompt box is often used if you want the user to input a value before entering a page
• User will have to click either "OK" or "Cancel" to proceed after entering an input
value
• A confirm box is often used if you want the user to verify or accept something
• User will have to click either "OK" or "Cancel" to proceed
11
Web Design & Development
Dialogs

Web Design & Development 12


Window Object

• Main entry point to all client-side JS features and APIs


• Represents a web browser window or frame
• Referred to with the identifier window
• It is the global object, and can be omitted
• Defines properties like:
• location (URL currently displayed)
• Ex: window.location = ”http://medtech.tn/”
• navigates to the website of the institute
• alert() : displays a message in a dialog box
• setTimeout(): registers a function to be invoked after a specific amount of
time
• document: represents the content displayed in the window

Web Design & Development 13


Document Object Model – DOM

• Once html element are rendered in the browser window, browser can not
recognize them, JavaScript enabled browsers do this using DOM
• The HTML DOM is a standard object model and programming interface for
HTML.
• All HTML elements, along with their properties, methods and events can be
accessed through the DOM
• The HTML DOM is a standard for how to get, change, add, or delete HTML
elements.

Web Design & Development 14


DOM
• The HTML DOM can be thought of as a hierarchy moving from the most general
object to the most specific
Window

Navigator Document History Location

Forms[ ] Images[] links[] anchors[]


Array of forms Array of images Array of links Array of anchors
element of
Element[ ]

Textboxes

select list
buttons
Array of

Options[]
forms

Reset
files

li

15
Web Design & Development
References

• Chapter 11, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett,


Wiley Publishing; 2009, ISBN: 978-0-470-54070-1.

Web Design & Development 16


THANKS

You might also like