You are on page 1of 32

JAVA SCRIPT PRIMER

• Java script is currently the de facto


scripting language of the web.
• VB script is basically developed for IE
• JavaScript was designed to add interactivity
to HTML pages
• JavaScript is a scripting language
• A scripting language is a lightweight
programming language
• JavaScript is usually embedded directly into
HTML pages
• JavaScript is an interpreted language
(means that scripts execute without
preliminary compilation)
• Everyone can use JavaScript without
purchasing a license
• JavaScript gives HTML designers a programming tool -
HTML authors are normally not programmers, but JavaScript is a
scripting language with a very simple syntax! Almost anyone can
put small "snippets" of code into their HTML pages
• JavaScript can put dynamic text into an HTML page - A
JavaScript statement like this: document.write("<h1>" + name +
"</h1>") can write a variable text into an HTML page
• JavaScript can react to events - A JavaScript can be set to
execute when something happens, like when a page has finished
loading or when a user clicks on an HTML element
• JavaScript can read and write HTML elements - A JavaScript
can read and change the content of an HTML element
• JavaScript can be used to validate data - A JavaScript can be
used to validate form data before it is submitted to a server. This
saves the server from extra processing
• JavaScript can be used to detect the visitor's browser - A
JavaScript can be used to detect the visitor's browser, and -
depending on the browser - load another page specifically
designed for that browser
• JavaScript can be used to create cookies - A JavaScript can be
used to store and retrieve information on the visitor's computer
Java script is made up with the
following syntax elements
I. Statements – are lines of code from which js
programs are built
II. Blocks –blocks allow you to group statements
III. Comments – allow you to annotate your code with
remarks
IV. Data – is actual information your programs works on
V. Expressions – allow you to perform operations on
data
VI. Variables – are places to store data
VII. Functions –user to group your code into sections with
a name
VIII.Flow control –lets your program take different
courses of action at runtime
IX. Objects –allow you to group your data and functions
I. Statements – are lines of code from
which js programs are built:
<html>
<head>
<title>
first program in java script
</title>
</head>

<body>
<script language="javascript">
document.write("This is a java script program output"); //
javascript code
</script>
</body>
</html>
II. Blocks

• blocks allow you to group


statements
• Often done with functions and in
conditionals
• Grouping of statements together into
one entity is called a block
• a block is surrounded with { and }
{
document.writeln("<br>welcome to javascript programming"); //
javascript code
document.writeln("<br>welcome to javascript programming"); //
javascript code
III. Comments

• allow you to annotate your code with


remarks
• Single line comments
// this is first line javascript code
document.writeln("<br>welcome to javascript
programming");

• Multi line comments


/* this is a standard multiline
type
*/
IV. Data
• One of the basic tenets of programs
is that they have to work on data.
• Java script has five fundamental data
type :
– String e.g., “Hello”, ‘one, “two”’
– Number e.g., 12,34.34,0xff
– Boolean e.g., true,false
– Function e.g., myfun(), prompt()
– Object e.g., document, window
– Null a special data type, a variable is set
to null if it has no value.
V. Expressions
• allow you to perform operations on
data
– Numerical expressions
• Numerical operations performed on numbers
• Numerical operators( + , - , * , / , % Modulo,
- unary negation.
– Logical or Boolean expressions
• When evaluated returns a result of either
true or false
• Boolean operators(&& AND,|| OR,! NOT,==
EQUAL, != NOTEQUAL, > GREATER THAN,
>= GREATER THAN EQUAL TO , < LESS
THAN, <= LESS THAN OR EQUAL
VI. Variables
• are places to store data
• Variables enable you to define places to
store data
• Think of variable as a storage container
• Java script is case sensitive
• Use of Reserved words as variable names
is not allowed
• Two aspects of working with variables are:
– The methods for creating and naming variables
– The methods for changing the value that is held
in variables
Reserved words in Java
Script
abstract boolean break byte case
catch char class const continue
default delete do double else
extends false final finally float
for function goto if implements
import in instanceof int interface
long native new null package
private protected public return short
static super switch synchronize this
d
throw throws transient true try
typeof var void while with
VII. Functions
• Function is a block of code with a defined
name that might or might not take one or
more arguments.
• Functions are called by name and takes
the following form:
return_vaue function_name(args)
{
code_area;
};
• Built-In Functions
• User-Defined Functions
Built-In Functions
• Few built_in javascript functions:
function description
escape(charstring returns the conversion of charstring into a form
) that displays in the browser without HTML
eval(codestring) markup.
evaluates codestring as javascript code,
returning anything that javascript returns.
isNan(numvalue) returns true if numvalue is not a number,
otherwise returns false—used with parseFloat
parseFloat(numst and parseInt.
returns numstring converted to a floating point
ring) number. If it cannot be converted, returns the
parseInt(numstrin reserved value NaN.
returns numstring converted to an integer. If it
g) cannot be converted, returns the reserved value
unescape(charstri NaN.
returns the conversion of charstring back into a
ng) form that displays in the browser with HTML
markup(the opposite of escape)
User-Defined Functions
• The syntax for creating a function is:
• function
functionname(var1,var2,...,varX)
{ some code } var1, var2, etc are
variables or values passed into the
function.
Note: A function with no parameters
must include the parentheses () after
the function name:
• function functionname() { some code
example
• <html>
<head>
<script type="text/javascript">
function myfunc(a)
{ return a;
}
</script>
</html>
<body>

<script type="text/javascript">
var a=10;
for(i=1; i<=10; i++)
{
document.write(i);
}
</script>
<script type="text/javascript">
document.write(myfunc(12));
document.write(myfunc(12));
document.write(myfunc(12));
</script>
</body>
</html>
VIII. Flow Control

• Conditional control
– if control
– if…else control
– switch control
• Loop control
– for control
– while control
– break and continue
IF control
• If Statement
• Syntax
• if (condition) { code to be executed if
condition is true }
IF… ELSE control
• If...else Statement
• If you want to execute some code if a
condition is true and another code if
the condition is not true, use the
if....else statement.
• Syntax
• if (condition) { code to be executed if
condition is true } else { code to be
executed if condition is not true }
If...else if...else control
• If...else if...else Statement
• You should use the if....else if...else
statement if you want to select one of
many sets of lines to execute.
• Syntax
• if (condition1) { code to be executed if
condition1 is true } else if (condition2)
{ code to be executed if condition2 is
true } else { code to be executed if
condition1 and condition2 are not
Switch control
• The JavaScript Switch Statement
• You should use the switch statement
if you want to select one of many
blocks of code to be executed.
• Syntax
• switch(n) { case 1: execute code
block 1 break; case 2: execute code
block 2 break; default: code to be
executed if n is different from case 1
and 2 }
For loop control
• The for loop is used when the number
of iterations is known.
• Syntax
for (var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}
while loop control
• The while loop
• The while loop is used when you
want the loop to execute and
continue executing while the
specified condition is true. 
while (var<=endvalue)
{
code to be executed
}
Transfer statements
• JavaScript break and continue
Statements
• There are two special statements
that can be used inside loops:
– break and continue.
• JavaScript For...In Statement
• The for...in statement is used to loop
(iterate) through the elements of an
array or through the properties of an
object.
• The code in the body of the for ... in
loop is executed once for each
element/property.
• Syntax
• for (variable in object) { code to be
executed } The variable argument can
be a named variable, an array element,
or a property of an object.
IX. Objects
• to group together methods and properties
into one data structure.
• doesn't support inheritance or
polymorphism
• encapsulation is simply the process of
wrapping up those functions and variables
into a package.
• variables are known as properties and
functions are known as methods
• method is just a function that is contained
inside of an object
• Property is simply a variable that is
Objects
• Built-In Objects
• math.sqrt()
• User-Defined Objects
• Properties inside the object is set using this
statement
• Functions are used to create objects
e.g., function myfn(arg1,arg2,arg2)
{ this.arg1=arg1,
this.arg2=arg2;
this.arg3=arg3;
}
User-Defined Objects(contd.)
• This cookie-cutter is referred to as the
object’s constructor.
• Using this cookie-cutter to create an object
is known as instantiation.
• myobj=new myfn(“abc”,12,12.22)
• Object properties are referred as
a1=myobj.arg1;
a2=myobj.arg2;
a3=myobj.arg3;
• You can achieve the same with ‘with’
statement
with(myobj)
{ a1=arg1;
X. Arrays
• Allows you to hold an arbitrary number of
“things” without defining beforehand what
they will hold.
• An array is created much like an object,
using Array as the constructor, with the
number of elements as the argument for
that constructor.
• e.g., list = new Array(10);
I/O and PopUp Boxes
• Alert Box
• An alert box is often used if you want to
make sure information comes through to the
user.
• Syntax: alert(“text");

• Confirm Box
• A confirm box is often used if you want the
user to accept something.
• If the user clicks "OK", the box returns true.
If the user clicks "Cancel", the box returns
false.
• Syntax: confirm(“text");
I/O and PopUp Boxes
• Prompt Box
• if you want the user to input a value
• When a prompt box pops up, the user will
have to click either "OK" or "Cancel" to
proceed after entering an input value.
• If the user clicks "Cancel" the box returns
null.
• Syntax:
prompt(“inputtext","defaultvalue");
String Object

You might also like