Chinese new year 2019

Introduktion till javascript

Javascript är inget krav denna kurs (kommer i Frontend webbutveckling) och där kommer ingen frågor till examen i detta, men kunskåp om javascript kan underlätta en del när vi börjar att jobba med asynkrona web utveckling

Lektionsplan

Tisdag den 5:e februari 2019

8:30 Extern föreläsare: Automatisk dokumentation med Azure DevOps (Mattias Karlsson)
Paus
(runt 9:45) Sammanfattning av Automatiserad test och logging
10:30 Introduktion till javascript
Genomgång av övning till idag
13:00 Object Oriented Programming
Projekt 3

Kurslitteratur

Wikipedia: JavaScript
f9-1 - Introduktion till programmering och JavaScript
Javascript videoer på svenska
Introducing JSON, på svenska

Extra kurslitteratur

Detta är insperation till material man kan läsa för att öka chansen för VG.

Asynchronous JavaScript And XML (AJAX): Anvønns för inte låsa UI bid långa förfrågningar

Wikipedia: Ajax
AJAX: What are asynchronous web applications?
AJAX: jQuery.ajax(), bygger på jQuery

Övningar

JavaScript Tutorial

Skåpa en HTML fil med fæljande enkla innehåll:

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <button id="hellobutton">Hello</button>
    <p>Här visas ett resultat: <div id="helloresult"></div></p>
  </body>
</html>

I dokumentet är en knapp om man klickar på knappen händer inget, detta kan man ändra gennem att lägga till litet javascript. Som först sökar upp vår knapp, och sen lägger på ett event, så att når man trycker på knappen ska där hända något, i vårt fall kommer den att skriva en text i en div.

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <button id="hellobutton">Hello</button>
    <p>Här visas ett resultat: <div id="helloresult"></div></p>
    <script>
        document.getElementById('hellobutton').onclick = function() {
            var helloresult = document.getElementById('helloresult');
            helloresult.innerText= 'Hello knappen har tryckts';     // Append "Some new words" to the page
        };
    </script>
  </body>
</html>

Vi kan även använda Javascript till att ändra CSS properties på ett element.

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <button id="hellobutton">Hello</button>
    <p>Här visas ett resultat: <div id="helloresult"></div></p>
    <button id="colorbutton">Bytt färg</button>
    <script>
        document.getElementById('hellobutton').onclick = function() {
            var helloresult = document.getElementById('helloresult');
            helloresult.innerText= 'Hello knappen har tryckts';
        };

        document.getElementById('colorbutton').onclick = function() {
            var helloresult = document.getElementById('helloresult');
            helloresult.style.color = 'red';
        };

    </script>
  </body>
</html>

Eller vi kan använda javascript till göra ett anrop mot ett api:

I koden använns Javascript metoden: XMLHttpRequest.open

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <button id="hellobutton">Hello</button>
    <p>Här visas ett resultat: <div id="helloresult"></div></p>
    <button id="colorbutton">Bytt färg</button>
    <script>
        document.getElementById('hellobutton').onclick = function() {
            // https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/
            var request = new XMLHttpRequest();
            request.open('GET', 'https://ghibliapi.herokuapp.com/films', true);
            request.onload = function () {
                var helloresult = document.getElementById('helloresult');

                // Begin accessing JSON data here
                var data = JSON.parse(this.response);
                if (request.status >= 200 && request.status < 400) {
                    data.forEach(movie => {
                        const card = document.createElement('div');

                        const h1 = document.createElement('h1');
                        h1.textContent = movie.title;

                        const p = document.createElement('p');
                        movie.description = movie.description.substring(0, 300);
                        p.textContent = `${movie.description}...`;

                        card.appendChild(h1);
                        card.appendChild(p);
                        helloresult.appendChild(card);
                    });
                } else {
                    const errorMessage = document.createElement('marquee');
                    errorMessage.textContent = `Gah, it's not working!`;
                    helloresult.appendChild(errorMessage);
                }
            }
            request.send();      
        };

        document.getElementById('colorbutton').onclick = function() {
            var helloresult = document.getElementById('helloresult');
            helloresult.style.color = 'red';
        };

    </script>
  </body>
</html>

Projekt

Försätt med projekt 3