Øvelser fra dag 1.
Upload løsninger til webhotel (Freehostia.com )
The Missing Manual: Chapter 3, Adding Logic and Control to Your Program
| Answers.com | Client-server http://www.answers.com/topic/client-server |
|
| Wikipedia | JavaScript http://en.wikipedia.org/wiki/JavaScript |
|
| W3schools | JavaScript overblik m.m. http://www.w3schools.com/js/default.asp |
|
| Thau: | Thau's JavaScript Tutorial http://www.webmonkey.com/webmonkey/programming/javascript/tutorials/tutorial1.html |
Sammenlignende operatorer
| Sammenligning | Hvad den gør |
|---|---|
| x == y | Returnerer sand hvis x og y er ens |
| x != y | Returnerer sand hvis x og y ikke er ens |
| x > y | Returnerer true hvis x er større end y |
| x >= y | Returnerer sand hvis x er større end eller lig med y |
| x < y | Returnerer sand hvis x er mindre end y |
| x <= y | Returnerer sand hvis x er mindre end eller lig med y |
| Logisk operator | Hvad den gør |
|---|---|
| x && y | Returnerer sand hvis både x og y er sand |
| x || y | Returnerer sand hvis enten x eller y er sand |
| !x | Returnerer sand hvis x er falsk |
Via disse operatorer kan man i JavaScript opstiller logiske betingelser som kan styre programmets afvikling.
En betingelse er i flowchartet repræsenteret ved en betingelses diamant.
Betingelser på et website kan f.eks. være:
(userName == "Bjarne" && passWord == "12345678") som enten kan være sandt eller falsk
(browser=="Netscape"||browser=="Microsoft Internet Explorer")
(screenWidth >= 1024)
I dagligdagen træffer vi konstant forskellige afgørelser, der afhænger af de givne omstændigheder. Fx når det gælder vejret. Falder temperaturen under et bestemt punkt skifter vi til vintertøj, og når den igen stiger om foråret er det sommertøjet vi finder frem. Når det regner, er det parablyen vi leder efter. Er vi ude at handle ind er det parametre som pris og kvalitet, økonomi og behov, der afgør hvilken vare vi køber eller undlader at købe.
På tilsvarende vis træffes der beslutninger i softwareprogrammer. De erklæringer, der foretager beslutningerne, kaldes inden for programmering kontrolstrukturer.
I JavaScript findes tre grundlæggende kontrolstrukturer:
JavaScript-kode afvikles sekventielt, hvis ikke andet er specificeret. Dermed menes, at koden afvikles oppe fra og ned, linje for linje. I et JavaScript, der kun indeholder kontrolstrukturen sekvens, vil al koden blive afviklet. I sekventielt afviklet kode træffes der ingen beslutninger undervejs.
Ofte ønsker man dog, at lade programmet skal tage stilling til om en bestemt del af JavaScriptet skal afvikles eller ikke. Til det formål kan man opstille betingelser der afgør, om koden udføres.
Den mest simple programkontrol er at undersøge om en bestemt betingelse er opfyldt, og lade programmet udføre en eller flere erklæringer, hvis det er tilfældet. Det kaldes enkeltselektion:
if (betingelse){
erklæring(er) hvis sand;
}
Læg godt mærke til syntaksen. Det reserverede ord if efterfølges af betingelsen, der er placeret i et sæt parenteser. Det, der skal udføres, hvis betingelsen er opfyldt, er omsluttet af tuborgklammer. Inden for tuborgklammerne kan der placeres en række erklæringer, der strække sig over flere linjer. Pointen er, at disse kodelinjer opfattes som en samlet kodeblok, der enten bliver afviklet samlet eller slet ikke.
var minAlder;
minAlder = 12;
if (minAlder < 18) {
alert("Beklager, du har ikke stemmeret.")
}
I det øjeblik JavaScriptet afvikles bliver betingelsen testet. Hvis betingelsen testes sand bliver koden i tuborgklammerne udført, teses den derimod falsk, bliver den ikke udført. Da betingelsen i ovennævnte eksempel er sand (12 er mindre end 18) bliver koden udført. Var værdien af minAlder derimod 18 eller højere, ville alert-boksen ikke blive vist.
Den eller de betingede erklæringer rykkes normalt ind. Det gør koden mere læsevenlig og dermed lettere at vedligeholde.
If-konstruktionen fungerer fint så længe, at der kun er behov for, at en sand evaluering af betingelsen skal udløse en særlig programsekvens. Men ofte vil man i sine programmer være interesseret i at evalueringen falsk, også skal udløse en særlig programsekvens. Til det formål benyttes en if...else konstruktion. Det kaldes også en dobbeltselektion:
if (betingelse){
erklæring(er) hvis sand
} else {
erklæring(er) hvis falsk
}
Den eneste forskel fra if konstruktionen ovenfor er det reserverede ord else, der muliggør indsættelse af erklæringer, der bliver udført, hvis betingelsen er falsk.
Lad os se på et eksempel:
var minAlder;
minAlder = 21;
if (minAlder< 18) {
alert("Beklager, du har ikke stemmeret.")
}
else {
alert("Velkommen til stemmeboksen.")
}
Det afgørende her er at lægge mærke til, at hvis minAlder er mindre end 18, bliver erklæringen i den første betingelse udført, mens erklæringen i den anden betingelse bliver udført i alle andre tilfælde.
En tredje mulighed er:
if (betingelse1){
erklæring(er) hvis sand
} else if (betingelseN){
erklæring(er) hvis sand
}
Denne sidste if...else if konstruktion kan evt. kombineres med flere else if betingelser og evt. med en else betingelse til sidst.
var partifarve;
partifarve = "hvid";
if (partifarve == "rød" ){
alert("Velkommen i den socialistiske gruppe.");
}
else if (partifarve == "blå" ) {
alert("Velkommen i den borgerlige lejr.");
}
else if (partifarve == "lyserød" ) {
alert("Velkommen i den socialdemokratisk partiforening.");
}
else if (partifarve == "sort" ) {
alert("Velkommen blandt anarkisterne.");
}
else {
alert("Velkommen til " + partifarve + " gruppe");
}
I dette tilfælde er det den sidste betingelse - else-betingelsen - der bliver udført. Sådanne kontrolstrukturer, hvor der er en række mulige udfald, kaldes multipel selektion.
Endelig kan kontrolstrukturen switch anvendes:
switch ( parameter ) {
case value:
instruktion(er);
break;
case value:
instruktion(er);
break;
....
[default:
instruktion(er);]
}
I eksemplet er parameter en variabelværdi, som overføres til selektionen, og value repræsenterer mulige værdier variablen kan antage, og som programkoden skal reagere på. Svarer ingen værdier til parameterens værdi, kan man - det er frivilligt - indsætte default-instruktioner til sidst, som da bliver udført.
Den funktionalitet det er muligt at udføre med switch, kan også udføres med en "if, else if, else" konstruktion, men er der mere en tre-fire betingelser at teste, er switch enklere at skrive og dermed lettere at vedligeholde. Lad os tage eksemplet fra før og placere den samme funktionalitet i en switch:
var partifarve;
partifarve = "hvid";
switch (partifarve) {
case "rød":
alert("Velkommen i den socialistiske gruppe.");
break;
case "blå":
alert("Velkommen i den borgerlige lejr.");
break;
case "lyserød":
alert("Velkommen i den socialdemokratiske partiforening.");
break;
case "sort":
alert("Velkommen blandt anarkisterne.");
break;
default:
alert("Velkommen til " + partifarve + " gruppe");
}
En løkke er en kontrolstruktur, der giver programmøren mulighed for at opbygge kode, som gentager sig selv, enten et bestemt antal gange eller så længe en bestemt betingelse er opfyldt. Så snart betingelsen ikke er opfyldt, bryder scriptet ud af løkken og fortsætter med at udføre de øvrige erklæringer i koden.
Stort set alle programmeringssprog rummer 3 grundlæggende løkke-strukturer: En for-løkke, hvor man angiver et antal gennemløb ("iteration" - af lat. iteratio af iterare, der betyder at gentage), en while-løkke der indeholder en test i løkkens start, og en do-while-løkke der indeholder en test i løkkens slutning.
for (initiale værdi; betingelse; opdaterede værdi){
erklæring(er) inde i løkken
}
Løkken starter med det reserverede ord for efterfulgt af 3 erklæringer i parentesen. De er afgørende for den måde løkken arbejder på. Det første udtryk angiver navnet på en variabel, der tildeles en startværdi. Det andet udtryk er en betingelse, præcis som i betingelse-erklæringen i if konstruktionen. Så længe betingelsen er sand, udføres løkkens kodeblok, dvs. koden mellem tuborgklammerne. Er den derimod falsk, forsætter programmet og afvikler koden efter løkkens kodeblok. Den sidste erklæring er en opdateringserklæring, der tildeler variablen en ny værdi, hver gang løkken har foretaget et gennemløb. De tre erklæringer adskilles med semikolon. Løkken gennemløbes altså, så længe betingelsen er opfyldt.
En meget almindelig implementering af for-løkken, er at definere den initiale udtryk som et tal, der for hvert gennemløb opdateres vha. det opdaterede udtryk. :
for (var i = minVærdi; i <= maxVærdi; i++) {
erklæring(er) inde i løkken;
}
Man kan tilsvarende konstruere en løkke med en tæller, der tæller nedad:
for (var i = maxVærdi; i >= minVærdi; i--){
erklæring(er) inde i løkken;
}
Lad os se på et eksempel:
for (var i = 1; i <= 4; i++){
alert("Dit " + i + ". klik!")
}
Denne struktur er enklere i sin opbygning end for-løkken:
while (betingelse){
erklæring(er) inde i løkken;
}
Løkken starter med det reserverede ord while, og herefter følger et sæt parenteser, som indeholder en betingelse. Så længe betingelsen er sand udføres koden i løkkens kodeblok (erklæringerne mellem tuborgklammerne). Er betingelsen falsk fortsætter programmet efter løkkens kodeblok.
Vi har allerede brugt funktionerne alert( ) og prompt( ) og parseInt( ) i forbindelse med output af tekst og variable indhold, bruger input samt konvertering/parsing af Strings til en helt tal (integer ).
var userName = prompt("Hvad hedder du?","Kim?");
var userAge = parseInt(prompt(" Hvor gammel er du?",2));
alert("Goddag "+ userName);
I programmet tager prompt funktionen to String parametre, som browseren bruger i udformningen af prompt boksen.
Når brugeren har indtastet sit navn og trykket på ok knappen, returnere prompt funktionen navnet og det bliver i programmet tildelt (gemt i) variablen userName.
Prompt funktionen (en window metode) er defineret af udviklerne af browseren men kan kaldes fra javascript programmet hvis man bruger den rigtige syntaks.
Denne syntax kan man f.eks. finde i en Javascript reference som www.w3schools.com
| prompt(text,defaultText) |
| Parameter | Description |
|---|---|
| text | Optional. The message to display in the dialog box. Default is "" |
| defaultText | Optional. The default input text |
fra http://www.w3schools.com/HTMLDOM/met_win_prompt.asp
Funktioner kan også kaldes direkte fra brugergrænsefladen vil links og form elementer.
Eksempler:
- Calling the alert commando with a button or a link
I programmering vil man ofte lave sine egne funktioner. Dette gøre via keywordet function efterfulgt af navnet på funktionen. Lige som for variable gælder der også regler for navngivning af funktioner dvs.
Generelt defineres en funktion altid ved at man angiver en funktionshoved og en funktionskrop.
| funktionshoved | function minFunktion (parameter1, parameter2) |
| funktionskrop | { de kommandoer som funktionen udfører når den bliver kaldt. Evt om funktionen returner noget result } |
Funktioner defineres som reglen i et javascript i head elementet eller i en ekstern js fil som der linkes til fra headen. JavaScript fortolkeren registrer her funktionshovedet og springer funktionskroppen over.
Når fortolkeren længere nede i programmet kommer til et funktionskald f.eks. minFunktion("Hans ", 25); vil den sætte variablen parameter1="Hans" og parameter2=25, og derefter udfører kommandoerne i funktionskroppen.
I stedet for specifikke værdier som "Hans" og 25, kan værdierne også være gemt i variable sådan at funktionskaldet bliver minFunktion(navn, alder);
Fortolkeren vil her gemme værdien af navn og alder variablerne i parameter1 og parameter2 dvs. parameter1 = navn og parameter2 = alder.
- 3 Types of functions openWindow( ) , greet(name) , result = average(a, b, c )
// function definitions ////////////////////Bjarne 2009///////////////////
// open a specific URL in a specific window
function openWindow(){
window.open("http://en.wikipedia.org/wiki/Golden_ratio","my_new_window","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width= 600, height=400")
}
// takes one parameter
function greet(name) {
alert("Greetings to you "+ name );
}
// takes 3 Number parameters and returns the average of these
function average(a,b,c) {
result = (a + b + c) / 3;
return( result );
}
Objekter er en måde at lave en model af virkeligheden på.
| Instance of objece | Object | Parts / Navneord + properties/egenskaber | Actions/verb |
pluto, fido carA, bjarneCar |
Dog Car |
tail, width, height, x, y color, age, speed, |
bark, wag accelerate, turn_left, turn_rigth, break
|
Vi har allerede kigget lidt på Array objektet som kan indeholde en samling af data.
| Variable name | An Arrays objects | Properties | Method |
| klasseListe | ['Bob', 'Hans', 'Kim' ] | length | push( ) sort( ) reverse( )
|
Grundobjekterne i JavaScript har hverisær en række egenskaber/properties og metoderer så de kan simulere/modellere typiske program elementer.
| Objekttype | Number | String | Boolean | Array | Math | Date |
| Modellere | tal | tekst | logik (s/f) | database | Lommeregner | Kalender |
JS object reference: http://www.w3schools.com/jsref/jsref_obj_string.asp
| Properties | Methods |
| length | charAt( ) |
| indexOf( ) |
http://www.w3schools.com/jsref/jsref_obj_math.asp
Anvendes f.eks. i forbindelse med tilfældige tal.
tilfaeldigVaerdi = Math.random(); // intervallet mellem 0 og 1 f.eks. 0.11111 og 0.999
tilfaeldigVaerdi = (Math.random() * 6) + 1; // intervallet mellem 1 og 7 f.eks. 1.234 og 6.778
tilfaeldigVaerdi = Math.floor((Math.random() * 6) + 1); // floor metoden fjerne decimalerne dvs. at mulig tal er 1,2,3,4,5,6 (Terning)
http://www.w3schools.com/jsref/jsref_obj_date.asp
Anvendes f.eks. i forbindelse med at finde ugedagen på brugerens computer.
<script type="text/javascript">
var d=new Date();
var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
document.write("Today it is " + weekday[d.getDay()]);
</script>
// siger goddag
function greet(name){
}
// udskrive indhold og variabel værdi med heading 3
function outH3(indhold,variabel){
}
// længde af navn, navn med store bogstaver, antal a'er i navnet,
function infoName(name){
}
//-------------------------------------
var userName = prompt("What is your name? "," ");
greet(userName);
infoName(userName);
Selection/betingelser
EX 1. Make a window prompt were the user can enter his/her age. If the age is under 15 then send the user to the www.lego.com. If age >= 15 then send the user to www.aabc.dk
Use the javascript command: window.location = "http://www.lego.com";
To send the user to a new URL
Ex2 .Tutorial: Using Conditional Statements p.86-89 ex-file: 3.1.html
Elements in the tutorial: Input prompt, if/else, isNaN( ), parseInt( )
Løkker/loops:
Ex3 Make a script that outputs the numbers from 1 to 20
Ex4 Make a script that open 10 new windows.
Use f.ex. window.open('http://www.w3schools.com')
Ex5 Tutorial: A simple Quiz p.106-112
Elements: for (var i=0; i< questions.length; i++ ) ; askQuestions(questions[ i ] );
Ex6Tutorial:
Outputting a date in different human-friendly formats
En passende URL vil være webadressen til dag1 og dag2 opgaverne med links til dine løsningsforslag.
Hand's on dag 2 færdig
<script type="text/javascript">
/* Function definitions */
function greet(name) {
alert("Greetings to you "+ name );
}
function outH3(indhold,variabel){
document.write("<h3>"+indhold+": "+ variabel +"</h3>");
}
function infoName(name){
var antalA = 0;
var antalSpace =0;
// Skrevet med store og små bogstaver
outH3("Skrevet med store bogstaver",userName.toUpperCase());
outH3("Skrevet med små bogstaver",userName.toLowerCase());
// længde af navn
outH3("Antal bogstaver i navnet er",name.length);
// antal a'er i navn
for (var i=0; i<name.length; i++){
outH3(i, name.charAt(i));
if (name.charAt(i) == " " || name.charAt(i) == "A" ){
antalA++;
}
}
outH3("Antal a\'er i navnet",antalA);
outH3("Antal mellemrum i navnet",antalA);
// Tjek om navnet indeholder mellemrum
if (name.indexOf(" ") == -1){
outH3("Dit navn indeholder ikke mellemrum");
}
}
////////////////////Hovedprogram////////////////////////////////////////////////////
var userName = prompt("What is your name? "," ");
greet(userName);
infoName(userName);
</script>