Ievads JavaScript

DG WEB FACTORY » Pamācības » Ievads JavaScript

JavaScript izmanto front-end izstrādē, piemēram, mājas lapu izstrādē un aplikāciju izstrādē. JavaScriptam ir pieejamas dažādas bilbliotēkas, piemēram, viena no mūsdienās populārākajām bilbiotēkām ir React. Bet, lai apgūtu React, ir sākumā jāapgūst JavaScript pamati. Šīs pamācības paredzētas iesācējiem, kurās apskatīsim JavaScript no pašiem pamatiem.

Priekšnosacījumi

Šajās pamācībās tiks izmantots Visual Studio code redakotrs. ja Jums nav VSC, tad variet ot lejupielādēt šeit: https://code.visualstudio.com/ un uzstādīt datorā. Pieejamas gan Mac gan Windows versijas.

Kā arī tiks lietots interneta pārlūks Google Chrome, ko var lejupielādēt šeit: https://www.google.com/intl/lv/chrome/ 

Jābūt pamata priekšzināšanām HTML un CSS.

Visual Studio Code nepieciešams pievienot paplašinājumu Live Server. To Jūs variet pievienot uzspiežot uz Extensions pogas un meklētājā ievadot “Live server”, pēc tam uzspiežot uz tā un izvēloties Install.

Live server mums nepieciešams tādēļ, lai mēs pārlūkprogrammā Google Chrome varētu palaist mūsu kodu. Tas ir tāds lokālais serverītis, ko izmanto izstrādē, lai attēlotu dinamiskas un statiskas lapas.

Īsceļi

Daži noderīgi īsceļi (shortcuts) priekš Mac datora iekš Visual Studio code, kas atvieglo un paātrina darbu:

⌘/ Iekomentēt rindu kodā

⌘K ⌘U Noņemt komentāru

Vairāk variet atrast šeit: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf 

Īsceļi,  Windows: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

Īskodi Visual Studio Code, Linux: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf

Darba uzsākšana

Kad esiet ieinstalējuši VSC un Google Chrome, savā datorā izveidojiet mapi test1. Šī būs mūsu projekta mapīte. Jūs, protams, variet nosaukt mapi arī pēc saviem ieskatiem savādāk.

Pēc tam atveriet VSC un ar open atveriet mapi test1

Izveidojiet failu script.js un index.html iekš test1 mapes. To var izdarīt iekš VCS, nospiežot kreisajā pusē uz file ar plusu ikonniņas pie mapes (test1) nosaukuma).

Saglabājiet failus. Jūs variet ieslēgt arī File –> Auto save, lai izmaiņas, ko veiksiet tiktu saglabātas automātiski.

Kad Auto Save ir ieslēgts pie tā kreisajā pusē parādās ķeksītis.

index.html failā nospiediet ! un enter

Tas izveidos html failā automātiski nepieciešamos HTML elementus, lai nevajadzētu rakstīt tos ar roku.

Sadaļā body mēs ievietosim saiti uz JavaScript failu. JavaScript kodu mēs rakstīsim atsevišķā failā (script.js, ko izveidojām).

<script src="script.js"></script>

JavaScript kodu var rakstīt arī iekš HTML dokumenta, <script> starp tagiem liekot JavaScript kodu, tā ir tā saucamā inline metode. Bet tā kā aplikācijas parasti sastāv no vairākiem failiem un JS kodu nepieciešams izmantot vairākās vietās, izmantosim metodi, ko pieminēju augstāk, kad izmantojam atsevišķi izveidotu JavaScript failu. Tas nepieciešams, lai Jūs jau sākotnēji pierastu pie šīs metodes, jo šo arī turpmāk nāksies pārsvarā izmantot, ja nolemsiet nopietnāk nodarboties ar JavaScript. Inline metodi lieto tikai atsevišķos gadījumos.

HTM failā starp tagiem <h1>Document vietā ierakstiet Tutorial, saglabājiet failu un atveriet šo failu ar Live web server, ko pamācības sākumā bija nepieciešams uzinstalēt.

Šeit mēs redzēsim izmaiņas, ko veiksim failā.

Lai atvērtu konsoli Chrome web pārlūkā var lietot labā peles poga Inspect un izvēlēties Console vai lietot īsceļu

⌘Command + ⌥ Option  + i

Tālāk uzrakstīsim mūsu pirmo kodu un izvadīsim to konsolē. Bet pirms tam, jāsaprot kas ir statements.

JavaScript statements

JavaScriptā mēs rakstam komandas, ko liekam izpildīt. Šīm komandām, kas saucās statements ir noteikts pierakstīšanas veids (sintakse). Sintakse dažādām programmēšanas valodām atšķiras.

JavaScript programma ir saraksts ar programmēšanas instrukcijām (statements).

Tāpat kā angļu, ķīniešu, latviešu un citās valodās ir noteikti likumi un kārtība, kādā pieraksta teikumus, kādas zīmes lieto, un kādā secībā raksta vārdus, arī programmēšanas valodās ir noteikta kārtība kā jāpieraksta steitmenti, lai dators to saprastu.

Katrā programmēšanas valodā ir cita sintakse kā pieraksta šīs instrukcijas datoram. Ir ļoti svarīgi ievērot sintaksi, ja kaut kas nebūs uzrakstīts tieši tā kā vajag, instrukcija nedarbosies.

Uzraksīsim mūsu pirmo statementu. Atveriet iekš VSC Jūsu jaunizveidoto failu script.js un ierakstiet:

console.log('hello');

Saglabājiet failu un atveriet pārlūku, kur Jums atvērts index.html fails un atveriet konsoli, tur Jūs redzēsiet hello.
console.log() ir viena no JavaScript metodēm. Vēlāk mēs apskatīsim daudz citas JS metodes. Šī ir viena no visvairāk lietotajām metodēm. Ar console.log mēs varam programmēšanas procesa gaitā pārbaudīt vai mūsu uzrakstītās funkcijas darbojās pareizi.
Šajā piemērā mēs gan vienkārši ierakstām hello, lai jūs saprastu ideju, vēlāk mēs mācīsimies funkcijas un, tad būs labāk saprotams kā praktiksi pielietot šo metodi.
Ar konsoli var izvadīt gan stringus, gan objektus. Par objektiem un stringiem mēs mācīsiem nedaudz vēlāk.
Pamēģiniet hello vietā ierakstīt citu tekstu, saglabāt un apskatīties brovserī, ka tiek uzrādīts tieši tas tekts, ko ievadījāt.

Vienmēr svarīgi ir ievērot sintaksi.

console.log(ziņa); ziņa vietā varam ierakstīt tekstu, piemēram hello, tekts ir jāliek pēdiņās, var izmantot gan ” hello” vai ‘hello’. Ja ievadām tekstu.

console.log("hello");

console.log('hello');

Steitmentu mēs noslēdzam ar semikolu; Semikols principā nav obligāts, un nostrādās arī, ja beigās nebūs semikola. Bet tā kā jūs tikai sākat mācīties, ieteiktu lietot semikolu, lai jums pašiem labāk saprotams, kur beidzas steitments. Arī šajās pamācībās izmantošu semikolu steitmentu beigās. Kad būsiet jau apguvuši pamatus, varēsiet nelietot semikolu.

Tagad ierakstīsim citu steitmentu:

alert('hello');