Scribd
Upload
13K views

Web Lecture # 3 (Javascript Introduction)

This lecture introduces JavaScript, including: - What JavaScript is and how it is used to make web pages interactive by inserting dynamic text, reacting to events, and performing calculations - The differences between JavaScript and Java - Embedding JavaScript in HTML documents through internal and external scripts - JavaScript syntax, variables, operators, functions, and basic programming constructs like conditionals and loops - Examples of using JavaScript for input/output, math functions, and event handling

Uploaded by

Raja Daniyal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13K views

Web Lecture # 3 (Javascript Introduction)

This lecture introduces JavaScript, including: - What JavaScript is and how it is used to make web pages interactive by inserting dynamic text, reacting to events, and performing calculations - The differences between JavaScript and Java - Embedding JavaScript in HTML documents through internal and external scripts - JavaScript syntax, variables, operators, functions, and basic programming constructs like conditionals and loops - Examples of using JavaScript for input/output, math functions, and event handling

Uploaded by

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

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

You might also like