Løsningsningsforslag til dag 3 øvelser

Opgaver/Øvelser

1. Repetitionsøvelser øvelser (pdf dokument) og som Worddokument : Gennemgået på klassen!!

2. Tilføj den manglende JavaScript code sådan at lommeregneren på nedenstående link kommer til at virke.

http://www.slipsager.net/scripting2sem/js_calculator_ex.html

Gem lommeregneren som js_calculator.html

Løsning

3. Lav en form validering af følgende html form ved at tilføje de manglende elementer i javascript funktionen.

http://www.slipsager.net/scripting2sem/form_validation_ex.html

Hint: Forbind submit knappen med valideringsfunktionen. Giv input felterne en id. Hent brugerinput og gem dem i nogle javascript variabler.

Gem filen som form_validation.html

Løsningsforslag 

3b. Form validering via Jquery plugin validate.

Prøv at undersøge hvordan Jquery kan bruges til at validere formen på denne side.

4. Gruppeøvelse: Afprøve en eller flere Jquery effekter som I kan finde på/via:

http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

http://www.webdesignerwall.com/general/javascript-in-modern-web-design/

Lav en kort præsentation for klassen af jeres Jquery prototype. Prøv at kommentere jeres kode så godt som muligt.

Eksempel på en Jquery effekt "A One-Page FAQ" fra bogen Missing manual:

missingmanual_tutorials/MM_JAVASCRIPT/chapter06/6.2.html

Viser toggle funktionen som bruges til at lave en knap med to tilstande. I dette tilfælde 1: for synlig svar 2: for gemt svar.

Knapperne er h2 elementer indenfor #main.

Derfor

$('#main h2').toggle(tilstand1, tilstand2 )

Hvad der skal ske i tilstand1 defineres via en såkaldt anonym function dvs. en function uden navn.

function(){
// kommandoer som skal udføres
}

Selve koden med nogle kommentar

$('.answer').hide(); // alle svarene gemmes først

$('#main h2').toggle( // h2 spørgsmålene som toggle knap (knap med to tilstande 1: Synlig svar 2: Gemt svar )
function() {
$(this).next('.answer').fadeIn();
$(this).addClass('close');
},
function() {
$(this).next('.answer').fadeOut();
$(this).removeClass('close');
}
); // end toggle