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.

  • 🌐 Asiakas ja palvelin: JavaSkripti alkoi selaimen sisällä, mutta toimii nyt myös palvelimilla Node.js:n, Denon ja Bunin kautta.
  • 🕰️ Alkuperä: Brendan Eich kehitti kielen Netscapella vuonna 1995; sitä kutsuttiin nimellä Mocha, sitten LiveScript ja sitten JavaSkripti.
  • 📜 Vakio: ECMAScript on virallinen spesifikaatio, joten jokainen moderni selain on yhtä mieltä samoista ydinkielisäännöistä.
  • 🛠️ Setup: Tavallinen tekstieditori ja mikä tahansa moderni selain riittävät ensimmäisen skriptin kirjoittamiseen ja testaamiseen.
  • 🖥️ Konsoli ensin: Paina F12-näppäintä, avaa Konsoli-välilehti ja suorita yksittäisiä rivejä JavaSkripti ilman tiedostojen luomista.
  • Ei Java: Java ja JavaSkriptit jakavat neljä kirjainta ja eivät juuri mitään muuta, mukaan lukien tyyppijärjestelmät ja suoritusympäristöt.
  • Sijoitus: Sijoita skriptit skriptitunnisteiden sisään tai linkitä ulkoinen .js-tiedosto siistimpien ja välimuistiin tallennettavien sivujen saamiseksi.

Mikä on JavaKäsikirjoitus

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.

Johdatus JavaKäsikirjoitus

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ä.

Javascript Historia

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ä.

UKK

ECMAScript on kirjoitettu standardi, joka on julkaistu nimellä ECMA-262 ja joka määrittelee syntaksin ja sisäänrakennetut objektit. JavaSkripti on selainvalmistajien ja Node.js:n toimittama standardin toimiva toteutus. Versioiden nimet, kuten ES6, viittaavat standardin eri painoksiin.

Molemmat. Lähdekoodi toimitetaan selkokielisenä tekstinä ja moottori lukee sen, mutta moottorit, kuten V8 ja SpiderMonkey, kääntävät usein suoritettavia funktioita juuri oikeaan aikaan konekielelle. Tulos käyttäytyy kuin tulkittu kieli lähes käännetyn nopeuden mukaisesti.

Yleisiä syitä ovat puuttuva sulkeva komentosarjan tunniste, väärä polku ulkoiseen tiedostoon, kirjoitusvirhe, joka aiheuttaa syntaksivirheen, tai komentosarja, joka suoritetaan ennen kuin sen kohdeelementti on olemassa. Avaa Konsoli-välilehti lukeaksesi tarkan virheen.

Sisäiset skriptit sopivat muutamalle riville oppimisen aikana. Siirry ulkoiseen .js-tiedostoon heti, kun koodia käytetään uudelleen useammalla kuin yhdellä sivulla, koska selain voi tällöin tallentaa sen välimuistiin ja merkinnät pysyvät luettavina.

He pystyvät tuottamaan toimivia koodinpätkiä nopeasti, mutta he myös yhdistävät vain selain- ja vain Node.js-pohjaisia ​​API-rajapintoja ja keksivät toisinaan metodeja. Suorita jokainen ehdotus, lue konsolin virheet itse ja käsittele tulostetta luonnoksena valmiin vastauksen sijaan.

Se rakentaa chat-käyttöliittymän, suoratoistaa mallivastauksia token tokenilta ja kutsuu malli-API-rajapintoja Node.js-taustajärjestelmästä. Kirjastot, kuten TensorFlow.js ja ONNX Runtime Web, suorittavat myös pienempiä malleja suoraan selaimessa.

Tiivistä tämä viesti seuraavasti: