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



