HTML for bloggere - Javascript og dynamisk innhold del 2!

Forrige gang startet vi med å ta for oss javascript. Nå skal vi vise mer!

Hvis du vil lese deg opp på våre forrige HTML-kurs kan dere klikke på linkene nedenfor.

Del 1 kan du lese her
Del 2 kan du lese her
Del 3 kan du lese her
Del 4 kan du lese her
Del 5 kan du lese her

Dere kan bruke eksemplene vi kommer med på bloggen på blogg.no,og på andre nettsteder dere har eller skal lage. Dersom dere skal bruke det utenfor bloggen kan dere bruke et gratis HTML-program som vi benytter oss av som dere finner nedenfor. Det heter Coffeecup og er ganske enkel å forstå.

Dere kan laste ned programvaren CoffeeCup her

NB! Hvis dere har lyst å ha en introduksjon i CoffeeCup, så kommenter det nedenfor. Dersom mange nok vil det skal vi gjøre en introduksjon!

Javascript er programmering som gjør at siden kan bli mer dynamisk. Nå skal vi se på det å trykke på en knapp for så å få en meldingsboks hvor du kan skrive navnet ditt. Når du trykker på knappen vil du få en boks som spør om navnet ditt. Når du trykker ok vil du få navnet ditt og en liten tekst som kan være hva du vil den skal være. Under knappen ser du også en klokke som tikker. Den er også laget med javascript! Tykk på linken nedenfor for å se eksemplene. Under linken er kodene forklart og hvordan du kan teste de ut.

Dersom dere har en blogg på blogg.no kan dere lime inn koden direkte i innleggsboksen når dere har trykket "HTML på/av" slik av verktøy linjen forsvinner. Se på del 1 hvis du ikke vet hvordan du skal gjøre det. Hvis dere skal prøve på egenhånd(med coffeecup eller andre html-programmer) må dere følge nøye med.

Slik ser altså ut det du kan lære deg i dag:

HTML for bloggere - Javascript

Her kan du trykke for så å få opp en melding om at du skal skrive ditt navn.

Her viser vi med javascript hvor mye klokken er til enhver tid!

hits

Du trenger ikke mange koder for å få dette til å fungere. For å teste det ut trenger man bare følgende:

Boksen med ditt navn

<html>
<head>
*scriptet*
</head>

<body>
*Siste del av scriptet*
</body>
</html>

Dette er en svært forenklet versjon, men hvis du vil teste det ut på egenhånd fungerer det helt fint. Det ovenfor er grunnmuren i en webside og må derfor være med for at nettleseren skal tolke hva som skal være hvor. Start med å kopiere det ovenfor og deretter gjør følgende:

<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var name=prompt("Skriv inn ditt navn","Ditt navn");
if (name!=null && name!="")
{
document.write("Hello " + name + "! Var ikke dette gøy?");
}
}
</script>
</head>

<body>
<input type="button" onclick="show_prompt()" value="Vis boksen" />

</body>
</html>

Koden som er ovenfor er den vi har brukt i eksempelet.  Scriptet mellom <head> og </head> er en deklarasjon. Det vil si at man kan bruke det flere ganger på siden uten at man må lime inn hele koden hver gang. Da kan man bruke baredet som står mellom <body> og </body> for å kjøre det en gang til.

Klokken som tikker

Du starter med akkurat det samme:

<html>
<head>
*scriptet*
</head>

<body>
*Siste del av scriptet*
</body>
</html>

 

Deretter limer du inn følgende:

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}

function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div></body>
  </html>

Koden sammenlignet med boksen med ditt navn er ikke så veldig ulikt bortsett fra at de bruker ulike koder her og der. Fremgangsmåten er den samme. Hvis du ser nøye etter er det en ting som er viktig å huske på når det gjelder klokken som tikker. På body-taggen står det <body onload="startTime()"> denne gangen. Det betyr at når nettleseren har lastet opp body-delen av siden vil klokken starte. Uten den vil ikke klokken fungere.

Nedenfor er det et bilde hvor begge kodene er satt sammen. Det er slik vi har brukt det på eksempel-siden. Kanskje dere skjønner det bedre ved å se på bildet?

 

Spørsmål angående dagens javascript kan dere stille i kommentarfeltet:)

Ingen kommentarer

Skriv en ny kommentar

Bachelorblogg

Bachelorblogg

24, Trondheim

Vi er tre gutter som har blogging som tema for vårt bachelorprosjekt. Til dette har vi derfor startet vår egen blogg for å se hvordan bloggverden fungerer! Ta gjerne kontakt med oss for å si litt om deres blogg, så kan dere hjelpe oss med bacheloroppgaven:) bachelorblogg@gmail.com

Norske blogger

Kategorier

Følg vår blogg med bloglovin

Arkiv