Podstawy tworzenia stron WWW

tacitmarigoldInternet et le développement Web

25 janv. 2014 (il y a 3 années et 6 mois)

222 vue(s)

JavaScript

Bartosz Sakowicz

JavaScript
-

basics

JavaScript is used in millions of Web pages to improve the design,
validate forms, detect browsers, create cookies, and much more.


JavaScript is the most popular scripting language on the internet,
and works in all major browsers, such as Internet Explorer, Mozilla,
Firefox, Netscape, Opera.

JavaScript


basics (2)


JavaScript was designed to add interactivity to HTML pages


JavaScript is a scripting language


A JavaScript is usually embedded directly into HTML pages


JavaScript is an interpreted language


It is free



Java != JavaScript !!!

JavaScript
-

examples

<html>

<body>

<script type="text/javascript">

<!




document.write(“It is JavaScript!")

//
--
>

</script>

</body>

</html>

JavaScript


examples(2)

<html><head>

<script type=“text/javascript”>

function pushbutton() {


alert(“Hello!");

}

</script></head><body>

<form>

<input type="button" name="hello" value=“Hello"
onclick="pushbutton()">

</form>

</body></html>

JavaScript


examples(3)

<html><head>

<script type=“text/javascript”>

function getname(str) {


alert("Hi, "+ str+"!");

}

</script></head><body>

<p>Enter your name:</p>

<form>

<input type="text" name="name" onblur="getname(this.value)"
value="">

</form></body></html>

Inserting JavaScript

1)
<head> section (as in previous transparencies)

2)
Inline scripts:

<body> <script type="text/javascript"> .... </script> </body>

3) External file:

<head>

<script src=“
menu
.js"></script>

</head>

Hierarchy of objects

Window
Navigator
Link
Anchor
History
Document
Location
Textarea
Text
Submit
Select
Reset
Radio
Password
Hidden
Checkbox
Button
Image
Form
Basics usage of objects

a
)

With

dot

(
.
)



the

same

as

in

C
++

(
preferred

way
)


b
)

With

usage

the

table

of

properties

of

object,

eg
:




document[
1
]



useful

with

loops



c
)

With

usage

of

association

table
:




document["href"]

Expressions & operators

x=
7
;

//

variables

doesn’t

have

type!


str

=


Some

text
"
;


(bool
1

==

true)

&&

(bool
2

==

false)
;


str

=


Some
"

+

"

te
x
t"
;


All

the

operators

are

identical

as

in

C++/Java
.

Control flow statements

Statement


Example usage


break



for(i=
1
;

i<
5
;

i++)

{

//

expressions

break
;

}


continue


The

same

as

break
.


for


See

break
..


for
..
in


for

(i

in

obj)

{//

expressions}


goto


goto

label
1
;


if
..
else


if(
condition
)

{//

expressions

if

true

}

else

{//

expressions

if

false

}



return


function

sum(a,b)

{x=a+b
;

return

x
;
}

while


do
-
while


while(
condition
)

{//
expressions
}


do

{

//expressions

}

while

(condition)


with


with

(document)

{

write

"

Some

text

"
;

}


Events
-

onload and onUnload


Events

are

triggered

when

the

user

enters

or

leaves

the

page
.

The

onload

event

is

often

used

to

check

the

visitor's

browser

type

and

browser

version,


Events

are

often

used

to

deal

with

cookies

that

should

be

set

when

a

user

enters

or

leaves

a

page
.


Eg
:

<body

onload="DoSthonload">


<body

onunload="DoSthonunload">



Events
-

onFocus, onBlur and onChange


Events

are

often

used

in

combination

with

validation

of

form

fields
.


Eg
:


<input

type="text"

size="
30



id="email"

onchange="checkEmail()">
;

Events
-

onSubmit


Event

is

used

to

validate

all

form

fields

before

submitting

it
.


Eg
:


<form

method="post"

action="xxx
.
htm"

onsubmit="return

checkForm()">

Events
-

onMouseOver and onMouseOut

Events

are

often

used

to

create

"animated"

buttons,

eg
:

<html><head>

<script

type=“text/javascript”><!
--

function

changeImage(i,j)

{

document
.
images[i]
.
src

=

“image"+j+"
.
gif"
;

}
--
></script></head><body>

<a

href=

"doc
.
htm"

onmouseover="changeImage(
0
,
2
)"

onmouseout="changeImage(
0
,
1
)">

<img

src=“image
1
.
gif"

alt=“image
1
"/></a>

<a

href=

"doc
.
htm"

onmouseover="changeImage(
1
,
2
)"

onmouseout="changeImage(
1
,
1
)">

<img

src=“image
1
.
gif"

alt=“image
1
"/></a></body></html>