JavaScript
Language Fundamentals I
1-Mar-19
Server-Side Programs
Server- Side programs run at server. user must be
connected to the Web server to run the server-side
script.
user need to travel through the network to execute this
program.
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
2
Client-Side Programs
It executes in the web browser with the help of browser
interpreters. That’s why user did not need to travel
through the network to execute this script.
It reduces the burden on network and increases the
performance of application
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
3
Client-side programming Server-side programming
1. It provides the front-end to a web site 1. It provides the back-end to a web site
for handling client requests by for performing all the processing
providing basic validations and related to client requests on the web
calculations. server
Eg: mobile no validation, e-mail Eg: data base validations such as valid
validation user or not
2. It is used to perform calculations of 2. It handles the functions such as data
sum, multiply and divide. base querying, database handling and
database manipulations.
3. It is interpreted by web browser 3. It is executed by web server
4. Client-Side Scripts are visible in the 4. Server-side scripts are not visible to the
client’s computer. client. The client can view only the output
of the program.
4
Static web page
Static Web pages display the exact same information
whenever anyone visits it. Static Web pages do not
have to be simple plain text. They can feature
detailed multimedia design and even videos.
However, every visitor to that page will be greeted
by the exact same text, multimedia design or video
every time he visits the page until you alter that
page's source code.
5
Dynamic web page
Dynamic Web pages are capable of producing
different content for different visitors from the same
source code file. The website can display different
content based on what operating system or browser
the visitor is using, whether she is using a PC or a
mobile device, or even the source that referred the
visitor. A dynamic Web page is not necessarily better
than a static Web page. The two simply serve
different purposes.
6
Introduction to JavaScript
JavaScript is an interpreted programming or script
language from Netscape corporation in 1995. The original
name is “Live Script”
JavaScript is used in Web site development to such things
as:
Client side validations
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
7
features of JavaScript
Scripting language: A scripting language is a simple
programming language designed to enable computer
users to write useful programs easily.
Object -based language. An object-oriented program is
a collection of individual objects that perform different
functions, rather than a sequence of statements that
collectively perform a specific task.
Event driven: the user is in control the web page for
move the mouse or not moves the mouse.
8
Create pages dynamically
Based on the user's choices, the date, or
other external data, JavaScript can produce pages
that are customized to the user.
Interact with the user
It can do some processing of forms and can
validate user input when the user submits the form.
Platform-independent: - JavaScript programs are
designed to run within HTML documents, they are not
tied to any specific hardware platform or operating
system.
9
Writing a JavaScript Program
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
10
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
It’s probably a good idea to keep using semicolons
11
Writing a JavaScript Program
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.
12
A Simple Script
<html>
<head><title>First JavaScript
Page</title></head>
<body>
<h1>First JavaScript Page</h1>
<script type="text/javascript">
document.write("<hr>");
document.write("Hello World Wide Web");
document.write("<hr>");
</script>
</body>
</html>
Embedding JavaScript
<html>
<head><title>First JavaScript Program</title></head>
<body>
<script type="text/javascript"
src="your_source_file.js"></script>
</body>
</html> Inside your_source_file.js
document.write("<hr>");
document.write("Hello World Wide Web");
document.write("<hr>");
Use the src attribute to include JavaScript codes
from an external file.
The included code is inserted in place.
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)
Simple parameters are passed by value, objects are
passed by reference
15
JavaScript buitin functions
With functions, you can give a name to a whole
block of code, allowing you to reference it from
anywhere in your program. JavaScript has built-in
functions for several predefined operations. Here are
three some functions.
• alert("message")
• confirm("message")
• prompt("message")
16
alert(), confirm(), and prompt()
<script type="text/javascript">
alert("This is an Alert method");
confirm("Are you OK?");
prompt("What is your name?");
prompt("How old are you?","20");
</script>
alert() and confirm()
alert("Text to be displayed");
Display a message in a dialog box.
The dialog box will block the browser.
var answer = confirm("Are you sure?");
Display a message in a dialog box with two buttons: "OK"
or "Cancel".
confirm() returns true if the user click "OK".
Otherwise it returns false.
prompt()
prompt("What is your student id number?");
prompt("What is your name?”, "No name");
Display a message and allow the user to enter a value
The second argument is the "default value" to be displayed
in the input textfield.
Without the default value, "undefined" is shown in the
input textfield.
If the user click the "OK" button, prompt() returns the
value in the input textfield as a string.
If the user click the "Cancel" button, prompt() returns
null.
20
Mouse evevent
21
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
Since you can’t be sure, avoid octal altogether!
Strings may be enclosed in single quotes or double quotes
Strings can contains \n (newline), \" (double quote), etc.
Booleans are either true or false
0, "0", empty strings, undefined, null, and NaN are false ,
other values are true
22
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 within that
function)
Variables declared outside a function are global
(accessible from anywhere on the page) 23
To declare a varible in java script
var varname;
var x = 5;
var y = 6;
var z = x + y;
In this example, x, y, and z, are variables:
24
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var x=100;
var y=200; Output : 300
document.write(x+y);
Suppose y=“200”
</SCRIPT>
Output= 100200
</BODY>
</HTML>
25
parseInt(), parseFloat(), ….etc
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var x=100;
var y="200";
document.write(x+parseInt(y));
</SCRIPT>
</BODY> Output : 300
</HTML>
26
Loacal variables and global variables
Local Variables : Variables declared inside a
function.
The scope of local variables is up to that
function.
Global Variables: Variables declared out side of all the
functions. We can access this variable from any
location
27
arrays
Array is a collection of heterogeneous data types.
Java Script is loosely typed language that’s why it
can store any type of values in variables.
In Java Script array is an object.
The declaration is
var arr=new Array(val1,valu2,val3,…..);
Eg: var arr=new Array(10, 20, 30);
alert(arr); output: 10, 20, 30
alert(arr[0]); output: 10
28
var arr=new Array(10,”amar”, 20.5);
ot
var arr=new Array();
arr[0]=10;
arr[1]=“amar”;
arr[2]=20.5;
29
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 (all numbers are floating-point):
+ - * / % ++ --
Comparison operators:
< <= == != >= >
Logical operators:
&& || ! (&& and || are short-circuit operators)
Bitwise operators:
& | ^ ~ << >> >>>
Assignment operators:
+= -= *= /= %= <<= >>= >>>= &= ^= |=
30
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
31
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
32
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);
for (initialization; condition; increment) statement;
33
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 { }
34
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("<h2>Table of Factorials</h2>");
for(i = 1, fact = 1; i < 10; i++, fact *= i)
{
document.write(i + "! = " + fact);
document.write("<br>");
}
</SCRIPT>
</BODY>
</HTML>
35
Java Script Objects
1.Date object
2.Math object
3.String object
36
Creating Date object
new Date()
new Date(milliseconds)
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds,
milliseconds)
37
Date object
getTime() getMinutes()
getDate() getUTCMinutes()
getSeconds()
getUTCDate() getUTCSeconds()
getDay() setDate(value)
getUTCDay()
getHours()
getUTCHours()
getMilliseconds()
getUTCMilliseconds()
38
Date()
Returns today's date and time
getDate()
Returns the day of the month for the specified date
according to local time.
getDay()
Returns the day of the week for the specified date
according to local time.
getFullYear()
Returns the year of the specified date according to local
time
39
getHours()
Returns the hour in the specified date according to local
time.
getMilliseconds()
Returns the milliseconds in the specified date according to
local time.
getMinutes()
Returns the minutes in the specified date according to
local time.
getMonth()
Returns the month in the specified date according to local
time 40
getSeconds()
Returns the seconds in the specified date according to
local time.
getTime()
Returns the numeric value of the specified date as the
number of milliseconds since January 1, 1970, 00:00:00
UTC.
getTimezoneOffset()
Returns the time-zone offset in minutes for the current
locale.
getUTCDate()
Returns the day (date) of the month in the specified date 41
settDate()
Sets the day of the month for a specified date according to
local time
setFullYear()
Sets the full year for a specified date according to local
time.
setHours()
Sets the hours for a specified date according to local time
setMilliseconds()
Sets the milliseconds for a specified date according to
local time
42
setMinutes()
Sets the minutes for a specified date according to local time.
setMonth()
Sets the month for a specified date according to local time
setSeconds()
Sets the seconds for a specified date according to local time.
setTime()
Sets the Date object to the time represented by a number of
milliseconds since January 1, 1970, 00:00:00 UTC.
43
setUTCDate()
Sets the day of the month for a specified date according to
universal time.
setUTCFullYear()
Sets the full year for a specified date according to
universal time.
setUTCHours()
Sets the hour for a specified date according to universal
time.
setUTCMilliseconds()
Sets the milliseconds for a specified date according to
universal time. 44
Math Object
max(x,y,z,...,n)
abs(x) min(x,y,z,...,n)
acos(x) pow(x,y)
random()
asin(x) round(x)
atan(x) sin(x)
ceil(x) sqrt(x)
tan(x)
cos(x)
exp(x)
floor(x)
log(x)
max(x,y,z,...,n)
45
String Object
charAt()
concat()
match()
replace()
search()
substr()
toLowerCase()
toUpperCase()
46
<html> Defining objects
<body>
<p>Creating and using an object method.</p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
47
document.write(person.firstName);
document.write(person.id);
document.write(person.fullName());
</script>
</body>
</html>
48
Reading the data from html form
49
JavaScript is not Java
By now you should have realized that you already know a
great deal of JavaScript
So far we have talked about things that are the same as in 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 different way
JavaScript has with statements and a new kind of for statement
50
Object literals
You don’t declare the types of variables in JavaScript
JavaScript has object literals, written with this syntax:
{ name1 : value1 , ... , nameN : valueN }
Example (from Netscape’s documentation):
car = {myCar: "Saturn", 7: "Mazda",
getCar: CarTypes("Honda"), special: Sales}
The fields are myCar, getCar, 7 (this is a legal field name) , and
special
"Saturn" and "Mazda" are Strings
CarTypes is a function call
Sales is a variable you defined earlier
Example use: document.write("I own a " + car.myCar);
51
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; // keyword "this" is required, not optional
this.teacher = t;
}
var course = new Course("CIT597", "Dr. Dave");
52
The End
53
