Webbutveckling02 [weuweb02]

Moment04 - JavaScript

Introduktion

I kursdokumentationen står det att du skall använda Skriptspråk för webbutveckling på klientsidan och dokumentobjektsmodell. Som skriptspråk kommer vi jobba med JavaScript, för detta språk ligger till grund för både AJAX och flera JavaScript-bibliotek där JQuery är det mest använda.

JavaScript är relativt enkelt språk att lära sig grunderna i. Det krävs inte speciellt många rader kod för att få någonting att hända på en webbsida. JavaScript är också ett kraftfullt språk som passar bra för att göra mer avancerade webbapplikationer och ju mer du arbetar med JavaScript och kikar runt på webben kommer du hitta mer och mer små praktiska applikationer.

Detta moment kommer börja med en tutorial i JavaScript hos CodeAcademy och sedan tänker jag mig att vi använder JavScript i någon eller några tillämpningar.

Momentets mål

I varje moment så jobbar vi mot ett eller flera mål som skolverket har satt upp i varje kurs.

Centralt innehåll

  • Webben som plattform för applikationer av olika slag.
  • Ramverk eller klassbibliotek inom design eller skriptspråk.
  • Skriptspråk för webbutveckling på klientsidan och dokumentobjektsmodell.
  • Riktlinjer för god praxis inom webbutveckling.
  • Uppnående av interoperabilitet genom att följa standarder och testa på olika plattformar.
  • Applikationer som fungerar oberoende av vald plattform och hur tillgänglighet uppnås även för användare med funktionsnedsättning.
  • Kvalitetssäkring av applikationens funktion och validering av kodens kvalitet.
  • Terminologi inom området webbutveckling.

JavaScript och HTML

Vi har tidigare kollat på HTML och CSS där HTML är själva strukturen på hemsidan, CSS styr utseendet och JavaScript, som är ett scriptspråk på klientsidan, kan påverka de html-element som redan har ritats ut i din webbläsare. Dessa tre tekniker tillsammans skapar större möjligheter att få webben att fungera som vi vill.

Skillnaden på JavaScript och PHP är att JavaScript kan påverka en redan genererad hemsida medan PHP är ett skriptspråk på serversidan, alltså innan webbsidan är färdiggenererad. Att kunna hantera bägge dessa skriptspråk skapar möjligheter att bygga bra hemsidor.

script-taggen

Det finns flera sätt att skriva JavaScript i ett HTML-dokument, det enklaste är att skapa ett <script>-element och där skriva koden.

<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="UTF-8">
  <title>My Sandbox</title>
</head>
<body>
  <h1>Test</h1>
  <div id="content"></div>
  <script>
    var myContent = document.getElementById("content");
    alert("This is a message.");
    myContent.innerHTML = "<h3>This is a template</h3>";
    console.log("Sandbox is ready");
  </script>
</body>
</html>

Vad koden innehåller och hur den fungerar visas strax i en tutorial.

I exempel längre ner när jag visar på javascript och du endast ser ett <script>-element så kan du ta denna grundmall och bara byta ut det som finns inne i <script>-elementet med det exempel som jag visar.

Extern fil

På samma sätt som vi föredrar att placera CSS-kod i en extern fil så kan vi göra samma sak med våra JavaScript. Här kan det dock vara värt att fundera på om scriptet skall återanvändas i flera filer, annars är det fullt tillåtet att lägga ett specifikt script i den filen där den skall användas.

Samma kod som ovan fast nu separerade i två filer.

index.html

<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="UTF-8">
  <title>My Sandbox</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>My Sandbox</h1>
  <div id="content"></div>
  <script type="text/javascript" src="main.js"></script>
</body>
</html>

main.js

(function(){
  "use strict";
  var myContent = document.getElementById("content");
  alert("This is a message.");
  myContent.innerHTML = "<h3>This is a template</h3>";
  console.log("Sandbox is ready");
})();

Tre olika output

I dessa två exempel så görs det utskrift på tre olika sätt. Kolla på filen main.js så går vi igenom de tre olika varianterna på rad 4-6.

  • Rad 3: Funktionen alert() skapar en pop up-ruta och skriver ut meddelandet som finns inne i parentesen.
  • Rad 4: Här skrivs det ut text i html-dokumentet. Variabeln myContent kopplar till det html-element som har ett id som är 'content'. innerHTML sätter sedan ett värde på detta element. OBS: Du kommer inte se något av detta i källkoden, för JavaScriptet lägger till denna information när sidan redan är laddad.
  • Rad 5: Här görs det en utskrift till webbläsarens console, vilket är ett av de program vi når genom att välja inspektera, granska element eller inspektera element beroende på vilken webbläsare du använder.

Det finns ytterligare ett sätt att skriva ut text i html-dokumentet och det är med kommandot document.write(), nackdelen med den tekniken är att då måste scriptet vara exakt på den position där vi vill skriva ut någonting, med innerHTML så kan vi på ett bättre sätt styra innehållet.

Felsökning av kod

Eftersom JavaScript inte kompileras innan det körs så är det först vid körning som eventuella error kan visas. Du kan få reda på vilka fel som uppstår vid exekvering om du kollar i webbläsarens konsoll där alla fel vid exekvering kommer visas. JSHint och JSLint är två tjänster som validerar din javascriptkod, vilken du föredrar är en smaksak, de ger lite olika feedback på din kod, testa bägge så vet du vilken du föredrar.

Den stora nackdelen med felaktig JavaScriptkod är att den inte körs alls och inte heller ges det något felmeddelande i webbläsaren så det kan vara svårt att upptäcka att koden inte körs eller felsöka den. JSHint och JSLint finns också som plugins till de vanligaste kodeditorerna.

Tutorial hos CodeAcademy

Du kommer jobba med JavScript genom att jobba igenom CodeAcademy's grundkurs i JavaScript. Hela kursen uppges ta ca 35 timmar men det inkluderar de projekt som vi inte skall jobba med. Kursen är gratis men kräver att du registrerar ett konto. Jobba sedan igenom hela kursen.

Tips: Ha ett eget dokument, eller flera, och kopiera all kod som du skriver för att spara till senare tillfälle.

Att bygga en webbapplikation i JavaScript

Eftersom kursen handlar om att skapa applikationer så vill jag få in en tutorial där JavaScript används för att skapa sådana. För att inte bara skapa enstaka rader kod som mest blir snuttifierat så skall vi testa att bygga någon eller några applikationer med JavaScript.

Jag vill att du gör någon av applikationerna nedan, du behöver inte göra alla tre men eftersom övning ger färdighet så är det ju ingen nackdel att skapa flera applikationer som du senare kan bygga om eller vidare på.

Nedan kommer två tutorials där du ihop med utvecklaren skapar två olika ToDo-listor.

Applikation: ToDo med fokus på mobil och design

Filmerna är totalt på drygt 90 minuter och det går i vissa tillfällen ganska snabbt men han som gör tutorialen stannar också upp emellanåt och förklarar tydligare vad han gör. Fokus ligger på CSS, JavaScript, DOM samt lite SVG och HTML.

Learn to code a to-do list app in JavaScript - Part 1

Learn to code a to-do list app in JavaScript - Part 2

Applikation: ToDo med enkel funktion

Detta är en mycket kortare tutorial där du på knappt 30 minuter sätter ihop en ToDo-lista. Trots att den är mycket kortare så finns det bra och matnyttiga kunskaper även här.

Uppgift

Jag vill att du gör någon, eller bägge, tutorails ovan och lägger upp dessa applikationer på din samlingssida och utvärderar arbetet i ett inlägg på WordPress.

Frivillig uppgift: Egen uppgift

Bygg gärna vidare på någon av tutorials ovan för att själv träna på att bygga applikationer. Tänk gärna ut ny funktionalitet innan du bygger den så att det blir som du vill och att det inte bara blir som det blev.

Redovisa arbetet genom att lägga upp applikationen och beskriv vad du ville göra och hur du har gjort i ett inlägg på WordPress.

Svårare frivillig uppgift: bankapplikation

Jag återkommer gärna till en bankapplikation och så även nu. Här får du chansen att bygga en egen applikation från gunden med hjälp av det som du lärt dig från tidigare tutorials.

Vet du inte hur du skall börja uppgiften så utgå från att startsaldot på kontot är 1000kr, uttag kan göras så länge det inte är större än saldot. Insättning kan också göras samt att det går att läsa aktuellt saldo och en kontohistorik.

Redovisa arbetet genom att lägga upp applikationen och beskriv vad du ville göra och hur du har gjort i ett inlägg på WordPress.

Redovisning

Redovisa detta moment på följande sätt;

  1. Lägg upp dina övningar på din hemsida. Lägg dem på en sida med tydliga förklaringar eller skapa flera sidor med olika uppgifter. Viktigt att jag, och andra, kan gå mellan sidorna så vi inte missar något.
  2. Länka sidan/sidorna från din samlingssida.
  3. I wordpress så reflekterar du över ditt arbete, berätta vilka uppgifter du gjort och varför. Resonera kring hur du tycker att det har gått att jobba med JavaScript, alla elever som läser denna kursen har inte läst Programmering1 och kanske tycker att det är svårt med JavaScript som programmeringsspråk. Länka också till den sidan, se sidorna, där dina exempeluppgifter finns.
    Frågestöd
    • Hur har arbetet med att lära sig grunderna i JavaScript gått?
    • Vilket annat programmeringsspråk, om något, känner du dig mest bekväm i? Jämför detta språk med PHP, likheter, skillnader, och en allmän känsla över att programmera i webbmiljö.
    • I mitt material så finns det både videoklipp och mina exempelkoder, vilket har du använd dig av? Vad hade du önskat mer fanns på sidan?