Web Engineering (CS-666)
Lecture # 3: JavaScript Introduction
Summiya Alam
Lecture Outline
• What is JavaScript?
• Embedding JavaScript with HTML
• JavaScript conventions
• Variables in JavaScript
• JavaScript operators
• Input output in JavaScript
• JavaScript functions
• Conditional Statements
• Looping Statements
Client-side Programing
PHP already allows us to create dynamic web pages. Why also use client-side scripting? client-side
scripting (JavaScript) benefits:
usability: can modify a page without having to post back to the server (faster UI)
efficiency: can make small, quick changes to page without waiting for server
event-driven: can respond to user actions like clicks and key presses
JavaScript
A lightweight programming language ("scripting language")
used to make web pages interactive
insert dynamic text into HTML (ex: user name)
JavaScript can read and write HTML elements
react to events (ex: page load user click)
get information about a user's computer (ex: browser type)
perform calculations on user's computer (ex: form validation)
JavaScript can be used to create cookies
NOT related to Java other than by name and some syntactic similarities
JavaScript vs. Java
interpreted, not compiled
more relaxed syntax and rules
fewer and "looser" data types
variables don't need to be declared
errors often silent (few exceptions)
key construct is the function rather than the class
"first-class" functions are used in many situations
contained within a web page and integrates with its HTML/CSS content
Linking to a JavaScript File
• There are two methods to embed JavaScript in to HTML code
– Internal Script: directly written in HTML code
– JS code can be placed directly in the HTML file's body or head (like CSS)
– but this is bad style (should separate content, presentation, and behavior
– External Script: written in separate file
– script tag should be placed in HTML page's head
– script code is stored in a separate .js file
<script src="filename" type="text/javascript"></script>
HTML
Internal Scripts
<HTML>
<HEAD><TITLE>Using Multiple scripts</TITLE>
<SCRIPT LANGUAGE="JavaScript">
[JavaScript statements...]
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
[JavaScript statements...]
</SCRIPT>
</HEAD>
<BODY>
<H1>This is another script</H1>
<SCRIPT LANGUAGE="JavaScript">
[JavaScript statements...]
</SCRIPT>
</BODY></HTML>
JavaScript Syntax
Basic syntax
• Case Sensitivity
• Comments:
– single line //
– Multiple lines /* */
JS output
• Using Quotes
• document.write(“<font color=“red”>Hello World</font>”)
• document.write(“<font color=‘red’>Hello World</font>”)
Hello World
JS input
• prompt(); is used to take input from users
– var num = prompt(“Please Enter a Number”, 0)
Variables in JavaScript
variables are declared with the var keyword (case sensitive)
types are not specified, but JS does have types ("loosely typed")
Number, Boolean, String, Array, Object, Function, Null, Undefined
can find out a variable's type by calling typeof
var clientName = "Connie Client";
var age = 32;
var weight = 127.4; JS
Variables in JavaScript
• Variable Naming
– First character can not be a digit
– Other characters may be digits, letters or underscore
– Reserved words can not be used
– Case sensitive
Variables in JavaScript
• Variable Initialization
– var variableName = initialValue
– var variableName1 = initialValue1, variableName2 = initialValue2,
…
NULL & Undefined
undefined : has not been declared, does not exist
null : exists, but was specifically assigned an empty or null value
Why does JavaScript have both of these?
Operators
• An operator is simply a symbol that tells the compiler (or interpreter) to perform a certain
action
• Assignment Operator: =
• Arithmetic Operators: +, - , *, /, %, ++,--
• Logical Operators: &&,||, !
• Comparison Operators: ==, ===, !=, !==, <, >, <=, >=
Logical Operators
>, <, >=, <=, &&, ||, ! == , !, =, === , !==
most logical operators automatically convert types:
5 < "7" is true
42 == 42.0 is true
"5.0" == 5 is true
=== and !== are strict equality tests; checks both type and value
"5.0" === 5 is false
JavaScript Function
• User defined functions
• Predefined functions
User defined Function
• Functions are defined using the keyword function, followed by the name of the function and list
of parameters
function functionName(params)
{
..statements..
}
• Calling a function
• The syntax of a function call is:
• functionName([arguments])
Predefined functions
Common events
• onClick
• onDblClick
• onChange
• onFocus
• onMouseOver
• onMouseOut
• onSubmit
• onload
Predefined functions
Some common predefined math functions
• Math.sqrt
• Math.pow
• Math.abs
• Math.max
• Math.min
• Math.floor
• Math.ceil
• Math.round
• Math.random
Conditional Statements
• If statement
if (condition) statement
if(condition)
{ statements }
• If-else statement
if(condition)
{statement}
else
{statements}
Conditional Statements
if (condition) {
statements;
} else if (condition) {
statements;
} else {
statements;
}
JS Loops
• For loop
for(var i=1; i<10; i++)
{
Document.write(“hello world”)
}
• While loop
While(condition)
{
Document.write(“hello world”)
}
Exercise Questions
Exercise Questions
Using JavaScript, write h2 heading and a small paragraph in HTML code
Ask an integer of user’s choice and display it if it is a prime number using JavaScript
When the body of HTML page loads, ask about the name of user and welcome him/her (by name)
to your page.
Develop a simple game in which a randomly generated number is compared with user’s input. If it
matches, print that user won. If it doesn’t, print that user lost.
Use JS loop to differentiate between write and writeln
Thanks
