Differences

This shows you the differences between two versions of the page.

--- dev:javascript [2023/03/28 14:51]
tomas [Promenne, funkce na promennych]
+++ dev:javascript [2023/04/28 10:39]
tomas [yarn]
@@ Line 5: / Line 5: @@
 ====JS servery====
 [[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 ====
@@ Line 17: / Line 17: @@
 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\\
+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====
@@ Line 38: / Line 45: @@
 ==== 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\\
@@ Line 97: / Line 106: @@
 ==== 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\\
@@ Line 106: / Line 111: @@
 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í\\
+==== 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 ====
@@ Line 121: / Line 153: @@
 %%<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====
 a=["1","a",{"x":"ttmp"}] ... objekt - pole se smysenymi typy\\
@@ Line 138: / Line 172: @@
 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]]\\

Tomas Lipensky - vedomostni koutek

Page Tools

Site Tools

User Tools

Differences