|
1 |
| -# An Introduction to JavaScript |
| 1 | +# En introduksjon til JavaScript |
2 | 2 |
|
3 | 3 | Let's see what's so special about JavaScript, what we can achieve with it, and which other technologies play well with it.
|
4 | 4 |
|
5 |
| -## What is JavaScript? |
| 5 | +La oss se litt nærmere på hva som er så spesielt med JavaScript, hva vi kan oppnå ved å bruke det, og hvilke andre teknologier som passer godt sammen med det. |
6 | 6 |
|
7 |
| -*JavaScript* was initially created to *"make web pages alive"*. |
| 7 | +## Hva er JavaScript? |
8 | 8 |
|
9 |
| -The programs in this language are called *scripts*. They can be written right in a web page's HTML and executed automatically as the page loads. |
| 9 | +*JavaScript* var egentlig ment for å *"gi hjemmesider mer liv"*. |
10 | 10 |
|
11 |
| -Scripts are provided and executed as plain text. They don't need special preparation or compilation to run. |
| 11 | +Programmer skrevet i JavaScript kalles for *scripts*. De kan skrives rett inn i en nettsides's HTML og kjører automatisk så fort siden blir lastet. |
12 | 12 |
|
13 |
| -In this aspect, JavaScript is very different from another language called [Java](https://en.wikipedia.org/wiki/Java_(programming_language)). |
| 13 | +Scripts er utdelt og kjørt som ren tekst. De trenger altså ingen forberedelser eller å bli kompilert for å kjøre. |
| 14 | + |
| 15 | +Med dette øyemed, er JavaScript veldig annerledes fra et annet språk kalt [Java](https://en.wikipedia.org/wiki/Java_(programming_language)). |
14 | 16 |
|
15 | 17 | ```smart header="Why <u>Java</u>Script?"
|
16 |
| -When JavaScript was created, it initially had another name: "LiveScript". But Java was very popular at that time, so it was decided that positioning a new language as a "younger brother" of Java would help. |
| 18 | +Når JavaScript ble skapt, hadde det i utgangspunktet navnet: "LiveScript". Men Java var veldig populært på den tiden, så det ble bestemt at å presentere et nytt programmeringsspråk som en "lillebror" til Java ville være en god ide. |
17 | 19 |
|
18 |
| -But as it evolved, JavaScript became a fully independent language with its own specification called [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript), and now it has no relation to Java at all. |
| 20 | +Men etterhvert som det utviklet seg ble JavaScript et helt uavhengig programmeringsspårk med sitt eget sett med spesifikasjoner kalt [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript), og nå har det ingenting med Java å gjøre i det hele tatt. |
19 | 21 | ```
|
20 | 22 |
|
21 |
| -Today, JavaScript can execute not only in the browser, but also on the server, or actually on any device that has a special program called [the JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine). |
| 23 | +Idag kan JavaScript kjøres på serveren, og ikke bare i nettleseren lenger, faktisk kan det kjøres på hvilken som helst enhet som har [the JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine) installert. |
22 | 24 |
|
23 |
| -The browser has an embedded engine sometimes called a "JavaScript virtual machine". |
| 25 | +Nettleseren har en innebygget motor som noenganger blir kalt for en "JavaScript virtuell maskin". |
24 | 26 |
|
25 | 27 | Different engines have different "codenames". For example:
|
| 28 | +Det finnes flere forskjellige motorer som har skilles fra hverandre med forskjellige "kodenavn". For eksempel: |
26 | 29 |
|
27 |
| -- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- in Chrome and Opera. |
28 |
| -- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- in Firefox. |
29 |
| -- ...There are other codenames like "Trident" and "Chakra" for different versions of IE, "ChakraCore" for Microsoft Edge, "Nitro" and "SquirrelFish" for Safari, etc. |
| 30 | +- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- i Chrome og Opera. |
| 31 | +- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- i Firefox. |
| 32 | +- ...Det er også andre kodenavn som "Trident" og "Chakra" for forskjellige versjoner av IE, "ChakraCore" for Microsoft Edge, "Nitro" og "SquirrelFish" for Safari, osv. |
30 | 33 |
|
31 |
| -The terms above are good to remember because they are used in developer articles on the internet. We'll use them too. For instance, if "a feature X is supported by V8", then it probably works in Chrome and Opera. |
| 34 | +Begrepene ovenfor er gode å huske fordi de ofte brukt i artikler skrevet av utviklere på nettet. Vi vil bruke de også. For eksempel, hvis "en funksjon x er støttet av v8", vil den sannsynlig fungere i Chrome og Opera. |
32 | 35 |
|
33 | 36 | ```smart header="How do engines work?"
|
34 | 37 |
|
35 |
| -Engines are complicated. But the basics are easy. |
| 38 | +Motorer er kompliserte. Men det grunnleggende er ganske lett. |
36 | 39 |
|
37 |
| -1. The engine (embedded if it's a browser) reads ("parses") the script. |
38 |
| -2. Then it converts ("compiles") the script to the machine language. |
39 |
| -3. And then the machine code runs, pretty fast. |
| 40 | +1. Motoren (Innebygd hvis det er en nettleser) leser ("parser") scriptet. |
| 41 | +2. Så konverterer den ("kompilerer") scriptet til maskin språk |
| 42 | +3. Og så kjører maskin koden, veldig raskt. |
40 | 43 |
|
41 |
| -The engine applies optimizations at each step of the process. It even watches the compiled script as it runs, analyzes the data that flows through it, and applies optimizations to the machine code based on that knowledge. When it's done, scripts run quite fast. |
| 44 | +Motoren tar ibruk optimaliseringer til hver eneste steg i prosessen. Passer til og med på det kompilerte scriptet imens det kjører, analyserer data som flyter gjennom det, og legger så til optimaliseringer til maskin koden basert på denne kunnskapen. |
| 45 | +Når dette gjøres, kjører scripts rimelig fort. |
42 | 46 | ```
|
43 | 47 |
|
44 |
| -## What can in-browser JavaScript do? |
| 48 | +## Hva kan JavaScript gjøre i nettleseren? |
| 49 | + |
| 50 | +Moderne JavaScript er et "trygt" programmeringsspråk. Det gir ikke lavniå tilgang til minne eller CPU, fordi det i utgangspunktet var laget for nettlesere som ikke krever det. |
45 | 51 |
|
46 |
| -Modern JavaScript is a "safe" programming language. It does not provide low-level access to memory or CPU, because it was initially created for browsers which do not require it. |
| 52 | +JavaScript's evber er sterkt avhengig av miljøet det kjører i. For eksempel, [Node.js](https://wikipedia.org/wiki/Node.js) støtter funksjoner som lar JavaScript lese/skrive vilkårlig, gjennomføre nettverksforespørsler, osv. |
47 | 53 |
|
48 |
| -JavaScript's capabilities greatly depend on the environment it's running in. For instance, [Node.js](https://wikipedia.org/wiki/Node.js) supports functions that allow JavaScript to read/write arbitrary files, perform network requests, etc. |
| 54 | +I-nettleser JavaScript kan gjøre alt i forbindelse med manipulering av nettsider, interaksjon med brukeren, og nett-tjeneren. |
49 | 55 |
|
50 |
| -In-browser JavaScript can do everything related to webpage manipulation, interaction with the user, and the webserver. |
| 56 | +For eksempel, i-nettleser JavaScript er i stand til å: |
51 | 57 |
|
52 |
| -For instance, in-browser JavaScript is able to: |
| 58 | +- Legge til ny HTML til en side, endre den eksisterende konteksten, modifisere stiling. |
| 59 | +- Reagere på nye hendelser, kjøre ved museklikk, peker bevegelser, tastetrykk. |
| 60 | +- Sende forespørsler over nettverket til eksterne tjenere, nedlasting og opplasting av filer (såkalte [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming)) og [COMET](https://en.wikipedia.org/wiki/Comet_(programming)) teknologier). |
| 61 | +- Kalle på og endre [informasjonskapsler](https://no.wikipedia.org/wiki/Informasjonskapsel), stille spørsmål til besøkende, vise meldinger. |
| 62 | +- Huske data på klientsiden ("lokal lagring"). |
53 | 63 |
|
54 |
| -- Add new HTML to the page, change the existing content, modify styles. |
55 |
| -- React to user actions, run on mouse clicks, pointer movements, key presses. |
56 |
| -- Send requests over the network to remote servers, download and upload files (so-called [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming)) and [COMET](https://en.wikipedia.org/wiki/Comet_(programming)) technologies). |
57 |
| -- Get and set cookies, ask questions to the visitor, show messages. |
58 |
| -- Remember the data on the client-side ("local storage"). |
| 64 | +## Hva KAN IKKE JavaScript gjøre i nettleseren? |
59 | 65 |
|
60 |
| -## What CAN'T in-browser JavaScript do? |
| 66 | +JavaScript's egenskaper i nettleseren er begrensede på vegne av brukeren trygghet. Dette er ment for å hindre nettsider med onde hensikter fra å aksessere informasjon eller ramme brukerens data på noen som helst måte. |
61 | 67 |
|
62 |
| -JavaScript's abilities in the browser are limited for the sake of the user's safety. The aim is to prevent an evil webpage from accessing private information or harming the user's data. |
| 68 | +Eksempler på slike begrensninger inkluderer: |
63 | 69 |
|
64 |
| -Examples of such restrictions include: |
| 70 | +- JavaScript på en nettside kan ikke lese/skrive vilkårlige filer på en harddisk, kopiere eller kjøre programmer. Det har ingen direkte tilgang til funksjoner som er tilknyttet operativsystemet (OS). |
65 | 71 |
|
66 |
| -- JavaScript on a webpage may not read/write arbitrary files on the hard disk, copy them or execute programs. It has no direct access to OS system functions. |
| 72 | + Moderne nettlesere tillater det til å behandle filer, men denne adgangen er begrenset og kun gitt hvis brukeren gjennomfører utvalgte hendelser, som å "slippe" en fil over et nettleservindu eller velger det via en `<input>` tag. |
67 | 73 |
|
68 |
| - Modern browsers allow it to work with files, but the access is limited and only provided if the user does certain actions, like "dropping" a file into a browser window or selecting it via an `<input>` tag. |
| 74 | + Det finnes måter å interragere med kamera og mikrofon og andre enheter, men disse krever at brukeren gir eksplisitt tillatelse. Så en JavaScript-akrivert side kan ikke på en lumsk måte aktivere webkameraet, se seg rundt og sende informasjonen om dette til [PST](https://no.wikipedia.org/wiki/Politiets_sikkerhetstjeneste). |
69 | 75 |
|
70 |
| - There are ways to interact with camera/microphone and other devices, but they require a user's explicit permission. So a JavaScript-enabled page may not sneakily enable a web-camera, observe the surroundings and send the information to the [NSA](https://en.wikipedia.org/wiki/National_Security_Agency). |
71 |
| -- Different tabs/windows generally do not know about each other. Sometimes they do, for example when one window uses JavaScript to open the other one. But even in this case, JavaScript from one page may not access the other if they come from different sites (from a different domain, protocol or port). |
| 76 | +- Forskjellige paneler/vinduer i en nettleser vet i utgangspunktet ingenting om hverandre. Noenganger gjør de det, for eksempel når et vindu bruker JavaScript til å åpne et annet vindu. Men selv i dette tilfellet, JavaScript fra en side til en kan ikke aksessere et annet vindu hvis det kommer fra forskjellige sider (fra et annet domene, protokoll eller port). |
72 | 77 |
|
73 |
| - This is called the "Same Origin Policy". To work around that, *both pages* must contain a special JavaScript code that handles data exchange. |
| 78 | + Dette er kalt "Same Origin Policy". For å jobbe rundt dette, må *begge sidene* inneholde en spesiell JavaScript kode som behandler denne utvekslingen av data. |
74 | 79 |
|
75 |
| - This limitation is, again, for the user's safety. A page from `http://anysite.com` which a user has opened must not be able to access another browser tab with the URL `http://gmail.com` and steal information from there. |
76 |
| -- JavaScript can easily communicate over the net to the server where the current page came from. But its ability to receive data from other sites/domains is crippled. Though possible, it requires explicit agreement (expressed in HTTP headers) from the remote side. Once again, that's a safety limitation. |
| 80 | + Denne begrensningen er, igjen satt på plass med brukerens trygghet i tankene. En side fra `http://hvilkensomhelstside.no` som en bruker har åpnet kan overhodet ikke være i stand til å aksessere et annet panel med URL'en `http://gmail.com` og stjele informasjon derfra. |
| 81 | + |
| 82 | +- JavaScript kan med letthet kommunisere med en tjener over nettet hvor den nåværende siden kom fra. Men dets egenskap til å motta data fra andre sider/domener er veldig tungvint, men det er mulig, dette krever eksplisitt tillatelse (uttrykt via HTTP headere) fra den eksterne siden. Igjen, dette er sikkerhetsbegrensning. |
77 | 83 |
|
78 | 84 | 
|
79 | 85 |
|
80 |
| -Such limits do not exist if JavaScript is used outside of the browser, for example on a server. Modern browsers also allow plugin/extensions which may ask for extended permissions. |
| 86 | +Slike begrensninger eksisterer ikke hvis JavaScript brukes på utsiden av nettleseren, for eksempel på en tjener. Moderne nettlesere tillater også bruk utvidelser som kan spørre om utvidede tillatelser. |
81 | 87 |
|
82 |
| -## What makes JavaScript unique? |
| 88 | +## Hva gjør JavaScript unikt? |
83 | 89 |
|
84 |
| -There are at least *three* great things about JavaScript: |
| 90 | +Dette er de *tre* minst gode ting om JavaScript: |
85 | 91 |
|
86 | 92 | ```compare
|
87 |
| -+ Full integration with HTML/CSS. |
88 |
| -+ Simple things are done simply. |
89 |
| -+ Support by all major browsers and enabled by default. |
| 93 | ++ Full integrasjon med HTML/CSS. |
| 94 | ++ Enkle ting kan gjøres på en enkel måte. |
| 95 | ++ Støttet av alle de største nettleserne og er påslått som standard. |
90 | 96 | ```
|
91 |
| -JavaScript is the only browser technology that combines these three things. |
92 |
| - |
93 |
| -That's what makes JavaScript unique. That's why it's the most widespread tool for creating browser interfaces. |
| 97 | +JavaScript er den eneste nettleser teknologien som kombinerer disse tre tingene. |
94 | 98 |
|
95 |
| -While planning to learn a new technology, it's beneficial to check its perspectives. So let's move on to the modern trends affecting it, including new languages and browser abilities. |
| 99 | +Dette er det som gjør JavaScript unikt. Dette er grunnen til at JavaScript er det mest utstrakte verktøyet for utvikling av grensesnitt i nettleseren. |
96 | 100 |
|
| 101 | +Imens du har planer om å lære deg en teknologi, er det gunstig å sjekke dens perspektiver. Så la oss fortsette til de moderne trendene som påvirker den, inkluderende nye språk og ny nettleser-funksjonalitet. |
97 | 102 |
|
98 |
| -## Languages "over" JavaScript |
| 103 | +## Språk "via" JavaScript |
99 | 104 |
|
100 |
| -The syntax of JavaScript does not suit everyone's needs. Different people want different features. |
| 105 | +JavaScript's syntax er tilpasset alle sitt behov. Forskjellige folk trenger forskjellige funksjoner. |
101 | 106 |
|
102 |
| -That's to be expected, because projects and requirements are different for everyone. |
| 107 | +Dette er ikke overraskende, siden forskjellige prosjekter har forskjellige krav. |
103 | 108 |
|
104 |
| -So recently a plethora of new languages appeared, which are *transpiled* (converted) to JavaScript before they run in the browser. |
| 109 | +En haug av nye språk har nylig dukket opp, som er *transpilert* (konvertert) til JavaScript før de kjører i nettleseren. |
105 | 110 |
|
106 |
| -Modern tools make the transpilation very fast and transparent, actually allowing developers to code in another language and auto-converting it "under the hood". |
| 111 | +Moderne verktøy gjør transpileringen veldig rask og forutsigbar, faktisk så lar dette utviklere å skrive kode på et annet språk som blir automatisk konvertert "under panseret". |
107 | 112 |
|
108 |
| -Examples of such languages: |
| 113 | +Dette er eksempler på slike språk: |
109 | 114 |
|
110 |
| -- [CoffeeScript](http://coffeescript.org/) is a "syntactic sugar" for JavaScript. It introduces shorter syntax, allowing us to write clearer and more precise code. Usually, Ruby devs like it. |
111 |
| -- [TypeScript](http://www.typescriptlang.org/) is concentrated on adding "strict data typing" to simplify the development and support of complex systems. It is developed by Microsoft. |
112 |
| -- [Dart](https://www.dartlang.org/) is a standalone language that has its own engine that runs in non-browser environments (like mobile apps). It was initially offered by Google as a replacement for JavaScript, but as of now, browsers require it to be transpiled to JavaScript just like the ones above. |
| 115 | +- [CoffeeScript](http://coffeescript.org/) er en "syntaktisk sukker" for JavaScript. Det introduserer kortere syntax, som lar oss skrive klarer og mer presis kode. Ruby utviklere er vanligvis mer glad i dette. |
| 116 | +- [TypeScript](http://www.typescriptlang.org/) er konsentrert rundt å legge til "streng datatyping" for å gjøre utvikling og drifting av komplekse systemer lettere. TypeScript er utviklet av Microsoft. |
| 117 | +- [Dart](https://www.dartlang.org/) er et selvstendig språk som har sin egen motor som kjører ukjente miljøer for nettleseren (som mobilapplikasjoner). Det var i utgangspunktet lagt frem av Google som en erstatter for JavaScript, men foreløpig krever nettlesere at Dart transpileres til JavaScript akkurat som de andre nevnt ovenfor. |
113 | 118 |
|
114 |
| -There are more. Of course, even if we use one of these languages, we should also know JavaScript to really understand what we're doing. |
| 119 | +Det finnes flere selvfølgelig. Men selv om vi bruker noen av disse språkene, er det lurt av oss å kjenne JavaScript for å vite hva vi egentlig driver med. |
115 | 120 |
|
116 | 121 | ## Summary
|
| 122 | +## Oppsummering |
117 | 123 |
|
118 |
| -- JavaScript was initially created as a browser-only language, but is now used in many other environments as well. |
119 |
| -- Today, JavaScript has a unique position as the most widely-adopted browser language with full integration with HTML/CSS. |
120 |
| -- There are many languages that get "transpiled" to JavaScript and provide certain features. It is recommended to take a look at them, at least briefly, after mastering JavaScript. |
| 124 | +- JavaScript var i utgangspunktet skapt som et kun-nettleser språk, men finnes også i mange andre miljøer i tillegg. |
| 125 | +- Idag, har JavaScript en unik position som det mest brukt nettleser språket med full integrasjon mot HTML/CSS. |
| 126 | +- Det finnes mange språk som blir "transpilert" til JavaScript og som gir utvalgte funksjoner. Det er anbefalt å ta en kikk på de, ihvertfall ganske kort, etter at du mestrer JavaScript. |
0 commit comments