Web Lecture # 3 (Javascript Introduction)

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>
</HEAD>
<BODY>
<H1>This is another script</H1>
</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
• 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
• 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

Web Lecture # 3 (Javascript Introduction)

Uploaded by

Copyright:

Available Formats

Web Lecture # 3 (Javascript Introduction)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Lecture # 3 (Javascript Introduction)

Uploaded by

Copyright:

Available Formats

Web Engineering (CS-666)

Lecture # 3: JavaScript Introduction

A lightweight programming language ("scripting language")

 interpreted, not compiled

• There are two methods to embed JavaScript in to HTML code

<script src="filename" type="text/javascript"></script>

• document.write(“<font color=‘red’>Hello World</font>”)

• prompt(); is used to take input from users

 variables are declared with the var keyword (case sensitive)

var clientName = "Connie Client";

– Other characters may be digits, letters or underscore

 undefined : has not been declared, does not exist

 >, <, >=, <=, &&, ||, ! == , !, =, === , !==

• User defined functions

Some common predefined math functions

 Using JavaScript, write h2 heading and a small paragraph in HTML code

You might also like