Mi a JavaSzkript? Bevezetés a Hello World példával

⚡ Okos összefoglaló

JavaA Script az a programozási nyelv, amely interaktívvá teszi a weboldalakat. Ez a bevezetés elmagyarázza, hogy mit... JavaA szkript fogalma azt jelenti, hogy honnan származik, hogyan hajtják végre a böngészők és a Node.js, valamint hogyan kell megírni és futtatni az első Hello World szkriptet.

  • 🌐 Kliens és szerver: JavaA szkript a böngészőn belül indult, de most már szervereken is fut a Node.js, a Deno és a Bun segítségével.
  • 🕰️ Származási hely: Brendan Eich fejlesztette ki a nyelvet a Netscape-nél 1995-ben; először Mocha, majd LiveScript néven futott. JavaForgatókönyv.
  • 📜 Standard: Az ECMAScript a hivatalos specifikáció, így minden modern böngésző ugyanazokat az alapvető nyelvi szabályokat fogadja el.
  • 🇧🇷 Beállítás: Egy sima szövegszerkesztő és bármilyen modern böngésző elegendő az első szkript megírásához és teszteléséhez.
  • 🖥️ Először konzol: Nyomd meg az F12 billentyűt, nyisd meg a Konzol fület, és futtasd le a következő sorokat: JavaSzkript fájlok létrehozása nélkül.
  • Nem Java: Java és a JavaA szkriptek négy betűt osztanak meg, és szinte semmi mást, beleértve a típusrendszereket és a futási környezeteket.
  • Elhelyezés: Helyezzen szkripteket szkriptcímkékbe, vagy csatoljon egy külső .js fájlt a tisztább és gyorsítótárazható oldalakhoz.

Mi a JavaForgatókönyv

Mi a JavaForgatókönyv?

JavaA Script egy magas szintű programozási nyelv, amely viselkedést ad a weboldalakhoz. Ez a web három alapvető technológiájának egyike: a HTML biztosítja a struktúrát, a CSS a megjelenést, és JavaA szkript biztosítja az interakciót. Minden alkalommal, amikor egy keresőmező javaslatokat jelenít meg gépelés közben, egy fotógaléria csúszik be, vagy egy regisztrációs űrlap figyelmeztet egy hiányzó mezőre, JavaA szkript a háttérben végzi el ezt a munkát.

Az alábbi ábra azt mutatja, hogyan helyezkedik el egy szkript egy átlagos weboldal jelölőkódja mellett.

Bevezetés a JavaForgatókönyv

Élete nagy részében JavaA Scriptet kliensoldali szkriptnyelvként írták le, mivel csak böngészőben futott. Ez a leírás ma már nem teljes. A Node.js 2009-es megjelenése óta ugyanaz a nyelv működtet webszervereket, parancssori segédprogramokat, asztali alkalmazásokat és mobilalkalmazásokat is. Ma pontosabb leírás szerint JavaA script egy általános célú nyelv, szokatlanul erős jelenléttel a böngészőkben.

A nyelvet meghatározó jellemzők a következők:

  • Dinamikusan típusozva: Egy változó most egy számot, egy pillanattal később pedig egy karakterláncot tartalmazhat, így a típusokat a program futása közben ellenőrzi a rendszer.
  • Értelmezve és just-in-time összeállítva: Az olyan motorok, mint a Chrome V8-a és a Node.js, a gyakran végrehajtott kódot gépi kóddá fordítják a sebesség érdekében.
  • Többparadigma: Az imperatív, funkcionális és objektumorientált stílusok mind támogatottak.
  • Eseményvezérelt: a kód kattintásokra, billentyűleütésekre, időzítőkre és hálózati válaszokra reagál, ahelyett, hogy felülről lefelé futna, majd megállnaping.
  • Egyszálú, eseményciklussal: A lassú munkák, például egy hálózati hívás, a lap lefagyasztása helyett várólistára kerülnek.

💡 Tipp: JavaA Script és az ECMAScript nem egymással versengő nyelvek. Az ECMAScript az írott specifikáció, és JavaA szkript a specifikáció implementációja, amelyet a böngészők és a Node.js valójában szállítanak.

Története JavaForgatókönyv

Brendan Eich alkotta JavaScript a Netscape Communicationsnél 1995-ben, az első működő prototípus nagyjából tíz nap alatt elkészült. Belsőleg a projektet MohaachátNetscape Navigator 2.0 béta verzióban érkezett, mint LiveScript 1995 szeptemberében, majd átnevezték JavaForgatókönyv 1995 decemberében, a Netscape és a Sun Microsystems, a tulajdonosa közötti marketingmegállapodás részeként. Java akkor.

Javascript Történelem

Ez az átnevezés az egyetlen oka annak, hogy oly sok kezdő még mindig feltételezi JavaA Script a következő könnyűsúlyú kiadása: JavaA két nyelv felépítésében, tulajdonjogában és futásidejében nem áll kapcsolatban egymással. A Netscape 1996-ban nyújtotta be a nyelvet az Ecma Internationalnak, az ECMA-262 szabvány első kiadása pedig 1997 júniusában jelent meg. Az alábbi táblázat felsorolja a régebbi kódok olvasása során legfontosabb mérföldköveket.

Év Mérföldkő Miért számít
1995 Mocha, majd LiveScript, aztán JavaForgatókönyv A nyelvet Brendan Eich fejlesztette ki a Netscape-nél.
1997 ECMA-262 első kiadás A nyelv eladósemleges írásbeli szabványt kap.
2009 ES5 és a Node.js első kiadása Szigorú mód érkezik, és JavaA szkript kilép a böngészőből.
2015 ES6 (ECMAScript 2015) let, const, arrow függvények, osztályok, modulok és ígéretek kerülnek hozzáadásra.
2016 tovább Éves ECMAScript kiadások A kisebb funkciók minden júniusban érkeznek a ritka, nagy kiadások helyett.

Az éves kiadási ciklus miatt a 2015 előtt írt kód észrevehetően eltér a modern kódtól. A régebbi oktatóanyagok a következőket használják: var mindenhol, míg a jelenlegi kód előnyben részesíti let és a const amikor változók deklarálása JavaForgatókönyv.

Mi a JavaMire használják a szkriptet?

JavaA szkriptek már nem korlátozódnak kis oldalas trükkökre. Ugyanaz a szintaxis most már négy nagyon különböző helyen is megjelenik, ezért következetesen a fejlesztői felmérések szerint az egyik legszélesebb körben használt nyelv.

Terület Mit JavaA szkript megteszi ezt Tipikus eszközök
Böngésző kezelőfelülete Kezeli a kattintásokat, frissíti az oldalt újratöltés nélkül, validálja az űrlapokat és diagramokat rajzol. React, Vue, Angular, Svelte
Szerver oldal HTTP kéréseket szolgál ki, adatbázisokkal kommunikál, és REST vagy GraphQL API-kat épít. Node.js, Deno, Bun, Express
Mobil alkalmazások épít Android és iOS-alkalmazások egyetlen megosztott kódbázisból. React Native, Ionic, Kondenzátor
Asztali alkalmazások Egy webes felületet egy natív ablakba burkol, fájlrendszer-hozzáféréssel. Elektron, Tauri
Szerszámozás és automatizálás Eszközöket köt össze, tesztcsomagokat futtat, és a böngészőket végponttól végpontig történő tesztelésre ösztönzi. Vite, webpack, tréfa, drámaíró

Játékok, adatvizualizációk, böngészőbővítmények és kisebb hardverprojektek is erre épülnek. Egy kezdő számára a gyakorlati következmény egyszerű: a szintaxisra fordított erőfeszítés közvetlenül átkerül a szervermunkára, a mobil munkára és a későbbi tesztautomatizálásra. Ha látni szeretnéd, hogyan alkalmazzák a nyelvet valós problémákra, dolgozz végig egy sor… gyakorlati JavaSzkriptkód példák miután az alapok kényelmesek lettek.

Hogyan kell futni JavaForgatókönyv?

JavaA szkript nem fut magától. Szüksége van egy olyan gazdakörnyezetre, amely tartalmaz egy JavaForgatókönyv motorA Chrome és az Edge V8-at használ. Firefox a SpiderMonkey-t használja, a Safari pedig a JavaScriptCore. Amikor egy böngésző letölt egy HTML oldalt és talál egy szkriptet, átadja azt a keresőmotorjának, amely elemzi, lefordítja és futtatja azt.

A második gazdakörnyezet a Node.js, amely ugyanazt a V8 motort ágyazza be a böngészőn kívül. Így fut ugyanaz a nyelv egy szerveren vagy egy terminálon. A gyakorlati előnye a következő: JavaA forgatókönyv az minden modern böngésző támogatja on Windows, Linux és macOS, így ritkán kell aggódnia amiatt, hogy a látogató melyik böngészőt használja. Ez egy valódi előrelépés a VBScripthez képest, amely eddig csak az Internet Explorerben működött a következőn: Windows és most már elavult, akárcsak maga az Internet Explorer.

⚠️ Figyelmeztetés: böngésző JavaSzkript és Node.js JavaA szkriptek megosztják az alapnyelvet, de a környező objektumokat nem. document és a window csak a böngészőben léteznek, és require és a fájlrendszer modulok csak a Node.js-ben léteznek. A kettő közötti kód ellenőrzés nélküli másolása hivatkozási hibát eredményez.

Szükséges eszközök

Szükséged lesz egy szövegszerkesztőre a kód írásához, és egy böngészőre az eredmény megtekintéséhez. Notepad++, Visual Studio Code, Sublime Text, és bármilyen más, általad ismert szerkesztő elvégzi a feladatot, bár egy szintaxiskiemeléssel és zárójel-illesztéssel rendelkező szerkesztő sok hibakereséstől megkímél. Bármelyik jelenlegi böngésző működik: Google Chrome, Firefox, Microsoft Edge, vagy a Safarit. Ezen a két elemen kívül semmit sem kell megvásárolni vagy telepíteni.

Egy egyszerű JavaScript Program

Ha tartod JavaMagában a HTML dokumentumban található szkriptben az összes kódnak egy nyitó karakter között kell lennie. <script> címke és egy zárójel </script> tag. Így különbözteti meg a böngésző a kódodat a környező jelölőnyelvtől. A régebbi oldalak is beállítanak egy type attribútum, így írva <script type="text/javascript">, amire akkor volt szükség, amikor léteztek olyan rivális kliensoldali nyelvek, mint a VBScript. A modern oldalak elhagyják, mert a HTML5 kezeli text/javascript alapértelmezettként. Az alábbi két verzió funkcionálisan azonos, és mindkettő továbbra is érvényes.

Hello World Példa

A hagyományos első program egy üzenetet jelenít meg. Helyezze el a következő jelöléseket egy nevű fájlban hello.html és nyisd meg egy böngészőben.

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

output:

A browser dialog box opens containing the text:

Hello World!

Jegyzet: type="text/javascript" nem szükséges a HTML5-ben. A következő kód pontosan ugyanígy működik.

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

output:

A browser dialog box opens containing the text:

Hello World!

Amint egy oldal néhány sornál nagyobbra nő, a szkriptet a saját sorába kell helyezni .js a fájl olvashatóvá teszi a jelölőnyelvet, és lehetővé teszi a böngésző számára a kód gyorsítótárazását. A különbségeket részletesen tárgyaljuk ebben az összehasonlításban. belső és külső JavaForgatókönyv.

Hogyan írd meg és futtasd az első szkriptedet

Három gyakorlati módja van a megvalósításnak JavaSzkript, és egy kezdőnek mindhármat ki kell próbálnia, mert mindegyik más helyzethez illik.

1. A böngésző konzolja. Ez a leggyorsabb lehetőség, és egyáltalán nem igényel fájlokat. Nyisson meg egy weboldalt, nyomja meg a F12 (vagy Ctrl+Shift+Én bekapcsolom Windows Linuxon és Cmd+Option+I macOS), és válassza ki a Konzol tab. Írjon be egy sort, nyomja meg az Enter billentyűt, és az eredmény azonnal megjelenik. Ez az ideális hely egyetlen kifejezés tesztelésére vagy egy függvény visszatérési értékének ellenőrzésére.

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

output:

4
Guru99
12
string

Figyeljük meg a második sort. A 99-es szám hozzáadása a „Guru„ a következő karakterláncot hozza létre: „Guru99” helyett hiba, mert JavaA szkript automatikusan szöveggé alakítja a számot. Ez a viselkedés kényelmes, és egyben a kezdők hibáinak klasszikus forrása is.

2. Egy HTML-fájl. Ez a fent látható Hello World példa. Használd, amikor a kódnak érintenie kell magát az oldalt, például egy űrlapérték beolvasása vagy egy elem megváltoztatása esetén.

3. Node.js a terminálból. Telepítsd a Node.js-t, mentsd el a kódot egy fájlba egy .js bővítmény, majd futtassa node first-script.jsSemmi sem renderelődik, így console.log lesz a kimeneti csatornád. Ez az az út, amit akkor kell követni, ha tiszta nyelvi funkciókat szeretnél gyakorolni HTML nélkül.

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

output:

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

Ez a rövid szkript már három olyan ötletet használ, amelyekkel folyamatosan találkozni fogsz: a konstansok deklarálása a következővel: const, Egy sor értékek listáját tartalmazza, és egy visszahívó függvényt ad át a forEachUgyanazon ciklus átírása egy for egy hasznos gyakorlat, miután tanulmányoztad a hurkok be JavaForgatókönyv.

JavaSzkript vs. Java

A nevek a programozás történetének legnagyobb balesetei, és az általuk okozott zavart érdemes korán tisztázni. JavaA Scriptet 1995-ben, pusztán marketing okokból nevezték át LiveScriptről, egy olyan ponton, amikor Java volt a weben a legtöbbet emlegetett technológia. A két nyelvet különböző emberek, különböző cégeknél, különböző problémákra tervezték.

Aspect JavaForgatókönyv Java
Készítette Brendan Eich a Netscape-nél, 1995-ben James Gosling a Sun Microsystemsnél, 1995
Typing Dinamikus és gyengén típusos Statikus és erősen típusos
Fut tovább Böngészőmotorok és Node.js Az Java Virtuális gép
Összeállítás A motor által futásidőben lefordított just-in-time Előre lefordítva bájtkódra
Objektummodell Prototípus alapú, az ES6-ban hozzáadott osztályszintaxissal Osztályalapú a kezdetektől fogva
Fájl kiterjesztése . Js .java .class-ba fordítva
közös használatú Webes front-endek, API-k, eszközök Vállalati háttérrendszerek, Android, nagy adathalmazok

Az egyetlen igazi hasonlóság az, hogy mindkettő a C-ből kölcsönzi a kapcsos zárójeles szintaxist. Az egyik megtanulása nem tanítja meg a másikat, bár a közös szintaxis kissé könnyebbé teszi a második nyelv olvasását. Szigorú típus eseténping szól hozzád, TypeScript statikus típusréteget ad hozzá a tetejére JavaSzkript fordítás közben sima verzióra JavaSzkript, és a különbségek ebben vannak leírva TypeScript és a JavaSzkript-összehasonlítás.

Miután az alapok megvannak, a természetes következő lépések a következők: interaktív JavaSzkriptgyakorlatok, Akkor változók és adattípusok, Ezt követi tömbök és a hurkok. Azt követően, objektum orientált JavaForgatókönyv elmagyarázza, hogyan illeszkednek egymáshoz az objektumok, prototípusok és osztályok, és karakterlánc formázás lefedi a szinte minden szkriptben használandó szövegkezelést.

GYIK

Az ECMAScript egy írott szabvány, amelyet ECMA-262 néven tettek közzé, és amely meghatározza a szintaxist és a beépített objektumokat. JavaA script a szabvány működő implementációja, amelyet a böngészőgyártók és a Node.js szállítanak. Az olyan verziónevek, mint az ES6, a szabvány kiadásaira utalnak.

Mindkettő. A forráskód sima szövegként kerül átadásra, és a motor olvassa be, de az olyan motorok, mint a V8 és a SpiderMonkey, just-in-time módon fordítják le a gyakran végrehajtott függvényeket gépi kóddá. Az eredmény egy interpretált nyelvként viselkedik, közel fordított sebességgel.

A szokásos okok a hiányzó záró szkriptcímke, a külső fájl helytelen elérési útja, szintaktikai hibát okozó elgépelés, vagy egy olyan szkript, amely a célzott elem létezése előtt lefut. A pontos hiba kiolvasásához nyissa meg a Konzol fület.

A belső szkriptek néhány sorig megfelelőek a tanulás során. Amint a kódot egynél több oldalon újra felhasználod, válts át egy külső .js fájlra, mert így a böngésző gyorsítótárazhatja azt, és a jelölőkód olvasható marad.

Gyorsan tudnak működő kódrészleteket előállítani, de keverik a csak böngészőhöz és a csak Node.js-hez használható API-kat, és időnként metódusokat is kitalálnak. Futtassanak le minden javaslatot, olvassák el a konzolhibákat, és a kimenetet kezeljék vázlatként, ne pedig kész válaszként.

Felépíti a csevegőfelületet, tokenenként streameli a modellválaszokat, és egy Node.js háttérrendszerből hívja meg a modell API-kat. Az olyan könyvtárak, mint a TensorFlow.js és az ONNX Runtime Web, kisebb modelleket is futtatnak közvetlenül a böngészőn belül.

Foglald össze ezt a bejegyzést a következőképpen: