Forberedelse
- Læs kapitel 11 om javaScript igennem. Du behøves ikke at gå i dybden med afsnittet. Afsnit 11.9 er grænsende til uundværligt 🙂
- Repeter afsnit 6.6 Klasser og id
Formål
- Forstå javaScript
Fælles gennemgang
Fra sidst
- Kobling fra AppLab til “ren” javaScript
- Eksempler på javaScript kode
Lektien til denne gang
- Gennemgå eksempler fra afsnit 11.1 Du koder allerede javaScript
- Gennemgå de første par eksempler hos W3schools
- Vis det med debugging
- Gennemgå også 11.7 En fald-ned menu, som åbner og lukker sig (toggle) ved et klik.
Øvelser
21.1 Hvad er javaScript
- Hvad er javaScript
- Der findes et programsprog, der hedder “java”. Hvad er relationen mellem java og javaScript
- Forklar begreberne client-side og server-side.
- Er javaScript client-side eller server-side
- Hvad kan javaScript, som CSS og HTML ikke kan. Og hvorfor tror du overhovedet, at de 3 sprog er nævnt sammen
21.2 Dissekering af kode fra AppLap
I afsnit 11.1 Du koder allerede i javaScript har jeg skrevet et afsnit om javaScript i AppLap. På samme måde som i afsnittet gå ind i AppLab og åben min BMI omregner-app på https://studio.code.org/projects/applab/3-YSD0MHzP5RYoZagWx9iahyiYnMg5Nm7jSJq7CGuMA.
Forklar koden først ud fra blokkene (det visuelle). Bagefter prøv, om du kan forklare selve javaScriptet. Hvad bruger man f.eks. et semikolon til, og hvordan laver man en variabel?
21.3 Prøv kode af
Her kommer en masse små øvelser. Det gælder for alle øvelserne, at det kan være en idé at gemme ændret kode i en ny sitemap i Visual Studio Code, som du kan kalde “javaScript”. Men bare du kan forklare opgaverne ud fra W3schools, så er jeg glad!
- Gå ind på https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_inner_html
- Hvad kan koden
- Ændr koden, så den i stedet for “Hello javaScript” skriver “JÆS jeg kan kode”. PS: “JÆS” er den danske udgave af det engelske “Yes”.
- Forklar koden, så godt som du kan
- Gå ind på https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_style
- Hvad kan koden
- Ændr koden, så fontsize bliver 50px ved klik på knappen
- Forklar koden, så godt som du kan
- Prøv at sætte koden nedenfor ind i W3 schools’ editor. Hvad gør den og prøv, om du kan forklare den!
- Prøv at ændre den, så fontsize bliver 40 px og farven bliver blå
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="document.getElementById('demo').setAttribute(
'style', 'font-size: 100px; font-style: italic; color:#ff0000;')">Click Me!</button>
</body>
</html> - Gå ind på https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_alert
- Hvad kan koden
- Tilføj koden, så der kommer en ny alertboks frem. Der skal stå “Hej javaScript” i alertboksen
- Forklar koden, så godt som du kan
- Gå ind på https://www.w3schools.com/js/tryit.asp?filename=tryjs_statements
- Ændr koden, så x og y ikke lægges sammen, men trækkes fra hinanden i stedet for. Dvs. i stedet for 5 + 6 skal du have 5 – 6
- Tilføj kode, så der kommer en ny p. Koden til <p> kunne se sådan ud <p id=”demo1″></p>. I den nye <p> skal du kunne vise resultatet af 5 * 6
- Gå igen ind på https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_inner_html
- Du skal ændre på eventen, så handlingen sker så snart, at man ruller musen over knappen i stedet for, at brugeren skal klikke
21.4 Et sammenhængende eksempel
Prøv om du kan få eksemplet i bogens afsnit 11.6 til at virke. Du skal bare få selve “toggle” til at virke. Du er naturligvis velkommen til at kopiere på livet løs.
Tag bagefter en kopi af en af dine hjemmesider og få det til at virke der, så du kan linke rundt mellem måske 3 forskellige HTML sider.
Når det virker, så prøv i første omgang at gøre føgende
- Sæt koden her ind i <head>. Det er et link til et eksternt stylesheet, men et ekstrent stylesheet på nettet:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- Tag koden fra siden her og få menuen (burgeren) til at virke hos dig selv: https://www.w3schools.com/icons/tryit.asp?filename=tryicons_google-menu
21.5 Font Awesome
I opgave 21.4 smagte du på Fontawesome. Senere i forløbet vil du møde flere eksterne stylesheets, men lige nu skal du prøve at kikke på, hvad Fontawesome kan. I øvrigt har f.eks. Google også lignende stylesheets med ikoner, som du må bruge gratis.
- Gå ind på W3schools under Font Awesome Introduction: https://www.w3schools.com/icons/fontawesome_icons_intro.asp
- Hvad kan Font Awesome og hvordan fungerer det teknisk
- Prøv nogle ikoner af. Du har måske fået “burgeren” eller naviconet ovenfor til at virke, men prøv et eller flere emner af
- Prøv “Icons menu” på https://www.w3schools.com/icons/google_icons_navigation.asp, som du allerede har smagt på
- Du finder ikoner til Facebook, Twitter og lignende på Icon Brand: https://www.w3schools.com/icons/fontawesome_icons_brand.asp
21.6 Færdig før de andre
Kik på det næste opgavesæt. Der er ikke noget nyt teori ud over, at du evt. skal genlæse afsnit 11.7 i lærebogen.