Škôlka jazyka C

Fórum o programovaní v jazyku C založené 3. januára 2012

Aktuálny čas je 28 Mar 2024, 14:40

Všetky časy sú v GMT + 1 hodina




Vytvoriť novú tému Odpovedať na tému  [ Príspevok: 1 ] 
Autor Správa
PoslaťNapísal: 24 Aug 2016, 11:36 
Offline
Stredoškolák
Stredoškolák
Obrázok užívateľa

Registrovaný: 06 Jan 2012, 19:26
Príspevky: 458
Bydlisko: pod Pátrovom
Udelené body: 228 bodov
Získané body: 21 bodov
Document Object Model (DOM) je stromová štruktúra webovej stránky tak, ako ju má v pamäti načítanú web prehliadač. Je to vlastne pole, ktoré všetky komponenty stránky obsahuje.

Aby sme pochopili DOM, vytvorme si html súbor udalosti.html
Kód:
<!DOCTYPE html>

<html lang="sk">
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css/style.css" type="text/css" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/udalosti.js"></script>
  <title>DOM a udalosti v JS</title>
</head>
<body>
  <h2>element: podnadpis &lt;h2&gt;&lt;/h2&gt; s textom: Document Object Model (DOM)</h2>
  <p>element: odstavec &lt;p&gt;&lt;/p&gt;</p>
  <button>element: tlačítko &lt;button&gt;&lt;/button&gt;</button><br><br>
  <table>element: table &lt;table&gt;&lt;/table&gt;</table>
  <p>---------------------------------------------------------------------------------------------------------------</p>
  <h2>element: 2. podnadpis &lt;h2&gt;&lt;/h2&gt; s textom: Document Object Model (DOM)</h2>
  <p>element: 2. odstavec &lt;p&gt;&lt;/p&gt;</p>
  <button>element: 2. tlačítko &lt;button&gt;&lt;/button&gt;</button><br><br>
  <table>element: 2. table &lt;table&gt;&lt;/table&gt;</table>
</body>
</html>


Súbor style.css môžete nechať prázdny.
Príloha:
obr1.PNG
obr1.PNG [ 16.29 KiB | Zobrazené 4839 krát ]

Teraz si necháme všetky komponenty DOM vypísať do konzoly. Do scriptu udalosti.js napíšeme:
Kód:
$(function() {
    console.log($('*')); // hviezdička pracuje ako náhrada všetkých komponentov v poli
});

Po spustení stránky a stlačení F12 sa nám ukáže obsah poľa.
Po rozkliknutí vidieť očíslované komponenty DOM.
Príloha:
obr2.PNG
obr2.PNG [ 7.52 KiB | Zobrazené 4839 krát ]

Výber komponentov DOM je teda jednoduchý.
Keď namiesto hviezdičky zadám konkrétnu komponentu, vyberie sa mi tá.
Vyskúšajme si button, ale použijeme na ňom udalosť click, ktorú poznáme z minulých lekcií.
Kód:
$(function() {
    $('button').click(function() {
        alert("klikol som na tlačítko");
    });
});

Po spustení vidíte, že klik na obidva tlačítka robí to isté.
Čo vtedy keď chceme, aby po klike na dolné tlačítko bola iná reakcia?
Je to jednoduché.
Selektor $('') berie druh komponentu a ak ich je viac, berie všetky.
Seletor $('#') berie id komponentu a je jedno aký je to druh.
Príklad.
Pridáme v html kóde prvému tlačítku id:
Kód:
<button id="tlc1Button">element: 2. tlačítko &lt;button&gt;&lt;/button&gt;</button>

a druhému id="tlc2Button"
(dobrým zvykom je id nazývať druhom komponentu.
Potom ho v jQuery voláme:
Kód:
Seletor $('# tlc2Button ')

(Môžu sa používať aj normálne úvodzovky, ale také alebo také tam musia byť, je to sila zvyku.)
Upravme si script:
Kód:
$(function() {
    $('#tlc1Button').click(function() {
        alert("klikol som na horné tlačítko");
    });
    $('#tlc2Button').click(function() {
        alert("klikol som na spodné tlačítko");
    });
});

Vyskúšajte si to.

Keď si teraz necháte vypísať obsah DOM, uvidíte tam aj id obidvoch buttonov.

Z toho jasne vyplýva, že všetkým komponentom DOM, s ktorými chceme nejakým spôsobom manipulovať, je potrebné prideliť id.
Pod manipuláciou rozumieme napríklad zmena obsahu (textu), css selektoru, atribútov, animácia a pod.
Na všetky zmeny je najlepšie nájsť si postup cez strýčka google. (najlepšie v angličtine, ak ju neovládate, použite google prekladač)

Ešte si povieme niečo o udalostiach.
Udalostí môže byť na stránke veľmi veľa. Ako príklad uvediem klik na komponentu (nemusí to byť len tlačítko), dvojklik, nabehnutie myšou na komponentu, odídenie myšou z komponentu, zmena obsahu input políčka atď.

Použitie je najlepšie si nájsť na nete.
Všetky druhy udalostí nájdete tu:
http://api.jquery.com/category/events/


Nabudúce budeme hovoriť o vytváraní komponentov na stránke, ich mazanie a pridávaní a odoberaní css tried, id a podobne.

_________________
kódy píšem na platforme: linux Ubuntu 12.04 (Geany, Code::Blocks), WinXP (Code::Blocks, PsPad editor),
Skype: libcokamo, ICQ: 56312279
Ak treba, napíš mi na libcosenior@gmail.com. To mám v mobile a stále po ruke.


Detaily príspevku Upozorniť užívateľa
Hore
 Profil  
 
Zobraziť príspevky z predchádzajúceho:  Zoradiť podľa  
Vytvoriť novú tému Odpovedať na tému  [ Príspevok: 1 ] 

Všetky časy sú v GMT + 1 hodina


Kto je on-line

Užívatelia prezerajúci fórum: Žiadny registrovaný užívateľ nie je prítomný a 0 hostia


Rýchla úprava:
Nemôžete zakladať nové témy v tomto fóre
Nemôžete odpovedať na témy v tomto fóre
Nemôžete upravovať svoje príspevky v tomto fóre
Nemôžete mazať svoje príspevky v tomto fóre
Nemôžete zasielať súbory v tomto fóre

Hľadať:
Skočiť na:  
cron
Powered by phpBB® Forum Software © phpBB Group

Hosted by FreeSpace SK