Javascript 101

Dagens föreläsning

Grundläggande genomgång av javascript och jQuery. Fokus på hur man arbetar med javascripts DOM.

  • Historik

  • Grundläggande syntax och funktionalitet

  • DOM (Document Object Model)

  • jQuery

  • Eventbaserad programmering

  • AJAX

Historik

Första versionen utvecklad av Brendan Eich 1995 i ett samarbete mellan Netscape och Sun microsystems.

Språket hette först Livescript men bytte namn till Javascript. Namnet är missvisande då Javascript inte har något med Java att göra.

Microsoft släppte en egen variant som de kallade JScript 1996. I slutet av 1996 påbörjades standardiseringsarbetet som ledde till ECMA-262 som släpptes i juni 1997.

Historik

ECMAScript 2 följde ett år senare och ECMAScript 3 släpptes i december 1999. Efter dessa standarder följde en lång period av bråk där varje aktör gjorde som de ville.

Inte förrän i december 2009 kommer de olika parterna överens om en ny standard som kallas för ECMAScript 5.

Under tiden hade de första javacriptbiblioteken börjat komma som försökte underlätta js-utveckling. De största biblioteken är/var jQuery, Prototype, Dojo Toolkit och MooTools.

Grundläggande syntax

var x; // Definierar en variabel
var y = 2; // Definierar en variabel och sätter den till värdet 2
console.log("Hello World!"); // Skriv "Hello world!" till webbläsarens konsoll

var z = function() {}; // Anonym funktion
Math.random(); // Generera ett slumpmässigt tal

var numbers = [1,2,3,4]; // En array med siffror

for (var i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
} // En for-loop

// Ett objekt/associativ array. OBS inte samma sak som i PHP
var myObject = {
    key: "Value"
}
console.log(myObject.key); // "Value"
console.log(myObject['key']); // "Value"

(function(){
    alert("Hello World!");
})(); // Självexekverande funktion

Funktionalitet

Eftersom javascript körs med webbläsaren som kontext så har ni tillgång till en del av webbläsarens funktionalitet.

Vi kommer inte gå igenom allihop idag men en lista över Web API:erna finns här: https://developer.mozilla.org/en-US/docs/Web/API

Javascript är eventbaserat och asynkront vilket innebär att eran kod ofta ligger och väntar på specifika händelser.

Det innebär att exekveringsflödet ofta inte är lika tydligt som i linjar synkron kod.

Document Object Model

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

DOM är en javascript-representation av en webbsidas struktur. En mycket stor del av javascriptutveckling består av att arbeta med och manipulera DOM:en.

Detta görs antingen genom javascripts inbyggda API:er eller genom bibliotek som jQuery som är framtagna bla för att göra arbetet med DOM:en enklare och mer förutsägbart.

jQuery

Första versionen släpptes i januari 2006 av John Resig. Bibliotekets främsta syften är att underläta DOM-manipulering genom sin selektionsmotor som innebär att ni kan skriva CSS-uttryck för att hämta och manipulera element på sidan.

jQuery standardiserar även funktionalitet mellan olika webbläsare så att samma kod kan köras överallt. Detta var absolut ingen självklarhet när biblioteket kom och under många år därefter.

Biblioteket innehåller även funkionalitet för att hantera animationer och AJAX-anrop. Det går även att bygga ut jQuery med egna plugin.

Eventbaserad programmering

En stor del av javascriptprogrammering är eventbaserad. Det innebär att vi skriver kod som "lyssnar" efter specifika händelser på sidan och gör saker först när dessa händelser inträffar.

En väldigt omfattande event-lista finns här: https://developer.mozilla.org/en-US/docs/Web/Events

Vi skall dock inte gå igenom hela den listan utan vi skall bara ägna oss åt de vanligaste/mest användbara idag.

Eventbaserad programmering

// Vanlig js
var el = document.getElementById("mittElement");
el.addEventListener("click", function() {
    console.log("Clicked me!");
});

el = document.querySelector("h1");
el.addEventListener("click", function() {
    console.log("Clicked me!");
});


//jQuery
$("#mittElement").on("click", function() {
    console.log("Clicked me!");
});

$("h1").on("click", function() {
    console.log("Clicked me!");
});

AJAX

AJAX står för Asynchronous Javascript And XML. Det har dock ingenting med XML att göra. AJAX är det primära sättet att kommunicera med servern via javascript och därmed inte behöva ladda om sidan.

AJAX möjliggör en helt annan nivå av reaktivitet och interaktivitet jämfört med webbsidor som saknar AJAX-funktionalitet.

AJAX låter oss ladda in nytt material på sidan dynamiskt baserat på vad användaren gör.

AJAX

// Vanlig js
var req = new XMLHttpRequest();
var params = "lorem=ipsum&name=binny";

req.open('POST', "/create-artist");
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.onload = function() {
	var response = JSON.parse(req.responseText);
	console.log(req.responseText);
};
req.error = function() {
    console.log("Något gick fel");
};
req.send(params);

// jQuery
$.post("/create-artist", {lorem:"ipsum",name:"binny"}, function(response) {
});

Javascript 101

By marcusdalgren

Made with Slides.com

Javascript 101

  • 220

More from marcusdalgren