Diskuze: mozno je to nad moje sily
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Prvne se musis naucit
programatorsky premyslet. A jako druhe si musis uvedomit, ze zpusobu reseni jsou
miliardy a vetsinou se to googluje, pokud si to neumis napsat.
Html, css je o tom, ze nejakou grafiku rozsekas na obrazky a prevedes na text. Kurzy na VS zabiraji 90 min. Nic vic. Asi vidis, jak moc je to narocne. Na programovani je tam nekolik predmetu a v kazdem te nauci jen zaklady jazyka, nikoliv to rozsirene.
Zaklady jazyka spocivaji v tom, ze se naucis,
- jak se vkladaji data do promenych
- co se s promenymi da delat
- cykly a nejake upravy
V tom rozsirenem mas pak ruzne vetsi celky sestavene ze zakladu.
K pochopeni je dobre vedet neco o pocitacich, jak funguji logicke obvody,
procesor.
A co je nejhorsi, cele to odvetvi se strasne rychle meni i zpusob prace s nim. A kazdy si zakladni kod prepise po svem a jinak s nim pracuje. cili, v JS existuje rekneme asi 1000 dalsich zpusobu (treba frameworku), jak s nim pracovat.
Nejjednodussi cesta je najit si nejaky framework (skupina hotovych programu vzajemne propojenych) a ten se naucit pouzivat.
Hele, kdyz neco nevis, zeptej se klidne na forku. A napis klidne vsechno, co ti neni jasne. Ale, pocitej s tim, ze ten clanek o js nema kazdy koupeny, zaplaceny, a kliknutim na odkaz se nam text z neho nezobrazi. Tak se ptej spis na konkretni veci a pridej k tomu svuj kod.
K tem zakladum programovani...
Potrebujes data nekam ukladat. V pameti se to uklada vzdy jako binarni cislo
o 8 bitech.
Aby se to zjednodusilo pro programatory, udelali se struktury cislo, text,
skupiny (tabulka-array).
prom = 'muj text'; // cili ti staci napsat a a neni nutne to psat tatko:
pamet[90003] = 'm'; pamet[90004] = 'u'; pamet[90005] = 'j'; pamet[90006] = ' '; pamet[90007] = 't'; //...Pamet si predstav jako takove skladiste, kam nakladaci voziky prevazeni
palety se sbozim a nejak to tam ukladaji. Cislo 90003, z prikladu, je policko ve
skladu, kam se ten jeden kousek (pismenko) ma ulozit. cili, strukturami se to
znacne zjednodusuje. Skladniku, dovezli banany, nekam je sloz do skladu. A on to
nejak na pozadi udela a tebe to prilis netrapi, kde to dal
Upravy promenych, presuny
To se jedna o ruzne scitani, odcitani, dalsi presuny a prace s boolean
logikou
x = 1
y = 2
z = x + y
e = 5 + 3Samozrejme, cisla se propojuji jinymi prikazy nez text a jinak nez pole (array, tabulky). Ale kazdy jazyk to ma jinak, muze se na to pouzit +-.
Dalsi operace s cisly
To mas ruzne logaritmy nebo slozitejsi veci ohledne orezavani. To se da resit
pomoci zakladnich prikazu nebo na to mas specializovane programy v js, ktere
maji vlastni prikazy.
Treba, kdyz potrebujes zaokrouhlit cislo (zakladni). Nebo potrebujes odstranit
diaritiku (to uz je lepsi si vygooglovat program, js-kod a pridat si ho do
vlastniho). Samozrejme je dobre, kdyz si prohlednes ten cizi program a vis, co
ktery prikaz dela a jsi schopen rici, podle kodu, ze ten program dela presne to,
co po nem chces a bude to delat bez chyb
cykly
To je skupina miniprogramu, ktere slouci k opakovani nejake cinnosti. Treba
pricitani cisla.
x = 1
x = x + 2
x = x + 2
x = x + 2
x = x + 2
// cyklem
x = 1
for (i=0; i<4; i++) {x = x + 2} // opakuj od i=0 po i<4, pri kazdem zopakovani pricti k i, +1 (i = i+1)Stejne tak muzes opakovat jine prikazy. Treba, kdyz chces seradit 1000 cisel
podle velikosti, porovnat muze vzdy jen dve mezi sebou, tak mas specialni
program s cykly. Nebo pouzijes zakladni funkci array.sort()
Funkce a classy
Muzes si napsat vlastni funkce. Treba prave odstraneni diakritiky neni zakladni
funkci.
// utf-8 !
function odstranDiakritiku(str1)
{
var DIAKRITIKA = [
"áäàãâćčďéěëèêíïìîĺľńňñóôòõöőŕřśšťúùůüũûýźžÁÄÀÃÂĆČĎÉĚËÈÊÍÏÌÎĹĽŃŇÑÓÔÒÕÖŐŔŘŚŠŤÚÙŮÜŨÛÝŹŽ",
"aaaaaccdeeeeeiiiillnnnoooooorrsstuuuuuuyzzAAAAACCDEEEEEIIIILLNNNOOOOOORRSSTUUUUUUYZZ"
];
var i,j, str2;
str2 = '';
for(i = 0; i < str1.length; i++)
{
j = DIAKRITIKA[0].indexOf(str1.charAt(i));
if (j!==-1)
{
str2 += DIAKRITIKA[1].charAt(j);
}
else {
str2 += str1.charAt(i);
}
}
return str2;
}
text = "Příliš žluťoučký kůň úpěl ďábelské ódy."
text = odstranDiakritiku(text)Projde to cely text (str1) a pismenko po pismenku nahradi z radku 0 (DIAKRITIKA[0]) na pismenko z radku 1 (DIAKRITIKA[1]).
No, a to je vse ze zakladu. Slozitejsi veci si musis dohledat hotove nebo si
je napsat sam. Pocitac dela jen vypocty
Tebe, jako grafika, treba zajimaji ruzne graficke efekty nebo prace z formulari.
To uz jsou veci navic, ktere byli pridane do prohlizece k javascriptu nebo je
neumi a musis je tam pridat pres vlastni js-programy.
JS umi spolupracovat s html tagy, prepisovat cisla na obrazovce.
JS umi nejake graficke efekty pomoci css.
JS umi zakladni omezeni formulare, ze se da do policka vyplnit jen text, cislo,
ze delka textu je treba 100 a pod. Protoze to umi uz html.
Co neumi, jsou slozitejsi efekty jako galerie, kontrola formulare podle toho,
jak to chce uzivatel (treba spocitat sumu, nakupni kosi a pod). Na to je treba
si napsat vlastni program nebo najit uz hotovy.
A to je mozna problem, na ktery narazis. Vsechny tyto veci v js uz treba nekdo udelal, ale prohlizec je neumi. Musis si je najit a propojit na svoji stranku.
Priklad: treba takova malickost, gradient (ten se dneska da resit pomoci css, ale js kod by vypadal takto)
// barva je zapsana hexadecimalne, napr "AABBCC", takze ji musis prevest na cisla
function hexToDecArray(hex) {return new Array(hexToDec(hex.substring(0,2)),hexToDec(hex.substring(2,4)),hexToDec(hex.substring(4,6)));}
// pak ji budes prevadet zpet
function decArrayToHex(arr) {var i,x; x=""; for (i in arr) {x+=decToHex(arr[i],2);} return x;}
function zeroFill(s,x) {var a,i; a=s.length; if (a<x) {for (i=0;i<(x-a);i++) {s="0"+s;}} return s;}
if (Boolean((1).toString(16)))
{
function decToHex(numb,x)
{
var s=(numb).toString(16);
return zeroFill(s,x);
}
}
else {
function decToHex(numb,x)
{
var hexx="0123456789ABCDEF";
var i,b,c,s;
s="";
i=numb;
while (i>0)
{
b=i>>4;
c=i-(b<<4);
s=hexx.charAt(c)+s;
i=b;
}
return zeroFill(s,x);
}
}
function hexToDec(hex) {return parseInt(hex,16);}
// samotny vypocet barvy color = 1% colorA + 99% colorB ... (cyklus tam je, protoze pocitas 3 barvy, RGB)
function setColorHue(col1Arr,opacity,col2Arr)
{
var arr = new Array();
for (var i=0;i<col1Arr.length;i++) {arr[i] = Math.round(col1Arr[i]*opacity) + Math.round(col2Arr[i]*(1-opacity));}
return arr;
}
// a samotny program, ktery veme "text" a pismenko po pismenku obarvi novou barvou
function effectGradient(f,o,color1,color2,xText)
{
var a,b,c,c1,c2,c3;
c1,c2,c3 = new Array();
b = xText.length;
c = b-1;
c1 = hexToDecArray(color1);
c2 = hexToDecArray(color2);
a = new Array(b);
for (i=0;i<b;i++)
{
c3 = setColorHue(c1,i/c,c2);
a[i] = decArrayToHex(c3);
}
genColored(f,o,a,xText);
}
function genColored(f,o,arr,xText)
{var i,t,o1,o2; t="";
for (i=0;i<xText.length;i++)
{
o1=creEL(f,'FONT');
o1.color="#"+arr[i];
creaddTN(f,o1,xText.charAt(i));
appEL(o,o1);
}
}
// to jsou nejake funkce, co pracuji s html elementy (nazvy nemam uplne nejlepe zvolene)
function objGet2(d,x) {d=d==0?document:d; return (d.getElementById?d.getElementById(x):d.all?d.all[x]:d.layers?d.layers[x]:null);}
function creEL(d,x) {return d.createElement(x);}
function appEL(d,x) {d.appendChild(x);}
function creaddTN(d,o,x){var t=d.createTextNode(x); o.appendChild(t);}
/*
<h3 id="bbb"></h3>
<script type="text/javascript">
var d = window.document;
var xx="Text, ktery bude preveden na prechod barev";
effectGradient( d,objGet2(d,"bbb"),"4086BD","B8DEFD",xx);
</script>
*/https://peter.mlich.cz/…rad-text.htm
(ja to pouzivam pro obarveni pismenek, ale stejne tak by to slo pouzit pro
vykresleni obrazku v pozadi)
Zobrazeno 2 zpráv z 2.