Otázka 17 2016/2017

Javascript a Jquery – jejich využití pro webové stránky. Základní objekty, funkce a efekty

Javascript – programovací jazyk, nemůže stát samostatně – je součástí nějaké html nebo php stránky nebo komponenty

• potřebuje ke spuštění internetový prohlížeč
• ovládá prostředí v prohlížeči nebo pomocí prohlížeče
• nesmí přistupovat ke složkám v počítači
• uživatel ho může zakázat

(vlastnosti podobné ActionScriptu)

• objektově orientovaný jazyk
• rozlišuje malá velká písmena
• objekty ovládáme

jmenoobjektu.vlastnost = ...

Zápis JavaScriptu

• píše se do headu, nebo za objekt, který chceme ovládat v tagu

<script></script>

• Není nutné psát středníky, enter (zalomení řádku) se bere jako „středník“

Příkaz .write – napíše text v html

Příklad: 
 document.write("Tohle je můj text.<br>Tohle je druhý řádek.")

Proměnné:

• není nutné psát slovo var (můžeme pro přehlednost)
• není nutné určit typ proměnné, javascript to určí sám podle obsahu

var napis = "Tohle je javascriptový text."

• Proměnnou můžeme taky vypsat:

document.write(napis)

• Proměnné není nutné přetypovávat.

Poznámky v javascriptu

// tohle je poznámka

Příkazy v javascriptu

• .write – napíše html text
• .alert – vytvoří vyskakovací okno s poznámkou, jde jen odkliknout „ok“
  – používá se na upozornění nebo chyby
• .prompt – dialogové okno vyžadující textový vstup uživatele
  – uživatel musí napsat jméno nebo heslo
• .confirm – dialogové okno ano/ne, vyžaduje potvrzení
  – např. potvrzení věku, „Bylo vám 18 let?“

Události myši:

• onmouseover – přejetí myši
• onmouseout – sjetí myši
• onfocus – vybírání
• onclick – kliknutí na objekt
• ondblclick – dvojité kliknutí
• onmouseup – zvednutí myši
• atd…

Funkce v javascriptu

function jmenoFunkce() {
co se má vykonat
}

Ovládání objektů v javascriptu

• pro ovládání objektu potřebujeme nastavit danému objektu id

JQuery

• není samostatný jazyk, jen knihovna pro javascript
• musí se v headu připojit buď přímo na soubor na webu http://jquery.com
  nebo na stažený soubor ve stejném adresáři
• soubor se připojí v headu jako link
• Před prvky, které jQuery ovládá je znak $
• K jednotlivým objektům přistupujeme přes #

Efekty JQuery

• Hide – schová objekt
• Show – zobrazí objekt
• Toggle – zajede mimo obrazovku, schová ho a pak zobrazí
• fadeOut – zprůhlední
• fadeIn – objeví
• fadeTo – zprůhlední a vrátí zpět

Animate – může měnit css objektů

• povinné informace: co se ovládá, jak dlouho to trvá,
• nepovinné: funkce při spuštění animace, funkce po dokončení animace

Události JQuery:

• click
• dblclick – dvojité kliknutí
• hover – najetí myši na objekt
• mousedown
• mouseup
• mouseenter – myš přes objekt
• mouseleave – myš sjede z objektu
• mousemove – myš se hýbe nad objektem
• keydown
• keyup
• keypress – držení klávesy
• submit – odeslání, kliknutí na tlačítko

Použití javaScriptu a JQuery:

• interaktivní obsah na webu
• formuláře, při ovládání objektů jinými objekty (např. spouštění obsahu po kliknutí na tlačítko)
• html5
• používá se v galeriích a dalších komponentách