1. Home
  2. Pamācības
  3. JavaScript pamācības iesācējiem
  4. Ievads JavaScript

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 javascript

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

visual studio code

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

izveidojam html failu

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

visual studio code autosave

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

index.html failā nospiediet ! un enter

html faila izveide

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 faila ievietošana html dokumentā

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.

html faila atvēršana ar live server
Atvērsies Jūsu HTML dokuments pārlūkā

live web server vsc

Š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

konsoles atvēršana google chrome

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');

javascript statements

Šajā gadījumā mēs uzrakstījām datoram insrukciju, lai tas izmet brīdinājuma logu ar kaut kādu tekstu, mūsu gadījumā teksts ir hello.  Alert lieto, lai nodrošinātu to, ka kaut kāda svarīga info tik tiešām tiks nodota lietotājam. Droši vien esiet jau kaut kur pamanījuši šādus kaitinošus uzlecošos logus) 🙂

javascript alert box

 

Tas arī viss šajā ievada instrukcijā. Nākamajā JavaScript pamācībā mācīsimies par mainīgajiem.

Vai šī pamācība Jums noderēja? 6

Nosūtīt pieprasījumu