Tomas Lipensky - vedomostni koutek

Trace:

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
dev:javascript [2023/03/29 07:33]
tomas [DOM] 		dev:javascript [2023/04/28 10:41] (current)
tomas [yarn]
Line 5: Line 5:
 ====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 ====
Line 17: Line 17:
 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 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==== ====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====
Line 108: Line 115:
  
 ==== DOM ==== ==== 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.write("I say \"hello " + name + '"' ) ... výstup textu, slepený s proměnnou name\\
 document.getElementById('id3').style.backgroundColor=red\\ document.getElementById('id3').style.backgroundColor=red\\
 %%<input type'text' id='mojeId'><script>var id=document.getElementById('mojeId'); id.value='hodnota'</script>%%\\ %%<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>%%\\  %%<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.text ... textová hodnota elementu\\
Line 118: Line 128:
 element.remove() ... smaže element\\ element.remove() ... smaže element\\
 element.getAttribute("href") ... frátí hodnotu atributu\\ 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(url, [name], [options], [replace]) ... otevře nové okno s danou url. name= _blank, _self, _parent, _top,  _framename, options=width, height, ...\\
Line 130: Line 153:
 %%<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\\
Line 147: Line 172:
 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]]\\
Last modified: 2023/03/29 07:33
GNU Free Documentation License 1.3 Except where otherwise noted, content on this wiki is licensed under the following license: GNU Free Documentation License 1.3