JavaScript įvadas

Vietoj "JavaScript" toliau naudosiu "JS".

Lietuviai programuotojai kalbėdami naudoja žargoną sudarytą iš angliškų terminų su pridėtomis lietuviškomis galūnėmis. Lietuviški vertimai (nors ir yra) naudojami retai. Dažniau tekste naudosiu originalius angliškus terminus. Tai turėtų padėti jums lengviau pereiti prie dokumentacijos skaitymo, kuri visa yra anglų kalba.

1. Kaip pasileisti

Console

Naršyklėje

Savo kompiuterio naršyklėje paspauskite F12. Apačioje lango atsidarys zona, kuri vadinasi "Developer Tools" (DevTools).
Pasirinkite tabą "Console".
Parašykite console.log( 'Hello, world!' ) ir paspauskite Enter.

Komandinėje eilutėje

Paleiskite komandą node.
Parašykite console.log( 'Hello, world!' ) ir paspauskite Enter.

Kaip pasileisti JS failą

Komandinėje eilutėje

node JŪSŲ_FAILO_VARDAS.mjs

Naršyklėje

Puslapio HTML kode įterpkite:

<script type="module" src="kelias/iki/jūsų-failo.mjs"></script>

2. Reikšmės, expressions

Reikšmė (value)

Skaičius: 7, tekstas: 'labas', ar kt..

Expression

Kodo gabalas, kurį galima panaudoti kaip reikšmę. Pvz.: 4 * 10 + 2 (reikšmė 42).

Kintamasis (variable)

Reikšmė pasiekiama kažkokiu vardu (name). Pvz.:

> suma = 3 + 4
7
> suma * 10
70

Kintamiesiems galima priskirti (assign) expression'us.

Statement

Kodo gabalas, kurio negalima panaudoti kaip reikšmės. Pvz.:

> if( true ){
... console.log( 'Labas, pasauli!' )
... }
Labas, pasauli!
undefined

3. Primityvieji tipai

JS yra 4 primityvieji reikšmių tipai:

boolean: Loginės reikšmės. Tik dvi galimos reikšmės: true ir false.
number: Skaičiai. Su kableliu: 3.141, be kablelio: 42, specialios reikšmės: Infinity, NaN.
string: Tekstas (sakoma "stringas"). Pvz.: 'labas'.
undefined: Ir reikšmė, ir tipas, ir kintamasis. Naudojama kai nėra jokios reikšmės arba neįmanoma nustatyti (t.y. apibrėžti) rezultato.

4. Sudėtiniai tipai

4.1. Masyvai (Arrays)

Iš eilės einančių reikšmių rinkinys. Reikšmės gali būti bet kokio kito tipo.

[ 1, 2, 3, 'labas', [ 4, 5 ] ]

Masyvo nariai indeksuojami nuo 0!

Narių nuskaitymas:

> [ 'a', 'b', 'c' ][0]
'a'

Narių keitimas:

> arr = [ 'a', 'b' ]
> arr[1] = 'r'
> arr[2] = 'ray'
> arr
[ 'a', 'r', 'ray' ]

4.2. Objects

Property rinkinys. Įsivaizduokim:

a person
height	1.76 m
weight	85 kg

height ir weight eilutės lentelėje -- properties.

Tuomet objektą galima būtų aprašyti taip:

> aPerson = {
    height: 1.76,
    weight: 85,
}

Property turi:

pavadinimą (name), kuris visada yra string.
reikšmę (value), kuri gali būti bet kokio tipo.

Reikšmių skaitymas:

> aPerson.height
1.76
> key = 'weight'
> aPerson[key]
85

Reikšmių keitimas:

> aPerson.name = 'Emilis'
> aPerson[key] = 87
> aPerson
{ height: 1.76, weight: 87, name: 'Emilis' }

5. Funkcijos

Funkcija yra kodo gabalas, kurį galima iškviesti (call) daug kartų. Funkcijai galima paduoti arguments, kurie funkcijos body viduje bus paversti kintamaisiais.

> ( a, b ) => a + b
[Function (anonymous)]

Funkcija iškviečiama pridedant skliaustus su argumentais:

> (( a, b ) => a + b )( 3, 4 )
7

( a, b ) => a + b yra function definition.

( a, b ) yra argument names.
=> yra arrow.
a + b yra body.

...( 3, 4 ) yra function call.

( 3, 4 ) yra arguments.

Funkcijų definitions yra expressions, todėl dažnai patogu priskirti juos kintamiesiems:

> add = ( a, b ) => a + b
[Function: add]
> add( 3, 4 )
7
> add( 'la', 'bas' )
'labas'

7 ir 'labas' čia yra return values.

Funkcijų body gali būti expression, o gali būti statement block. Tokiu atveju jis apskliaudžiamas banguotais skliaustais {} ir norint grąžinti reikšmę, reikia return statement'o:

logAndMultiply = ( a, b ) => {
    console.log( 'logAndMultiply', a, b );
    return a * b;
}

Atkreipkite dėmesį, kad statement'ai atskiriami kabliataškiais ;.

5.1. Metodai

Methods - funkcijos, kurios būna kviečiamos "ant" tam tikros reikšmės. Pvz.:

> 'hi '.repeat( 3 )
'hi hi hi '

Kaip jie kuriami ir veikia neaprašinėsiu, nes tai gan komplikuota. Geriau pačiam jų nekurti. Naudoti juos teks dažnai, nes daugelis veiksmų su tekstais, masyvais ir kt. yra pasiekiami būtent per metodus.

6. Kintamųjų rūšys

JS yra 5 būdai sukurti naują kintamąjį, bet rekomenduoju naudoti tik 3 iš jų.

6.1. Constants

Kintamieji, kurių reikšmė negali keistis.

Šios rūšies kintamieji yra pasiekiami nuo eilutės, kurioje jie aprašyti, iki modulio ar statement block ({ ... }) pabaigos.

Kai konstanta primityviojo tipo:

> const a = 42
undefined
> a = 3
Uncaught TypeError: Assignment to constant variable.

Kai konstanta sudėtinio tipo:

> const o = { a: 42 }
undefined
> o = { b: 52 }
Uncaught TypeError: Assignment to constant variable.
> o.c = 64
64
> o
{ a: 42, c: 64 }

T.y. galima keisti reikšmes esančias sudėtinio tipo konstantų viduje. Tas galioja ir masyvams ([...]).

Patarimas: bandykite visada naudoti tik konstantas. Daugeliu atveju tai įmanoma ir taip jūsų kodas turės mažiau klaidų bei bus lengviau suprantamas.

6.2. Let variables

Kintamieji, kurių reikšmė gali keistis.

Šios rūšies kintamieji yra pasiekiami nuo eilutės, kurioje jie aprašyti, iki modulio ar statement block ({ ... }) pabaigos.

> let a = 42
undefined
> a = 3
3

6.3. Function declarations

Kintamieji, kurių reikšmė gali keistis.

Pasiekiami viso modulio arba aukštesnės funkcijos kode. T.y. pasiekiami ir aukščiau nei aprašyti.

function add( a, b ){
    return a + b;
}

Kartais prisireikia 2 ar daugiau funkcijų, kurios kviečia viena kitą. Su const to aprašyti neįmanoma, nes pirmoji funkcija negalės iškviesti antrosios.

Sprendžiame taip: pirmąją funkciją aprašome su const, o žemiau esančias su function ....

7. Branching

Dažnai vykdant programą kompiuteriui reikia priimti sprendimą ir vienu atveju vykdyti vieną kodą, kitu atveju -- kitą. Tam naudojamos kelių rūšių kodo struktūros.

7.1. Ternary operator

> true ? 1 : 2
1
> false ? 1 : 2
2

Šis operatorius yra expression todėl gali būti naudojamas expression'ų viduje.

Rekomenduoju jį rašyti taip:

condition
    ? valueIfTruthy
    : valueIfFalsy

Jei tikrinama keletas sąlygų (condition) iš eilės, galima rašyti taip:

condition1
    ? valueIf1
: condition2
    ? valueIf2
    : valueIfNoConditionsAreTruthy

7.2. If statements

> if( true ){
... console.log( 1 );
... }
1
undefined

Jei yra daugiau sąlygų ar variantų:

> if( false ){
... console.log( 1 );
... } else if( true ){
... console.log( 2 );
... } else {
... console.log( 3 );
... }
2
undefined

7.3. Switch statements

Dažniausiai naudojamas, kai tikrinama viena, primityviojo tipo reikšmė ir reikia naudoti statements.

switch( vardas ){
case 'Alisa':
    console.log( 'Sveika, Alisa!' );
    break;
case 'Bob':
case 'Tom':
    console.log( 'Sveiki, Bobai arba Tomai!' );
    break;
default:
    console.log( 'Sveika, nepažįstamoji!' );
}

8. Loops

Ciklai (loops) yra naudojami, kai reikia kažkokį veiksmą pakartoti daug kartų.

8.1. While loop

while( condition ){
    // statement 1;
    // statement 2;
    ...
}

Pavyzdys:

> a = 1
> while( a > 1000 ){
... a = a * 2;
... console.log( a );
... }
2
4
8
16
32
64
128
256
512
1024
undefined

Dėmesio: bent vienas iš sąlygoje naudojamų kintamųjų turi būti keičiamas, kitaip gausis amžinas ciklas: kompiuteris vykdys cikle esantį kodą be galo (tiksliau, iki programa bus sustabdyta iš išorės).

8.2. For...of loop

Cikle dirbama su masyvo nariais. Pvz.:

> for( const item of [ 1, 2, 3 ]){
... console.log( item );
... }
1
2
3
undefined

8.3. For...in loop

Cikle dirbama su objekto properties. Pvz.:

> obj = { a: 42, b: 52 }
{ a: 42, b: 52 }
> for( const name in obj ){
... console.log( name, obj[name] );
... }
a 42
b 52
undefined

8.4. For loop

Skirtas cikle keisti kokį nors skaičių nuo vienos reikšmės iki kitos. Pvz.:

> for( let i = 0; i < 3; i++ ){
... console.log( i );
... }
0
1
2
undefined

Atkreipkite dėmesį, kad "sąlyga" šiuo atveju susideda iš dviejų statements ir vieno expression. Taip pat, kad būtina naudoti let i, o ne const.

i++ padidina i reikšmę vienetu.

Aukščiau esantį for ciklą, galima būtų pakeisti tokiu while ciklu:

> let i = 0;
undefined
> while( i < 10 ){
... console.log( i );
... i++;
... }
0
1
2
2

9. Modules

Didesnės programos yra skaidomos į failus. Jie vadinami moduliais.

Pakankamai išvystytame JS projekte gali būti dešimtys, šimtai JS failų. Pridėjus JS failus iš kitų programuotojų bibliotekų (packages), failų iš kurių susideda projektas gali būti tūkstančiai.

Didžiaja dalimi tai pasiekiama ir nesugriūna dėka modulių.

Pavyzdys:

arithmetic.mjs

export const divide = ( a, b ) =>
    a / b;

export const multiply = ( a, b ) =>
    a * b;

newtons-second-law.mjs

import {
    divide,
    multiply,
} from './arithmetic.mjs';

export const getAcceleration = ( F, m ) =>
    divide( F, m );

export const getForce = ( m, a ) =>
    multiply( m, a );

export padaro modulyje esančius kintamuosius pasiekiamus kitiems moduliams.
import sukuria kintamuosius su reikšmėmis iš importuojamo modulio.

Dėmesio: importuotų kintamųjų reikšmių negalima pakeisti.

« Atgal