Vad är JavaSkript? Introduktion med Hello World-exempel

Vad är JavaManus?

JavaScript är ett högnivåprogrammeringsspråk som lägger till beteenden på webbsidor. Det är en av webbens tre kärnteknologier: HTML tillhandahåller strukturen, CSS tillhandahåller utseendet och JavaSkriptet tillhandahåller interaktionen. Varje gång en sökruta visar förslag medan du skriver, en bildkarusell glider fram eller ett registreringsformulär varnar dig om ett saknat fält, JavaSkriptet gör det jobbet i bakgrunden.

Diagrammet nedan visar hur ett skript visas bredvid markupen på en vanlig webbsida.

Under större delen av sitt liv JavaScript beskrevs som ett skriptspråk för klientsidan, eftersom det bara kördes i en webbläsare. Den beskrivningen är nu ofullständig. Sedan Node.js dök upp 2009 har samma språk även drivit webbservrar, kommandoradsverktyg, skrivbordsapplikationer och mobilappar. En mer korrekt beskrivning idag är att JavaScript är ett allmänt språk med en ovanligt stark närvaro i webbläsaren.

De egenskaper som definierar språket är:

• Dynamiskt typad: En variabel kan innehålla ett tal nu och en sträng ett ögonblick senare, så typer kontrolleras medan programmet körs.
• Tolkat och just-in-time-sammanställt: Motorer som V8 i Chrome och Node.js kompilerar ofta exekverad kod till maskinkod för hastighet.
• Multiparadigm: Imperativa, funktionella och objektorienterade stilar stöds alla.
• Händelsedriven: Koden reagerar på klick, tangenttryckningar, timers och nätverkssvar snarare än att köras uppifrån och ner och stannarping.
• Enkeltrådad med en händelseslinga: långsamt arbete, såsom ett nätverksanrop, köas istället för att sidan fryser.

Historien om JavaScript

Brendan Eich skapade JavaManus på Netscape Communications 1995, och producerade den första fungerande prototypen på ungefär tio dagar. Internt kallades projektet MockaDen levererades i en betaversion av Netscape Navigator 2.0 som Live i september 1995 och döptes om till JavaScript i december 1995 som en del av ett marknadsföringsavtal mellan Netscape och Sun Microsystems, företaget som ägde Java vid den tidpunkten.

Att namnbyte är den enda anledningen till att så många nybörjare fortfarande antar JavaScript är en lättviktsversion av JavaDe två språken är orelaterade vad gäller design, ägande och körtid. Netscape skickade in språket till Ecma International 1996, och den första utgåvan av ECMA-262-standarden publicerades i juni 1997. Tabellen nedan listar de milstolpar som är viktigast när man läser äldre kod.

På grund av den årliga utgivningscykeln ser kod skriven före 2015 märkbart annorlunda ut än modern kod. Äldre handledningar använder var överallt, medan nuvarande kod föredrar let och const när deklarera variabler i JavaScript.

Vad är JavaAnvänds skriptet till?

JavaSkript är inte längre begränsat till små sidtrick. Samma syntax förekommer nu på fyra väldigt olika ställen, vilket är anledningen till att det konsekvent rankas som ett av de mest använda språken i utvecklarundersökningar.

Spel, datavisualiseringar, webbläsartillägg och små hårdvaruprojekt är alla också beroende av det. För en nybörjare är den praktiska konsekvensen enkel: den ansträngning du lägger på syntax överförs nu direkt till serverarbete, mobilt arbete och testautomation senare. Om du vill se språket tillämpat på verkliga problem, arbeta dig igenom en uppsättning praktisk JavaExempel på skriptkod när grunderna är bekväma.

Hur man kör JavaManus?

JavaSkriptet körs inte av sig självt. Det behöver en värdmiljö som innehåller en JavaScript motorChrome och Edge använder V8, Firefox använder SpiderMonkey och Safari använder JavaScriptCore. När en webbläsare laddar ner en HTML-sida och hittar ett skript, skickar den skriptet till sin motor, som analyserar, kompilerar och kör det.

Den andra värdmiljön är Node.js, som bäddar in samma V8-motor utanför webbläsaren. Det är så att samma språk körs på en server eller i en terminal. Den praktiska fördelen med JavaManus är det alla moderna webbläsare stöder det on Windows, Linux och macOS, så du behöver sällan oroa dig för vilken webbläsare en besökare använder. Detta är en verklig förbättring jämfört med VBScript, som bara någonsin fungerade i Internet Explorer på Windows och är nu föråldrad tillsammans med Internet Explorer.

Verktyg du behöver

Du behöver en textredigerare för att skriva kod och en webbläsare för att se resultatet. Notepad++, Visual Studio Code, Sublime Text, och vilken annan editor du är bekväm med kommer att fungera, även om en editor med syntaxmarkering och parentesmatchning kommer att bespara dig en hel del felsökning. Alla aktuella webbläsare fungerar: Google Chrome, Firefox, Microsoft Edgeeller Safari. Ingenting behöver köpas eller installeras utöver dessa två saker.

En enkel JavaManusprogram

Om du håller JavaSkript inuti själva HTML-dokumentet, all kod måste sitta mellan en öppning <script> tagg och en avslutning </script> tagg. Så här skiljer webbläsaren din kod från den omgivande markupen. Äldre sidor anger också en type attribut, skrivet som <script type="text/javascript">, vilket behövdes när konkurrerande klientspråk som VBScript existerade. Moderna sidor utelämnar det, eftersom HTML5 behandlar text/javascript som standard. De två versionerna nedan är funktionellt identiska, och båda är fortfarande giltiga.

Hej världsexempel

Det traditionella första programmet visar ett meddelande. Placera följande markup i en fil med namnet hello.html och öppna den i en webbläsare.

<html>
<head>
	<title>My First JavaScript code!!!</title>
	<script type="text/javascript">
		alert("Hello World!");
	</script>
</head>
<body>
</body>
</html>

Produktion:

A browser dialog box opens containing the text:

Hello World!

Obs: type="text/javascript" är inte nödvändigt i HTML5. Följande kod fungerar på exakt samma sätt.

<html>
<head>
	<title>My First JavaScript code!!!</title>
	<script>
		alert("Hello World!");
	</script>
</head>
<body>
</body>
</html>

Produktion:

A browser dialog box opens containing the text:

Hello World!

När en sida växer bortom några rader, flyttas skriptet till sitt eget .js filen håller markupen läsbar och låter webbläsaren cachelagra koden. Skillnaderna behandlas i detalj i denna jämförelse av internt och externt JavaScript.

Hur man skriver och kör sitt första manus

Det finns tre praktiska sätt att genomföra JavaManus, och en nybörjare bör prova alla tre eftersom var och en passar en annan situation.

1. Webbläsarkonsolen. Detta är det snabbaste alternativet och kräver inga filer alls. Öppna valfri webbsida och tryck på F12 (eller Ctrl+Shift+Jag på Windows och Linux, Cmd+Alternativ+I på macOS) och välj Konsol tabb. Skriv en rad, tryck på Enter, så visas resultatet omedelbart. Det är den perfekta platsen för att testa ett enskilt uttryck eller för att kontrollera vad en funktion returnerar.

// 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");

Produktion:

4
Guru99
12
string

Lägg märke till den andra raden. Lägger till siffran 99 till strängen "Guru” producerar strängen ”Guru99” snarare än ett fel, eftersom JavaSkriptet konverterar numret till text automatiskt. Det beteendet är bekvämt och är också en klassisk källa till nybörjarbuggar.

2. En HTML-fil. Detta är Hello World-exemplet som visas ovan. Använd det när koden måste vidröra själva sidan, till exempel när du läser ett formulärvärde eller ändrar ett element.

3. Node.js från terminalen. Installera Node.js, spara koden i en fil med en .js tillägget, kör sedan node first-script.jsIngenting renderas, så console.log blir din utdatakanal. Det här är vägen att gå när du vill öva på rena språkfunktioner utan någon HTML runt dem.

// 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);
});

Produktion:

JavaScript was created by Brendan Eich in 1995.
1. Interactive web pages
2. Server apps with Node.js
3. Mobile apps

Det här korta skriptet använder redan tre idéer som du kommer att stöta på konstant: konstanter deklarerade med const, En array innehåller en lista med värden och en återuppringningsfunktion som skickas till forEach. Skriva om samma loop med en for påstående är en användbar övning när du väl har studerat slingor in JavaScript.

JavaManus vs. Java

Namnen är den största olyckan i programmeringshistorien, och den förvirring de orsakar är värd att reda ut tidigt. JavaScript döptes om från LiveScript enbart av marknadsföringsskäl 1995, vid en tidpunkt då Java var den mest omtalade tekniken på webben. De två språken utformades av olika personer, på olika företag, för olika problem.

Den enda verkliga likheten är att båda lånar syntax för klammerparenteser från C. Att lära sig det ena lär dig inte det andra, även om den delade syntaxen gör det andra språket något lättare att läsa. Om strikt typing tilltalar dig, TypeScript lägger till ett statiskt textlager ovanpå JavaSkript under kompilering ner till vanligt JavaManus, och skillnaderna anges i detta TypeScript och JavaJämförelse av manus.

Med grunderna på plats är de naturliga nästa stegen interaktiva JavaManusövningaroch sedan variabler och datatyper, Följt av arrayer och slingor. Efter det, objektorienterad JavaScript förklarar hur objekt, prototyper och klasser passar ihop, och strängformatering täcker den texthantering du kommer att använda i nästan alla skript.

Vanliga frågor