Škôlka jazyka C

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

Aktuálny čas je 28 Mar 2024, 21:03

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




Vytvoriť novú tému Odpovedať na tému  [ Príspevok: 1 ] 
Autor Správa
 Predmet príspevku: 1. lekcia JS
PoslaťNapísal: 03 Dec 2015, 07:59 
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
Ž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
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ť:
Kód:
<link rel="stylesheet" href="nazdar.css" type="text/css" />  <!-- (komentár) odkaz na súbor.css -->

Potom už len otvoríme súbor nazdar.html a vo web prehliadači sa otvorí nová stránka.
Príloha:
JS.PNG
JS.PNG [ 24.86 KiB | Zobrazené 2215 krát ]

Táto stránka však nemá s JS nič spoločné.
Na výpis textu má JS príkaz:
Kód:
document.write("text");

Vyskúšame si to.
1. JS v tele kódu HTML (body)
Kód:
<!DOCTYPE html>

<html lang="sk">
      <head>
            <meta charset="utf-8" />
            <title>Už aj JavaScript</title>
            <link rel="stylesheet" href="nazdar.css" type="text/css" />  <!-- (komentár) odkaz na súbor.css -->
      </head>

      <body class="modry">  <!-- nastavenie modrého textu v tele stránky -->
            <script type="text/javascript">
                document.write("Ahoj škôlkári  ;-)");
            </script>     
      </body>
</html>

2. JS v hlavičke kódu HTML (head)
Kód:
<!DOCTYPE html>

<html lang="sk">
      <head>
            <meta charset="utf-8" />
            <title>Už aj JavaScript</title>
            <link rel="stylesheet" href="nazdar.css" type="text/css" />  <!-- (komentár) odkaz na súbor.css -->
            <script type="text/javascript">
                document.write("Ahoj škôlkári  ;-)");
            </script>           
      </head>

      <body class="modry">  <!-- nastavenie modrého textu v tele stránky -->
      </body>
</html>

3. Odkaz na JS v hlavičke kódu HTML (head) nazdar.html
Kód:
<!DOCTYPE html>

<html lang="sk">
      <head>
            <meta charset="utf-8" />
            <title>JavaScript - samostatný súbor</title>
            <link rel="stylesheet" href="nazdar.css" type="text/css" />  <!-- (komentár) odkaz na súbor.css -->
            <script type="text/javascript" src="nazdar.js"></script>  <!-- (komentár) odkaz na JS -->
      </head>

      <body class="modry">  <!-- nastavenie modrého textu v tele stránky -->
      </body>
</html>

3a. JS v samostatnom súbore
nazdar.js
Kód:
// JavaScript Document (jednoriadkový komentár)
/* viacriadkový
   komentár */
document.write("Ahoj škôlkári  ;-)");

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. :D

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
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. :D

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:
Príloha:
vizitka.png
vizitka.png [ 69.76 KiB | Zobrazené 2210 krát ]

Spoiler:
Kód:
<!-- index.html -->
<!DOCTYPE html>

<html lang="sk">
      <head>
            <meta charset="utf-8" />
            <title>JavaScript - samostatný súbor</title>
            <link rel="stylesheet" href="styl.css" type="text/css" />
            <script type="text/javascript" src="script.js"></script>
      </head>

      <body class="modry">
        <div id="vykresli"></div>
      </body>
</html>

/* styl.css */
.modry {
        color: green;
}
div {
    background-image: url("pozadie.png");
    width: 250px;
    padding: 10px;
    border: 10px solid transparent;
    border-image: url("ramik.png") 30 round;
    margin: 10px;
    text-align: center;
    text-shadow: 3px 3px 7px #666666;
}

// script.js
window.onload = function() {
  var text = "*** libcosenior - kóder ***<br><br>učím sa JavaScript<br><br>http://skolka-jazyka-c.freespace.sk";
  document.getElementById("vykresli").innerHTML = text;
}

2. Napíš web stránku, ktorá vypíše presne následujúci text:
James Bond \ "Agent 007" \ # 150% zaruka # /
Spol. s rucenim neobmedzenym.
Spoiler:
Kód:
<!-- index.html -->
<!DOCTYPE html>

<html lang="sk">
      <head>
            <meta charset="utf-8" />
            <title>JavaScript - samostatný súbor</title>
            <link rel="stylesheet" href="styl.css" type="text/css" />
            <script type="text/javascript" src="script.js"></script>
      </head>

      <body class="modry">
        <p id="vykresli"></p>
      </body>
</html>

/* styl.css */
.modry {
        color: blue;
}

// 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
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.


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 1 hosť


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