======WEB - Javascript====== ====JS servery==== [[https://cs.wikipedia.org/wiki/Node.js|node.js]] ... javaskriptovy serverovy engine\\ node main.js ... spustí js soubor, třeba console.log("ok")\\ ==== npm ==== balíčkový manažer pro nodejs [[https://npmjs.org/|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\\ npm install socket.io ... nainstaluje knihovnu\\ ==== yarn ==== balíčkový manažer pro nodejs nad npm package.json ... seznam balíčků k instalaci a skriptů\\ yarn.lock ... zámek na verze npm balíčků\\ yarn add react-native-cli ... nainstaluje react-native-cli i se závistlostma\\ yarn install --update-checksums ... provede instalaci balíčků i se závistlostma z definičního souboru package.json\\ ====Nastroje==== [[https://storybook.js.org/|Storybook]] ... nastroj na vyvoj izolovanych komponent stranek pro React, Vue a Angular\\ [[https://www.jslint.com]] ... linter - kontroluje kód - hledá chyby v syntaxi i čistotě kódu\\ [[https://refresh-sf.com/yui|yui compressor]] ... kompresuje kód aby byl kratší\\ ====Knihovny==== [[https://en.wikipedia.org/wiki/JQuery|jQuery]] ... Knihovna s funkcema na manipulaci s DOM (Document Object Model), AJAXem, JSONem atd. Napriklad meneni obsahu bloku html kodu atd.\\ [[http://koalyptus.github.io/TableFilter/examples|TableFilter]] ... filtry a efekty k HTML tabulkam\\ [[https://www.rgraph.net/|rGraph]] ... JS generovani grafu z JSON textu\\ [[http://www.chartjs.org|chartjs]] ... dalsi grafy\\ [[https://gojs.net/latest/samples/sankey.html|gojs]] … JS diagramy\\ ====js priklady==== [[https://github.com/pkrumins|js projekty cloveka Peteris Krumins]] ====AJAX==== [[http://www.root.cz/clanky/ajax/|Clanek o AJAXu na root.cz]]\\ ==== 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\\ [[https://developer.mozilla.org/en-US/docs/web/javascript/reference/global_objects/parseint|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.[[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array|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(); 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(c) { 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\\ escape('$~^#') ... převede text do URL kédování\\ unescape(text) ... odescapování\\ ==== DOM ==== [[https://caniuse.com/queryselectorall]] ... ukazuje které browsery opdporují metodu querySelectorAll\\ document.write("I say \"hello " + name + '"' ) ... výstup textu, slepený s proměnnou name\\ document.getElementById('id3').style.backgroundColor=red\\ %%%%\\ %%
%%\\ element = document.querySelector('nav ul li a') ... vybere objekt pomocí dotazu, tedy v