3 min read

JavaScript del 1

JavaScript del 1

Innehållsförteckning

Introduktion

Detta är det första inlägget av flera som kommer att handla om JavaScript och hur vi använder JavaScript i framförallt webb applikationer.

Jag har som syfte att skriva dessa inlägg som en kurs för nybörjare som vill komma igång med programmering i JavaScript.

Specifikt så kommer jag i denna sektion gå igenom utvecklingsmiljön och de verktyg vi behöver. Sedan kommer jag att ge en snabb introduktion till JavaScript och varför vi behöver kunna språket. Sist men inte minst kommer vi att titta på hur vi kan använda webbläsarens verktyg för att köra JavaScript.

Utvecklingsmiljön

För att utveckla med JavaScript för webben så behövs det endast en texteditor och en webbläsare. Det går bra med egentligen vad som helst, anteckningar, sublime, notepad++, atom och så vidare. Jag å andra sidan är väldigt förtjust i Visual Studio Code som är även detta ett gratis alternativ och som finns tillgängligt för Windows, Mac och Linux.

Det som jag framförallt tycker om är att det finns en stor "community" som arbetar för att lansera tillägg som gör VS Code till ett mycket kraftfullt och trevligt verktyg att arbeta med.

Visual Studio: IDE and Code Editor for Software Developers and Teams
Visual Studio dev tools & services make app development easy for any developer, on any platform & language. Develop with our code editor or IDE anywhere for free.

Dessutom för att professionellt utveckla JavaScript applikationer behövs två ytterligare programvaror installeras. Node.js och Git.

Node.js för utveckla applikationer för server baserade webb applikationer och REST baserade API'er. Git för att kunna versions hantera vår kod.

Node.js
Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.
Git - Downloads

Vi kommer inte att använda Git eller Node.js med en gång men det är alltid bra att ha dessa installerade. Vi kommer att använda Git när vi börjar bygga vår första applikation med JavaScript.

VS Code tillägg

Som jag sa tidigare så är VS Code ett anpassningsbart utvecklingsverktyg och det finns en uppsjö av tillägg som vi kan lägga till som gör VS Code mer produktivt.

Så här är några av de som jag använder för html, css och JavaScript:

Vad är JavaScript?

JavaScript är det mest populära programmeringsspråket i världen. JavaScript kan användas för att lägga till logik i våra webb applikationer som körs i webbläsare. Dessutom kan JavaScript användas för server exekverade applikationer, tillsammans med Node.js, som t ex webb applikationer med fullständig html och css, eller REST baserade api applikationer. Det vill säga applikationer utan användargränssnitt.

Så vad är JavaScript?

JavaScript är ett objekt orienterat högnivå och interpreterande(Just-In-Time) kompilerat programmeringsspråk. Vilket innebär att koden tolkas rad för rad och inte är kompilerat till en exekveringsbar fil, som t ex C# och C++. JavaScript är även ett dynamiskt och singel trådat programmeringsspråk (mer om detta i en senare modul).

JavaScript är förmodligen mest känt för att användas i webbläsare för att skapa interaktivitet för användare som t ex animeringar, agera på knapptryckningar och så vidare. Javascript används även i icke webbläsare miljöer som t ex Node.js, Apache CouchDB samt Adobe Acrobat.

Jag kommer i en senare modul längre fram introducera hur vi bygger REST API lösningar med JavaScript och Node.js, men fokus nu och framåt blir hur vi använder JavaScript för att skapa moderna webb applikationer.

JavaScript i webb applikationer

Enkelt uttryckt så används JavaScript för att skapa en bättre och trevligare användare upplevelse i webbläsaren. Detta sker genom att vi med hjälp av JavaScript kan

  • Manipulera DOM(Document Object Model)
    • Vi kan ändra, lägga till eller ta bort html element och stilmallar dynamiskt
  • Hantera händelser i webbläsaren
    • Vi kan agera på händelser som JavaScript lyssnar efter. T ex en klickning på en knapp
  • Kommunicera med server kod via REST anrop
    • Genom att kunna kommunicera asynkront via api anrop kan vi få tillgång till databaser och dess innehåll via JavaScript