V tomto článku vám ukážu, jak vytvoříte jednoduchý program, který určí, či je slovo nebo fráze palindrom v Javascriptu.
Proč JavaScript a palindrom – k čemu je program vhodný
V dnešní době se stává programování stále více populární a mnoho lidí se snaží naučit základy této dovednosti. JavaScript je jedním z programovacích jazyků, které jsou vhodné pro začátečníky. Jeho syntaxe je relativně snadná na naučení a má mnoho využití v oblasti webového vývoje.
Program, který kontroluje, zda je zadané slovo nebo věta palindromem, je příkladem jednoduchého programu v JavaScriptu, který lze snadno pochopit i pro ty, kteří nemají s programováním zkušenosti. Takový program (a mnoho dalších) může být také užitečný pro přípravu na pohovor na juniorskou vývojářskou pozici, kde se často ptají na základní znalosti programování.
Co je to JavaScript
JavaScript je programovací jazyk, který se nejčastěji používá na vývoj webových stránek a aplikací. Většina kódů napsaných v JavaScriptu je určena pro frontendovou část webových stránek. Frontend se v tomto případě vztahuje na uživatelské rozhraní a interakci s uživatelem, což zahrnuje vytváření webových stránek, zobrazení obsahu, animace, formuláře a další prvky, které jsou viditelné na stránce. Tyto prvky jsou často vytvářeny pomocí HTML a CSS a interaktivitu zajišťuje právě JavaScript.
Spuštění kódu a vstup uživatele pomocí funkce prompt()
Pro spuštění tohoto kódu potřebujeme dva soubory: HTML soubor a JavaScriptový soubor. V HTML souboru by mělo být odkazováno na JavaScriptový soubor pomocí elementu <script>. V tomto kódu se používá funkce prompt() pro vyzvání uživatele k zadání slova nebo věty, kterou chce zkontrolovat. Následně se tato vstupní data zpracovávají pomocí metod řetězců v JavaScriptu a výsledek se vypíše uživateli pomocí funkce alert(). Tento program běží v prohlížeči a je tedy vhodný pro uživatele, kteří chtějí jednoduché ověření, zda zadané slovo nebo věta je palindromem.
Pro potřeby tohoto programu není až tolik podstatné mít složitý HTML soubor. Jde o základy toho, jak celý program funguje v JavaScriptu a co znamenají jednotlivé funkce, které se používají. Proto ve vašem IDE postačí vytvořit jednoduchý index.html soubor například s touto strukturou:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Palindrome checker</title>
</head>
<body>
<h1>Palindrome Check!</h1>
</body>
<script src="palindrome.js"></script>
</html>Pro fungování javascriptového souboru je nezbytné tam tento soubor propojit pomocí tagu <script>. Pro účely tohoto programu jsme vytvořili krome index.html souboru také soubor palindrome.js, do kterého je napsán právě kód JavaScriptu.
Rozebrání jednotlivých řádků JS kódu
function palindromeCheck() {
const userPhrase = prompt("Zadejte slovo nebo větu, kterou chcete zkontrolovat: ").toLowerCase();
const userWords = userPhrase.split(" ");
const userWordsJoined = userWords.join("");
const isPalindrome = userWordsJoined === userWordsJoined.split("").reverse().join("");
const outputPhrase = userWords.join(" ");
alert(`Slovo nebo věta '${outputPhrase}' ${isPalindrome ? "JE" : "NENÍ"} palindrom.`);
}
palindromeCheck();Samotný kód začíná funkcí s názvem palindromeCheck(), která má prázdné závorky, což znamená, že funkce nepřijímá žádné argumenty. Na prvním řádku funkce se používá metoda prompt(), která vytvoří vyskakovací okno, kde se uživatel může podívat na zprávu v uvozovkách a zadat svůj vstup. Tento vstup se pak uloží do proměnné userPhrase. Dále se na druhém řádku používá metoda split(), která rozdělí zadaný vstup podle mezer a uloží ho do proměnné userWords.
Tento řádek je užitečný pro začátečníky, kteří se chtějí naučit, jak získat vstup od uživatele a rozdělit ho na jednotlivá slova. Doporučuji si například při vytváření kódu i vypsat do konzole, co jednotlivé proměnné dělají a jak vypadají. To lze použitím jednoduché funkce console.log(). Například u metody split() si můžeme všimnout, že se do konzole vypíše pole (array), které například víceslovnou odpověď rozdělí do jednotlivých prvků. To z toho důvodu, aby se mohla zkontrolovat celá věta na palindrom a následně i patřičně vypsat do vyskakovacího okna, které uživatele informuje o tom, či je daná fráze nebo není palindrom.
Na třetím řádku se pomocí metody join() spojí jednotlivá slova dohromady a výsledek se uloží do proměnné userWordsJoined. Čtvrtý řádek používá metodu reverse(), která otočí pořadí znaků v řetězci. Výsledek metody reverse() se poté spojí zpět pomocí metody join() a uloží se do stejné proměnné userWordsJoined.
Pátý řádek porovnává původní řetězec uložený v proměnné userWordsJoined s novým řetězcem, který je otočený pozpátku. Výsledkem tohoto porovnání je boolean hodnota true nebo false, která se uloží do proměnné isPalindrome. Nakonec se na šestém řádku pomocí metody join() slova opět spojí dohromady a výsledný řetězec se uloží do proměnné outputPhrase. Na posledním řádku se pak pomocí funkce alert() vypíše výsledek uživateli, který se skládá ze slova “palindrom” a odpovídající boolean hodnoty v závislosti na tom, zda byla vstupní fráze palindromem.
Dovednosti získané vytvořením tohoto programu
Vytvořením a pochopením tohoto programu se jako začátečník můžete naučit a porozumět zejména těmto dovednostem:
- Práce s proměnnými – program využívá proměnné pro uložení vstupu od uživatele, manipulaci s řetězci a výstupu do uživatelského rozhraní.
- Použití vstupů od uživatele – funkce prompt() slouží k získání vstupu od uživatele přes dialogové okno.
- Práce s řetězci – program využívá několik metod pro manipulaci s řetězci, včetně split() pro rozdělení řetězce na slova, join() pro spojení slov zpět do řetězce a toLowerCase() pro převod všech znaků na malá písmena.
- Použití podmínky – program využívá ternárního operátoru pro zobrazení výstupu do uživatelského rozhraní, který závisí na tom, zda je vstup palindromem.
- Práce s polem – program využívá pole pro uložení slov z vstupu od uživatele a pro manipulaci s těmito slovy pomocí metod split() a join().
Shrnutí a závěr – palindrom v JavaScriptu
Toto je jenom jeden z mnoha způsobů, jak takový program vytvoříte. Záleží vždy na kreativitě uživatele a na tom, co potřebuje a od programu vyžaduje. Pokročilejší uživatelé mohou do programu zapojit vytvoření celé HTML webové stránky, využít znalosti CSS a manipulaci s DOM objekty. Využití promptu a alertu tímto stylem je možná trošku zastaralejší a ne úplně elegantní způsob. Nijak nesnižuje hodnotu toho, čeho všeho je JavaScript schopný a jak s ním lze pracovat, jak nad ním přemýšlet.
TIP pro méně odvážné:
Pokud vás zatím děsí použití ternárního operátoru, můžete v kódu využít i klasické if else podmínky:
function palindromeCheck() {
const userPhrase = prompt("Zadejte slovo nebo větu, kterou chcete zkontrolovat: ").toLowerCase();
const userWords = userPhrase.split(" ");
const userWordsJoined = userWords.join("");
const isPalindrome = userWordsJoined === userWordsJoined.split("").reverse().join("");
const outputPhrase = userWords.join(" ");
if (isPalindrome) {
alert(`Slovo nebo věta '${outputPhrase}' JE palindrom.`);
} else {
alert(`Slovo nebo věta '${outputPhrase}' NENÍ palindrom.`);
}
}
palindromeCheck();A takhle jednoduše si naprogramujete a zjistíte, jestli je slovo či fráze palindrom v JavaScriptu 🙂
Napsat komentář