DA156A - HT15 - HTML: Extra

Transcript

1. HTML: Extra
2. Dagordning  Klasser & id: hur, var när?  Rundade hörn – kan man ärva detta från föräldern?  JavaScript – känna igen viktiga delar, när körs koden?  Förbättrad mobilmeny
3. Id & Klasser  Grundtanken  Id är unika  Klasser är inte unika
4. Id & Klasser Id 1. Ett element kan bara ha ett id 2. Ett id kan bara finnas med en gång på en sida  Ovanstående punkter måste följas om sidan ska validera Klasser 1. Ett element kan ha flera klasser 2. En klass kan användas flera gånger per sida
5. Exempel
6. Id & Klasser: CSS  Varken attributet ”id” eller ”class” har några förinställda CSS-egenskaper, och att bara tilldela ett element ett id eller en klass gör ingen skillnad. Men det möjliggör att man kan styla dessa element på ett specifikt sätt.
7. Jämför med verkligheten…
8. Id har speciell funktionalitet  Kan användas som interna länkar, t.ex. <div id=”nav”> <h2>Navigation</h2> </div> <a href=”index.html#nav”>Gå till navigationen</a>
9. Element kan ha både id och klass
10. CSS bryr sig inte om id eller klass  Det finns inget man kan göra med id/klass som man inte kan göra med det andra  Men, det skapar olika prioriteringar i reglerna.
11. JavaScript bryr sig  Med JavaScript är det viktigt att vi använder id:n på rätt sätt  Ett element kan bara ha ett id  Ett id kan bara finnas på en plats på sidan  Tänk: document.getElementById()
12. https://css-tricks.com/the- difference-between-id-and-class/ Här kan du läsa mer om klasses vs. id
13. Rundade hörn Även på underelement
14. Problem
15. Men varför får inte sidhuvudet rundade hörn?  Lösning 1:  Använd egenskapen: overflow: hidden; på boxen! Detta gör att allt ”utanför boxen”, i detta fall utanför de rundade hörnen göms.  Lösning 2:  Ange att <header> ska ärva egenskaperna med runda hörn av föräldern: border-top-left-radius: inherit; border-top-right-radius: inherit;
16. Alltså
17. JavaScript När körs vad? Vad borde ni ha lärt er?
18. Vad borde vi ha koll på såhär långt?  Grundläggande koncept i JavaScript  variabler  if-satster  loopar (iterationer)  Datatyper i JavaScript  Strängar  Nummer  Boolean (sant/falskt)  JavaScript med HTML & CSS (DOM)  Hitta element (document.getElementById())  Modifiera element genom JavaScript  Kunna hämta input och generera output till/från användaren
19. Att tänka på när JavaScript-kod körs 1. Koden läses uppifrån och ner 2. Kod som inte finns i funktioner körs i den ordning som koden står i 3. Kod som finns i funktioner körs när funktionen anropas 1. t.ex. på följande sätt: minFunction(); 2. En funktion kan antingen anropas på valfri plats i koden, eller vid en händelse window.onload = setup; document.getElementById(”myBtn”).onclick = color();
20. Exempel på när JavaScript körs
21. Bonus: Animerad meny jQuery?