JavaScript
/ DHTML
| |
Inlämningsuppgift |
Bra att komma ihåg, egna noteringar |
Klar/Kvar/Avstår |
| Javascript |
|
<SCRIPT LANGUAGE="JavaScript">,<script type="text/javascript"> </SCRIPT> |
|
| 1A |
Skriv ut text på webbsida |
document.write("<font color='red'>Jippi, vad kul med HTML!</font><br>")
|
Klar |
| 1B |
Använd variabler, skostorlek+ålder |
Behövs ej |
Klar |
| 1C |
Med prompt och alert ruta |
ruta = prompt("Vad heter du?", "Gustaf") alert("Hej "+ ruta+"!"); |
Klar |
| 1D |
Skapa entabell med valfritt antal rader, olika färg på varannan rad |
parseInt =Gör om till siffra |
Klar |
| |
|
|
|
| 2A |
2 textrutor 1 knapp, flytta text från en rutan till andra |
document.(formuläretsnamn).(ikonensnamn).value; T.ex. document.myform.tex1.value;
Formulär:<form name="myform"> </form>
Textruta:<input type="text" size="40" name="tex1" value="">
Knapp:<input type="button" name="knapp" value="Klicka" onClick="namn()" > |
Klar |
| 2B |
3 textrutor 1 knapp, summera talen i de två första rutorna, visa summan i den tredje |
Behövs ej |
Klar |
| 2C |
utöka föregående med subtraktion, multiplikation och rensa |
Som 2B |
Klar |
| 2D |
lägg till en check att rutorna inte är tomma vid beräkningen |
if (a == "") {alert('Du måste fylla i något i ruta 1!'); document.myform.tex1.focus();}
parseFloat =Gör om till (något med tal)
focus =Ställ dig i textrutan T.ex.document.myform.tex1.focus(); |
Klar |
| 2E |
lägg även till en check att det står ett tal i rutorna |
if( parseFloat(a).toString() == "NaN" ) {alert('Du måste skriva ett tal!');}
select= markera all text i en ruta T.ex. document.myform.tex2.select(); |
Klar |
| 2F |
innehållet från ett formulär ska skickas till din egna epostadress via formfixer |
<input type="hidden" name="s_email" value="gustafbn@vgy.se">
<input type="hidden" name="s_retur" value="http://www.bestonline.se"> |
Klar |
| 2G |
checka att obligatoriska fält är ifyllda |
Som 2D |
Klar |
| 2H |
kontrollera att ålder är mellan 1-100 |
if (form.Alder.value.length > 3 ||
parseInt(form.Alder.value) < 1 ||
parseInt(form.Alder.value) > 100 ||
parseInt(form.Alder.value).toString() == "NaN") |
Klar |
| 2I |
kolla att något favoritintresse finns iklickat |
if (form.favorit[0].checked ==true ||
form.favorit[1].checked ==true ||
form.favorit[2].checked ==true ||
form.favorit[3].checked ==true)
{return true;}
else {alert("Du måste fylla i ditt favoritintresse"); |
Klar |
| 2J |
kolla att epostadressen innehåller ett @-tecken, och att detta inte ligger först eller sist i strängen |
Kolla på inlupp 2 f-k, på min hemsida |
Klar |
| 2K |
snygga till formuläret med stilmallar |
|
Avstår |
| |
Viktigt över 2 |
return false; return true; |
|
| 3A |
presentera webbläsartyp och skärmupplösning i en aler-truta |
alert(navigator.appCodeName + " och har en skärmupplösning på " + screen.width + " pixlar X " + screen.height + " pixlar.");
navigator.appCodeName =Webbläsartyp
Skärmens bredd =screen.width
Skärmens höjd =screen.height |
Klar |
| 3B |
en knapp som öppnar ett nytt fönster med lite text och en knapp längst ner till höger (i det nya fönstret) som stänger det nya fönstret |
<INPUT TYPE=button VALUE="Öppna ett andra fönster" onClick="NyttFonster();" >
function NyttFonster()
{window.open("Hej.html", "Hej", "toolbar=no, location=no, directories=no, status=no, menubar=no,
scrollbars=no, resizable=no, width=350, height=200");}
<INPUT TYPE=button VALUE="Stäng fönstret" onClick="StangFonster();">
function StangFonster() { close(); } |
Klar |
| 3C |
skapa ett tidur som visar hur länge du varit inne på sidan |
Kolla på inlupp 3 a-c, på min hemsida |
Klar |
| 3D |
Slumpa ut ett tal. Läs sen in ett tal och se om du gissat rätt. Räkna hur många gissningar det blev innan rätt svar påträffades. |
Math.floor(Math.random()*10) + 1; =Slumpa ut ett tal mellan 1 och 10
Kolla resten på inlupp 3d |
Klar |
| 3E |
slumpa fram 3 tal som representerar att tre tärningar, talen skall sedan presenteras som bilder på tärningar, till sist skall utfallet av tärningskastet presenteras, om det blev par, tretal eller ingenting
Ni skall lösa uppgiften genom att skapa tre funktioner. Den första skall slumpa tärningskastet. Den andra skall presentera bilderna som motsvarar tärningskastet. Den tredje skall presenterar resultatet. |
var bildarray = new Array(6);
Kolla på inlupp 3e, på min hemsida |
Klar |
| |
|
|
|
DHTML |
|
|
|
| 1A |
Skapa ett JavaScript som väljer olika bakgrundsfärg i dokumentet beroende på vilken dag det är. |
<body onload="hej()">
function hej()
{var idag = new Date();
dagnr = idag.getDay();
if(dagnr>0 && dagnr<6)
{document.body.style.backgroundColor="orange";}
else{document.body.style.backgroundColor="#B8BFD8";}
}
|
Klar |
| 1B |
Med två (bild)länkar i sidan skall en ruta förflyttas på en rät linje från sidans övre vänstra hörn och snett neråt höger. |
Kolla på inlupp DHTML1, på min hemsida |
Klar |
| |
|
|
|
| 2 |
Skapa ett ramverk med två ramar, den vänstra ramen skall det finnas två länkar - "öppna" och "stäng" - med vilka man skall kunna öppna och stänga ett pop-up fönster
Ramen till höger skall innehålla en bild. När man rullar över någon av länkarna i den vänstra ramen skall bilden i den högra ramen ändras - dvs vi skapar en rollover-bild mellan två ramar |
Kolla på inlupp DHTML2, på min hemsida |
Klar |
| egen meny |
bygga upp egna menyer |
Kolla min startsida |
Klar |
| jämförelsetal |
fixa javscriptkoden till htmlsidan så allt fungerar |
|
Avstår |
| |
|
|
|
| ÖVRIGT |
|
|
|
datorbutik
steg 1 |
imagemap, presentation av text i lager, formulär |
Kolla planering och min dataköp |
Klar |
datorbutik
steg 2 |
ange priser och visa den aktuella summan av förbockade varor |
|
Avstår |