Mikä on JavaSkripti? Johdanto ja esimerkki Hello Worldista
⚡ Älykäs yhteenveto
JavaScript on ohjelmointikieli, joka tekee verkkosivuista interaktiivisia. Tässä johdantokappaleessa selitetään, mitä JavaSkripti kertoo mistä se tuli, miten selaimet ja Node.js suorittavat sen ja miten ensimmäinen Hello World -skripti kirjoitetaan ja suoritetaan.

Mikä on JavaKäsikirjoitus?
JavaScript on korkean tason ohjelmointikieli, joka lisää verkkosivuille käyttäytymistä. Se on yksi kolmesta webin ydinteknologiasta: HTML tarjoaa rakenteen, CSS ulkoasun ja JavaSkripti tarjoaa vuorovaikutuksen. Joka kerta, kun hakukenttä näyttää ehdotuksia kirjoittaessasi, valokuvakaruselli liukuu esiin tai ilmoittautumislomake varoittaa puuttuvasta kentästä, JavaSkripti tekee tuon työn taustalla.
Alla oleva kaavio näyttää, miten skripti sijoittuu tavallisen verkkosivun koodin rinnalle.
Suurimman osan elämästään JavaScriptiä kuvailtiin aiemmin asiakaspuolen skriptikieleksi, koska se toimi vain selaimessa. Tämä kuvaus on nyt epätäydellinen. Node.js:n ilmestymisestä vuonna 2009 lähtien samaa kieltä on käytetty myös web-palvelimien, komentorivisovellusten, työpöytäsovellusten ja mobiilisovellusten pyörittämiseen. Tarkempi kuvaus nykyään on, että JavaScript on yleiskäyttöinen kieli, jolla on epätavallisen vahva läsnäolo selaimessa.
Kieltä määrittelevät ominaisuudet ovat:
- Dynaamisesti tyypitetty: Muuttuja voi sisältää numeron nyt ja merkkijonon hetkeä myöhemmin, joten tyypit tarkistetaan ohjelman suorituksen aikana.
- Tulkittu ja juuri oikeaan aikaan koottu: moottorit, kuten Chromen V8 ja Node.js, kääntävät usein suoritettavan koodin konekielelle nopeuden parantamiseksi.
- Moniparadigma: Imperatiivisia, funktionaalisia ja olio-ohjelmointityylejä tuetaan.
- Tapahtumavetoinen: koodi reagoi klikkauksiin, näppäinpainalluksiin, ajastimiin ja verkon vastauksiin sen sijaan, että se juoksisi ylhäältä alas ja pysähtyisiping.
- Yksisäikeinen tapahtumasilmukalla: Hitaasti tehtävät työt, kuten verkkopuhelu, jonotetaan sivun jäädyttämisen sijaan.
💡 Vinkki: JavaScript ja ECMAScript eivät ole kilpailevia kieliä. ECMAScript on kirjoitettu spesifikaatio ja JavaSkripti on kyseisen määrityksen toteutus, jonka selaimet ja Node.js itse asiassa toimittavat.
Historia JavaKäsikirjoitus
Brendan Eich loi JavaNetscape Communicationsilla vuonna 1995 käsikirjoitus, joka tuotti ensimmäisen toimivan prototyypin noin kymmenessä päivässä. Sisäisesti projektia kutsuttiin nimellä mokkakahviSe toimitettiin Netscape Navigator 2.0 beta -versiona nimellä LiveScript syyskuussa 1995 ja nimettiin uudelleen JavaKäsikirjoitus joulukuussa 1995 osana Netscapen ja Sun Microsystemsin, yhtiön, joka omisti Java tällä hetkellä.
Tuo uudelleennimeäminen on ainoa syy, miksi niin monet aloittelijat edelleen olettavat JavaScript on kevytversio JavaNämä kaksi kieltä eivät liity toisiinsa suunnittelun, omistajuuden ja suorituksenajan suhteen. Netscape lähetti kielen Ecma Internationalille vuonna 1996, ja ECMA-262-standardin ensimmäinen painos julkaistiin kesäkuussa 1997. Alla olevassa taulukossa luetellaan tärkeimmät virstanpylväät vanhempaa koodia luettaessa.
| Vuosi | Virstanpylväs | Miksi se on tärkeätä |
|---|---|---|
| 1995 | Mokka, sitten LiveScript, sitten JavaKäsikirjoitus | Kielen on kehittänyt Brendan Eich Netscapella. |
| 1997 | ECMA-262 ensimmäinen painos | Kieli saa myyjäneutraalin kirjallisen standardin. |
| 2009 | ES5 ja Node.js:n ensimmäinen julkaisu | Tiukka tila saapuu, ja JavaSkripti poistuu selaimesta. |
| 2015 | ES6 (ECMAScript 2015) | let-, const- ja arrow-funktiot, luokat, moduulit ja promiset lisätään. |
| 2016 eteenpäin | Vuosittaiset ECMAScript-versiot | Pienempiä ominaisuuksia julkaistaan joka kesäkuu harvinaisten suurten julkaisujen sijaan. |
Vuosittaisen julkaisusyklin vuoksi ennen vuotta 2015 kirjoitettu koodi näyttää huomattavasti erilaiselta kuin nykykoodi. Vanhemmissa tutoriaaleissa käytetään var kaikkialla, kun taas nykyinen koodi suosii let ja const kun muuttujien deklarointi JavaKäsikirjoitus.
Mikä on JavaMihin skriptiä käytetään?
JavaSkriptikieli ei enää rajoitu pieniin sivutemppuihin. Sama syntaksi esiintyy nyt neljässä hyvin eri paikassa, minkä vuoksi se on jatkuvasti yksi käytetyimmistä kielistä kehittäjätutkimuksissa.
| alue | Mitä JavaSkripti tekee siellä | Tyypilliset työkalut |
|---|---|---|
| Selaimen käyttöliittymä | Käsittelee klikkauksia, päivittää sivun ilman uudelleenlatausta, validoi lomakkeet ja piirtää kaavioita. | React, Vue, Angular, Svelte |
| Palvelimen puolella | Palvelee HTTP-pyyntöjä, kommunikoi tietokantojen kanssa ja rakentaa REST- tai GraphQL-rajapintoja. | Node.js, Deno, Bun, Express |
| Mobiilisovellukset | rakentaa Android ja iOS-sovelluksia yhdestä jaetusta koodikannasta. | React Native, Ionic, Kondensaattori |
| Pöytäsovellukset | Käärii web-käyttöliittymän natiivi-ikkunaan, jolla on tiedostojärjestelmän käyttöoikeudet. | Elektroni, Tauri |
| Työkalut ja automaatio | Yhdistää resursseja, suorittaa testipaketteja ja ohjaa selaimia kokonaisvaltaiseen testaukseen. | Vite, verkkopaketti, jest, näytelmäkirjailija |
Pelit, datan visualisoinnit, selainlaajennukset ja pienet laitteistoprojektit ovat myös kaikki riippuvaisia siitä. Aloittelijalle käytännön seuraus on yksinkertainen: syntaksiin käyttämäsi työ siirtyy nyt suoraan palvelintyöhön, mobiilityöhön ja myöhemmin testiautomaatioon. Jos haluat nähdä kielen sovellettavan todellisiin ongelmiin, työskentele läpi joukko käytännön JavaSkriptikoodiesimerkkejä kun perusasiat ovat mukavat.
Kuinka ajaa JavaKäsikirjoitus?
JavaSkripti ei suoriteta itsestään. Se tarvitsee isäntäympäristön, joka sisältää JavaKäsikirjoitus moottoriChrome ja Edge käyttävät V8:aa. Firefox käyttää SpiderMonkeyta ja Safaria JavaScriptCore. Kun selain lataa HTML-sivun ja löytää skriptin, se antaa kyseisen skriptin hakumoottorilleen, joka jäsentää, kääntää ja suorittaa sen.
Toinen isäntäympäristö on Node.js, joka upottaa saman V8-moottorin selaimen ulkopuolelle. Näin identtinen kieli toimii palvelimella tai terminaalissa. Käytännön etu on JavaKäsikirjoitus on sitä jokainen moderni selain tukee sitä on Windows, Linux ja macOS, joten sinun ei juurikaan tarvitse huolehtia siitä, mitä selainta vierailija käyttää. Tämä on todellinen parannus VBScriptiin verrattuna, joka on toiminut aiemmin vain Internet Explorerissa Windows ja on nyt vanhentunut yhdessä itse Internet Explorerin kanssa.
⚠️ Varoitus: selain JavaSkripti ja Node.js JavaSkriptit jakavat ydinkielen, mutta eivät ympäröiviä objekteja. document ja window ovat olemassa vain selaimessa, ja require ja tiedostojärjestelmämoduulit ovat olemassa vain Node.js:ssä. Koodin kopioiminen näiden kahden välillä ilman tarkistusta aiheuttaa viitevirheen.
Tarvittavat työkalut
Tarvitset tekstieditorin koodin kirjoittamiseen ja selaimen tuloksen näkemiseen. Notepad++, Visual Studio Code, Sublime Text, ja mikä tahansa muu editori, jonka kanssa tunnet olosi mukavaksi, tekee työn, vaikka syntaksin korostusta ja sulkeiden yhteensovitusta tukeva editori säästää sinulta paljon virheenkorjausta. Mikä tahansa nykyinen selain toimii: Google Chrome, Firefox, Microsoft Edgetai Safaria. Mitään ei tarvitse ostaa tai asentaa näiden kahden lisäksi.
Yksinkertainen JavaScript-ohjelma
Jos pidät JavaHTML-dokumentin sisällä oleva skripti, kaiken koodin on sijaittava avausmerkkien välissä <script> tagi ja lopetus </script> tagi. Näin selain erottaa koodisi ympäröivästä merkinnästä. Vanhemmilla sivuilla on myös type ominaisuus, kirjoitettuna muodossa <script type="text/javascript">, jota tarvittiin, kun kilpailevia asiakaspuolen kieliä, kuten VBScript, oli olemassa. Nykyaikaiset sivut jättävät sen pois, koska HTML5 käsittelee text/javascript oletusarvoisesti. Alla olevat kaksi versiota ovat toiminnallisesti identtisiä, ja molemmat ovat edelleen voimassa.
Hei maailma -esimerkki
Perinteinen ensimmäinen ohjelma näyttää viestin. Lisää seuraavat merkinnät tiedostoon nimeltä hello.html ja avaa se selaimessa.
<html>
<head>
<title>My First JavaScript code!!!</title>
<script type="text/javascript">
alert("Hello World!");
</script>
</head>
<body>
</body>
</html>
lähtö:
A browser dialog box opens containing the text: Hello World!
Huomautus: type="text/javascript" ei ole välttämätön HTML5:ssä. Seuraava koodi toimii täsmälleen samalla tavalla.
<html>
<head>
<title>My First JavaScript code!!!</title>
<script>
alert("Hello World!");
</script>
</head>
<body>
</body>
</html>
lähtö:
A browser dialog box opens containing the text: Hello World!
Kun sivu kasvaa muutaman rivin yli, skriptin siirtäminen omaan .js tiedosto pitää merkinnät luettavissa ja antaa selaimen tallentaa koodin välimuistiin. Eroja käsitellään yksityiskohtaisesti tässä vertailussa sisäinen ja ulkoinen JavaKäsikirjoitus.
Kuinka kirjoittaa ja suorittaa ensimmäinen skriptisi
On kolme käytännöllistä tapaa toteuttaa JavaSkripti, ja aloittelijan kannattaa kokeilla kaikkia kolmea, koska jokainen sopii eri tilanteeseen.
1. Selainkonsoli. Tämä on nopein vaihtoehto eikä vaadi tiedostoja lainkaan. Avaa mikä tahansa verkkosivu, paina F12 (tai Ctrl+Shift+Minä päällä Windows ja Linuxissa, Cmd+Option+I päällä macOS) ja valitse Console sarkain. Kirjoita rivi, paina Enter-näppäintä ja tulos tulee välittömästi näkyviin. Se on ihanteellinen paikka testata yksittäistä lauseketta tai tarkistaa, mitä funktio palauttaa.
// Type each line into the browser console and press Enter console.log(2 + 2); console.log("Guru" + 99); console.log(Math.max(4, 12, 7)); console.log(typeof "hello");
lähtö:
4 Guru99 12 string
Huomaa toinen rivi. Lisäämällä numeron 99 merkkijonoon “Guru” tuottaa merkkijonon ”Guru99” virheen sijaan, koska JavaSkripti muuntaa numeron automaattisesti tekstiksi. Tämä toimintatapa on kätevä ja myös klassinen aloittelijoiden bugien lähde.
2. HTML-tiedosto. Tämä on yllä oleva Hello World -esimerkki. Käytä sitä aina, kun koodin on koskettava itse sivuun, esimerkiksi lomakkeen arvon lukemista tai elementin muuttamista varten.
3. Node.js terminaalista. Asenna Node.js ja tallenna koodi tiedostoon, jossa on .js laajennus ja suorita sitten node first-script.jsMikään ei renderöi, joten console.log tulee tulostuskanavaksesi. Tämä on reitti, jota kannattaa seurata, kun haluat harjoitella puhtaita kieliominaisuuksia ilman HTML:ää niiden ympärillä.
// first-script.js const language = "JavaScript"; const createdBy = "Brendan Eich"; const releaseYear = 1995; console.log(language + " was created by " + createdBy + " in " + releaseYear + "."); const usedFor = ["Interactive web pages", "Server apps with Node.js", "Mobile apps"]; usedFor.forEach(function (item, index) { console.log(index + 1 + ". " + item); });
lähtö:
JavaScript was created by Brendan Eich in 1995. 1. Interactive web pages 2. Server apps with Node.js 3. Mobile apps
Tässä lyhyessä skriptissä on jo kolme jatkuvasti kohtaamaasi ideaa: vakiot, jotka on ilmoitettu const, ryhmä sisältää arvojen luettelon ja takaisinkutsufunktion, joka on välitetty forEachSaman silmukan uudelleenkirjoittaminen a:lla for lause on hyödyllinen harjoitus, kun olet opiskellut silmukoita JavaKäsikirjoitus.
JavaSkripti vs. Java
Nimet ovat ohjelmointihistorian suurin onnettomuus, ja niiden aiheuttama hämmennys kannattaa selvittää etukäteen. JavaScript nimettiin uudelleen LiveScriptistä puhtaasti markkinointisyistä vuonna 1995, jolloin Java oli verkon puhutuin teknologia. Nämä kaksi kieltä suunnittelivat eri ihmiset, eri yrityksissä, eri ongelmiin.
| Aspect | JavaKäsikirjoitus | Java |
|---|---|---|
| Luonut | Brendan Eich Netscapella vuonna 1995 | James Gosling Sun Microsystemsillä vuonna 1995 |
| Typing | Dynaaminen ja heikosti tyypitetty | Staattinen ja vahvasti tyypitetty |
| Käy | Selainmoottorit ja Node.js | Java Virtuaalikone |
| Compilation | Moottorin ajonaikaisesti kääntämä Just-in-time | Käännetty etukäteen tavukoodiksi |
| Objekti malli | Prototyyppipohjainen, luokkasyntaksi lisätty ES6:ssa | Luokkapohjainen alusta alkaen |
| Tiedostopääte | . Js | .java käännetty .class-tiedostoksi |
| Yleinen käyttö | Verkkosivujen käyttöliittymät, API:t, työkalut | Yritystason taustajärjestelmät, Android, massadata |
Ainoa todellinen samankaltaisuus on, että molemmat lainaavat aaltosulkeiden syntaksin C:stä. Toisen oppiminen ei opeta toista, vaikka yhteinen syntaksi tekeekin toisen kielen lukemisesta hieman helpompaa. Jos tiukka typing vetoaa sinuun, TypeScript lisää staattisen tyyppikerroksen päälle JavaSkripti käännettäessä tavalliseen muotoon JavaKäsikirjoitus, ja erot on esitetty tässä TypeScript ja JavaSkriptien vertailu.
Kun perusasiat ovat kunnossa, luonnolliset seuraavat askeleet ovat vuorovaikutteinen JavaKäsikirjoitusharjoituksia, sitten muuttujat ja tietotyypit, jonka jälkeen taulukot ja silmukoita. Sen jälkeen, olio- JavaKäsikirjoitus selittää, miten objektit, prototyypit ja luokat sopivat yhteen, ja merkkijonon muotoilu kattaa tekstinkäsittelyn, jota käytät lähes jokaisessa skriptissä.


