Mainos

JavaScripistä on tullut katkottua nykyaikaisessa web-kehityksessä. Tämä voimakas kieli on kehittynyt välttämättömäksi työkaluksi, jota kaikki web-kehittäjät ymmärtävät.

JavaScriptillä on erityisominaisuuksia, jotka tekevät siitä erilaisen kuin perinteiset ohjelmointikielet. Aiomme tutkia mitä se on, miten se toimii ja mitä voit tehdä sillä. Hajotamme sen.

Mikä on JavaScript?

JavaScript on Webin skriptikieli. Se on tulkittu kieli, mikä tarkoittaa, että sen ei tarvitse kääntää kääntämään koodiaan, kuten C tai C ++. JavaScript-koodi toimii suoraan verkkoselaimessa.

Kielen uusin versio on ECMAScript 2018, joka julkaistiin kesäkuussa 2018.

JavaScript toimii HTML: n ja CSS: n kanssa web-sovellusten tai verkkosivujen luomiseen. JavaScriptiä tukee useimmat nykyaikaiset selaimet, kuten Google Chrome, Firefox, Safari, Microsoft Edge, Opera jne. Useimmat Android- ja iPhone-mobiiliselaimet tukevat nyt myös JavaScriptiä.

JavaScript hallitsee verkkosivujen dynaamisia osia. Se toimii selaimissa ja viime aikoina myös web-palvelimissa. JavaScript tukee myös sovellusohjelmointirajapintoja (API), mikä antaa sinulle enemmän toimintoja.

instagram viewer

Kaikkien JavaScriptin toimintatapojen ymmärtäminen on hiukan helpompaa, kun ymmärrät kuinka web-ohjelmointi toimii, joten opi lisää.

Web-sovelluksen rakennuspalikat

On olemassa kolme komponenttia, jotka rakentavat verkkosivustoja ja sovelluksia: Hypertext Markup Language (HTML), CSS (Cascading Style Sheets) ja JavaScript. Jokaisella on rooli verkkosovelluksen luomisessa.

  • HTML on merkintäkieli, joka luo verkkosivun luuranko. Kaikki kappaleet, osiot, kuvat, otsikot ja teksti on kirjoitettu HTML-muodossa. Sisältö näkyy verkkosivustolla HTML-kirjoitusjärjestyksessä.
  • CSS ohjaa tyyliä ja asettelun muita näkökohtia. CSS: ää käytetään verkkosivuston suunnittelussa, joka luo värit, fontit, sarakkeet, reunat jne. Se vie verkkosivuston yksinkertaisista tekstielementeistä värikkäisiin malleihin.
  • Kolmas elementti on JavaScript. HTML ja CSS luovat rakenteen, mutta he eivät tee mitään sieltä. JavaScript luo dynaamisen toiminnan sovelluksessasi. Komentosarja JavaScriptillä ohjaa toimintoja, kun painikkeita napsautetaan, kuinka salasanan muodot todennetaan, miten mediaa hallitaan.

Kaikki kolme osaa toimivat sopusoinnussa keskenään luodakseen täysimittaisia ​​sovelluksia. Olisi hyvä idea Lisätietoja HTML: stä ja CSS: stä Opi HTML ja CSS näillä askel askeleelta -opetusohjelmillaKiinnostaako HTML, CSS ja JavaScript? Jos uskot, että sinulla on taito oppia luomaan verkkosivustoja tyhjästä - tässä on muutama hyvä askel askeleelta-opas, jotka kannattaa kokeilla. Lue lisää jos et ole täysin mukava heidän kanssaan.

Kuinka JavaScript toimii?

Ennen JavaScriptin kirjoittamista on tärkeää tietää, miten se toimii konepellin alla. On kaksi tärkeää kappaletta, joista on opittava: Selaimen toiminta ja asiakirjaobjektimalli (DOM).

Kuinka JavaScript toimii

Selain lataa verkkosivun, jäsentää HTML: n ja luo sisällöstä niin sanotun asiakirjaobjektimallin (DOM). DOM esittelee verkkosivun live-näkymän JavaScript-koodillesi.

Selain tarttuu sitten kaikkeen HTML-muotoon linkitettyyn, kuten kuvat ja CSS-tiedostot. CSS-tiedot tulevat CSS-jäsentäjältä.

DOM on koonnut HTML: n ja CSS: n verkkosivun luomiseksi ensin. Sitten selainten JavaScript-moottori lataa JavaScript-tiedostot ja sisäisen koodin, mutta ei suorita koodia heti. Se odottaa HTML: n ja CSS: n latautuvan loppuun.

Kun tämä on tehty, JavaScript suoritetaan koodin kirjoitusjärjestyksessä. Tämän seurauksena Java-koodi päivittää DOM: n ja selain tarjoaa.

Tässä järjestys on tärkeä. Jos JavaScript ei odottanut HTML: n ja CSS: n valmistumista, se ei voisi muuttaa DOM-elementtejä.

Mitä voin tehdä JavaScriptillä?

JavaScript on täysivaltainen ohjelmointikieli, joka pystyy tekemään suurimman osan tavallisen kielen tavoin, kuten Python. Nämä sisältävät:

  • Muuttujien ilmoittaminen Kuinka ilmoittaa muuttujat JavaScript-sivustossaJotta pääset JavaScriptiin, sinun on ymmärrettävä muuttujat. Tässä on kolme tapaa ilmoittaa muuttujat JavaScript-muodossa. Lue lisää .
  • Arvojen tallentaminen ja noutaminen.
  • Toimintojen määritteleminen ja käyttäminen, mukaan lukien nuolitoiminnot.
  • JavaScriptiobjektien ja luokkien määrittely.
  • Ulkoisten moduulien lataaminen ja käyttäminen.
  • Tapahtumakäsittelijöiden kirjoittaminen, jotka vastaavat napsautustapahtumiin.
  • Palvelinkoodin kirjoittaminen.
  • Ja paljon enemmän.

Varoitus: Siitä asti kun JavaScript on niin voimakas kieli JavaScript ja Web-kehitys: Asiakirjaobjektimallin käyttäminenTämä artikkeli tutustuttaa sinut asiakirjakehykseen, jonka kanssa JavaScript toimii. Koska sinulla on tuntemus tästä abstraktista dokumenttiobjektimallista, voit kirjoittaa JavaScriptin, joka toimii millä tahansa verkkosivulla. Lue lisää , on myös mahdollista kirjoittaa haittaohjelmia, viruksia ja selaimen hakkereita aiheuttamaan niitä käyttäjille. Nämä vaihtelevat selaimen evästeiden, salasanojen, luottokorttien varastamisesta virusten lataamiseen tietokoneellesi.

JavaScriptin käyttö

Katsotaanpa joitain JavaScriptin perusteita koodiesimerkkeillä.

Muuttujien ilmoittaminen

JavaScript kirjoitetaan dynaamisesti, mikä tarkoittaa, että sinun ei tarvitse ilmoittaa muuttujien tyyppiä koodissa.

olkoon num = 5; anna myString = "Hei"; var intressisuhde = 0,25;

operaattorit

Lisäys

12 + 5. >> 17.

vähennys

20 - 8. >> 12.

kertolasku

5 * 2. >> 10.

jako

50 / 2. >> 25.

modulus

45 % 4. >> 1.

taulukot

olkoon myArray = [1,2,4,5]; let stringArray = ["hei", "maailma"];

tehtävät

JavaScript voi kirjoittaa toimintoja, tässä on yksinkertainen toiminto, joka lisää numeroita.

funktio addNumbers (num1, num2) { paluu num1 + num2; } >> addNumbers (10,5); >> 15.

silmukat

JavaScript voi suorittaa iteraatio-silmukoita, kuten silmukoille ja samalla silmukoita.

for (olkoon i = 0; i <3; i ++) {console.log ("kaiku!"); } >> kaiku! >> kaiku! >> kaiku! 
olkoon i = 0; kun taas (i <3) {console.log ("kaiku!"); i ++; } >> kaiku! >> kaiku! >> kaiku!

Kommentit

// Kommentin kirjoittaminen. 
/ * Monirivisen kommentin kirjoittaminen. Voit käyttää niin monta riviä kuin haluat. hajottaa tekstiä ja tehdä kommentit luettavammaksi. */

Web-sivulla

Yleisin tapa ladata JavaScript verkkosivulle on käyttää käsikirjoitus HTML-tunniste. Vaatimuksistasi riippuen voit käyttää yhtä seuraavista menetelmistä.

  • Lataa ulkoinen JavaScript-tiedosto verkkosivulle seuraavasti:
  • Voit määrittää täydellisen URL-osoitteen, jos javascript on verkkosivun eri verkkotunnuksesta, seuraavasti:
  • JavaScript voidaan upottaa suoraan HTML-muotoon. Tässä on.

Näiden menetelmien lisäksi on olemassa tapoja ladata JavaScript-koodi pyydettäessä. Itse asiassa on olemassa Java-moduulien lataamiseen ja käyttämiseen tarkoitettuja puitteita, joiden asianmukaiset riippuvuudet on ratkaistu ajoaikana.

Nämä ovat edistyneempiä aiheita, nyt opit perusteet.

Esimerkkejä JavaScript-koodinpätkistä

Tässä on muutama yksinkertainen JavaScript-koodinäyte havainnollistaaksesi, kuinka sitä käytetään verkkosivuilla. Nämä ovat esimerkkejä DOM: n kanssa toimivasta koodista.

  • Seuraava valitsee kaikki lihavoitu elementit asiakirjassa ja asettaa ensimmäisen värin punaiseksi. 
    var elems = document.getElementsByTagName ('b'); elems [0] .tyyli.väri = 'punainen';
  • Haluatko muuttaa kuvaa img tag? Seuraava yhdistää tapahtuman käsittelijän klikkaus painikkeen tapahtuma.
  • Päivitä kappaleen tekstisisältö (p) elementti? Aseta innerHTML elementin ominaisuus kuvassa: 
    Hei maailma

Nämä koodinäytteet tarjoavat vain katsauksen siihen, mitä voit tehdä JavaScriptin avulla verkkosivustollasi. On runsaasti oppaita, jotka voivat opettaa sinulle koodauksen Ilmaisuuttaja: Opi koodaamaan 27 tunnilla video-oppaitaUltimate Coding Bundle, joka sisältää viisi videokurssia ja 27 tuntia premium-opetusta, on nyt ILMAINEN. Lue lisää aloittaaksesi. Voit kokeilla sitä millä tahansa verkkosivulla, jopa tällä! Avaa konsoli ja kokeile JavaScriptiä.

Nyt tiedät mitä JavaScript tekee

Toivottavasti tämä johdanto on tuonut joitain oivalluksia JavaScriptiin ja saa sinut innostumaan verkko-ohjelmoinnista. Voit sulkea sen kaiken sisään kätevä JavaScript-huijauskortti Ultimate JavaScript -huijauskorttiHanki nopea päivitys JavaScript-elementeille tällä huijauskoodilla. Lue lisää . JavaScripistä on paljon enemmän opittavaa. Kun olet mukavampaa, miksi et yritä oppia käyttämään asiakirjaobjektimallia? Saatat myös olla kiinnostunut oppimaan TypeScriptiä Mikä on TypeScript ja miksi kehittäjien pitäisi kokeilla sitä?Löydätkö JavaScriptin vaikeaksi sopeutuaksesi toisen ohjelmointikielen oppimisen jälkeen? Täältä saat ohjeet, kuinka TypeScript voi auttaa sinua vaihtamisessa. Lue lisää .

Anthony Grant on freelance-kirjoittaja, joka kattaa ohjelmoinnin ja ohjelmistot. Hän on tietotekniikan tärkeä ohjelmoinnin, Excelin, ohjelmistojen ja tekniikan osaaja.