JavaScript

pagrindai

Parengė: Martynas Kašelionis

From zero to hero

JavaScript

JavaScript – objektiškai orientuota skriptų programavimo kalba, besiremianti prototipų principu.

Tai interpretuojama programavimo kalba.

Galimybės:

Kurti interaktyvų interneto svetainės funkcionalumą kliento pusėje(dinaminis turinio atnaujinimas, paveikslėlių valdymas valdymas, animacijos ir kt.)
Kurti WEB aplikacijas serverio pusėje (naudojant NODE JS)
Kurti žaidimus, bei 2D 3D grafiką
Realizuoti tam tikras funkcijas desktop aplikacijoje (pvz. Adobe Acrobat)

JavaScript nėra JAVA

Nors JavaScript ir Java kalbų pavadinimai panašūs, pačios kalbos nėra susijusios – abi kalbos perėmė C kalbos sintaksę, bet semantiškai jos labai skiriasi, taip pat visiškai nesuderinami yra jų objektiniai modeliai.
Po JavaScript kaip svetainių skriptų rašymo kalbos sėkmės, Microsoft sukūrė suderinamą kalbą Jscript

JavaScript ir da Action

https://tympanus.net/Blueprints/ZoomSlider/

JavaScript API

DOM (Document Object Model) API
Geolocation API
Canvas ir WebGL API
(https://www.chromeexperiments.com/webgl )
Audio and Video API

Kaip vykdyti JS kodą?

Internal būdas, kai kodas rašomas tarp <script> žymių.
Extrenal būdas, kai kodas rašomas .js faile. Failo vieta, nurodoma, naudojant <script> žymės atribūtą SRC.
Kodas gali būti vykdomas tai pat naršyklėje, naudojant Develper tools. Console lange.
Online servisuose.
Konsolėje, kai įdiegtas NODE JS.

Kaip vykdyti JS kodą?

Skripto vieta HTML

Jeigu skriptui nereikia manipuliuoti DOM, jis gali būti talpinamas html <head> žymėje.
Jeigu skriptas manipuliuoja DOM, jis turi būti įterpiamas prieš </body>. Tokiu būdu užtikriname, kad prieš vykdant kodą visi HTML elementai jau yra sukurti.
ARBA
Naudojame async (kai rikiavimas nėra svarbus) ir defer (kai rikiavimas yra svarbus)

async ir defer

Async - parsiunčia skriptą neblokuodamas tinkalpio renderinimo, vykdomas, kaip visi elementai yra užkrauti. Tačiau, jeigu yra svarbus skripto failų vykdomo eiliškumas, šis būdas negarantuoja teisingo rikiavimo.

async ir defer

Defer atributas užtikrina teisingą failų rikiavimą.

Komentarai

JS kodo rašymas

Galima naudoti patinkantį kodo redaktorių:

SublimeText
...
....
Notepad++ (nekoks pasirinkimas)

Arba IDE (inetgruota programavimo aplinka):

PHPstorm (subalansuotas PHP, bet puikiai tinka ir JS)
WEBstorm

Kintamieji

var  mokykla= "KITM";
console.log(mokykla);
mokykla = "X gimnazija";
console.log("Mokyklos pavadinimas: " + mokykla);

Kintamųjų vardai

Negalima naudoti JS rezervuotų žodžių, kintamųjų vardų sudarymui

Kintamųjų vardai

Kintamojo vardo pradžioje negalima naudoti skaičiaus.

Kintamųjų vardai

Leidžiami simboliai kintamojo vardo sudarymui:

raidės
skaičiai
_
$

KIntamųjų vardai

Kintamųjų vardai turi būti informatyvūs:

vartotojoVardas
vartotojo_vardas

Kintamųjų vardai

Konstantos

Konstanta yra vieta atmintyje, tačiau skirtingai nuo kintamųjų jos reikšmė negali būti perašyta.

Tai "read-only" kintamasis :)

Dekaravimas:

const b=5;

Duomenų tipai

Loginis Boolen
- var vartotojoBusena = true;
Skaičius(Numeric)
- var kiekis = 10;
- var suma = 10.15;
Eilutė (String)
- var vardas = "Vardenis";
- var pavarde = 'Pavardenis';
- var miestas = "Miesto pavadinimas \"Miesto pavadinimas\"";

Duomenų tipai

Array(masyvai)
- var pirkiniai = ['telefonas', 'tabletas', 'plaktukas'];
- var pirkiniai = [];
- pirkiniai[10] = 'Piestukas';
Objektai
- var studentas = {
  vardas: 'Juozas',
  vidurkis:5.6
  }

Svarbu

Viskas JavaScript kalboje yra objektai!!!

Šiek tiek matematikos

Skaičių tipai:

Sveiki skaičiai (Integers) - 10, 11, ...
Skaičiai su vieta po kablelio (Floating point numbers) - 12.15
Doubles - Panašiai, kaip floating point, bet turi didesnį tikslumą

Į temą :)

Skaičiavimo sistemos:

Dešimtainė (0-9)
Dvejetainė - (0 ir 1) Naudojama žemo lygio kalbų
Aštuntainė - (0-8)
Šešioliktainė - (0-9 ir A-F)

Naudingos funkcijos

Dirbant su duomenų tipais

typeof

Operatorius, kuris gražina duomenų tipą

var testas = 'kkkk';
console.log(typeof kazkas);
// Output: "number"

isNaN

Patikrina ar reikšmė nėra skaičius

function milliseconds(x) {
  if (isNaN(x)) {
    return 'Not a Number!';
  }
  return x * 1000;
}

console.log(milliseconds('100F'));
// expected output: "Not a Number!"

console.log(milliseconds('0.0314E+2'));
// expected output: 3140

Aritmetiniai operatoriai

Didinimo ir mažinimo operatoriai

Savybės:

++ - didinimo operatorius

var skaicius++;

-- - mažinimo operatorius

var skaicius--;

Didinimo ir mažinimo operatoriai

var skaicius = 10;
++skaicius; //pre increement
skaicius++; //post increement

Priskyrimo operatorius

Priskyrimo operatorius (=), priskiria reikšmę kintamajam.

Efektyvesnis priskyrimas (shorthand'ai):

var atlyginimas +=100;

var atlyginimas *=100;

var atlyginimas /=100;

var atlyginimas -=100;

Palyginimo operatoriai

Eilutės (string)

Viengubos kabutės vs dvigubos:

Galima naudoti ir vienas, ir dvigubas kabutes

var pavadinimas = 'From zero to hero';

console.log(pavadinimas);

var kabutesViengubos = 'Viengubos.';
var kabutesDvigubos = "Dvigubos";


var klausimas = 'Ką tu?"; //klaida


var status = "I'm online.";  //tai kabutes, naudoti galima

Eilutės (string)

Kaip spręsti problemą, nenaudojant skirtingų kabučių

var positionTitle = 'I'm developer of all internet';  // gausim klaidą

Galim escape'int simbolį.

var positionTitle = 'I\'m developer of all internet';  // Dabar viskas gerai

Eilutės(string) jungimas

JavaScript kalboje eilučių jungimui naudojamas + ženklas

var pirma = 'Vardenis, ';
var antra = 'Pavardenis';
var sujungta = pirma + antra;

Eilučių ypatybės ir metodai

length - suranda ilgį

var vardas = 'Bilas';
vardas.length; // output'as: 5

Konkretaus eilutės simbolio gavimas

var vardas = 'Bilas';
vardas[3]; // output'as: "a"

Subeilutės radimas eilutėje ir ištraukimas, naudojant indexOf() ir slice() metodus

vardas.indexOf("las"); // output'as: 2

vardas.slice(0,2); // output'as: "Bi"

Eilučių ypatybės ir metodai

Teksto transformavimas

vardas.toLowerCase(); // output'as: "bilas"

vardas.toUpperCase(); // output'as: "BILAS

Eilutės simbolių pakeitimas

var pakeistasVardas = vardas.replace("Bi","Gi");

pakeistasVardas; // output'as: "Gilas"

Masyvai

JS masyvai bendrąja prasme yra objektų sąrašai. Tai atskiri objektai, kurie saugo ne vieną reikšmę.

Masyvo elementus, mes galime išvesti nurodant indeksą arba naudojant ciklą.

var pirkiniai = ['duona', 'pienas', 'sūris', 'saldainiai', 'riešutai'];
pirkiniai;

var seka = [1, 1, 2, 3, 5, 8, 13];
var skirtingiDuomenys = ['saskaita', 795, [0, 1, 2]];

Masyvai

Masyvo elementų pasiekimas ir keitimas:

Masyvo elementą galima išvesti nurodant indeksą:

pirkiniai[0]; // gražins "duona"

Naujo masyvo elemento pridėjimas:

pirkiniai[0] = "Sultys";

Masyvas, kurio viduje yra kitas masyvas, vadinami multidimensiniais. Norint išvesti tokio masyvo elementą, nurodomi du indeksai:

duomenys[0][0];

Masyvo ilgio radimas

var seka = [1, 1, 2, 3, 5, 8, 13];

seka.length; // output: 7

Masyvai

Naudingi metodai:

Eilutės konvertavimas į masyvą:

var duomenys = 'Kaunas,Vilnius,Alytus,Klaipeda';

var duomenuMasyvas = duomenys.split(',');

duomenuMasyvas;

Masyvai

Naudingi metodai:

Masyvo konvertavimas į eilutę:

var duomenys = 'Kaunas,Vilnius,Alytus,Klaipeda';

var duomenuMasyvas = duomenys.split(',');

duomenuMasyvas;

var stringas = duomenuMasyvas.join(',');

stringas;

Masyvai

Naudingi metodai:

Naujų masyvo elementų pridėjimas ir šalinimas:

var kurGalimaPavalgyt = ['Casa Dela Casa', 'Amber', 'Kinai', 'Kuchnia', 'RePUBlic'];

kurGalimaPavalgyt.push('Kepyklele'); //prides nauja masyvo elementa i masyvo pabaiga.


kurGalimaPavalgyt.pop(); // pasalins paskutini masyvo elementa

unshift() ir shift() veikia, kaip push() ir pop(), tik prideda ir šalina elementus masyvo pradžioje.

Sąlygos sakiniai

if ... else

if (sąlyga) {
  vykdomas kodas, jeigu sąlyga true
} else {
  vykdomas kitas kodas
}

Else nėra būtina naudoti. Galima ir taip:

if (sąlyga) {
  vykdomas kodas, jeigu sąlyga true
}

vykdomas kitas kodas

if ... else

var uzmokestis = 500;

var islaidos = 500;

if (uzmokestis === islaidos) {
  console.log('Nieko gero');
} else {
  console.log('Per mazai duomenu vertinimui')
}

else if

var kalba = 'lt';

if (kalba === lt) {
  console.log('Labas');
} else if (kalba==='en') {
  console.log('Hello')
} else{
  console.log('Nepazystama kalba');
}

Palyginimo operatoriai

=== ir !== - tikrina ar reikšmė yra lygi arba nelygi
< ir > - tikrina ar viena reikšmė yra mažesnė arba didesnė už kitą reikšmę
<= ir >= - tikrina ar viena reikšmė yra mažesnė arba lygi už kitą reikšmę ir didesnė arba lygi už kitą reikšmę

True ir false

Betkuri reikšmė, kuri nėra false, undefined, null, 0, NaN arba tuščia eilutė gražina true.

var gerimas = 'Pienas';

if (gerimas) {
  console.log('Puiku, galėsim, kaip reikiant atsigerti');
} else {
  console.log('Deja, bet gėrimo nėra.');
}

if nestinimas

If viduje galima nauditi, kitą if

if (dangus === 'sauleta') {
  if (temperature < 30) {
    console.log('Ieškok pavėsio ir vartok daug skysčių);
  } else if (temperature >= 20) {
    console.log('Idealus oras išeiti į lauką');
  }
}

Loginiai operatoriai

Operatoriai AND,OR ir NOT :

&& - AND
| | - OR
Šrifto dydis

Loginiai operatoriai

if (dangus === 'sauletas' && temperature < 30) {
  consol.log('Ieškok pavėsio ir vartok daug skysčių');
} else if (choice === 'sunny' && temperature >= 20) {
  console.log('Lauk š lauką');
}

Loginiai operatoriai

if (leduVagonelisLauke || namoBusena === 'dega') {
  console.log('Turi greitai bėgti į lauką');
} else {
  console.log('Lik namuose');
}

Loginiai operatoriai

if (!(leduVagonelisLauke || namoBusena === 'dega')) {
  console.log('Lik namuose');
} else {
  console.log('Turi palikti namus');
}

"Būsenų mašina" SWITCH

Naudinga naudoti, kai tikrinama daug reikšmių

Sintaksė:

switch (išraiška) {
  case pasirinkimas1:
    vykdyti kodą
    break;

  case pasirinkimas2:
    vykdyti kodą
    break;
    
  default:
    vykdyti kodą
}

"Būsenų mašina" SWITCH

Naudinga naudoti, kai tikrinama daug reikšmių

Pavyzdys:

switch (kalba) {
    case 'lt':
      console.log("Sveiki");
      break;
    case 'en':
      console.log("Hello");
      break;
    default:
      console.log("Klaida: Neatpažinta kalba.");
  }
}

Ciklai

Programavime ciklai kartoja veiksmus iteracijomis , kol sąlygą (exit condition) yra tenkinama.

Ciklo elementai:

Skaitliukas (counter) - kurio priskirta reikšmė ciklo vykdymo pradžioje yra lygi 0
Išėjimo sąlyga (exit condition) - sąlyga, kuri nurodo, kada ciklas turi būti sustabdytas
Iteratorius - po kiekvienos ciklo iteracijos didina skaitliuko reikšmę.

Ciklai

for (skaitliukas; salyga; iteratorius) {
  // vykdomas kodas
}

var vardai = ['Ieva', 'Jonas', 'Kristina', 'Lolita', 'edita'];

for (var i = 0; i < vardai.length; i++) {
  console.log(vardai[i]);
}

Ciklai

var vardai = ['Ieva', 'Jonas', 'Kristina', 'Lolita', 'edita'];

for (var i = 0; i < vardai.length; i++) {
  if(vardai[i] === 'Kristina'){
  console.log('Kontaktas surastas');
  console.log(vardai[i]);
  break; 
  }
 else{
  continue;
}
}

Break ir continue naudojimas.

Ciklai

Su while ir do while ciklais galite susipažinti :

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code

Funkcijos

Skirta kodo struktūrizavimui,kaidaug kartų naudojamas kodas yra iškeliamas į vieną vietą, o po to kviečiama funkcija, paduodami skirtingi parametrai.

Funkcijos struktūra

function pavadinimas (parametrai) {

// vykdomas kodas

}

function daugink(a, b) {

return a * b;

}

Funkcijos

• function sandauga (a, b) {return a * b;} // Deklaravimas

• var sandauga = function (a, b) {return a * b}; // Išraiška

• var sandauga =
new Function("a", "b", "return a * b"); // Konstruktorius

Anoniminės funkcijos

Kai funkcija neturi pavadinimo.

• Dažniausiai naudojama kitų funkcijų callback’uose.

• Callback – tai kai grąžinama ir vykdoma kita funkcija atlikus tam tikrus rezultatus. LABAI plačiai naudojama.

sarasas.map(function(el){/*...*/})

Callback

Kai funkcija paduodama per parametrą ir yra iškviečiama.

• Pvz.

functiondemo(a,b,callback){/*...*/callback();}

demo(1, 5, function() { console.log('JS yra jėga!'); });

Self-invoking

Kai funkcija yra anoniminė ir iš karto pakviečiama.

(function () { console.log(“veikia!”); })();

Sritis (Scope)

Global scope

var a = 99; 

function labas() {

alert("Labas, " + a + "!"); }

labas(); // atspausdins tekstą "Labas, 99!"
alert(a); // parodys skaičių 99
console.log("a = " + a); // atspausdins "a = 99" konsolėje

Sritis (Scope)

Local scope

var a = 99; 

function labas() {
var x = 5;
alert("Labas, " + (a + x) + "!"); 
}
labas(); // atspausdins tekstą “Labas, 104!" 
alert(a); // parodys skaičių 99
alert(x); // išmes klaidą (exception)

JS pagrindai

By Martynas Kašelionis

JS pagrindai

Martynas Kašelionis

WEB developeris, programavimo mokytojas

facebook.com/martynas.kaselionis

JavaScript

pagrindai

JavaScript

JavaScript nėra JAVA

JavaScript ir da Action

JavaScript API

JavaScript API

JavaScript API

Kaip vykdyti JS kodą?

Kaip vykdyti JS kodą?

Kaip vykdyti JS kodą?

Skripto vieta HTML

async ir defer

async ir defer

Komentarai

JS kodo rašymas

Kintamieji

Kintamieji

Kintamųjų vardai

Kintamųjų vardai

Kintamųjų vardai

KIntamųjų vardai

Kintamųjų vardai

Konstantos

Duomenų tipai

Duomenų tipai

Svarbu

Šiek tiek matematikos

Į temą :)

Naudingos funkcijos

typeof

isNaN

Aritmetiniai operatoriai

Didinimo ir mažinimo operatoriai

Didinimo ir mažinimo operatoriai

Priskyrimo operatorius

Palyginimo operatoriai

Eilutės (string)

Eilutės (string)

Eilutės(string) jungimas

Eilučių ypatybės ir metodai

Eilučių ypatybės ir metodai

Masyvai

Masyvai

Masyvo ilgio radimas

Masyvai

Masyvai

Masyvai

Sąlygos sakiniai

if ... else

if ... else

else if

Palyginimo operatoriai

True ir false

if nestinimas

Loginiai operatoriai

Loginiai operatoriai

Loginiai operatoriai

Loginiai operatoriai

"Būsenų mašina" SWITCH

"Būsenų mašina" SWITCH

Ciklai

Ciklai

Ciklai

Ciklai

Ciklai

Funkcijos

Funkcijos struktūra

Funkcijos

Anoniminės funkcijos

Callback

Self-invoking

Sritis (Scope)

Sritis (Scope)

Sritis (Scope)

JS pagrindai

More from Martynas Kašelionis