Mi a JavaScript és hogyan működik?

Hirdetés

A JavaScript a modern webfejlesztés alapvető elemévé vált. Ez a hatalmas nyelv minden webes fejlesztő számára nélkülözhetetlen eszközré vált.

A JavaScript speciális funkciókkal rendelkezik, amelyek különböznek a hagyományos programozási nyelvektől. Meg fogjuk vizsgálni, mi ez, hogyan működik, és mit tudsz vele csinálni. Lebontjuk.

Mi a JavaScript?

A JavaScript egy szkriptnyelv az internet számára. Ez egy értelmezett nyelv, ami azt jelenti, hogy nincs szüksége fordítóra a kód lefordításához, például C vagy C ++. A JavaScript kód közvetlenül egy böngészőben fut.

A nyelv legújabb verziója az ECMAScript 2018, amelyet 2018 júniusában adtak ki.

A JavaScript együtt működik a HTML-sel és a CSS-sel webes alkalmazások vagy weboldalak készítéséhez. A JavaScriptet a legtöbb modern böngésző támogatja, például a Google Chrome, Firefox, Safari, Microsoft Edge, Opera stb. Az Android és iPhone mobilböngészők többsége most már támogatja a JavaScriptet is.

A JavaScript szabályozza a weboldalak dinamikus elemeit. A böngészőkben és utóbbi időben a webszerverekben is működik. Az alkalmazásprogramozási felületeket (API) a JavaScript is támogatja, így még több funkcionalitást kínál.

Kicsit könnyebb megérteni a JavaScript működését, ha megértjük, hogyan működik a webes programozás, tehát tanuljunk meg többet.

Web App építőelemek

Három komponens épít webhelyeket és alkalmazásokat: hipertext jelölőnyelv (HTML), lépcsőzetes stíluslapok (CSS) és a JavaScript. Mindegyiknek szerepe van egy webes alkalmazás létrehozásában.

• HTML egy jelölőnyelv, amely létrehozza a weboldal vázát. Az összes bekezdés, szakasz, kép, fejléc és szöveg HTML-ben van írva. A tartalom a weboldalon abban a sorrendben jelenik meg, ahogyan HTML-re írták.
• CSS irányítja a stílust és az elrendezés további aspektusait. A CSS-t a weboldal kialakításához használják, amely színeket, betűkészleteket, oszlopokat, szegélyeket stb. Készít. A weboldalt az egyszerű szöveges elemektől a színes mintákig tartja.
• A harmadik elem JavaScript. A HTML és a CSS megteremtik a struktúrát, de onnan semmit sem csinálnak. A JavaScript dinamikus tevékenységet hoz létre az alkalmazáson. A JavaScript-ben történő szkriptek vezérlik a funkciókat, amikor a gombra kattintanak, hogyan történik a jelszó-formák hitelesítése, az adathordozó vezérlése.

Mindhárom rész harmonikusan működik egymással, hogy teljes körű alkalmazásokat hozzon létre. Jó ötlet lenne Tudjon meg többet a HTML-ről és a CSS-ről Tanulja meg a HTML-t és a CSS-t ezekkel a lépésről lépésre útmutatókkalÉrdekel a HTML, CSS és JavaScript? Ha úgy gondolja, hogy Önnek van egy ismerete, hogy megtanulja, hogyan lehet webhelyeket létrehozni a semmiből - íme néhány nagyszerű lépésről lépésre szóló útmutatás, amelyeket érdemes kipróbálni. Olvass tovább ha nem vagy teljesen kényelmes velük.

Hogyan működik a JavaScript?

A JavaScript írása előtt fontos tudni, hogy működik a motorháztető alatt. Két fontos dologról kell tanulnunk: Hogyan működik a webböngésző, és a Document Object Model (DOM).

A webböngésző betölti a weboldalt, elemzi a HTML-t, és a tartalomból létrehozza az úgynevezett dokumentumobjektummodellt (DOM). A DOM a weboldal élő nézetét jeleníti meg a JavaScript kóddal.

A böngésző ezután megragad mindent, ami a HTML-hez kapcsolódik, például a képeket és a CSS-fájlokat. A CSS-információk a CSS-elemzőből származnak.

A HTML-t és a CSS-t a DOM állítja össze, hogy először hozzon létre egy weboldalt. Ezután a böngészők JavaScript motorja betölti a JavaScript fájlokat és a beépített kódot, de a kódot nem futtatja azonnal. Vár, amíg a HTML és a CSS befejeződik.

Ha ez megtörtént, a JavaScript a kód írási sorrendjében kerül végrehajtásra. Ennek eredményeként a DOM-ot JavaScript kód frissíti, és a böngésző teszi elérhetővé.

Az itt szereplő sorrend fontos. Ha a JavaScript nem várt a HTML és a CSS befejezéséig, akkor a DOM elemeket nem tudja megváltoztatni.

Mit tehetek a JavaScript használatával?

A JavaScript egy teljes értékű programozási nyelv, amely a legtöbb szokásos nyelvtel, mint például a Python, megtehető. Ezek tartalmazzák:

• A változók deklarálása Hogyan deklarálhatjuk a változókat a JavaScript-benA JavaScript használatának megkezdéséhez meg kell értenie a változókat. Három módon állíthatjuk be a változókat a JavaScript-ben. Olvass tovább .
• Értékek tárolása és visszakeresése.
• Funkciók meghatározása és meghívása, beleértve nyíl funkciók.
• A JavaScript objektumok és osztályok meghatározása.
• Külső modulok betöltése és használata.
• Olyan eseménykezelők írása, amelyek reagálnak a kattintási eseményekre.
• Szerver kód írása.
• És még sok más.

Figyelem: Mivel A JavaScript olyan erős nyelv JavaScript és webfejlesztés: A Document Object Model használataEz a cikk bemutatja a dokumentumkerettel, amelyen a JavaScript működik. Ha jól ismeri ezt az elvont dokumentumobjektum-modellt, akkor bármilyen weboldalon működő JavaScriptet írhat. Olvass tovább , malware, vírusok és böngészők feltöltésére is lehetőség van, hogy ezeket a felhasználókat megsértsék. Ezek a böngésző cookie-k, jelszavak, hitelkártyák ellopásától a vírusok számítógépre töltéséig terjednek.

A JavaScript használata

Nézzük meg néhány JavaScript alapot kódpéldákkal.

A változók deklarálása

A JavaScriptet dinamikusan gépeljük, ami azt jelenti, hogy nem kell bejelentenie a változó típusát a kódban.

legyen szám = 5; let myString = "Hello"; var interestRate = 0,25; 

Az üzemeltetők

Kiegészítés

12 + 5. >> 17. 

Kivonás

20 - 8. >> 12. 

Szorzás

5 * 2. >> 10. 

Osztály

50 / 2. >> 25. 

Modulus

45 % 4. >> 1. 

tömbök

legyen myArray = [1,2,4,5]; let stringArray = ["hello", "world"]; 

Funkciók

A JavaScript funkciókat írhat, itt egy egyszerű funkció, amely számokat ad hozzá.

addNumbers függvény (num1, num2) { visszatérés num1 + num2; } >> addNumbers (10,5); >> 15.

Loops

A JavaScript hurkokat képes végrehajtani az iterációval, például hurkokkal hurkokhoz és míg a hurkok.

for (legyen i = 0; i <3; i ++) {console.log ("echo!"); } >> visszhang! >> visszhang! >> visszhang! 

legyen i = 0; míg (i <3) {console.log ("echo!"); i ++; } >> visszhang! >> visszhang! >> visszhang! 

Hozzászólások

// Megjegyzés írása. 

/ * Több soros megjegyzés írása. Annyi sort használhat, amennyit csak akar. a szöveg felbontása és a megjegyzések olvashatóbbá tétele. */

Egy weboldalon

A JavaScript beillesztésének leggyakoribb módja a weboldal használatához forgatókönyv HTML címke. Igényeitől függően a következő módszerek egyikét használhatja.

• Töltsön be egy külső JavaScript fájlt egy weboldalra az alábbiak szerint:
• A teljes URL-t az alábbiak szerint adhatja meg, ha a javascript más webhelyről származik:
• A JavaScript közvetlenül beágyazható a HTML-be. Itt van egy.

Ezen módszereken kívül vannak módok a JavaScript kód igény szerinti betöltésére. Valójában vannak olyan keretek, amelyek a JavaScript modulok betöltésére és futtatására szolgálnak, megfelelő függőségekkel, amelyek futási időben meg vannak oldva.

Ezek fejlettebb témák, most már megtanulod az alapokat.

Minta JavaScript kódrészletek

Íme néhány egyszerű JavaScript-minta, amely bemutatja annak használatát a weboldalakon. Ezek a DOM-nal működő kódok példái.

• Az alábbiak mindegyiket választják ki bátor elemeket tartalmaz a dokumentumban, és az első színét pirosra állítja.

  var elems = document.getElementsByTagName ('b'); elems [0] .style.color = 'piros'; 

• Szeretné megváltoztatni a képet egy img címke? A következők társítják az eseménykezelőt a kettyenés gombnyomás.

  Kép módosítása

• Frissítse egy bekezdés szöveges tartalmát (p) elem? Állítsa be a innerHTML az elem tulajdonsága a képen látható módon:

  Helló Világ
  Kattints ide

Ezek a kódminták csak egy pillantást adnak arra, hogy mit tehet a JavaScript a weboldalán. Vannak rengeteg oktatóprogram, amelyek megtanítják a kódolást Freebie: Tanulj meg kódolni 27 órás videó oktatóprogramokkalAz Ultimate Coding Bundle, amely öt videó tanfolyamot és 27 órás prémium oktatást tartalmaz, INGYENES. Olvass tovább hogy elinduljon. Kipróbálhatja bármilyen weboldalon, még ezen is! Nyisd ki a konzolod, és próbálj ki néhány JavaScript kódot.

Most már tudja, mit csinál a JavaScript

Remélhetőleg ez a bevezetés némi betekintést adott a JavaScript-be, és izgatottan ösztönzi a webes programozást. Mindent összefoglalhat a praktikus JavaScript-csaló lapunk A végső JavaScript csaló lapKapjon gyors frissítést a JavaScript elemekkel ezzel a cheat-lappal. Olvass tovább . Sokkal többet lehet megtanulni a JavaScriptről. Ha kényelmesebben érzi magát, miért ne próbálja meg megtanulják, hogyan kell használni a dokumentumobjektum-modellt? Lehet, hogy az is érdekli a TypeScript ismerete Mi a TypeScript és miért kellene kipróbálni a fejlesztőket?Úgy találja, hogy a JavaScript nehéz alkalmazkodni egy másik programozási nyelv megtanulása után? Így segíthet a TypeScript a váltásban. Olvass tovább .