JavaScript for the Web

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

4 Νοε 2013 (πριν από 4 χρόνια και 8 μέρες)

66 εμφανίσεις

INF 240
-

Web Design



JavaScript for the Web


An introduction for the faint
-
hearted

Just what the doctor recommended!

You do
not

need to
know

how to program JavaScript
to
be able to use JavaScript in your web pages.



-

But

you
do

need to know how to
include

JavaScript in Web pages






the HTML markup for JavaScript.



There are many free libraries of JavaScript scripts on
the Internet.



-

You may import JavaScript scripts and use
them in your Web pages


copy and paste!

JavaScript


JavaScript

is known as a
scripting

language.



-

JavaScript

runs within the browser.



-

JavaScript

statements

are
interpreted

by a
Web
browser

when embedded within a Web page, without any
interaction with the server



-

As the
JavaScript

code is
client
-
based

(
i
.e.
executed by the
the browser
), there is less load on the
server.



JavaScript

can be used to create
a more dynamic and
interactive environment

for the browser user.


Interactivity?



-

Interactive effects such as





䍨慮杩湧a業来猬⁣g慮杩湧⁣潬潵牳Ⱐ




慮業慴敤e杲慰桩捳Ⱐ整挮


Everything concerned with a Web page can be
dynamically controlled in terms of content, its placement,
visibility, motion, etc. via
JavaScript
.



JavaScript

should not be confused with
Java
, the
programming language

that was used to develop (the now
deprecated)
Java
applets

for Web pages.


JavaScript

-

not as complex as a full
-
blown
programming language (like
C++
), but is more powerful
than a markup language (like
HTML
).

JavaScript



-

is the predominant
client
-
side

(i.e. browser
-
based) scripting language.



Some new HTML5 elements (e.g.
canvas
) make big use
of JavaScript.



Other scripting languages



-

VBScript



-

ActionScript

for Flash

A
script

is just
a set of statements



-

a list of instructions to specify what actions are
to be performed by the browser
.


Analogous to



-

a cooking recipe



-

a knitting pattern



etc.



Scripting (and programming) languages have a strict,
formal language (
“reserved” or “keywords”
) and a
grammar (i.e.
syntax
).



-

More formal than natural languages.

Importantly, with the JavaScript statements, we may
specify actions to be performed by the browser on the
Web page



-

sequentially



perform actions one after the
other.



-

conditionally



perform actions based on some
the validity (true or false) of some condition.



-

repetitively



perform actions in a loop.


Objects and Properties


For JavaScript, your Web page is an
“object”
.


Any

table, form, button, image, or link on your Web
page is also an
object
.


Each
object

has
certain properties

(properties such as
colour, etc.).


E.g. the background colour of your Web page (aka
HTML document) is referenced as
document.bgcolor

in
JavaScript.


You may change the colour of your page to red by
writing the JavaScript statement:



document.bgcolor="red“;

Methods


Most objects have a certain collection of actions that
they can perform,
over and over again



so
-
called
functions.



Different objects can do different things, just as a
door can open and close, while a light can turn on and
off.



E.g. You can write
"Hello World"

into a browser window
by writing
document.write("Hello World");

.


write()

is a
function

of the
document

object.

As well as Web page objects, you may define and
manipulate your own objects (or
variables
) in
JavaScript
.


Operations

on variables are also provided.




E.g. addition, subtraction, ...



Additionally, you may define your own functions to
perform actions that you specify.

Since
JavaScript

is
not

HTML
, you must let the
browser know in advance when you
include

JavaScript

in
an
Web page
.


This is done using the
<script>

element
.


The browser uses the



<script type=“text/javascript">


and



</script>


tags

to discover where any
JavaScript

starts and ends.

Scripts

are included in
HTML documents



-

usually in the
<head>

section



-

but

may also go in the
<body>

section



Scripts in the
body section

will be executed when the
Web page loads in the browser
.



Scripts in the
head section

will be executed when
“triggered” by some browser user interaction (an
“event”) with an object (e.g. an image) on the Web
page.


Scripts may also be placed in
external files

(with
extension
.js
) that are referenced by the HTML
document:




<script src=“
filename
”> </script>



May have many scripts in a single HTML document.


Consider this example


JavaScript in the
body

section:


<html>


<head>


<title>My Javascript Page</title>


</head>



<body>


<script type=“text/javascript">


alert("Welcome to my Web page!");


</script>


</body>

</html>


Executed when

the page loads

in the browser

alert(...)

is a JavaScript function
that displays a text message in
a box in the browser window,

alert

is a standard
JavaScript

instruction

that will cause
an
alert box

to pop up on the screen.


The viewer will need to click the "OK" button in the
alert
box

to proceed.



By entering the

alert
instruction

between the

<script language="javascript">

and

</script>

tags, the
browser will recognize it as a
JavaScript instruction
.



JavaScript

uses simple instructions in order to manipulate
and control parts of the Web page.

Some JavaScript Instructions


E.g.


document.write

-

write plain text and/or HTML
markup to browser window.

E.g.


document.write("Hello World!");



document.write("<h1>Hello World!</h1>");


txt.fontcolor


-

change text font colour


prompt


-

displays prompt box


JavaScript is
“event
-
driven”
:



-

Designed to respond to certain browser user
actions (or
events
).


For example,



-

Whenever the user clicks on an HTML element



-

When a page is loaded



JavaScript can recognize when the browser user makes a
certain action, and the Web designer may include some
JavaScript statements in the Web page to respond to (or
“handle”
) these actions.

Event Handlers


JavaScript

may be
“triggered”

by an
“event”

happening
on the Web page, such as



onclick

-

on mouse click on a hyperlink



onmouseover

-

on moving mouse over a hyperlink



Such
events

are recognized by the browser, and you may
include some
JavaScript

in your Web page to perform
some action when these events occur.


E.g.



onclick=“perform_some_action()”

Functions


Most common use of
JavaScript

is to develop
functions
:



-

These define
a group

of
JavaScript

instructions

which are placed in the
head

section

of the HTML
document.



-

Functions define a set of actions

(expressed in
JavaScript
) to be performed when
“triggered”

by an
some “event”, e.g. user clicking a (hyper)link.



-

These functions may be triggered (aka invoked or
called) as and when necessary from within the
body

section

of the HTML document.


Functions are
“reusable”

-

they may be triggered many
times from the
body
.

A
function

has the following syntax



function some_name()


{



collection of JavaScript statements


}

<html>


<head>


<script type=“text/javascript">



function someFunction()


{


some JavaScript statements


}



</script>


</head>



<body>



HTML statements to trigger a JavaScript function as appropriate



</body>

</html>


Template

Within the
<body>
section
, create a clickable button
(via an HTML

<form>
element
).


When this button is clicked, a JavaScript function is
triggered.



<form>


<input type="button”


value=“Press me!"

onclick=“displaymessage()“
/>

</form>


Example

Tell the browser when the

onclick

event

occurs,

invoke the function called
displaymessage()

Within

the <head>
section


Need to specify what action the
displaymessage()

function will perform.


<script type=“text/javascript">


function displaymessage()


{


alert(“Have a great day!");


}

</script>


This function is placed in the
<head>

section.

Example


Within

the <head>
section


<script type=“text/javascript">

function displaymessage()

{


alert(“Have a great day!");

}

</script>



Within the
<body>
section

When this button is clicked, the JavaScript function is triggered


<form>


<input type="button”


value=“Press me!"

onclick=“displaymessage()“
/>

</form>

There are many, useful

JavaScripts available for

free

on the Web

Function

displaymessage()
is triggered

when button is clicked

A number of JavaScript examples which you can run
online are available at


http://www.w3schools.com/js/default.asp



http://www.w3schools.com/js/js_examples.asp



Most Popular (Free) JavaScript Libraries


jQuery

-

http://jquery.com/



Prototype / Scriptaculous

-

http://script.aculo.us/



Yahoo! UI

-

http://developer.yahoo.com/yui/



Dojo

-

http://www.dojotoolkit.org/




These sites contain many “widgets” or Web controls
written in JavaScript that may be integrated into your
Web pages.


An example

-

www.scriptocean.com


http://www.scriptocean.com/slideshow/



http://www.scriptocean.com/slideshow/gallery.html



From this site you may download a program (i.e. a
wizard) that allows you to define and set up an
image/photo gallery.


The program produces the necessary HTML markup
(i.e. JavaScript) for the image gallery which you may
then copy and paste into your Web page.

Questions?