This is an old revision of the document!


WEB - Javascript

JS servery

node.js … javaskriptovy serverovy engine
… manazer modulu pro node-js

npm

balíčkový manažer pro nodejs

npm config list … vypis konfigurace
npm config get registry … nastavení registrů
npm login … připojení k repozitáři
npm config set registry https://artifactory.vodafone.com/artifactory/api/something/ … konfigurace repozitáře
npm login –registry=https://npm.pkg.github.com
npm whoami … zobrazí uživatele v repozitáři
npm whoami –registry=https://npm.pkg.github.com … v konkrétním repozitáři

yarn

balíčkový manažer pro nodejs nad npm

Nastroje

Storybook … nastroj na vyvoj izolovanych komponent stranek pro React, Vue a Angular

Knihovny

jQuery … Knihovna s funkcema na manipulaci s DOM (Document Object Model), AJAXem, JSONem atd. Napriklad meneni obsahu bloku html kodu atd.
TableFilter … filtry a efekty k HTML tabulkam
rGraph … JS generovani grafu z JSON textu
chartjs … dalsi grafy
gojs … JS diagramy

js priklady

AJAX

Promenne, funkce na promennych

typeof promenna … vrátí typ proměnné, třeba “object”

Řetězce

var text='aaa', (int)cislo; … definice nove proměnných
text.length … délka řetězce
strlen(text) … funkce délka řetězce
text.charAt(0) … první písmeno
text.search('a') … najde index prvího výskytu v textu
iarseInt(test) … vyparsuje číslo z textu
text.toUpperCase() … převede na velká písmena, podobně toLowerCase()

čísla

var cislo=1;
var soucet=cislo + 10; … součet
var modulo=cislo++ % 3; modulo 2/3=2. cislo se zvětší o 1
cislo.toString();

pole

var pole = new Array(); … prázdné pole
var pole = [“hlina”, “hnuj”, “brazda”]; … pole řetězců
pole.push(“pisek”) … přidá další prvek do pole
pole.splice(1,1) … odstraní hnuj, vratí hodnotu odstraněných prvků, tedy hnuj
pole['barva']=“cervena”; … přidá nečíselný index a nadefinuje hodnotu. Prvek je pole.barva
isArray(pole) … je pole?
pole.length … počet prvků
var polepoli = ],[; … multipole řetězců
pole.join(“ ”); … slouci pole do retezce, oddelovac mezernik

objekty

var obj={};
obj.name='js' … přidání typu
var app={version: 1.0, getVersion: function() {return this.version;}} … definice objektu s funkcí
var app={ add: function(numbers, callback) {var result=0; for (number in numbers) {result=result + numbers[number)}}; if (callback !== undefined) (callback(result);) } … definice callbacku
app.add([3, 5], function(result) {console.log('Součet je ' + result);}) … volání callbacku

čas, datum

var datum = new Date(); … definice času
datum.getTime() … v sekundách
datum.getFullYear() … rok
datum.toJSON() … převede na JSON
Date().getTime() … aktuální čas
var x=1, interval = setInterval(function() {x++; if (x === 5) {clearInterval()}}, 1000) … vytvoří časovou smyčku 4 sekund
var interval = setInterval(function() {console.log('ahoj')}, 5000); … za 5 vteřin po načtení stránky vypíše ahoj

if (typeof x === undefined || x == 0 ) {} … undefined - typ nedefinovane proměnné
isNoN(var) … je to Not-a-Number?
===, == … je rovno i stejný typ, je rovno, může být jiný typ

konstrukce iterace, smyčky, podmínky, funkce

if(true) {} else if {} else {} … if podmínka
switch(age){ case “1”: alert(“1”); break; case “2”: alert(“2”); break; default:: alert(“default”); break;} … klasicý case, jako if, else if, else, ale jen na operator =
function jmenoFunkce(parametry) { return 0; }
for(i=1, i<5, i++) {}
for(variable in array) {document.write(variable)}
white(true) {if(true) {break}} … break přeruší smyčku
do { continue; alert(“ahoj”)} white(i–<1) … continue přeskocí zbytek cyklu, neprovede další příkazy

console

F12 ve Firefoxu nám u

Web javascript funkce

console.log(); document.write(“I say \”hello “ + name + '”' ) … výstup textu, slepený s proměnnou name
document.getElementById('id3').style.backgroundColor=red
<input type'text' id='mojeId'><script>var id=document.getElementById('mojeId'); id.value='hodnota'</script>
<div id='mojeId2'></div><script>var id=document.getElementById('mojeId2');id.innerHTML='<b>ahoj</b>'</script>
alert(“Ahoj”) … vykakovací okno s textem s jedinou volbou OK
var c = confirm('Opravdu opistit stránku?') … vyskakovací okno s OK a Cancel, výstup true/false
if© { alert('zmáčkl jsi OK') } … vystup z confim
prompt(“Kolik je Ti let”, “nevím”) … vyskočí okno s textovým polem. Druhý nepovinný parametr je výchozí hodnota. Vrátí zadanou hodnotu, nebo false
window.localtion = “http://tomas.lipensky.cz/”; … změní aktuální URL pro aktuální okno
window(url, [name], [options], [replace]) … otevře nové okno s danou url. name= _blank, _self, _parent, _top, _framename, options=width, height, …
window(“http://tomas.lipensky.cz/”, “_blank”, “width=100,height=100,scrollbar=no”, “true”);
escape('$~^#') … převede text do URL kédování
unescape(text) … odescapování

události - events

onClick, onDblClick, onFocus, onBlur, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyDown, onKeyUp, onKeyPress

<span onDblClick="location.href='index.jsp'">dvakrát klikni</span> … zmena URL aktualni stranky pri kliknuti
<a href="#home" onClick="location.reload()'"> … znavunacteni stranky pri kliknuti
<a href="#home" onMouseOver="window.open('index.jsp#home')" > … otevreni noveho okna a v nem stranky pri kliknuti <a href="javascript: void(0);" ></a> … prázdný link, co nic nedělá

JSON

a=[“1”,“a”,{“x”:“ttmp”}] … objekt - pole se smysenymi typy
a.toSource()→k … prevede objekt na JSON objekt (reprezentovany retezcem)
b=eval(“(”,j,“)”) … preveze JSON objekt na pole

Trideni pole

function compare(a,b) {
  if (a.last_nom &lt; b.last_nom)
    return -1;
  if (a.last_nom > b.last_nom)
    return 1;
  return 0;
}

objs.sort(compare);