Registrovaný: 06 Jan 2012, 19:26 Príspevky: 458 Bydlisko: pod Pátrovom Udelené body:228 bodov Získané body:21 bodov
Žijeme vo svete informačných technológií a všeobecne vládne internet. Preto som sa rozhodol, naučiť sa jazyk JavaScript (JS), ktorý je voľným pokračovateľom jazyka C, ale používa sa na webových stránkach. Aby sme ho mohli používať a testovať, potrebujeme poznať základy HTML (vykreslenie stránky) a CSS (štýlovanie komponentov stránky). Veľkou výhodou je, že nemusíme (aj keď môžme) používať žiadne IDE a na kódovanie nám stačí poznámkový blok. Ten je však dosť oklieštený a preto budme používať PSPad editor. (Sťahujte tu: http://www.pspad.com/sk/download.php)
Nebudeme sa zdržiavať opisovaním HTML, CSS a JavaScriptu, ale hneď sa pustíme do kódovania. Otvorte si PSPad editor.
Príloha:
PSPad.png [ 127.74 KiB | Zobrazené 2219 krát ]
Na hornej lište si v záložke Formát zafajknite UTF-8. To aby sme mali správnu diakritiku. Vľavo hore Súbor -> Nový -> HTML. PSPad niečo vygeneruje a my si to upravíme na:
Kód:
<!DOCTYPE html>
<html lang="sk"> <head> <meta charset="UTF-8"> <title>Zatiaľ len HTML</title> </head>
<body> <p>Nazdar škôlkári ;-)</> </body> </html>
vytvorte si niekde v PC zložku s názom JavaScript a v PSPad-e dajte súbor Uložiť ako nazdar.html práve v tej zložke. Ďalej si vytvoríme štýl, teda súbor.css, ktorý nastaví, aby bol text modrý. Súbor -> Nový -> CSS doň napíšeme:
Kód:
/* CSS Document */ .modry { color: blue;; }
a uložíme do zložky ako nazdar.css Poznámka, modry je trieda, ktorá vykreslí modrý text. Použitie:
Kód:
<p class="modry">Nazdar škôlkári ;-)</>
ale my to radšej použijeme na celé telo (body), teda
Kód:
<body class="modry"> <!-- nastavenie modrého textu v tele stránky --> <p>Nazdar škôlkári ;-)</p> </body>
Na to, aby súbor nazdar.css so stránku spolupracoval, musí me ho do html (časť head) pridať:
V tomto prípade je podmienkou, aby všetky tri súbory boli v rovnakej zložke. Chcem veriť tomu, že ste si možnosti vyskúšali a prišli na to, že stránka vyzerá vždy rovnako.
Dohodneme sa na tom, že budeme používať 3. spôsob, teda samostatný súbor pre JS. Je to z dvoch hlavných dôvodov. 1. Kód HTML si môže každý pozrieť a keď tam bude aj JS, bude vidieť pod pokrievku, môže odpisovať a pod.. 2. Kód HTML sa pri 1. a 2. spôsobe pri väčších JS stáva neprehľadným, zamotaným ...
Poďme ďalej. Ukázali sme si, ako vypísať krátky text. Teraz si vyskúšame ako vypísať dlhý text na viac riadkov. Na to potrebujeme poznať html tag na odriadkovanie:
Kód:
<br>
Fajn, ideme testovať.
Kód:
document.write("Ahoj škôlkári ;-)"); document.write("<br>"); // odriadkovanie na samostatnom riadku document.write("Ahoj škôlkári ;-)<br>"); // toto je kratšie document.write("Ahoj škôlkári ;-)<br> Toto funguje ako má."); // dá sa aj takto
Ako vidíte zatiaľ sa JS veľmi podobá na jazyk c.
Zatiaľ sme len vypisovali text, ale teraz si predstavme, že chceme nejaký text vložiť do nejakého elementu stránky (odstavec, div, tabuľka). Na toto nám document.write() nebude stačiť. Ukážeme si ako na to. Napríklad chceme vložiť z JS text do odstavca(<p></p>. Dobre sa to rieši funkciou:
Kód:
window.onload = function() { var text = "Text, ktorý chceme vložiť do odstavca."; document.getElementById("vykresli").innerHTML = text; }
Ako to funguje si vysvetlíme v neskorších lekciách.
Ešte musíme v html kóde identifikovať čo chceme vykresliť:
Kód:
<body> <p id="vykresli"></p> </body>
Príloha:
text1.png [ 12.5 KiB | Zobrazené 2210 krát ]
Poznámka. Stačí malá chybička v kóde, či už HTML, CSS alebo JS a stránka sa neotvorí, alebo sa otvorí inakšie, ako sme chceli. Preto musíte byť veľmi dôkladní pri jeho písaní. Nevýhoda je, že nás nič neupozorní kde sa chyba nachádza, tak sa musíme snažiť písať bezchybne.
To je pre dnešnú lekciu všetko. Nabudúce sa zoznámime s premennými v JS. To sa už do céčka líši, máte sa no čo tešiť.
Úlohy: 1. Napíš web stránku ktorá vypíše tvoju vizitku. Ohraničenie, grafické úpravy, druh písma, všetko je na tvojej fantázii. Môžeš si nájsť pomoc napríklad na stránkach http://www.w3schools.com/. Takúto vizitku som spravil ja:
// script.js window.onload = function() { var text = "James Bond \\ \"Agent 007\" \\ # 150% zaruka # /<br>Spol. s rucenim neobmedzenym."; document.getElementById("vykresli").innerHTML = text; }
Príloha:
text.png [ 14.59 KiB | Zobrazené 2210 krát ]
_________________ 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.
Užívatelia prezerajúci fórum: Žiadny registrovaný užívateľ nie je prítomný a 1 hosť
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