Professional Documents
Culture Documents
• JavaScript
• Language Basics, Variables, operators, input, output, functions, conditions, loops
• Dialog boxes in JavaScript
• HTML Document Object Model (DOM)
Web Engineering 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 Engineering
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 Engineering 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 Engineering 6
Conventions
7
Web Engineering
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 Engineering
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 Engineering
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 Engineering
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 Engineering
Dialogs
Web Engineering 12
Window Object
Web Engineering 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 Engineering 14
DOM
• The HTML DOM can be thought of as a hierarchy moving from the most general
object to the most specific
Window
Textboxes
select list
buttons
Array of
Options[]
forms
Reset
files
li
15
Web Engineering
References
Web Engineering 16
THANKS