Základy JavaScriptu. Co je JavaScript

HTML ukládá webu určitá omezení a k jejich překonání je nutné jít trochu za hranice hypertextového značkovacího jazyka. HTML je potřeba hlavně k uspořádání textu a grafiky na webové stránce, k propojení různých souborů dohromady. A s těmito úkoly se dokonale vyrovná. Pokud chcete, aby se stránky vašeho webu prakticky nelišily od běžných kreseb na papíře, pak zcela postačí hypertextový značkovací jazyk, tedy HTML.

Pokud chcete vytvořit něco speciálního, jedinečného, ​​co zvýrazní váš web a přitáhne pozornost uživatelů, pak byste se měli obrátit na programovací jazyk Java Script.

Například pomocí Java Scriptu lze na webu implementovat následující:

Přidejte na web vyhledávací funkci. To uživatelům poskytne obrovské výhody, protože nebudou muset ručně procházet každou webovou stránku, aby našli informace, které potřebují.

Chraňte heslem konkrétní oblast webu. To omezí přístup k informacím, které nejsou doporučeny pro veřejné zobrazení.

Poskytněte uživatelům příležitost komunikovat. Existuje mnoho způsobů, jak toho dosáhnout: od jednoduchých nástěnek po plnohodnotné chaty.

Přidejte na svůj web nástroje pro měření času, jako jsou hodiny nebo kalendář. Uživatelům se to většinou líbí.

Přidejte na stránku hry a hádanky. Věřte mi, že je to ten nejlepší způsob, jak návštěvníky uklidnit a cítit se jako doma.

Poskytujte odkazy na neustále aktualizované informace. Návštěvníky stránek jistě budou zajímat novinky, směnné kurzy, předpověď počasí a podobně.

Proč Java Script? Programovací jazyky PHP a MySQL byly vytvořeny pro usnadnění práce s počítačem.

Zpracování probíhá ve webovém prohlížeči uživatele, takže nedochází k žádné zátěži serveru. K přidání skriptů napsaných jinými programátory nepotřebujete mnoho inteligence. To lze snadno provést jednoduchým vývojářem webových stránek.

Obvykle nejsou vyžadovány žádné změny v kódu programu. V nejlepším případě budete muset sem tam změnit název souboru nebo přidat adresy URL do nějakého seznamu.

Stručně o tom, jak funguje Java Script

Při práci s Java Scriptem je potřeba do kódu webové stránky přidat dvě součásti: samotný skript a proceduru, která jej spustí.

Pokyny dodané se skriptem obvykle obsahují všechny potřebné informace týkající se postupu pro spuštění skriptu.

Tělo skriptu je umístěno ve značce kontejneru, stejně jako v níže uvedené kostře kódu, která definuje funkci, ať už je jakákoli.

/*
Zde se obvykle nachází komentář.
*/
fungovat cokoliv ()
{
A na tomto místě samotný programový kód.
}

Je přijatelné umístit skript spíše do značky než do značky, ale to může být riskantní. Webový prohlížeč musí přeložit kód Java Script napsaný programátorem do strojového kódu.

Skript značky je zpracován prohlížečem před prvky značky. To znamená, že skript bude definován a připraven ke spuštění dříve, než se cokoliv zobrazí v okně webového prohlížeče.

Pokud je skript umístěn uvnitř tagu, může nastat situace, že uživatel ke skriptu přistoupí dříve, než je definován. V tomto případě skript prostě nebude fungovat. Proto je lepší držet se obvyklého pořadí.

Na stránku by také měla být přidána nějaká procedura, která spustí skript. Obvykle se nachází uvnitř prvku.

Spuštění skriptu lze provést různými způsoby, ale vývojář je nemusí nutně znát všechny. Každý skript převzatý z internetu a přeložený do kódu HTML má svůj vlastní spouštěcí postup.

Příklady.

1. Skript se aktivuje poté, co ukazatel myši klikne na libovolný prvek rozhraní, když na něj uživatel najede ukazatelem myši. K tomu slouží atribut onClick.
V následujícím úryvku je tedy atribut onClick použit pro prvek A:
Kliknutím sem spustíte jakoukoli funkci.

Ale obecně je atribut onClick jedinečný a lze jej použít pro téměř jakýkoli prvek.

2. Nebo lze skript spustit po načtení webové stránky do okna prohlížeče.
Chcete-li aktivovat skript po načtení webové stránky, použijte atribut onload prvku, jako v následujícím příkladu.

Existuje obrovské množství dalších atributů. Například atribut onMouseOver, který se používá ke spuštění skriptu poté, co uživatel najede myší na nějaký prvek rozhraní. Nebo atribut onMouseOut - když uživatel odstraní ukazatel myši.

Java Script a jQuery Mimochodem, ovládání Java Scriptu se s příchodem knihovny jQuery stalo ještě jednodušší.

Funkce jQuery řeší spoustu praktických a naléhavých problémů. Vytváření i složitého skriptu se při použití stává jednoduchým.

A pro webovou stránku otevírá použití jQuery obrovský seznam pluginů, které lze připojit k libovolnému zdroji, hlavní je, že se používá Java Script. Pomocí zásuvných modulů jQuery můžete implementovat do několika řádků kódu

• krásné a komplexní menu,
• obrazové galerie,
• různé funkce pro správu stránek.

Pokud je váš web vytvořen na CMS, můžete tam implementovat i své vlastní skripty. Kombinace jednoduchého CMS a Java Scriptu umožňuje vytvářet velmi krásná, snadno implementovatelná a podporovaná a také odlehčená řešení pro malé projekty.

S pomocí Java Scriptu a jQuery můžete i tu nejjednodušší webovou vizitku proměnit v jasný a plnohodnotný zdroj, který bude vynikajícím zástupcem společnosti na obrovských plochách internetu.

Webové skripty jsou programy, které jsou psány přímo v html kódu nebo jednoduše v souborech, což je výhodnější. Tyto programy jsou napsány v JavaScriptu. Když tedy mluvíme o tom, co jsou Javascripty, můžeme říci, že je to programovací jazyk, který je interpretační.

Prohlížeč přečte JavaScript a poté se provedou zapsané výrazy a provedou se manipulace specifikované na stránce. JavaScript je syntaxí podobný programovacím jazykům jako Java, C++ a C.

JavaScript vděčí za svůj vzhled vývoji společností jako Sun Microsystems (Oracle) a Netscape (Mozilla). Původní název jazyka byl LiveScript. Vzhledem k tomu, že jazyk Java od Sun Microsystems byl tehdy velmi populární, se marketingové oddělení Netscape rozhodlo změnit název jazyka na JavaScript. Zároveň se očekávalo, že tento krok přidá jazyku na popularitě. Když už o tom mluvíme, je třeba poznamenat, že Java a JavaScript jsou dva různé jazyky.

ECMA-262 je oficiální standard pro tento jazyk. Název tohoto jazyka JavaScript je ECMAScript.

Pro naučení tohoto jazyka se vám bude hodit předchozí znalost CSS a Html. Pokud jste před tímto okamžikem nevěděli o CSS a Html, měli byste se okamžitě seznámit.

Omezení a možnosti JavaScriptu

Při použití skriptů na webových stránkách se zobrazí následující funkce:

• Přidávání různých animačních efektů, které nelze implementovat pomocí Html a CSS.
• Možnost měnit obsah Html prvků a přidávat nové tagy bez opětovného načítání stránky.
• Reakce na události (reakce na akce uživatele) - zpracování úhozů na klávesnici a pohybů kurzoru myši.
• Proveďte ověření dat, která byla zadána do polí formuláře před odesláním na server. To snižuje zatížení serveru a zrychluje web.
• V závislosti na tom určení verze prohlížeče a načtení požadované stránky.

Toto není úplný seznam skriptovacích funkcí, které byly napsány v tomto jazyce. Funkce JavaScriptu mají mnohem širší význam.

Kromě výše uvedených možností existují také omezení použití skriptů:

• K souborům umístěným v počítači uživatele není přístup. Obecně neexistuje žádný přístup mimo samotnou webovou stránku. Jedinou výjimkou jsou soubory cookie, které lze číst a zapisovat pomocí JavaScriptu. Objekty tohoto typu jsou obvykle potřeba pouze pro zrychlení načítání stránky.
• Neexistuje žádná možnost provádění požadavků napříč doménami, tedy získání přístupu k webovým stránkám, které se nacházejí na jiné doméně, i když jsou otevřeny na sousedních kartách.
• Neexistuje způsob, jak zavřít karty a okna, která byla otevřena s jeho pomocí.
• Neexistuje žádný způsob, jak ochránit původní text na stránce nebo zabránit kopírování obrázků nebo textu ze stránky. Zůstává však možné přidat některá omezení, která funkce JavaScriptu umožňují.

Taková omezení v jistém smyslu znesnadňují spuštění škodlivého kódu.

Co je Javascripts?

Jak bylo uvedeno výše, JavaScript je jazyk, který přidává interaktivitu webovým stránkám. Pomocí tohoto jazyka se vytvářejí aplikace, které jsou součástí kódu HTML. Například formuláře nebo registrační formuláře vyplněné uživatelem. JavaScript je často zaměňován s Java, ale tyto jazyky nemají mnoho společného.

Někteří dokonce porovnávají JavaScript s jinými jazyky Ruby, Self, Python. Ale to je samostatný jazyk.

Pomocí JavaScriptu

Pomocí JavaScriptu můžete provádět změny na stránce, měnit styly prvků a přidávat nebo odebírat značky. Je také možné se dozvědět o akcích uživatele na stránce (zmenšení nebo zvětšení pracovní plochy obrazovky, kliknutí myší, stisknutí libovolné klávesy, posouvání stránky). Je možné získat přístup k libovolnému prvku Html kódu a manipulovat s tímto prvkem. Odpověď na otázku "Co jsou JavaScripty?" bude moci načítat data bez opětovného načítání stránky, zadávat zprávy, nastavovat nebo číst soubory cookie a provádět mnoho dalších akcí.

Základ jedinečnosti JavaScriptu

Hlavní jedinečnost tohoto jazyka spočívá v tom, že je podporován téměř všemi prohlížeči a má s nimi plnou integraci. Všechny akce pomocí JavaScriptu jsou velmi jednoduché. Neexistuje žádná jiná technologie, která nabízí všechny tyto výhody. Například neexistují křížové prohlížeče, nejsou podporovány všemi prohlížeči (jedná se o XUL, ActiveX, VBScript). Existují také takové, které nejsou plně integrovány s prohlížečem. Jedná se o Silverlight, Flash, Java. V současné době tato technologie prochází velkým vývojem a prvky JavaScriptu 2 jsou ve vývoji.

Alternativní programovací jazyky

Stává se, že možnosti JavaScriptu jsou omezené. V tomto případě vám pomohou následující programovací jazyky.

Nejpoužívanějším jazykem je Java. Tento jazyk se používá k popisu složitých algoritmů, ale na běžném webu to není vždy vyžadováno. Z tohoto důvodu se java-applety načítají dlouho a mají značnou velikost.

Flash byl od samého počátku navržen jako cross-browser a pro vytváření multimediálních objektů. Například k vytvoření interaktivních oblastí na webových stránkách, her, bannerů, audio a video přehrávačů. Flash mimo jiné vytváří sokety (síťová připojení), můžete pracovat s multimédii a ukládat objekty, které nemusí odesílat požadavky na server. Pro Flash existují pohodlné grafické vývojové nástroje.

Pokud porovnáme nevýhody Flashe a JavaScriptu, jejichž objekty jsou velmi odlišné, pak hlavní nevýhodou Flashe je jeho špatná indexace vyhledávači. To se děje proto, že vyhledávače procházejí. Neexistuje také žádný způsob, jak vybrat text umístěný v kontejneru Flash.

Silverlight, Vbscript, JavaFX, XUL

Pro doplnění schopností JavaScriptu při vytváření rozhraní a komunikací se používají technologie Silverlight, Vbscript, JavaFX a XUL.
Stále se používají méně často než Flash a JavaScript. Abychom zdůraznili vlastnosti každého z nich, můžeme říci následující:

XUL – používá se k popisu desktopových aplikací a rozhraní. Ale to je možné pouze v případě, že vytvoříte program pro Mozillu.

JavaFX - funguje na počítači pouze s Javou, protože je to doplněk k tomuto jazyku.

Vbscript byl vyvinut společností Microsoft Corporation. Základem byl Visual Basic. Tento jazyk se nijak nevyvíjí, v dnešní době se téměř nepoužívá a je ve schopnostech horší než JavaScript.

Silverlight byl vyvinut společností Microsoft jako konkurent Flash. Také nemá velkou popularitu, protože... Řetězce JavaScriptu mohou poskytnout mnohem více skriptování stránky.

Jak povolit JavaScript a co je chyba JavaScriptu

Nyní stojí za to diskutovat o každodenních problémech uživatelů na internetu. Dnes se stále častěji stává, že uživatel po návštěvě své stránky na sociálních sítích. Síť vidí v horním okně chybovou zprávu „JavaScript není povolen“, „Pro správnou funkci webu povolte JavaScript“, „Chyba JavaScriptu“. Jak to napravit je vážná otázka, protože... V tomto případě má uživatel potíže s načítáním videí a fotografií.

Jak povolit JavaScript v Mozilla Firefox

Pokud uživatel pracuje v Mozille, musíte přejít na „Nástroje“ a poté na „Nastavení“. Poté na kartě „Obsah“ musíte zaškrtnout políčko vedle položky „Použít JavaScript“.

Jak povolit JavaScript v Google Chrome

Chcete-li povolit nebo zakázat JavaScript v tomto prohlížeči, musíte provést následující kroky: Nastavení a správa Google Chrom, Možnosti, Pokročilé, Osobní (Nastavení obsahu), JavaScript. Povolit všem webům používat JavaScript (doporučeno).

Jak povolit JavaScript v Opeře

Chcete-li povolit nebo zakázat JavaScript v tomto prohlížeči, musíte provést následující:

Stiskněte klávesu F12.

Vyberte „Povolit JavaScript“.

Jak povolit JavaScript v IE (Internet Explorer)

Chcete-li povolit nebo zakázat JavaScript v aplikaci Internet Explorer, musíte provést následující: „Nástroje“, „Možnosti Internetu“, karta „Zabezpečení“, „Vybrat internetovou zónu“, tlačítko „Jiné“, položka „Skripty“, „Povolit skripty“ .

JavaScript ve VK

Chcete-li tento problém vyřešit, musíte opravit chybu JavaScriptu v síti VKontakte.

Co je chyba JavaScript VK?

Uživatel navštívil jeho stránku na sociální síti a pokusil se spustit video nebo zvukový soubor, ale pak našel v levém horním rohu zprávu „Chyba JavaScriptu: initAddMedia není definována“. Tato zpráva se zobrazí, když dojde k chybě
"initAddMedia".

Nejprve musíte přejít na „Start“, „Tento počítač“ a složku Windows. Poté přejděte do sekce system32 a složky ovladače. Poté do složky etc.

Mezi malým počtem souborů v této složce musíte vybrat soubor hostitelů.
Tento soubor se poté otevře pomocí programu Poznámkový blok. Vypadá to takto: musíte na něj kliknout pravým tlačítkem a vybrat „Otevřít pomocí“. Dále můžete vybrat „Textový editor WordPad“.

Po otevření tohoto souboru se musíte podívat na soubor se záznamem 127.0.0.1 localhost. Jakékoli další položky jsou zbytečné a pouze komplikují a blokují stabilní provoz audio a video souborů. Musíte úplně odstranit všechny informace ze souboru a zkopírovat pouze tento nápis 127.0.0.1 localhost. Dále musíte kliknout na „Uložit“ a restartovat počítač. Při příští návštěvě stránky VKontakte bude vše fungovat dobře.

JavaScript je jedním z programovacích jazyků, který se běžně používá k programovému přístupu k aplikačním objektům. Často je zabudován do prohlížeče a je nezbytný pro zkvalitnění funkčnosti webových stránek. Pokud je tedy JavaScript z toho či onoho důvodu zakázán, stránka se nemusí otevřít vůbec nebo se otevře, ale s významnými omezeními nebo chybami. Například se nemusí zobrazit určitý text. Pokud si tedy nevíte rady s aktivací tohoto jazyka ve vašem internetovém prohlížeči, pak jste na správné adrese.

Mozilla Firefox

• V horní nabídce vyberte část „Nástroje“ - „Nastavení“.

• Otevřelo se před vámi okno na kartě „Základní“. Musíte vybrat kartu "Obsah".

• V horní části okna uvidíte několik položek, z nichž jedna se bude jmenovat „Použít JavaScript“ - zaškrtněte políčko vedle ní a klikněte na OK.

• Obnovte stránku pomocí klávesy F5 na klávesnici.

POZOR! Tento popis je vhodný pouze pro verze nižší než 22. Počínaje verzí 23 není JavaScript vyžadován – tato možnost je ve výchozím nastavení povolena.

Opera

• V levém horním rohu klikněte na tlačítko „Nástroje“ - „Nastavení“ - „Obecná nastavení“.

• Jakmile jste v nabídce, přejděte na kartu „Upřesnit“ (je to pátá).

• V levém menu klikněte na odkaz „Obsah“ a zaškrtněte políčko vedle „Použít JavaScript“.

• Klikněte na OK a obnovte stránku.

Google Chrome

• V pravém horním rohu je tlačítko, na kterém uvidíte tři pruhy - klikněte na něj a vyberte sekci „Nastavení“.

• Přejděte na stránce úplně dolů a klikněte na „Zobrazit pokročilá nastavení“.

• V části „Osobní údaje“ uvidíte tlačítko „Nastavení obsahu“, na které musíte kliknout.

• Otevřelo se další okno. Najděte možnost „Povolit všem webům používat JavaScript (doporučeno)“ a klikněte na OK.

• Znovu načtěte stránku ve svém internetovém prohlížeči.

Internet Explorer

• Otevřete vlastnosti prohlížeče (to lze provést buď v samotném prohlížeči prostřednictvím nabídky nebo pomocí ovládacího panelu vašeho počítače).

• Otevře se okno, musíte přejít na kartu „Zabezpečení“.

• V dolní části musíte kliknout na tlačítko s nápisem „Jiné...“.

• Otevřel se velký seznam. Musíte přejít do sekce „Skripty“ a v podsekci „Aktivní skripty“ zaškrtnout políčko vedle položky „Povolit“.

• Klikněte na OK a obnovte stránku.

Apple Safari

• V nabídce najdeme sekci „Nastavení“.

• Otevřelo se samostatné okno s několika kartami, mezi nimiž musíte otevřít tu s názvem „Zabezpečení“.

• Zaškrtněte políčko vedle položky „Povolit JavaScript“ a zavřete okno.

• Stránku obnovíme stisknutím klávesy F5.

Je třeba poznamenat, že všechny verze nejznámějších a nejoblíbenějších prohlížečů dnes poskytují podporu pro JavaScript. Podporují třetí vydání specifikace a Mozilla Firefox se dokonce pokusil podpořit čtvrté vydání. Ve výchozím nastavení je JavaScript standardně používán téměř ve všech internetových prohlížečích a obvykle jej zakáže sám uživatel.

Co se týče použití jazyka, je nutné např. v některých webových aplikacích, skriptech v prohlížečích (hovoříme o speciálních programech, které umožňují formátovat stránky, automaticky vyplňovat formuláře, skrýt část obsahu atp. on), stejně jako v AJAX (přístup k vytváření aplikačních rozhraní, ve kterém dochází k výměně dat se serverem na pozadí, díky čemuž se stránka zcela znovu nenačte a provoz samotné aplikace se pouze zrychlí).

JavaScript se vyvíjí obrovskou rychlostí. Velká vlna nových technologií zakrývá kameny těžkopádných úkolů, které se ještě včera zdály nedobytné a hrozivé.

V této lekci představujeme 10 užitečných skriptů, které vám pomohou ušetřit čas při řešení běžných problémů. Většinu z výše uvedených skriptů lze jednoduše zkopírovat do vašeho projektu, ale je lepší provést nějakou analytickou práci, aby se kód co nejlépe přizpůsobil.

1. Maximální výška nebo šířka v sadě prvků

Velmi užitečný skript pro úpravu výšky nebo šířky sloupců.

Možnost výšky:

Var getMaxHeight = function ($elms) ( var maxHeight = 0; $elms.each(function () ( // V některých případech můžete použít externalHeight() var height = $(this).height(); if (výška > maxHeight ) ( maxHeight = výška; ) );

Používání:

$(elements).height(getMaxHeight($(elements)));

Chcete-li použít skript pro šířku, musíte nahradit všechny inkluze výšky a výšky hodnotami width a Width.

2. Účinná kontrola data

Sada nástrojů pro datum v JavaScriptu je velmi základní a pro formátování data nestačí. Přestože existuje mnoho knihoven, které zpracování data výrazně usnadňují, často stačí datum zkontrolovat v řetězci. Následující skript je pro takový případ jako stvořený. Umožňuje zkontrolovat datum s libovolným oddělovačem a 4místným rokem.

Function isValidDate(value, userFormat) ( // Pokud není nic zadáno, použijte výchozí formát userFormat = userFormat || "mm/dd/rrrr"; // Najděte oddělovač bez symbolů měsíce, dne a roku (v angličtině - m, d, y) var delimiter = /[^mdy]/.exec(userFormat // Vytvořte pole měsíce, dne a roku, // to znamená, že známe pořadí formátu var theFormat = userFormat.split(delimiter); ; Vytvořte pole z data uživatele var theDate = value.split(delimiter function isDate(date, format) ( var m, d, y, i = 0, len = format.length, f; for (i; i);< len; i++) { f = format[i]; if (/m/.test(f)) m = date[i]; if (/d/.test(f)) d = date[i]; if (/y/.test(f)) y = date[i]; } return (m >0 && m< 13 && y && y.length === 4 && d >0 && // Zkontrolujte, zda je správný den v měsíci d ve spodní části souboru HTML je to, že prvky HTML načítá prohlížeč v pořadí, v jakém se objevují v souboru. Pokud je tedy JavaScript načten jako první a potřebuje interakci s HTML pod ním, selže, protože JavaScript bude načten dříve než HTML, se kterým potřebuje interagovat. Umístění JavaScriptu na konec stránky HTML je proto považováno za nejlepší strategii.

Co se stalo?

Takže název vašeho textu byl změněn na "Ahoj světe!" pomocí JavaScriptu. Udělali jsme to tak, že jsme zavolali querySelector(), vzali odkaz na naši hlavičku a uložili ji do proměnné nazvané myHeading. To je velmi podobné tomu, co jsme dělali v CSS se selektory. Pokud chcete s prvkem něco udělat, musíte jej nejprve vybrat.

Poté nastavíte hodnotu proměnné myHeading na vlastnost textContent (která představuje obsah záhlaví) na "Hello world!".

Rychlý kurz základů jazyka

Pojďme se podívat na některé základní funkce jazyka JavaScript, abyste lépe porozuměli tomu, jak to celé funguje. Navíc jsou tyto funkce společné všem programovacím jazykům. Pokud rozumíte těmto základům, budete moci začít programovat, jako by se nikdy nic nestalo!

Proměnné

Poznámka: JavaScript rozlišuje velká a malá písmena – myVariable se liší od myvariable. Pokud máte problémy s kódem, zkontrolujte případ!

Po deklaraci proměnné jí můžete přiřadit hodnotu:

Moje proměnná = "Bob";

Pokud chcete, můžete provést obě tyto operace na stejném řádku:

Var myVariable = "Bob";

Hodnotu můžete získat jednoduchým voláním proměnné jménem:

Moje proměnná;

Po nastavení hodnoty proměnné ji můžete později změnit:

Var myVariable = "Bob"; myVariable = "Steve";

Všimněte si, že proměnné mají různé datové typy:

Příklad vysvětlení proměnnéŘetězec Číslo Boolean Objekt

Sekvence textu nazývaná řádek. Chcete-li označit, že tato hodnota je řetězec, musíte ji uzavřít do uvozovek.	var myVariable = "Bob";
Čísla. Čísla kolem sebe nemají uvozovky.	var mojeProměnná = 10;
Hodnota je True/False. Slova true a false jsou speciální klíčová slova v JS a nepotřebují uvozovky.	var myVariable = true;
Pole, které umožňuje uložit více hodnot do jednoho odkazu.	var mojeProměnná = ; Ke každému prvku pole můžete přistupovat takto: myVariable, myVariable atd.
V podstatě cokoliv. Vše v JavaScriptu je objekt a může být uloženo v proměnné. Mějte to na paměti, když se učíte.	var myVariable = document.querySelector("h1"); To vše je z výše uvedených příkladů.

Proč tedy potřebujeme proměnné? No, proměnné měly dělat něco zajímavého v programování. Pokud se hodnoty nemohly změnit, pak jste nemohli dělat nic dynamického, jako je personalizace uvítací zprávy nebo změna obrázku zobrazeného v galerii obrázků.

Komentáře

Do kódu JavaScript můžete vkládat komentáře, stejně jako v CSS:

/* Vše, co je zde, je komentář. */

Pokud váš komentář neobsahuje zalomení řádků, je často jednodušší použít dvě lomítka, jako je tento:

// Toto je komentář

Operátoři

Poznámka: Míchání datových typů může při provádění výpočtů vést k neočekávaným výsledkům, proto buďte opatrní, abyste na své proměnné odkazovali správně, abyste získali očekávané výsledky. Do konzole zadejte například „35“ + „25“. Proč jste nedosáhli očekávaného výsledku? Protože uvozovky změnily čísla na řetězce, takže jste skončili se zřetězením řetězců spíše než sčítáním čísel. Pokud zadáte 35 + 25, dostanete správný výsledek.

Podmínky

Podmínky jsou struktury kódu, které vám umožňují otestovat, zda je výraz pravdivý nebo nepravdivý, a poté spustit další kód v závislosti na výsledku. Nejběžnější forma stavu se nazývá if ... else . Například:

Var iceCream = "čokoláda"; if (iceCream === "čokoláda") ( alert("Jo, miluji čokoládovou zmrzlinu!"); ) else ( alert("Awww, ale čokoláda je moje oblíbená..."); )

Výraz inside if (...) je test, který používá operátor identity (jak je popsáno výše) k porovnání proměnné iceCream s řetězcovou čokoládou a zjištění, zda jsou stejné. Pokud toto porovnání vrátí hodnotu true, bude proveden první blok kódu. Pokud ne, bude tento kód přeskočen a bude proveden druhý blok kódu po příkazu else.

Funkce Události

Chcete-li vytvořit skutečnou interaktivitu na webu, potřebujete události. Události jsou framework, který naslouchá tomu, co se děje v prohlížeči, a pak vám umožňuje spouštět kód jako odpověď na to. Nejzřetelnější je událost click, kterou prohlížeč spustí, když na něco klikneme myší. Chcete-li tuto událost předvést, zadejte do konzoly následující příkaz a poté klikněte na aktuální webovou stránku:

Document.querySelector("html").onclick = function() ( alert("Au! Přestaň do mě tykat!"); )

Existuje mnoho způsobů, jak připojit událost k prvku. Zde vybereme prvek a nastavíme jeho handler vlastnosti onclick na anonymní (tedy nepojmenovanou) funkci, která obsahuje kód, který chceme spustit na události click.

všimni si toho

Document.querySelector("html").onclick = function() ();

ekvivalent

Var myHTML = document.querySelector("html"); myHTML.onclick = function()();

Jen je kratší.

Pojďme upgradovat příklad našeho webu

Nyní, když jsme probrali některé základy JavaScriptu, přidáme na náš vzorový web nějaké skvělé, odlehčené funkce, abyste měli představu, jak to funguje.

Přidání změny obrázku

V této sekci přidáme na naše stránky další obrázek a přidáme jednoduchý JavaScript pro přepínání mezi dvěma obrázky, když na ně kliknete.

Nejprve si najděte jiný obrázek, který byste chtěli na svém webu zobrazit. Ujistěte se, že má stejnou velikost jako váš první obrázek nebo co nejblíže k němu.

Uložte obrázek do složky obrázků.

Přejmenujte tento obrázek na "firefox2.png" (bez uvozovek).

Přejděte do svého souboru main.js a zadejte následující JavaScript. (Pokud váš JavaScript "ahoj světe" stále existuje, odeberte jej.) var myImage = document.querySelector("img"); myImage.onclick = function() ( var mySrc = myImage.getAttribute("src"); if(mySrc === "images/firefox-icon.png") ( myImage.setAttribute("src","images/firefox2. png"); ) else ( myImage.setAttribute("src","images/firefox-icon.png"); ) )

Uložte všechny soubory a načtěte index.html do svého prohlížeče. Nyní, když kliknete na obrázek, měl by se změnit na něco jiného!

Uložíme tedy odkaz na náš prvek v proměnné myImage. Dále vytvoříme obsluhu události onclick s anonymní funkcí pro tuto proměnnou. Nyní při každém kliknutí na tento prvek obrázku:

Hodnotu získáme z atributu src obrázku.

Ke kontrole hodnoty src používáme podmínku, abychom zjistili, zda je cesta k původnímu obrázku rovna:

Pokud ano, změníme hodnotu src na cestu k 2. obrázku, což způsobí, že se druhý obrázek načte do .

Pokud tomu tak není (to znamená, že se to už muselo změnit), změníme hodnotu src a vrátíme se zpět k původní cestě obrázku, jak tomu bylo na prvním místě.

Přidání osobní uvítací zprávy

Dále přidáme nějaký další kód pro změnu názvu stránky na personalizovanou uvítací zprávu, když uživatel poprvé vstoupí na web. Tato uvítací zpráva bude uložena, když uživatel opustí stránku a vrátí se později – uložíme ji pomocí . Zahrneme také možnost změnit uživatele, a tedy i uvítací zprávu, kdykoli to bude potřeba.

V index.html přidejte před prvek následující řádek: Změnit uživatele

V main.js přidejte na konec souboru následující kód, přesně tak, jak je napsán – zachytí odkazy na nové tlačítko a název a uloží je do proměnných: var myButton = document.querySelector("button"); var myHeading = document.querySelector("h1");

Nyní přidejte následující funkci pro nastavení personalizovaného pozdravu – neudělá nic, ale použijeme ji později: function setUserName() ( var myName = prompt("Zadejte prosím své jméno."); localStorage.setItem(" name", myName ); myHeading.innerHTML = "Mozilla je cool, " + myName ) Tato funkce obsahuje funkci prompt(), která volá dialogové okno, trochu jako alert() kromě prompt() žádá uživatele o zadání některých informací a uloží tato data do proměnné poté, co uživatel klikne na OK. V tomto případě požádáme uživatele o zadání svého jména. Dále zavoláme API s názvem localStorage, které nám umožňuje ukládat data v prohlížeči a později je načíst. Pomocí funkce setItem() z localStorage vytváříme a ukládáme data do vlastnosti zvané „name“ a tuto hodnotu nastavujeme na proměnnou myName, která obsahuje jméno zadané uživatelem. Nakonec nastavíme text Content Content v nadpisu jako řetězec a uživatelské jméno.

Poté přidejte blok if ... else – tento inicializační kód bychom mohli volat, protože strukturuje aplikaci při prvním načtení: if(!localStorage.getItem("name")) ( setUserName(); ) else ( var storageName = localStorage .getItem("name"); myHeading.innerHTML = "Mozilla je cool, " + storageName ) Tento blok nejprve používá operátor negace (logický NOT, reprezentovaný jako!) ke kontrole, zda data v položce name existují. Pokud ne, spustí se funkce setUserName(), která je vytvoří. Pokud data existují (to znamená, že je uživatel nastavil při předchozí návštěvě), načteme uložený název pomocí getItem() a nastavíme textContent názvu na řetězec plus uživatelské jméno, stejně jako jsme to udělali v setUserName() .

Nakonec na tlačítko nastavte obsluhu události onclick. Po kliknutí na tlačítko se spustí funkce setUserName(). To umožňuje uživateli nastavit nový název kdykoli bude chtít kliknutím na tlačítko: myButton.onclick = function() ( setUserName(); )

Nyní, když stránku poprvé navštívíte, požádá vás o uživatelské jméno a poté vám poskytne personalizovanou zprávu. Název můžete kdykoli změnit kliknutím na tlačítko. Jako bonus navíc, protože název je uložen v localStorage, přetrvává i po zavření webu, přičemž si stále zachovává personalizovanou zprávu při příštím otevření webu!

Závěr