Both sides previous revision
Previous revision
Next revision
|
Previous revision
Last revision
Both sides next revision
|
dev:javascript [2023/03/28 14:49] tomas [Promenne, funkce na promennych] |
dev:javascript [2023/04/28 10:39] tomas [yarn] |
====JS servery==== | ====JS servery==== |
[[https://cs.wikipedia.org/wiki/Node.js|node.js]] ... javaskriptovy serverovy engine\\ | [[https://cs.wikipedia.org/wiki/Node.js|node.js]] ... javaskriptovy serverovy engine\\ |
... manazer modulu pro node-js\\ | node main.js ... spustí js soubor, třeba console.log("ok")\\ |
| |
==== npm ==== | ==== npm ==== |
npm whoami ... zobrazí uživatele v repozitáři\\ | npm whoami ... zobrazí uživatele v repozitáři\\ |
npm whoami --registry=https://npm.pkg.github.com ... v konkrétním repozitáři\\ | npm whoami --registry=https://npm.pkg.github.com ... v konkrétním repozitáři\\ |
| npm install socket.io ... nainstaluje knihovnu\\ |
==== yarn ==== | ==== yarn ==== |
balíčkový manažer pro nodejs nad npm | balíčkový manažer pro nodejs nad npm |
| |
| package.json ... seznam balíčků k instalaci\\ |
| 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==== | ====Nastroje==== |
[[https://storybook.js.org/|Storybook]] ... nastroj na vyvoj izolovanych komponent stranek pro React, Vue a Angular\\ | [[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==== | ====Knihovny==== |
| |
==== Promenne, funkce na promennych ==== | ==== Promenne, funkce na promennych ==== |
| typeof promenna ... vrátí typ proměnné, třeba "object"\\ |
| |
== Řetězce == | == Řetězce == |
var text='aaa', (int)cislo; ... definice nove proměnných\\ | var text='aaa', (int)cislo; ... definice nove proměnných\\ |
obj.name='js' ... přidání typu\\ | obj.name='js' ... přidání typu\\ |
var app={version: 1.0, getVersion: function() {return this.version;}} ... definice objektu s funkcí\\ | 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\\ | 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\\ | app.add([3, 5], function(result) {console.log('Součet je ' + result);}) ... volání callbacku\\ |
| |
== čas, datum == | == čas, datum == |
==== Web javascript funkce ==== | ==== Web javascript funkce ==== |
console.log(); | 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\\ | 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\\ | var c = confirm('Opravdu opistit stránku?') ... vyskakovací okno s OK a Cancel, výstup true/false\\ |
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\\ | 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.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í\\ | escape('$~^#') ... převede text do URL kédování\\ |
unescape(text) ... odescapová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\\ |
| %%<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>%%\\ |
| element = document.querySelector('nav ul li a') ... vybere objekt pomocí dotazu, tedy v <nav><ul><li>\\ |
| elements = document.querySelectorAll('nav ul li a') ... pole - vybere objekty pomocí dotazu, tedy v <nav><ul><li>\\ |
| |
| element.text ... textová hodnota elementu\\ |
| element.innertext = 'ahoj' ... změní hodnotu textu\\ |
| element.innerHTML = '<strong>ahoj</strong>' ... změní hodnotu html\\ |
| element.remove() ... smaže element\\ |
| element.getAttribute("href") ... frátí hodnotu atributu\\ |
| element.hasAttribure("href") ... vrátí jestli atribut existuje\\ |
| element.remove("href")\\ |
| element.offsetLeft ... velikost okraje z leva\\ |
| element.offsetParent.offsetTop ... velikost okraje rodičovského objektu z vrchu\\ |
| element.childNodes ... vnořené HTML objekty\\ |
| element.style.border = '1px solid #000'; ... nastaví CSS rámeček\\ |
| element.setAttribute('style', 'witdth:100px;height:100px') ... dynamické měnění stylu\\ |
| |
| == Přidání elementu == |
| newelement = document.createElement('a');\\ |
| newelement.innerText = 'google';\\ |
| newelement.setAttribute('href') = 'https://google.com';\\ |
| document.body.appendChild(element)\\ |
| |
| 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");\\ |
| |
==== události - events ==== | ==== události - events ==== |
%%<a href="javascript: void(0);" ></a>%% ... prázdný link, co nic nedělá\\ | %%<a href="javascript: void(0);" ></a>%% ... prázdný link, co nic nedělá\\ |
| |
| element.addEventListener('click', function() {console.log('klik')}) ... nastavi poslouchání na události, callback volá funkci\\ |
| element.attachEvent('mouseover', function(){}) ... jak addEventListener, ale pro Explorer\\ |
====JSON==== | ====JSON==== |
a=["1","a",{"x":"ttmp"}] ... objekt - pole se smysenymi typy\\ | a=["1","a",{"x":"ttmp"}] ... objekt - pole se smysenymi typy\\ |
objs.sort(compare);</code> | objs.sort(compare);</code> |
| |
| ==== JQuery ==== |
| %%<script src="jquery.js"></script>%% ... inicializace jquery\\ |
| $(window).ready(function() {alert('Loaded')}); ... selektor - stránka, stav - načteno => vyskočí hláška\\ |
| var MyID = $('#elementID') ... sekektor html značky s id='elementID'\\ |
| var tucne = $('.bold') ... selektor značek s třídou class='bold'\\ |
| var body = $('body') ... selektor značky <body>\\ |
| var names = $('[name="name"]') ... selektor značek, co mají v sobě atribut name="name"\\ |
| $("textarea").focus(function() { $('.bold').css("display", "none") }) ... po kliknutí na <textarea> se změní css styl na none\\ |
| $("input").hover(function() {$(this).blur()}), function() {$(this).css("border", 0)}); ... při najetí na input daný objekt při najetí myší se rozmlží, při odjetí myši se změní css styl\\ |
| |
| akce: keypress(), mouseup(), mousedown(), mouseover(), mouseenter(), mouseleave, onmouseout, click, dlbclick, focusin, focusout\\ |
| akce na objektu append("přidáno")\\ |
| $(this).next().toggle() ... když display=none, tak zobrazí, a naopak\\ |
| .hide(), .show() ... skryje, zobrazí, paramert může být jak rychle s zmizí, nebo se zobrazí v ms\\ |
| fadeIn, fadeOut, fadeToggle, slideUp, slideDown, slideToggle ... slide - bude překryto dalšími objekty a tím zmizí\\ |
| .submit() ... odešle formulář\\ |
| keypress( function(e) { $(this).append(e.keyCode ? e.keyCode : e.which)} ) ... po stisknutí přidá číslo znaku, jež byl zmáčknutý. některé browsery požívají which, některé keyCode\\ |
| $(this).html() ... dostanu vnitřek html značky\\ |
| $("div").html("nic") ... změním vnitřek značky, v div se objeví "nic"\\ |
| $(this).animate({width: "+=100"}) ... zvětší objekt\\ |
| $(this).attr("href") ... vrátí atribut href\\ |
| $(this).attr("href", "http://tomas.lipensky.cz/") ... změní atribut href\\ |
| $(this).slideUp(3000, function(alert("kuk"))) ... callback, jak skončí slideUp, tak se provede callback funkce\\ |
| $("#tady").load("file.txt") ... do elementu #tady načte obsah souboru file.txt\\ |
| $.ajax() = jQuery.ajax()\\ |
| $.ajax({url: "file.txt", success: function(data)}) ... po načtení provede funkci, více na [[http://api.jquery.com/jQuery.ajax]]\\ |