Scribd
Upload
70 views64 pages

Javascript: Creating A Programmable Web

This document provides an overview of JavaScript, including its history and implementation, basics, variables, functions, and other key concepts. It discusses how JavaScript can be used to create dynamic and interactive web pages by manipulating HTML content and responding to user events. The document also compares JavaScript to other programming languages and contrasts client-side and server-side scripting.

Uploaded by

Enayat Khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
70 views64 pages

Javascript: Creating A Programmable Web

This document provides an overview of JavaScript, including its history and implementation, basics, variables, functions, and other key concepts. It discusses how JavaScript can be used to create dynamic and interactive web pages by manipulating HTML content and responding to user events. The document also compares JavaScript to other programming languages and contrasts client-side and server-side scripting.

Uploaded by

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

1

JavaScript

CREATING A PROGRAMMABLE WEB


PAGE
Outline 2

 History & Implementation


 Basics of JavaScript
 Variables
 Date Object
 Expression & Operators
 JS Function
 Math Object
 Array
 Loop
Programming Languages 3

 Old Languages: FORTRAN, COBOL, PL/1, Algol68,


BASIC, LISP, PASCAL

 Timeless Languages: C,C++,Ada, Prolog, SML

 Modern Languages: Java, JavaScript, Perl, Python,


Ruby, C#, Haskell
Server-Side Programs 4

 a user must be connected to the Web server to run


the server-side script
 only the programmer can create or alter the script
 the system administrator has to be concerned
about users continually accessing the server and
potentially overloading the system
Client-Side Programs 5

 solve many of the problems associated with server-


side scripts
 can be tested locally without first uploading it to a
Web server
 are likely to be more responsive to the user
 can never completely replace server-side scripts
6
7
8
9
Introduction to JavaScript 10

 JavaScript is an interpreted programming or script


language from Netscape.

OR

 JavaScript is an Object-oriented Programming


Language initially designed and implemented by
Netscape.
Introduction to JavaScript 11

 JavaScript is used in Web development to such things as:


 Most widely used language for client-side scripting of
web pages.
 Used to make dynamic web pages.
 automatically change a formatted date on a Web
page
 cause a linked-to-page to appear in a popup
window
 cause text or a graphic image to change during a
mouse rollover
Java vs. JavaScript 12

 Requires the JDK to create the  Requires a text editor


applet __________
 Requires a Java virtual  Required a browser that can
machine to run the applet interpret JavaScript code
 Applet files are distinct from  JavaScript can be placed
the XHTML code within HTML and XHTML
 Source code is hidden from the  Source code is made
user accessible to the user
 Programs must be saved as  Programs cannot write content
separate files and compiled to the hard disk
before they can be run ________________
 Programs run on the server side  Programs run on the client side
Writing a JavaScript Program 13

 The Web browser runs a JavaScript program


when the Web page is first loaded, or in response
to an event.
 JavaScript programs can either be placed
directly into the HTML file or they can be saved in
external files.
 placing a program in an external file allows you
to hide the program code from the user
 source code placed directly in the HTML file
can be viewed by anyone
Writing a JavaScript Program 14

 A JavaScript program can be placed anywhere


within the HTML file.
 Many programmers favor placing their programs
between <head> tags in order to separate the
programming code from the Web page content
and layout.
 Some programmers prefer placing programs
within the body of the Web page at the location
where the program output is generated and
displayed.
Using the <script> Tag 15

 To embed a client-side script in a Web page,


use the element:
<script type=“text/javascript” >
script commands and comments
</script>
 To access an external script, use:
<script src=“url” type=“text/javascript”>
script commands and comments
</script>
JavaScript Display Possibilities 16

JavaScript can "display" data in different ways:


 Writing into an HTML element, using innerHTML.
 Writing into the HTML output using document.write()
 Writing into an alert box, using window.alert()
 Writing into the browser console, using console.log()
Comments 17

 The syntax for a single-line comment is:


// comment text
 The syntax of a multi-line comment is:
/*
comment text covering several lines
*/
JavaScript Syntax Issues 19

 JavaScript commands and names are case-


sensitive.
 JavaScript command lines end with a semicolon to
separate it from the next command line in the
program.
 in some situations, the semicolon is optional
 semicolons are useful to make your code easier to follow and interpret
Working with Variables & Data 20

 A variable is a name that is used to designate a


value. The following restrictions apply to variable
names:
 the first character must be either a letter or an
underscore character ( _ )
 the remaining characters can be letters,
numbers, or underscore characters
 variable names cannot contain spaces
 Variable names are case-sensitive.
 document.write(Year);
Types of Variables 21

JavaScript supports four different types of variables:


 numeric variables can be a number, such as 13,
22.5, or -3.14159
 string variables is any group of characters, such
as “Hello” or “Happy Holidays!”
 Boolean variables are variables that accept one
of two values, either true or false
 null variables is a variable that has no value at all
Declaring a Variable 22

 A variable can be introduced with an assignment or a


declaration.
 Assignment: variable = value;
 Declaration: var variable
 Before you can use a variable in your program, you
need to declare a variable using the var command or
by assigning the variable a value.
 Any of the following commands is a legitimate way of
creating a variable named “Month”:
var Month;
var Month = “December”;
Month = “December”;
Working with Expressions 23
and Operators
 Expressions are JavaScript commands that
assign values to variables.
 Expressions are created using variables,
values, and operators.
 The + operator performs the action of adding
or combining two elements. For example,
 var ThisMonth = Today.getMonth()+1;
Operators 25

 Binary operators work on two elements in an


expression.
 Unary operators work on only one variable.
 unary operators include: the increment (++),
decrement (--), and negation (-) operators.
 An increment operator is used to increase the
value of the x variable by one.
x = 100;
y = x++;
Operators 26

 The decrement operator reduces the value of a


variable by 1.
x = 100;

y = x--;

 The negation operator changes the sign of a


variable:
x = -100;

y = -x;
Assignment Operators 27

 Expressions assign values using assignment


operators. “=” is the most common one.
 Additional includes the += operator
 The following create the same results:
x = x + y;
x += y
 Either of the following increase the value of the x
variable by 2:
x = x + 2;
x += 2
Assignment Operators
Creating JavaScript Functions 29

function function_name(parameters) {
JavaScript commands/statements
}

 parameters are the values sent to the function


(note: not all functions require parameters)
 { and } are used to mark the beginning and
end of the commands in the function.
Creating JavaScript Functions 30

 Function names are case-sensitive.


 The function name must begin with a letter or
underscore ( _ ) and cannot contain any spaces.
 There is no limit to the number of function
parameters that a function may contain.
 The parameters must be placed within
parentheses, following the function name, and
the parameters must be separated by commas.
Performing an Action with a Function 31

The following function displays a message with the


current date:
function ShowDate(date) {
document.write(“Today is” + date + “<br>”);
}
 there is one line in the function’s command
block, which displays the current date along with
a text string
Performing an Action with a Function 32

To call the ShowDate function, enter:


var Today = “3/9/2006”;
ShowDate(Today);
 the first command creates a variable named
“Today” and assigns it the text string, “3/9/2006”
 the second command runs the ShowDate
function, using the value of the Today variable as
a parameter
 result is “Today is 3/9/2006”
Returning a Value from a Function 33

To use a function to calculate a value use the return


command along with a variable or value.
function Area(Width, Length) {
var Size = Width*Length;
return Size;
}
 the Area function calculates the area of a
rectangular region and places the value in a
variable named “Size”
 the value of the Size variable is returned by the
function
Placing a Function 34
in an HTML File
 The function definition must be placed before
the command that calls the function.
 One convention is to place all of the function
definitions in the <head> section.
 A function is executed only when called by
another JavaScript command.
 It’s common practice for JavaScript
programmers to create libraries of functions
located in external files.
<head>
<script src="library.js" type="text/javascript">
</script>
</head>
<script type="text/javascript">
var Today=new Date("October 15, 2006");
var ThisDay=Today.getDate();
var ThisMonth=Today.getMonth()+1;
var ThisYear=Today.getFullYear();
var DaysLeft=XmasDays(Today);
</script>
document.write("Today is "+ThisMonth+"/"+
ThisDay+"/"+ThisYear+"<br />");
document.write("Only "+DaysLeft+
" days until Christmas");
library.js
function XmasDays(CheckDay) {
var XYear=CheckDay.getFullYear();
var XDay=new Date("December, 25, 2006");
XDay.setFullYear(XYear);
var DayCount=(XDay-CheckDay) /(1000*60*60*24);
DayCount=Math.round(DayCount);
return DayCount;
}
Working with Conditional Statements 37

if (condition) {
JavaScript Commands
}
 condition is an expression that is either true or
false
 if the condition is true, the JavaScript Commands
in the command block are executed
 if the condition is not true, then no action is taken
Comparison, Logical, and 38
Conditional Operators
To create a condition, you need one of three types
of operators:
 a comparison operator compares the value of
one element with that of another, which creates
a Boolean expression that is either true or false
 a logical operator connects two or more
Boolean expressions
 a conditional operator tests whether a specific
condition is true and returns one value if the
condition is true and a different value if the
condition is false
An Example of 39
Boolean Expressions

 x < 100;
 if x is less than 100, this expression returns the value
true; however, if x is 100 or greater, the expression is
false
 y == 20;
 the y variable must have an exact value of 20 for the
expression to be true
 comparison operator uses a double equal sign (==)
Comparison Operators 40
A Logical Operator 41

 The logical operator && returns a value of true only if all


of the Boolean expressions are true.
A Conditional Operator 42

tests whether a specific condition is true and returns one value if


the condition is true and a different value if the condition is false.
 Message = (mail == “Yes”) ? “You have mail”: “No mail”;
 tests whether the mail variable is equal to the value “Yes”
 if it is, the Message variable has the value “You have
mail”;
 otherwise, the Message variable has the value “No
mail”.
Using an If...Else Statement 43

if (condition) {
JavaScript Commands if true
} else
JavaScript Commands if false
}
 condition is an expression that is either true or
false, and one set of commands is run if the
expression is true, and another is run if the
expression is false
if...else Conditional Statement
document.write("Today is " + ThisMonth +
"/“+ThisDay+"/"+ThisYear+"<br />");
if (DaysLeft > 0) {
document.write("Only "+DaysLeft+
" days until Christmas");
} else {
document.write("Happy Holidays from
Nroth Pole Novelties");
}
Working with Dates 45

 There are two ways to create a date object:


TodayDate = new Date(“month day, year,
hours:minutes: seconds”)
TodayDate = new Date(year, month, day, hours,
minutes, seconds”)
 TodayDate is the name of the variable that
contains the date information
 month, day, year, hours, minutes, and seconds
indicate the date and time
var Today=new Date(“October 15, 2006”);
var Today=new Date(2006, 9, 15);
Retrieving the Day & Time Values 46

 JavaScript stores dates and times as the number


of milliseconds since 6 p.m on 12/31/69.
 Use built in JavaScript date methods to do
calculations.
 If you want the ThisDay variable to store the day
of the month. To get that information, apply the
getDate() method.

DayValue = DateObject.getDate()
Retrieving the Month Value 47

 The getMonth() method extracts the value of


the current month.
 JavaScript starts counting months with 0 for
January, you may want to add 1 to the month
number returned by the getMonth() method.
 ThisMonth = Today.getMonth()+1;
Retrieving the Year Value 48

 The getFullYear() method extracts the year


value from the date variable.
 ThisYear = Today.getFullYear();
Setting Date Values 49

JavaScript functions that allow


you to set or change the values of date objects
The Math Object & Math Methods 50

 Another way of performing a calculation is to use


the JavaScript built-in Math methods.
 These methods are applied to an object called
the Math object.
 The syntax for applying a Math method is:
value = Math.method(variable);
 For example,
AbsValue = Math.abs(NumVar);
Using Arrays 52

 An array is an ordered collection of values


referenced by a single variable name.
 The syntax for creating an array variable is:
var variable = new Array(size);
 variable is the name of the array variable
 size is the number of elements in the array
(optional)
 To populate the array with values, use:
variable[i]=value;
where i is the i th item of the array. The 1st item has
an index value of 0.
Using Arrays 53

To create and populate the array in a single


statement, use:
var variable = new Array(values);
 values are the array elements enclosed in
quotes and separated by commas
 var MonthTxt=new Array(“January”, “February”,
“March”, “April”, “May”, “June”, “July”,
“August”, “September”, “October”,
“November”, “December”);
 January will have an index value of “1”.
<script type="text/javascript">
var Today=new Date();
var ThisDay=Today.getDate();
var ThisMonth=Today.getMonth()+1;
var ThisYear=Today.getFullYear();
var DaysLeft=XmasDays(Today);
var MonthTxt = new Array("", "January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October","November", "December");
document.write("Today is "+MonthTxt[ThisMonth]+" " +
ThisDay+", "+ThisYear+"<br />");
if (DaysLeft > 0) {
document.write("Only "+DaysLeft+" days until Christmas");
} else {
document.write("Happy Holidays from North Pole
Novelties");
}
</script>
Creating the MonthText Function in library2.js
function MonthTxt(MonthNumber) {
var Month=new Array();
Month[0]="";
Month[1]="January";
Month[2]="February";
Month[3]="March";
Month[4]="April";
Month[5]="May";
Month[6]="June";
Month[7]="July";
Month[8]="August";
Month[9]="September";
Month[10]="October";
Month[11]="November";
Month[12]="December";
return Month[MonthNumber];
}
Calling the MonthTxt Function
use the ThisMonth variable
to call the MonthTxt function
and then stores the result in
a new variable named “MonthName”

<head>
<script src="library2.js"
type="text/javascript"></script>
</head>

var MonthName=MonthTxt(ThisMonth);
Working with Program Loops 57

 A program loop is a set of instructions that


is executed repeatedly.
 There are two types of loops:
 loopsthat repeat a set number of times
before quitting
 loopsthat repeat as long as a certain
condition is met
The For Loop 58

 The For loop allows you to create a group of


commands to be executed a set number of times
through the use of a counter that tracks the
number of times the command block has been
run.
 Set an initial value for the counter, and each time
the command block is executed, the counter
changes in value.
 When the counter reaches a value above or
below a certain stopping value, the loop ends.
The For Loop Continued 59

for (start; condition; update) {


JavaScript Commands
}
 start is the starting value of the counter
 condition is a Boolean expression that must be
true for the loop to continue
 update specifies how the counter changes in
value each time the command block is
executed
Specifying Counter Values in a For Loop
The While Loop 63

 The While loop runs a command group as long as


a specific condition is met, but it does not employ
any counters.
 The general syntax of the While loop is:
while (condition) {
JavaScript Commands
}
 condition is a Boolean expression that can be
either true or false

You might also like