1 n o i s r e V - cs.ucc.ie

CS11

16/C

S501

8W

eb D

evel

opm

ent 2

Dr D

erek

Brid

geSc

hool

of C

ompu

ter S

cien

ce &

Info

rmat

ion

Tech

nolo

gyU

nive

rsity

Col

lege

Cor

k

Java

Scrip

t pre

limin

arie

sSu

ppos

e yo

ur W

eb p

age

cont

ains

a te

xtfie

ld:

<inputtype="text"name="my_textfield"id="my_textfield">

Supp

ose

your

Java

Scrip

t ret

riev

es it

:let element = document.querySelector("#my_textfield");

To c

hang

e w

hat i

s di

spla

yed

in th

e te

xtfie

ld:

element.value ="Hello";

To a

cces

s w

hat t

he u

ser

has

type

d in

to th

e te

xtfie

ld:

let users_input = element.value;

This

is a

noth

er e

xam

ple

of c

hang

ing/

acce

ssin

g at

trib

ute

valu

es —

lect

ure

14

Vers

ion

1A

prog

ram

that

con

vert

s yo

ur h

eigh

t fro

m fe

et-a

nd-in

ches

to c

entim

etre

s

Vers

ion

1 co

mpr

ises

:

heightv1.py

— a

sel

f-pr

oces

sing

pag

e

Valid

atio

n of

use

r in

put —

don

e se

rver

-sid

e by

heightv1.py

Calc

ulat

ion

of h

eigh

t in

cm —

don

e se

rver

-sid

e by

heightv1.py

heightv1.py

#!/usr/local/bin/python3

from cgitb import enable

enable()

from cgi importFieldStorage

print('Content-Type: text/html')

print()

def check_for_int(text, minimum, maximum):

if text.strip()=='':

return'Required'

try:

number =int(text)

if number < minimum:

return'Must be no less than '

+ str(minimum)

if number > maximum:

return'Must be no greater than '

+ str(maximum)

return''

exceptValueError:

return'Must be a whole number'

form_data =FieldStorage()

feet_input ='0'

feet_int =0

feet_msg =''

inches_input ='0'

inches_int =0

inches_msg =''

cm_int =0

if len(form_data)!=0:

feet_input = form_data.getfirst('feet_input','')

inches_input = form_data.getfirst('inches_input','')

feet_msg = check_for_int(feet_input,0,8)

inches_msg = check_for_int(inches_input,0,11)

ifnot feet_msg andnot inches_msg:

feet_int =int(feet_input)

inches_int =int(inches_input)

cm_int =(12* feet_int + inches_int)*2.5

print("""

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Getting high</title>

</head>

<body>

<p>How tall are you?

</p>

<form action="heightv1.py" method="get">

<label for="feet_input">Feet: </label>

<input type="text" name="feet_input" id="feet_input" value="%s" />

<span id="feet_msg">%s</span>

<label for="inches_input">Inches: </label>

<input type="text" name="inches_input" id="inches_input" value="%s" />

<span id="inches_msg">%s</span>

<label for="cm_input">Centimetres: </label>

<input type="text" name="cm_input" id="cm_input" value="%i" disabled />

<input type="submit" />

</form>

</body>

</html>"""%(feet_input, feet_msg, inches_input, inches_msg, cm_int))

Vers

ion

2Ve

rsio

n 2

com

pris

es:

heightv2.py

heightv2.js

Valid

atio

n of

use

r in

put:

done

clie

nt-s

ide

by heightv2.js

whe

n us

er s

ubm

its

but a

lso

done

ser

ver-

side

by heightv2.py

Q: W

hat's

the

adva

ntag

e of

doi

ng it

clie

nt-s

ide?

Q: W

hy th

e du

plic

atio

n? W

hy d

o w

e ne

ed to

do

it se

rver

-sid

e as

wel

l?

Calc

ulat

ion

of h

eigh

t in

cm —

don

e se

rver

-sid

e by

heightv2.py

heightv2.py

Iden

tical

to heightv1.py

exc

ept:

print("""

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />


<script src="heightv2.js" type="module"></script>

</head>

<body>

<p>How tall are you?

</p>

<form action="heightv2.py" method="get">

<label for="feet_input">Feet: </label>

<input type="text" name="feet_input" id="feet_input" value="%s" />

<span id="feet_msg">%s</span>

<label for="inches_input">Inches: </label>

<input type="text" name="inches_input" id="inches_input" value="%s" />

<span id="inches_msg">%s</span>

<label for="cm_input">Centimetres: </label>

<input type="text" name="cm_input" id="cm_input" value="%i" disabled />

<input type="submit" />

</form>

</body>

</html>"""%(feet_input, feet_msg, inches_input, inches_msg, cm_int))

heightv2.js

let form_element;

let feet_input;

let feet_span;

let inches_input;

let inches_span;

let cm_input;

document.addEventListener('DOMContentLoaded', init,false);

function init(){

feet_input = document.querySelector('#feet_input');

feet_span = document.querySelector('#feet_msg');

inches_input = document.querySelector('#inches_input');

inches_span = document.querySelector('#inches_msg');

cm_input = document.querySelector('#cm_input');

form_element = document.querySelector('form');

form_element.addEventListener('submit', validate_input,false);

} function check_for_int(text, minimum, maximum){

let trimmed_text = text.trim();

if(trimmed_text ===""){

return"Required";

} let number =~~Number(trimmed_text);

if(String(number)!== trimmed_text){

return"Must be a whole number";

} if(number < minimum){

return"Must be no less than "

+ minimum;

} if(number > maximum){

return"Must be no greater than "

+ maximum;

} return'';

} function validate_input(event){

feet_msg = check_for_int(feet_input.value,0,8);

inches_msg = check_for_int(inches_input.value,0,11);

feet_span.innerHTML = feet_msg;

inches_span.innerHTML = inches_msg;

if(feet_msg || inches_msg){

event.preventDefault();

}}

Not

es o

n Ve

rsio

n 2

The

form

list

ens

for

subm

it ev

ents

:form_element.addEventListener('submit', validate_input,false);

The

liste

ner

func

tion

look

s lik

e th

is:

function validate_input(event){

… if(feet_msg || inches_msg){

event.preventDefault();

}} Q: W

hat i

s th

e pu

rpos

e of

the

last

sta

tem

ent i

n th

e fu

nctio

n?

Vers

ion

3Ve

rsio

n 3

com

pris

es:

heightv3.py

heightv3.js

Iden

tical

to V

ersi

on 2

exc

ept t

hat c

lient

-sid

e va

lidat

ion

of u

ser

inpu

t is

done

:

whe

neve

r us

er c

hang

es w

hat s

/he

has

type

d an

d

whe

n s/

he s

ubm

its (a

s in

Ver

sion

2)

heightv3.js

Iden

tical

to heightv2.js

, exc

ept:

function init(){







form_element.addEventListener('submit', validate_input,false);

feet_input.addEventListener('change', validate_input,false);

inches_input.addEventListener('change', validate_input,false);

} Vers

ion

4W

e do

n't n

eed

the

serv

er-s

ide

Pyth

on p

rogr

am! J

avaS

crip

t can

do

the

calc

ulat

ions

clie

nt-s

ide

Vers

ion

4 co

mpr

ises

:

heightv4.html

heightv4.js

Valid

atio

n of

use

r in

put —

don

e cl

ient

-sid

e by

heightv4.js

Calc

ulat

ion

of h

eigh

t in

cm —

don

e cl

ient

-sid

e by

heightv4.js

heightv4.html

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="utf-8"/>


<scriptsrc="heightv4.js"type="module"></script>

</head>

<body>

<p>

How tall are you?

</p>

<form>

<labelfor="feet_input">Feet: </label>

<inputtype="text"name="feet_input"id="feet_input"value="0"/>

<spanid="feet_msg"></span>

<labelfor="inches_input">Inches: </label>

<inputtype="text"name="inches_input"id="inches_input"value="0"/>

<spanid="inches_msg"></span>

<labelfor="cm_input">Centimetres: </label>

<inputtype="text"name="cm_input"id="cm_input"value="0"disabled/>

<inputtype="submit"/>

</form>

</body>

</html>

heightv4.js

let form_element;

let feet_input;

let feet_span;

let inches_input;

let inches_span;

let cm_input;

document.addEventListener('DOMContentLoaded', init,false);

function init(){







form_element.addEventListener('submit', convert_to_cm,false);

feet_input.addEventListener('change', validate_input,false);

inches_input.addEventListener('change', validate_input,false);

} function check_for_int(text, minimum, maximum){

let trimmed_text = text.trim();

if(trimmed_text ===""){

return"Required";

} let number =~~Number(trimmed_text);

if(String(number)!== trimmed_text){

return"Must be a whole number";

} if(number < minimum){

return"Must be no less than "

+ minimum;

} if(number > maximum){

return"Must be no greater than "

+ maximum;

} return'';

} function validate_input(event){





} function convert_to_cm(event){





if(! feet_msg &&! inches_msg){

feet_int =Number(feet_input.value);

inches_int =Number(inches_input.value);

cm_int =(12* feet_int + inches_int)*2.5;

cm_input.value = cm_int;

} event.preventDefault();

}

Not

es o

n Ve

rsio

n 4

Now

, eve

ryth

ing

is b

eing

don

e cl

ient

-sid

e —

usi

ng Ja

vaSc

ript

Q: W

hat a

re th

e co

st-b

enefi

t tra

de-off

s he

re?

Q: W

hen must w

e us

e a

serv

er-s

ide

appr

oach

?

Documents

1 n o i s r e V - cs.ucc.ie