Scribd
Upload
11 views73 pages

Unit 3-Javascript (1)

This document provides an introduction to JavaScript, highlighting its role in client-side scripting for dynamic web pages. It compares JavaScript with PHP and Java, emphasizing its unique features such as being interpreted, loosely typed, and event-driven. The document also covers JavaScript syntax, data types, variables, and how to use JavaScript within HTML documents.

Uploaded by

bharti saxena
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
11 views73 pages

Unit 3-Javascript (1)

This document provides an introduction to JavaScript, highlighting its role in client-side scripting for dynamic web pages. It compares JavaScript with PHP and Java, emphasizing its unique features such as being interpreted, loosely typed, and event-driven. The document also covers JavaScript syntax, data types, variables, and how to use JavaScript within HTML documents.

Uploaded by

bharti saxena
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/ 73

UNIT

III Intro to Javascript

Faculty:
Dr. Narinder Kaur
Seera
Client Side Scripting
2

CS380
Why use client-side
3
programming?
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
Why use client-side
4
programming?
 server-side programming (PHP) benefits:
 security: has access to server's private
data; client can't see source code
 compatibility: not subject to browser
compatibility issues
 power: can write files, open connections to
servers, connect to databases, ...
What is Javascript?
5

 a lightweight programming language


("scripting language")
 used to make web pages interactive
 insert dynamic text into HTML (ex: user
name)
 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 vs Java
6

Javascript is -
 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
JavaScript is not Java
 JavaScript has some features that resemble
features in Java:
 JavaScript has Objects and primitive data types
 JavaScript has qualified names; for example,

document.write("Hello World");
 JavaScript has Events and event handlers
 Exception handling in JavaScript is almost the
same as in Java
 JavaScript has some features unlike
anything in Java:
 Variable names are untyped: the type of a
variable depends on the value it is currently
holding
 Objects and arrays are defined in quite a
JavaScript vs. PHP
8

 similarities:
 both are interpreted, not compiled
 both are relaxed about syntax, rules,
and types
 both are case-sensitive
 both have built-in regular expressions
for powerful text processing
JavaScript vs. PHP
9

 Differences:
 JS is more object-oriented: noun.verb(),
less procedural: verb(noun)
 JS focuses on user interfaces and
interacting with a document; PHP is
geared toward HTML output and
file/form processing
 JS code runs on the client's browser; PHP
code runs on the web server
About JavaScript
 JavaScript is not Java, or even related to Java
 The original name for JavaScript was “LiveScript”
 The name was changed when Java became popular
 Statements in JavaScript resemble statements in
Java, because both languages borrowed heavily
from the C language
 JavaScript should be fairly easy for Java programmers
to learn
 However, JavaScript is a complete, full-featured,
complex language
 JavaScript is seldom used to write complete
“programs”
 Instead, small bits of JavaScript are used to add
functionality to HTML pages
 JavaScript is often used in conjunction with HTML
Using JavaScript in a
browser
 JavaScript code is included within <script>
tags:
– <script type="text/javascript">
document.write("<h1>Hello World!</h1>") ;
</script>
 Notes:
 The type attribute is to allow you to use other
scripting languages (but JavaScript is the default)
 This simple code does the same thing as just putting
<h1>Hello World!</h1> in the same place in the
HTML document
 The semicolon at the end of the JavaScript statement
is optional
 You need semicolons if you put two or more statements
on the same line
Where to put JavaScript
 JavaScript can be put in the <head> or in the
<body> of an HTML document
 JavaScript functions should be defined in the <head>
 This ensures that the function is loaded before
it is needed
 JavaScript in the <body> will be executed as the page
loads
 JavaScript can be put in a separate .js file
– <script src="myJavaScriptFile.js"></script>
 Put this HTML wherever you would put the actual
JavaScript code
 An external .js file lets you use the same JavaScript on
multiple HTML pages
 The external .js file cannot itself contain a <script> tag
Linking to a JavaScript file:
13
script
<script src="filename" type="text/javascript"></script>

HTML
 script tag should be placed in HTML
page's head
 script code is stored in a separate .js file
 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
Primitive data types
 JavaScript has three “primitive” types: number,
string, and boolean
 Everything else is an object
 Numbers are always stored as floating-point
values
 Hexadecimal numbers begin with 0x
 Some platforms treat 0123 as octal, others treat it as
decimal
 Strings may be enclosed in single quotes or
double quotes

Strings can contains \n (newline), \" (double quote),
etc.
 Booleans are either true or false
Variables
 Variables are declared with a var
statement:
– var pi = 3.1416, x, y, name = "Dr. Dave" ;
 Variables names must begin with a letter or
underscore
 Variable names are case-sensitive
 Variables are untyped (they can hold values
of any type)
 The word var is optional (but it’s good style to
use it)
 Variables declared within a function are
local to that function (accessible only
Variables
16

var name = expression; JS

var clientName = "Connie Client";


var age = 32;
var weight = 127.4; JS
 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
Number type
17

var enrollment = 99;


var medianGrade = 2.8;
var credits = 5 + 4 + (2 * 3);
JS

 integers and real numbers are the same


type (no int vs. double)
 same operators: + - * / % ++ -- = += -=
*= /= %=
 similar precedence to Java
 many operators auto-convert types: "2"
* 3 is 6
Comments (same as Java)
18

// single-line comment
/* multi-line comment */
JS

 identical to Java's comment syntax


 recall: 4 comment syntaxes
 HTML: <!-- comment -->
 CSS/JS/PHP: /* comment */
 Java/JS/PHP: // comment
 PHP: # comment
Comments
 Comments are as in C or Java:
 Between // and the end of the line
 Between /* and */
 Java’s javadoc comments, /** ... */, are
treated just the same as /* ... */
comments; they have no special
meaning in JavaScript
Operators, I
 Because most JavaScript syntax is borrowed from
C (and is therefore just like Java), we won’t spend
much time on it
 Arithmetic operators:
+ - * / % ++ --
 Comparison operators:
< <= == != >= >
 Logical operators:
&& || ! (&& and || are short-circuit
operators)
 Bitwise operators:
& | ^ ~ << >> >>>
 Assignment operators:
+= -= *= /= %= <<= >>= >>>=
Operators, II
 String operator:
+
 The conditional operator:
condition ? value_if_true :
value_if_false
 Special equality tests:
– == and != try to convert their operands
to the same type before performing the
test
– === and !== consider their operands
unequal if they are of different types
 Additional operators (to be discussed):
new typeof void delete
Logical operators
22

 > < >= <= && || ! == != === !==


 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
Boolean type
23

var iLike190M = true;


var ieIsGood = "IE6" > 0; // false
if ("web devevelopment is great") { /* true */ }
if (0) { /* false */ }
JS
 any value can be used as a Boolean
 "falsey" values: 0, 0.0, NaN, "", null, and
undefined
 "truthy" values: anything else
 converting a value into a Boolean
explicitly:
 var boolValue = Boolean(otherValue);
 var boolValue = !!(otherValue);
Statements, I
 Most JavaScript statements are also
borrowed from C
 Assignment: greeting = "Hello, " + name;
 Compound statement:
{ statement; ...; statement }
 If statements:
if (condition) statement;
if (condition) statement; else
statement;
 Familiar loop statements:
while (condition) statement;
do statement while (condition);
Statements, II
 The switch statement:
switch (expression){
case label :
statement;
break;
case label :
statement;
break;
...
default : statement;
}
 Other familiar statements:
– break;
– continue;
 The empty statement, as in ;; or { }
if/else statement (same as
26
Java)
if (condition) {
statements;
} else if (condition) {
statements;
} else {
statements;
}
JS
 identical structure to Java's if/else
statement
 JavaScript allows almost anything as a
condition
for loop (same as Java)
27

var sum = 0;
for (var i = 0; i < 100; i++) {
sum = sum + i;
}
JS
var s1 = "hello";
var s2 = "";
for (var i = 0; i < s.length; i++) {
s2 += s1.charAt(i) + s1.charAt(i);
}
// s2 stores "hheelllloo"
JS
while loops (same as Java)
28

while (condition) {
statements;
} JS

do {
statements;
} while (condition);
JS

 break and continue keywords also


behave as in C or Java
The for…in statement
 You can loop through all the properties of an object with
for (variable in object) statement;
 Example: for (var prop in course) {
document.write(prop + ": " + course[prop]);
}
 Possible output: teacher: Dr. Dave
number: CIT597
 The properties are accessed in an undefined order
 If you add or delete properties of the object within the loop,
it is undefined whether the loop will visit those properties
 Arrays are objects; applied to an array, for…in will visit the
“properties” 0, 1, 2, …
 Notice that course["teacher"] is equivalent to
course.teacher
 You must use brackets if the property name is in a
variable
The with statement
• with (object) statement ; uses the
object as the default prefix for
variables in the statement
 For example, the following are
equivalent:
– with (document.myForm) {
result.value = compute(myInput.value) ;
}
– document.myForm.result.value =
compute(document.myForm.myInput.value);
 One of my books hints at mysterious
problems resulting from the use of
Object literals
 You don’t declare the types of variables
in JavaScript
– Objects are variables too. But objects
can contain many values.
– The values are written as name:value
pairs (name and value separated by a
colon).
– { name1 : value1 , ... , nameN :
valueN }
 Example: A car is an object.
 A car has properties like weight and
Object Definition
32

 You define (and create) a JavaScript object


with an object literal:
 const person = { firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue" };
 The name:values pairs in JavaScript
objects are called properties:
 You can access object properties in two
ways:
objectName.propertyName or
Three ways to create an
object
 You can use an object literal:
– var course = { number: "CIT597", teacher="Dr. Dave" }
 You can use new to create a “blank” object,
and add fields to it later:
– var course = new Object();
course.number = "CIT597";
course.teacher = "Dr. Dave";
 You can write and use a constructor:
– function Course(n, t) { // best placed in <head>
this.number = n;
this.teacher = t;
}
– var course = new Course("CIT597", "Dr. Dave");
Javascript Objects
34

 Arrays
 Strings
 Date Object
 Math Object
 Document Object
 Browser Object Model’s Object (BOM’s
objects)
 Window
 History
 Screen

Arrays
35

var name = []; // empty array


var name = [value, value, ..., value]; // pre-filled
name[index] = value; // store element
JS

var ducks = ["Huey", "Dewey", "Louie"];


var stooges = []; // stooges.length is 0
stooges[0] = "Larry"; // stooges.length is 1
stooges[1] = "Moe"; // stooges.length is 2
stooges[4] = "Curly"; // stooges.length is 5
stooges[4] = "Shemp"; // stooges.length is 5
JS
Array literals
 You don’t declare the types of variables in
JavaScript
 JavaScript has array literals, written with
brackets and commas
 Example: color = ["red", "yellow", "green", "blue"];
 Arrays are zero-based: color[0] is "red"
 If you put two commas in a row, the array has
an “empty” element in that location
 Example: color = ["red", , , "green", "blue"];
• color has 5 elements
 However, a single comma at the end is ignored
 Example: color = ["red", , , "green", "blue”,]; still has 5
elements
Four ways to create an
array
 You can use an array literal:
var colors = ["red", "green", "blue"];
 You can use new Array() to create an empty
array:
– var colors = new Array();
 You can add elements to the array later:
colors[0] = "red"; colors[2] = "blue";
colors[1]="green";
 You can use new Array(n) with a single numeric
argument to create an array of that size
– var colors = new Array(3);
 You can use new Array(…) with two or more
arguments to create an array containing those
values:
The length of an array
 If myArray is an array, its length is given by
myArray.length
 Array length can be changed by assignment
beyond the current length
 Example: var myArray = new Array(5); myArray[10]
= 3;
 Arrays are sparse, that is, space is only
allocated for elements that have been assigned
a value
 Example: myArray[50000] = 3; is perfectly OK
 But indices must be between 0 and 232-1
 As in C and Java, there are no two-dimensional
arrays; but you can have an array of arrays:
myArray[5][3]
Arrays and objects

 Arrays are objects

• car = {Company: “Hyundai", Name:


“Creta" }
– car[“Company”] is the same as
car.Company
– car.Name is the same as car[“Name“]
Array functions
 If myArray is an array,
 myArray.sort() sorts the array alphabetically
 myArray.sort(function(a, b) { return a - b; })
sorts numerically
 myArray.reverse() reverses the array
elements
 myArray.push(…) adds any number of new
elements to the end of the array, and
increases the array’s length
 myArray.pop() removes and returns the last
element of the array, and decrements the
array’s length
 myArray.toString() returns a string
Math object
41

var rand1to10 = Math.floor(Math.random() * 10 + 1);


var three = Math.floor(Math.PI);
JS

 methods: abs, ceil, cos, floor, log,


max, min, pow, random, round, sin,
sqrt, tan
 properties: E, PI
Special values: null and
42
undefined
var ned = null;
var benson = 9;
// at this point in the code,
// ned is null
// benson's 9
// caroline is undefined
JS

 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?
String Object
43

var s = "Connie Client";


var fName = s.substring(0, s.indexOf(" ")); // "Connie"
var len = s.length; // 13
var s2 = 'Melvin Merchant';
JS

 charAt returns a one-letter String (there is


no char type)
 length property (not a method as in Java)
 Strings can be specified with "" or ''
 concatenation with + :
 1 + 1 is 2, but "1" + 1 is "11"
String Methods
44

 charAt() Returns the character at a specified index


(position)
 concat() Returns two or more joined strings
 indexOf() Returns the index (position) of the first
occurrence of a value in a string
 replace() Searches a string for a value, or a regular
expression, and returns a string where the values are
replaced
 slice() Extracts a part of a string and returns a new
string
 substring() Extracts characters from a string, between
two specified indices (positions)
 toLowerCase() Returns a string converted to
lowercase letters
Splitting strings: split and
45
join
var s = "the quick brown fox";
var a = s.split(" "); // ["the", "quick", "brown“,"fox"]
a.reverse(); // ["fox", "brown", "quick", "the"]
s = a.join("!"); // "fox!brown!quick!the"
JS

 split breaks apart a string into an array


using a delimiter
 can also be used with regular expressions
(seen later)
 join merges an array into a single string,
placing a delimiter between them
Javascript Dates
46

The JavaScript date object can be used


to get year, month and day. You can
display a timer on the webpage by the
help of JavaScript date object.
Methods of Date Object are:
 getDate() It returns the integer value

between 1 and 31 that represents the


day for the specified date on the basis of
local time.
 getDay() It returns the integer value

between 0 and 6 that represents the day


Date Methods (contd..)
47

 getHours() It returns the integer value between 0


and 23 that represents the hours on the basis of
local time.
 getMilliseconds() It returns the integer value
between 0 and 999 that represents the
milliseconds on the basis of local time.
 getMinutes() It returns the integer value between
0 and 59 that represents the minutes on the
basis of local time.
 getMonth() It returns the integer value between
0 and 11 that represents the month on the basis
of local time.
 setDate() It sets the day value for the specified
Date Example
48

Create a date object and then you can use


methods as follows:

var today = new Date();


var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
DOM (Document Object
49
Model)
 DOM organizes the elements of the
document in a tree structure (DOM tree)
and in the DOM tree, all elements of the
document are defined as objects (tree
nodes) which have properties and
methods.
 The document object represents the
whole html document.
 When html document is loaded in the
browser, it becomes a document object.
It is the root element that represents
50
Properties of Document
51
Object
Methods of document
52
object
We can access and change the contents of
document by its methods.
 write("string") - writes the given string on the
doucment.
 writeln("string") - writes the given string on the
doucment with newline character at the end.
 getElementById() - returns the element having
the given id value.
 getElementsByName() - returns all the elements
having the given name value.
 getElementsByTagName() - returns all the
elements having the given tag name.
innerHTML property
53

 The innerHTML property can be used to


write the dynamic html on the html
document.
 It is used mostly in the web pages to
generate the dynamic html such as
registration form, comment form, links
etc.
 Eg: <p id=‘para1’> </p>
:
:
Changing element style:
54
element.style
Example :
Property or
<body> style object
<H1 id=“myid”> Heading1
</H1> color
: padding
<script>
backgroundCo
h=document.getElementById("m lor
yid"); borderTopWidt
h.style.color="red"; h
h.style.fontSize=40; fontSize
h.style.backgroundColor="green" fontFamily
Document Object Model
55
(DOM)
 most JS code
manipulates elements
on an HTML page
 we can examine
elements' state
 e.g. see whether a box
is checked
 we can change state
 e.g. insert some new
text into a div
 we can change styles
BOM
56

 BOM main task is to manage browser windows


and enable communication between the windows
(i.e BOM deals with entire browser). Each HTML
page which is loaded into a browser window
becomes a Document object and a document
object is an object in the BOM.
 BOM is a superset of DOM. BOM has many
objects, methods, and properties that are not
part of the DOM structure.
 It consists of:
 Window,screen, location, history, navigator,
popup alert, timing, cookies
BOM
57

 The Browser Object Model (BOM) is


used to interact with the browser.
 The default object of browser is window
means you can call all the functions of
window by specifying window or directly.
For example:
window.alert(“Hello World");
Is same as:
alert(“Hello World");
BOM
58

 You can use a lot of properties (other


objects) defined underneath the window
object like document, history, screen,
navigator, location etc.
Window Object
59

Methods of Window object are:

1. alert() - displays the alert box


containing message with ok button.
2. confirm() - displays the confirm dialog
box containing message with ok and
cancel button.
3. prompt() - displays a dialog box to get
input from the user.
4. open() - opens the new window.
5. close() - closes the current window.
History Object
60
 The JavaScript history object represents an array of
URLs visited by the user. By using this object, you can
load previous, forward or any particular page.
 Property of History object: Length - returns the
length of the history URLs.
 Methods of History are:
1. forward() - loads the next page.
2. back() - loads the previous page.
3. go() - loads the given page number.
Examples: history.back();
//for previous page
history.forward(); //for next page
history.go(2); //
for next 2nd page
DOM vs. BOM
61

 Document Object Model in JavaScript is the API


to access the elements inside the document. It
maps the entire Document into an hierarchy of
parent and child tree. Each node can hold number
of children element or can inherit to other parent
element in some or the other way.

 Browser Object Model is a larger representation


of everything provided by the browser including the
current document, location, history, frames, and
any other functionality the browser may expose to
JavaScript. The Browser Object Model is not
standardized and can change based on different
DOM vs. BOM
62
JavaScript functions
63
function name()
{ //function definition
statements ;
...
Return value; //returning a value
}

Val= name(); // function calling


JS

function myFunction(str)
{ //function definition
alert("Hello!“+str);
alert("How are you?");
}

myFunction(name); // function calling with arguments


Functions
 Functions should be defined in the
<head> of an HTML page, to ensure
that they are loaded first
 The syntax for defining a function is:
function name(arg1, …, argN)
{ statements }
 The function may contain return value;
statements
 Any variables declared within the
function are local to it
 The syntax for calling a function is just
name(arg1, …, argN)

Event-driven programming
65
Event-driven programming
66

 A JavaScript can be executed when an


event occurs, like when a user clicks on
an HTML element.
 Examples of HTML events:
 When a user clicks the mouse
 When a web page has loaded
 When an image has been loaded
 When the mouse moves over an element
 When an input field is changed
 When an HTML form is submitted
 When a user strokes a key
Event-driven programming
67

 Few commonly used events


are: onMouseOver
 onBlur onMouseMove
 onFocus onSubmit
 onSelect onLoad
onUnload
 onClick
onScroll
 onDblClick
onDrag
 onChange onResize
 onKeyPress
 onKeyDown
 onKeyPress
Event-driven programming
68

 you are used to programs start with a


main method (or implicit main like in
PHP)
 JavaScript programs instead wait for user
actions called events and respond to
them
 event-driven programming: writing
programs driven by user events
 Let's write a page with a clickable button
that pops up a "Hello, World" window...
Buttons
69

<button>Click me!</button> HTML

 button's text appears inside tag; can


also contain images
 To make a responsive button or other UI
control:
1. choose the control (e.g. button) and event
(e.g. mouse 1. click) of interest
2. write a JavaScript function to run when
the event occurs
3. attach the function to the event on the
Event handlers
70
<element attributes onclick="function();">...

HTML
<button onclick="myFunction();">Click me!</button>

HTML
 JavaScript functions can be set as event
handlers
 when you interact with the element, the
function will execute
 onclick is just one of many event HTML
attributes we'll use
 but popping up an alert window is
disruptive and annoying
A JavaScript statement:
71
alert
alert(“Access Denied.");
JS

 a JS command that pops up a dialog box


with a message
Popup boxes
72

alert("message"); // message
confirm("message"); // returns true or false
prompt("message"); // returns user input string
JS
73

THANK
YOU

You might also like