Løsningsningsforslag til dag 4 ø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. Make the form validation script work for the ordering form at:

http://www.slipsager.net/scriptin
Save it as form_validation.html

Løsningsforslag

4. Events og style

Placer et DIV-element på en XHTML side. Giv det en baggrundsfarve og en fast højde og bredde. Placer dernæst 2 knapper på siden. Den ene skal vises DIV-elementet, når den aktiveres, og den anden skal skjule det. Du kan skjule et element, "mitElement", med denne syntaks: document.getElementById("mitElement").style.visibility = "visible"; og skjule det med denne: document.getElementById("mitElement").style.visibility = "hidden";

Se evt. på følgende eksempel

Løsning

5.  Lave tutorial s.29-32 i bogen, hvor du tilføjer jquery.js til øvelsesfilen  (Tutorial: Highlighting Table Rows )

Central elements:

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

 $(document).ready(function( ) {  	$('table.striped tr:even').addClass('even');  });  


</script>  

Løsning fra bog

Selector table.striped tr:even er alle de lige rækker i tabellen med class navnet striped.

Farven på disse rækker ændres via class = "even", hvor even er stylet via et css.

Ex 5. Hvornår og hvorfor kan det være godt at bruge JQuery biblioteket i et webprojekt?

se s.168 i bogen. Overcomming cross browser JavaScript and DOM problem with JQuery

Ex 6. Use the Getting started tutorial to make a webpage with a link that opens an alert box with JQuery .

Løsningsforslag

Ex7.Tutorial page 212: Highlighting Table Rows .

$(document).ready(function( ) {

$('table.striped tr:even').addClass('even');

$('table.striped tbody tr').mouseover(function() {
$(this).addClass('highlight');
$(this).css('cursor','pointer');

}).mouseout(function() {
$(this).removeClass('highlight');
});

});

 

Alle tabelrækker får en mouseover og mouseout event tilknyttet.

Ved mouseover bliver den

missingmanual_tutorials/MM_JAVASCRIPT/chapter06/6.1.html

Ex8.Tutorial page 227: A One-Page FAQ

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