Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
5 views

Website JavaScript

Uploaded by

innosamwel445
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
5 views

Website JavaScript

Uploaded by

innosamwel445
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 50

The JavaScript Language

1
Objectives
• Learn about JavaScript
• Using JavaScript in HTML
• Language Elements
• Variables
• Operators
• Control Statements
• Functions
• Objects
• Exception handling.

2
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 usually embedded directly into HTML pages
3
About JavaScript
• JavaScript was designed to add interactivity to HTML
pages
• JavaScript is a scripting language (a scripting language is
a lightweight programming language)
• A JavaScript consists of lines of executable computer
code
• JavaScript is an interpreted language (means that scripts
execute without preliminary compilation)
• Everyone can use JavaScript without purchasing a license

4
Why use JavaScript?
• To add dynamic function to your HTML.
– JavaScript does things that HTML can’t—like logic.
– You can change HTML on the fly.
• To remove some of the form-processing burden.
– JavaScript runs in the browser, not on the Web server.
• Better performance
– JavaScript can validate the data that users enter into the form,
before it is sent to your Web application.

5
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 6
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
7
• JavaScript can be put in HTML form object, such as a button
• This JavaScript will be executed when the form object is used
Language Elements
• Variables
• Operators
• Control Statements
• Functions
• Objects

8
JavaScript Variables
• Untyped!(Implicit) :
foo = 6;

• Can be declared with var keyword (Explicit ):


var foo;

• Can be created automatically by assigning a value:


foo=1; blah="Hi Dave";

9
Variable Scope
• Global
• Declared outside functions
• Any variable implicitly defined

• Local
• Explicit declarations inside functions

• Note
• Variables can hold any valid type of value (Dynamic
Typing ), and can hold values of different types at 10
different times during execution.
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
– 0, "0", empty strings, undefined, null, and NaN are false , 11
other values are true
Operators
• Arithmetic, comparison, assignment, bitwise, boolean (pretty
much just like C++).

+ - * / % ++ -- == != > <
&& || ! & | << >>

12
Arithmetic Operators
Operator Description Example Result

+ Addition x=2 4
y=2
x+y
- Subtraction x=5 3
y=2
x-y
* Multiplication x=5 20
y=4
x*y
/ Division 15/5 3
10/3
3.3333333333333335
% Modulus (division 5%2 1
remainder)
10%2 0
2%5 2
++ Increment x=5 x=6
13
x++
-- Decrement x=5 x=4
x--
Assignment Operators
Operator Example Is The Same As

= x=y x=y

+= x+=y x=x+y

-= x-=y x=x-y

*= x*=y x=x*y

/= x/=y x=x/y

%= x%=y x=x%y
14
Comparison Operators
Operator Description Example

== is equal to 5==8 returns false

=== is equal to (checks for both value x=5


and type)
y="5"

x==y returns true

x===y returns false

!= is not equal 5!=8 returns true

> is greater than 5>8 returns false

< is less than 5<8 returns true

>= is greater than or equal to 5>=8 returns false

<= is less than or equal to 5<=8 returns true


15
Logical Operators
Operator Description Example

&& and x=6

y=3

(x < 10 && y > 1) returns true

|| or x=6

y=3

(x==5 || y==5) returns false

! not x=6

y=3

16
!(x==y) returns true
Different from C++
• The + operator is used for addition (if both operands are
numbers)
-or-
• The + operator means string concatenation (if either one of the
operands is not a number)

17
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

18
Control 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;

19
Control 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 { } 20
Control Statements, III
• And few not in C
for (var in object)

with (object)

21
Javascript Functions
• The keyword function is used to define a function
(subroutine):

function add(x,y) {
return(x+y);
}
• No type is specified for arguments!

22
What is the value of:

add(3,4) 7

add(“3”,”4”) 34

add(“Hi”,”Dave”) “HiDave”

add(3,”Hi”) “3Hi”

add(“2.13blah”,3.14 “2.13blah3.14”
23
)
Javascript program
<SCRIPT>
function add(x,y) {
return(x+y);
}

document.write("add(3,4) is " + add(3,4) + "<BR>");


document.write("add(\"3\",\"4\") is " + add("3","4") +
"<BR>");
document.write("add(\"Hi\",\"Dave\") is " +
add("Hi","Dave") + "<BR>");
document.write("add(3,\"Hi\") is " + add(3,"Hi") +
"<BR>");
document.write("add(\"2.13blah\",3.14) is " +
add("2.13blah",3.14)); 24
</SCRIPT>
JavaScript Global Functions
Function Description
escape() Encodes a string that is not in ASCII character set
e.g. document.write(escape(“Hello! World.”))

eval() Evaluates a string and executes it as if it was script


code e.g. document.write("<br>" + eval("2+2"));

isFinite() Determines whether a value is a finite, legal number


Eg isFinite(123)-> true, isFinite("Hello")-> false

isNaN() Determines whether a value is an illegal number


Eg isNaN(123)-> false, isNaN("Hello")-> true

Number() Converts an object's value to a number


parseFloat() Parses a string and returns a floating point number

parseInt() Parses a string and returns an integer 25


String() Converts an object's value to a string
unescape() Decodes an encoded string
Objects in JavaScript
• Objects have attributes and methods.
• Many pre-defined objects and object types.
• Using objects follows the syntax of C++/Java:
objectname.attributename
objectname.methodname()
• JavaScript is not Object Oriented – but Object-
Based
26
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"); 27
The document object
• Many attributes of the current document are available via the
document object:

Title Referrer
URL Images
Forms Links
Colors

28
document Methods
• document.write() like a print statement – the output
goes into the HTML document.
• document.writeln() adds a newline after printing.
• document.getElementById() Returns the element that
has the ID attribute with the specified value

document.write("My title is " +


document.title);

29
Example
<HEAD>
<TITLE>JavaScript is Javalicious</TITLE>
</HEAD>
<BODY>
<h3>I am a web page and here is my
name:</h3>
<script type=”text/Javascript”>
document.write(document.title);
</script>
<hr>
30
The navigator Object
• Represents the browser. Read-only!
• Attributes include:
i ne
t e rm is
de e r
appName t o w s
e d
s of b r o
appVersion
n u
t e d
platform of t kin d E)
a e I
wh g us e vs.
e i n ap
b t sc
(Ne
31
navigator Example

if (navigator.appName ==
"Microsoft Internet Explorer") {
document.writeln("<H1>This page
requires Netscape!</H1>");
}

32
The window Object
• Represents the current window.

• There are possible many objects of type Window, the


predefined object window represents the current window.
• Access to, and control of, a number of properties including
position and size.

33
window attributes
• document
• name
• status the status line
• parent

34
some window methods
alert()
close()
prompt()
moveTo() moveBy()
open()
scroll() scrollTo()
resizeBy() resizeTo()

35
The Math Object
• Access to mathematical functions and constants.
• Constants: Math.PI
• Methods:
Math.abs(), Math.sin(), Math.log(), Math.max(),
Math.pow(), Math.random(), Math.sqrt(), …

36
Math object in use
// returns an integer between 1 and 6
function roll() {
var x = Math.random();

// convert to range [0,6.0)


x = x * 6;
// add 1 and convert to int
return parseInt(1+x );
}

document.writeln("Roll is “ + roll() ); 37
Math object in use
<script type ="text/javascript">
<!--
var input1 = window.prompt("Enter first number", "0");
var input2 = window.prompt("Enter second number", "0");
var input3 = window.prompt("Enter third number", "0");
var value1 = parseFloat(input1);
var value2 = parseFloat(input2);
var value3 = parseFloat(input3);
var maxValue = maximum( value1, value2, value3);

document.writeln("First number: " + value1 +


"<br /> Second number: " + value2 +
"<br />Third number: " + value3 +
"<br />Maximum is: " +maxValue );

function maximum(x,y,z)
{
return Math.max(x,Math.max(y,z)); 38
}
//-->
</script>
Array Objects
• Arrays are supported as objects.

• Attribute length

• Methods include:
concat join pop push reverse sort

39
Some similarity to C++
• Array indexes start at 0.
• Syntax for accessing an element is the same:
a[3]++;
blah[i] = i*72;

40
New Stuff (different from C+
+)
• Arrays can grow dynamically – just add new elements at the
end.
• Arrays can have holes, elements that have no value.
• Array elements can be anything
• numbers, strings, or arrays!

41
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:
42
– var colors = new Array("red","green", "blue");
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: board[3][3]
43
Arrays examples
• car = { myCar: "Saturn", 7: "Mazda" }
– car[7] is the same as car.7
– car.myCar is the same as car["myCar"]
• If you know the name of a property, you can use dot notation:
car.myCar
• If you don’t know the name of a property, but you have it in a
variable (or can compute it), you must use array notation:
car["my" + "Car"]
• var colors = [" blue ",
" green ",
" yellow "];
var x = window.prompt("enter a number "); 44

document.body.style.background = colors[x];
Array of Arrays Example
var board = [ [1,2,3],
[4,5,6],
[7,8,9] ];

for (i=0;i<3;i++)
for (j=0;j<3;j++)
board[i][j]++;

45
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 containing the values of the
array elements, separated by commas

46
JavaScript Popup Boxes
• Alert Box
• An alert box is often used if you want to make sure
information comes through to the user.
• When an alert box pops up, the user will have to click
"OK" to proceed.
<script>
alert("Hello World!")
</script>

47
JavaScript Popup Boxes - 2
• Confirm Box
• A confirm box is often used if you want the user to verify or accept
something.
• When a confirm box pops up, the user will have to click either "OK"
or "Cancel" to proceed.
• If the user clicks "OK", the box returns true. If the user clicks
"Cancel", the box returns false.
<script>
function deleteRecord( id){
if(confirm("Are you sure you want to delete this record? ")){
window.location.href = ‘index.php?q=delete' + '&id=' + id;
} 48
}
</script>
JavaScript Popup Boxes - 3
• Prompt Box
• A prompt box is often used if you want the user to input a value
before entering a page.
• 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 "OK“, the box returns the input value. If the user
clicks "Cancel“, the box returns null.

<script>
num1 = window.prompt("Enter the first number");
</script>
49
The End

50

You might also like