Webdevelopment,Business academy aarhus

Frontend programming- Day 5

1. semester - autumn 2009 - 1wu09a and 1wuo9B

Plan

 

 

Pensum:

 

Jesse James Garrett(2005): AJAX - A new Approache to Webapplications

Wikipedia documents about:

Webapplication

DHTML = HTML+CSS+JavaScript+DOM

AJAX

 

The three-legged stool

 

HTML til struktur, CSS til præsentation og JavaScript til dynamik (behavior) i browseren

 

Javascript is a wonderful tool to enhance the usability of web sites.

It is the extra layer above the mark-up "what is this text" and the CSS "how should it be displayed".

Javascript adds a new dimension, the "how should this element behave".

 

The idea of progressive enhancedment. Best practice (From Jeremy Keith's book DOM scripting )

 

Introduktion til JavaScript (use google translator for english version :-)

XHTML og CSS leverer en statisk gengivelse af en side. Her ændrer indholdet på siden sig ikke. Anderledes med anvendelse af scriptsprog. Her er det muligt at ændre indholdet dynamnisk over tid, eller ændre det som et resultat af bestemte handlinger (eng. events).

JavaScript - der oprindeligt hed oprindeligt LiveScript, og før det Mocha - blev udviklet af NetScape Communications. Skønt navnelighed er det et helt andet sprog en programmeringssproget Java som det kun har lidt til fælles med. Java er et kompileret sprog, JavaScript et fortolket sprog, og mens Java er et objektorienteret sprog, er JavaScript objektbaseret og bygger på ideen om prototyper. Ligheden mellem de to sprog bygger på deres fælles gæld til C sprogets syntaks.

JavaScript består af to hovedkomponenter:

JavaScript kernen består af det område inden for sproget som det i hovedsagen strukturelt set deler med andre programmeringssprog. Det består af elementer som:

Dokumentobjekterne (DOM) består af et hierarki browserspecifikke objekter som:

Dokument Objekt Modellen (DOM) er hierarkisk, svarende til den hierarkiske opbygning af et XHTML-dokument, hvor de enkelte elementer er indlejret i hinanden og topknudepunktet er det første, oprindelige vindue.

DOM modeller

Billedligt talt kan man sammenligne sprogets kerneområde med ledninger eller kabler, der forbinder og styrer den dynamiske afvikling af DOM's komponenter.

Det betyder bl.a. at JavaScript kernen og DOM kan tænkes uafhængigt af hinanden. Man kan fx forestille sig JavaScript kernen anvendt til andre formål. Rent faktisk har JavaScript har været anvendt sammen med ASP til serverside programmering. Tilsvarende kan man forestille sig DOM komponenterne forbundet med andre sprog. Det er fx tilfældet for Internet Explores vedkommende, hvor dokumentobjekterne i denne browser også kan programmeres med VBScript (VisualBasic Script).

DOM betyder bl.a., at JavaScript programmøren har mange præfabrikerede komponenter til sin rådighed. Uden disse browserbaserede objekter måtte programmøren selv bygge objekterne op fra grunden. Situationen svarer lidt til at gå i en hobbyforretning og fx købe et samlesæt til et modelfly, frem for selv at opbygge de enkelte dele fra grunden. Mens programmøren tidligere typisk byggede det hele op selv, har JavaScript programmøren allerede en lang række komponenter (DOM) til sin rådighed.

Når man derfor ofte læser, at JavaScript er et objektorienteret sprog, er det ikke helt korrekt. Man kan ganske vist også i JavaScript definere sine egne objekter, men et af JavaScipts centrale karakteristika er netop, at en lang række browserbaserede objekter er defineret på forhånd. Det er derfor mere korrekt at betegne JavaScript som et objektbaseret sprog.

 

Eksempler på anvendelse af Javascript


Afvikling af JavaScript

For at skrive JavaScript er en simpel teksteditor som fx Notepad tilstrækkelig. Det kan dog være en god ide, at anvende en editor med farvekodning som fx Notepad++ eller HomeSite. Det er også muligt af anvende et mere avanceret IDE (Integrated Development Environment) som fx Dreamweaver eller Aptana, der et et opensource IDE og specialudviklet til netop JavaScript.

Document objektet

Dokument objektet er en hierarkisk model af det aktuelle HTML-dokument.

 

DOM

Figur 1.3: Hierarki af DOM objekter (kilde: Yanks & Adams: Simply JavaScript. SitePoint 2007)

Når man refererer til det enkelte objekt (element) gøres det nemmest ved at give objektet en unik id. f.eks. <h1 id="vigtig">Hello</h1> eller
<input type="text" name="kundenavn" id="kundenavn" value="Indtast dit navn " / >

document.getElementById("kundenavn")

man kan også referere til et tag via

document.getElementByTag("h1");

eller via dot syntaks.

window.document.body.h1;

 

<form id="bestilling">
<input type="text" name="kundenavn" id="kundenavn" value="Indtast dit navn " / >
<input type="button" onclick="visInput();" value="click" />
</form>

<script type="text/javascript">


function visInput(){
alert("Yo "+document.getElementById('kundenavn').value);
}


</script>

 

Tekstfelt objektet med id-værdien (instansnavn) kundenavn har egenskaben value. Den bliver aflæst ved at angive egenskabens navn umiddelbart efter objektreferencen.

Vi kunne også med JavaScript have ændret værdien af indtastningsfeltets kundenavn og selektere (markere) indtastningsfeltet efter alert boksen er vist:

function visInput(){
alert("Yo "+document.getElementById('kundenavn').value);

document.getElementById('kundenavn').value = "Indtast nyt navn";
document.getElementById('kundenavn').select();

}

 

Events

En event udløses af en brugerbestemt handling i browseren. Klikker brugeren fx på en musetast eller trykker på en tast udløses en event. Når disse events finder sted, kan man via JavaScript bede om at få udført forskellige handlinger. Det sker ved at indsætte en såkaldt eventhandler. Eventhandlere bliver knyttet til et objekt i DOM, så eventhandleren aktiveres i det øjeblik den handling, som eventhandleren er beregnet til at spore, finder sted i relation til objektet.

Det er eventhandlerne der er interessante her, for uden dem ville de indtrufne events ikke blive opfanget, og de ville dermed ikke udløse noget som helst. Er der derimod en eventhandler knyttet til objektet, kan eventhandleren sættes til at udføre en stump JavaScript kode eller et kald til en JavaScript funktion, i det øjeblik eventen finder sted.

event

En eventhandler er således knyttet til et objekt i DOM. Eventhandlere er lette at genkende, fordi de altid er forsynet med prefikset on.

<button onclick="alert('Boo!');">Click me</button>

 

<a href="#" onclick="alert('Boo!');">Click me</a>



Click me

 

Eventhandlers

Herunder ser du en liste med de mest almindelige events i JavaScript og de tilsvarende eventhandlere. Du får samtidig en angivelse af, hvornår de udløses, og hvilke elementer de er knyttet til. Du skal dog være opmærksom på, at i nyere browsere kan de viste events anvendes sammen med en del flere objekter end dem, der er nævnt her.

Event Genereres af Handlingen udløses når Event handlerens navn
abort image Brugeren afbryder indlæsningen af et billede onabort
blur window og form elementer Et formelement, en frame eller et vindue mister fokus onblur
change text field, text area og select liste Værdien ændres og elementet mister fokus onchange
click checkbox, radio knap, submit knap, reset knap, knap (button) og link Der klikkes på formelementet eller linket onclick
dragdrop window Et objekt, fx en fil trækkes ind over og slippes i et vindue ondragdrop
error image og window Der opstår en fejl under indlæsning af et billede eller et dokument onerror
focus window og form elementer Et formelement, en frame eller et vindue får fokus onfocus
keydown document, image, link og textarea En tast trykkes ned på tastaturet onkeydown
keypress document, image, link og textarea En tast trykkes ned og holdes nede onkeypress
keyup document, image, link og textarea En tast frigives onkeyup
load document En webside læses ind i browseren onload
mousedown document, button, link En museknap trykkes ned onmousedown
mousemove ingen objekter Markøren bevæger sig onmousemove
mouseout link, image Markøren forlader et område eller et link onmouseout
mouseover link, image Markøren bevæger sig ind over et område eller et objekt onmouseover
mouseup document, button, link En museknap frigives onmouseup
move window Et vindue flyttes onmove
reset reset knappen i en form Der trykkes på reset knappen i en form onreset
resize window Et vindue ændre størrelse onresize
select text felt, text area og selectliste Et element vælges onselect
submit submit knappen i en form Der trykkes på submit knappen i en form onsubmit
unload document En webpage forlades onunload

 

Browser events demo (Fra grundbogen)

Eksempler på anvendelse

 

Event Anvendelse
onblur Lukke popup vinduer når de mister fokus
onchange Løbende formvalidering af enkeltelementer
onclick Udløser handlinger i forbindelse med tryk på knap, etlink eller et tekstfelt.
onload Et script som udføres, når en side loades, fx billeder der skifter
onmouseover Rollover effekt
onmouseout Rollover effekt
onresize Replacering af elementerne i et vindue, hvis de er placeret i forhold til vinduets størrelse.
onsubmit Kald af en valideringsrutine når der trykkes på submit en form

Nogle eksempler fra W3Schools:

Event Object

Which mouse button was clicked?
What are the coordinates of the cursor?
What is the keycode of the key pressed?
What are the coordinates of the cursor, relative to the screen?
What are the coordinates of the cursor?
Was the shift key pressed?
Which element was clicked?
Which event type occurred?

Using Events with Functions
1. Inline Events  onclick="alert('welcome'); Eksempler: Lommeregner, hotelplaner , Random generator

2. The Traditional Model
function message(){ alert(”Welcome”); }
window.onload = message; // no parentheses after message!

3. The jQuery

A link that calls a alert box.


 $(document).ready(function() {
   $("a").click(function() {
     alert("Hello world!");
   });
 });

 

 

 

Introducing JavaScript Libraries

JQuery (www.jquery.com)
 

$(‘#message’).html('This is some new text'); // targeting the css selector for id="message"

var a = $("#tekstfelt").value; // i stedetfor document.getElementById("tekstfelt").value;

jQuiry selectors looks like CSS selectors

 

Selector test
 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<style type="text/css">

#blueBox {
position:absolute;
left:338px;
top:125px;
width:225px;
height:220px;
z-index:1;
background-color: #0099FF;
}

#header {color:#0033FF ;}


.paragraf {background-color:#00CC33; border:dotted }


</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">


function aabenBox(){
$("#blueBox").fadeIn();
}
function gemBox(){
$("#blueBox").hide();

}

function newHeadText(){

$("#header").html("Hello World ");


}

</script>

<title>A web page</title>
</head>

<body>

<div id="blueBox">BLUE BOX</div>
<h1 id="header"> A Headline </h1>

<p class="paragraf"> Intro to use of Jquery </p>

<form>
<input type="button" onclick="newHeadText(); " value="New text in header" />
<input type="button" onclick="aabenBox(); " value="Show" />
<input type="button" onclick="gemBox();; " value="Hide" />

</form>

</body>
</html>

Hand's on Eksempel
 

Examples of more jQuiry functions

 

Eksempler på anvendelse af JQuery

 

JQuery effekter på tekst og billeder i div tags

Reference til JQuery basic effekter

 

 

Navigation

Form og validering

Test af om brugerne indtaster den rigtige type data i en bestillingsformular.

Traditionel validering fra dag 4 øvelsen med if/else betingelser og alerts

Form's hvor brugeren ikke kan taste forkert. kan f.eks. også udbygges med en datovælger fra Jquery.

Via JQuery

$("#commentForm").validate();

Husk også at de enkelte input felter skal have rigtige id.

Form Validation (9.2.html) p.343

 

 

Expanding the Interface with Panels and Accordion

 

Accordion with Jesse James Garretts model

Panels with Jesse James Garretts model

 

 

Other Javascript Libraries

http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks

 

AJAX = Asynchronous JavaScript and XML

AJAX is not a new programming language, but a new technique for creating better, faster, and more interactive web applications.

With AJAX, a JavaScript can communicate directly with the server, with the XMLHttpRequest object (the Ajax engine). With this object, a JavaScript can trade data with a web server, without reloading the page.

AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.

The AJAX technique makes Internet applications smaller, faster and more user-friendly.

ajax1

 

 

ajax2

The XMLHttpRequest object

By using the XMLHttpRequest object, a web developer can update a page with data from the server after the page has loaded!

AJAX was made popular in 2005 by Google (with Google Suggest).

Google Suggest is using the XMLHttpRequest object to create a very dynamic web interface: When you start typing in Google's search box, a JavaScript sends the letters off to a server and the server returns a list of suggestions.

The XMLHttpRequest object is supported in all major browsers (Internet Explorer, Firefox, Chrome, Opera, and Safari).

 

Your first AJAX application

 

 

 

Exercises:

 

Javascript

Ex. 2 String, Array øvelser.

a. Lav et JavaScript der finder ud af hvormange t'er der er i teksten 'There are times when you want to know how many chararcters are in a string.'

b. Hvad kan man bruge indexOf( ) metoden til. Lav et eksempel.

c. Lav en array som indeholder ugenavnene i en dansk uge .  Lav en løkke som udskriver ugedagene i browseren.

 

EX.2_UI = User Interface

a. Lav en html form med et textarea hvor brugeren kan indtaste eller paste en tekst, og en button som kalder en funktion der beregner antal t'er i textarea'et.
 

Hint's:

document.getElementsById("tekstFelt").value,

<textarea name="tekst" cols="100" rows="10" id="tekstFelt">There are times when you want to know how many chararcters are in a string.</textarea>

 

b. Lav en html form som taget et tekst input og tester om teksten indeholder @.

 

Nogle løsningsforslag

 

JQuery

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

AJAX

Try out the Ajax examples on W3schools. Your first AJAX application

You could also try out Ajax together with JQuery