The markdown behind the website for webbutvckling backend
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
Tisdag den 5:e februari 2019
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
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>
Försätt med projekt 3