js - Spider

nostalgicisolatedΛογισμικό & κατασκευή λογ/κού

4 Νοε 2013 (πριν από 3 χρόνια και 9 μήνες)

63 εμφανίσεις

Day 2


Developed by
Netscape

Communications
Corporation


1
st

Web scripting language to be introduced


Originally called “
LiveScript



An
object
-
oriented

language that allows creation
of interactive web
pages


Renamed as
Javascript

to indicate its relationship
with
Java


Add
scrolling


Validate

the contents of a form and make calculations


Display messages to the user either as a part of the
WebPage

or in
alert boxes
.


Animate
/Create images with effects


Detect browser in use and display different content for
different browsers


Detect installed plugins and notify if needed to install


To add JS to a page, use the tags <script> and </script>


JS cannot be specified anywhere except within <script>
tags (exception: event handlers)


JS can be placed in:


<body>


<head>


Within <html> tags(event handlers)


Separate .
js

files

1.
<script> in <
head
> section

2.
<script> in <
body
> section

3.

Event handlers
are executed when their events
happen

(
Eg
.
onLoad

executes when the body is loaded. Since
<head> section is loaded before any events, you can define
functions there and use them as event handlers)


JS apps execute on the
Client

(Web Browser)


CGI execute on the
Server


JS can read information from a form and
manipulate it but
CAN’T STORE
in Web Server


CGI can read and write files on the server


Server side implementation of JS is also available


An editor ( even Notepad is sufficient)


A Web Browser


A Computer


<html>

<body>


<script type = "text/
javascript
">



document.write
("This is my first JavaScript
!");


</script
>

</
body>

</
html>


It is an interpreted language


Case
-

sensitive


Like other programming languages it has


Data types


Operators


Conditional as well as looping statements


Functions


Additional Features


Events handling


Popup Boxes

There are
three

types of popup boxes in JavaScript
:

1.
alert( )
: used when we 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.


e.g.




alert(“
This will show you an alert window
”);



2
.
confirm( )
:
used when we 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. Clicking Ok will cause TRUE to be passed to
the program while a click on cancel will send a
FALSE.


e.g.



confirm(“
Do you want to study more?
”);



3.
prompt( )
-

used if we 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.


e.g.


var

name =
prompt(“
Please enter your name
”);


<html>

<head>


<
script
type = "text/
javascrip
t
"
>


var

name =
prompt("
Enter your name
")
;


if
((
confirm("
Do you want to design a web site?
")
))



alert
("
Hi " + name + " ! Welcome to the web
weaving course
")
;


else



alert
("
Good Bye "+ name + "!
"
);

</script>

</head>

<body></body>

</html
>


A function contains code that will be executed by an
event

or by a
call

to the function
.


Syntax: function
fn_name
(
arguements
){}



E.g
.


<script type="text/
javascript
">


function
displaymessage
()


{



alert
("Hello World!");


}

</script
>


<input type = "button" value = "Click me!"
onclick

=
"
displaymessage
()"

/>

Passing a
function to another function as a
parameter(callback)
and
having it
execute is called a
callBack


Eg


function fun0() {




fun1(data,fun2);




}




function fun1(callback
)
{





//…




callback();




}



function fun2(data
)
{




// ...



}


Events are actions that can be detected by JavaScript
.


Examples of events:


A
mouse click


A web page or an image
loading


Mousing

over
a hot spot on the web page


Selecting
an
input field
in an HTML form


Submitting

an HTML form


A
keystroke



onLoad

and
onUnload




The
onLoad

and
onUnload

events are triggered when the user enters or
leaves the page.


onMouseOver

and
onMouseOut



The
onMouseOver

and
onMouseOut

are often used to create "animated"
buttons.


onSubmit



The
onSubmit

event is used to validate ALL form fields before submitting
it.


onFocus
,
onBlur

and
onChange



The
onFocus
,
onBlur

and
onChange

events are often used in combination
with validation of form fields.



It relates to the way we can access any of the elements of the web
page using JavaScript.


Using DOM JavaScript enabled browsers identify the collection of
web page
objects


window

document

form1

form2

image1

element1

element2

All objects have :


Properties :
that determine the functionality of the object e.g.
bgColor
, name


Methods :
that allow access to these properties e.g. write


Events :
that allows JavaScript code snippets to be connected to
the
object by being mapped to appropriate
Javascript

event handlers

e.g.
onClick



Loading new page content
without
reloading the page


Animation
of page
elements (
Eg
.
F
ade
in,Fade

out,
resize, move)


Interactive
content (
Eg.games,playing

audio and
video)


Validating

input values of a

web form



Transmitting
information about the user's reading habits and
browsing activities to various websites. Web pages frequently do this
for

web analytics
,

ad tracking
,

personalization

or other purposes
.


Now,we

will discuss an example: A Simple form


<html>

<head>

<script language="
javascript
" type="text/
javascript
">

function
validate_required
(
field,alerttxt
)

{


if (
field.value
==null||
field.value
=="")


{


alert(
alerttxt
);
return false;


}


else


return true;

}

function
validate_form
(
thisform
)

{



if
(
validate_required
(thisform.
firstname
,“Enter Name")==
false)



{



thisform.firstname.focus
();




return
false;


}


if
(
validate_required
(
thisform.email,"Email

must be filled out!")==false)



{



thisform.email.focus
();




return
false
;


}



if
(
validate_required
(
thisform.essay
,“Enter

all fields!")==
false)



{



thisform.essay.focus
();




return
false; }



}

</script>

</head
>


<body>

<form
action="submit.htm"
onSubmit

="return
validate_form
(this)">

<h2 align = "
centre
"> FORM FOR BECOMING CROREPATI
</
h2>

<p> Name: <input type = "text" name = "
firstname
" size = "12" > </p>

<p> E
-
mail : <input type = "text" name ="email" size = "32" > </p>

<
p>In 50 words or less write what would you do if you become
crorepati
: </p>

<
textarea

name = "essay" rows = "5" cols = "40" > </
textarea
>

<p> Submit your entry here: <input type = "submit" value =
"Submit"> </p>

</form
>

</body>

</html>