Prezentace JavaScript s funkcemi

• Smět 3, 2024

V předchozích článcích jsme vytvořili a provedli jemné doladění na velmi jednoduché prezentaci JavaScriptu. Tato prezentace je zcela funkční a dokonce zobrazuje něco vhodného pro lidi, kteří nemají JavaScript, ale rád bych nechal miniaturu obrázku, který právě zobrazuji, odlišný od ostatních miniatur. Usadil jsem se pomocí id CSS zvaného „aktuální“, díky kterému byly obrázky poloprůhledné a přidal jsem tenký červený rámeček pro vybranou miniaturu. V mém posledním článku jsem toto chování získal pro původně vybranou miniaturu, ale když jsem vybral novou miniaturu, nová miniatura se nezměnila a původní miniatura ponechala vybraný styl.

Když uživatel v předchozí verzi své prezentace klikne na miniaturu, zobrazí se související velké obrázky. Chci to udělat, je změnit velký obrázek, nastavit miniaturu dříve vybraného obrázku, aby se vrátil k normálnímu a aby se tento náhled zobrazil se zvláštním stylem pro vybraný obrázek. Protože po kliknutí na miniaturu nyní dělám více věcí, přepnul jsem z vkládání celého kódu do atributu onClick img tag pomocí funkce. JavaScript funkce obvykle jít do hlava části HTML tak, aby byly načteny a připraveny při načtení těla stránky. Lze je vložit přímo mezi skript tagy nebo dal a soubor a zahrnuty. U krátkých programů, nebo když aktivně kóduji, je pro mě snazší vložit kód přímo na stránku, jako jsem to udělal zde.

Mohl jsem použít funkci pro každou miniaturu, ale protože všechno, co se mění z miniatury na miniaturu, je název obrázku a ID miniatury (a použil jsem název obrázku pro id), napsal jsem jednu funkci, která převzala id jako argument a použil jej k vytvoření příslušného názvu obrázku přidáním „.jpg“. Zavolal jsem své funkci displayLarge.

function displayLarge (id) {
// změnit velký obrázek
imageName = id + ".jpg";
document.getElementById ("largeImage"). src = imageName;
// nastaví styl předchozí miniatury zpět na výchozí
document.getElementById ("aktuální"). id = oldID;
// poznamenejte si id, než jej změníme
oldID = id
// označí miniaturu jako aktuální aktuálním stylem
document.getElementById (id) .id = "current";
}

Aby tato funkce fungovala poprvé, také jsem musel uvést počáteční definici oldID, proměnnou, kterou používám k zapamatování původního ID miniatury, která je aktuálně vybraná. Celý tento kód jde do hlavní části webové stránky, takže je načten před načtením stránky.

Nakonec jsem změnil HTML pro miniatury, abych zavolal svou funkci. HTML pro moji prezentaci nyní vypadá takto:











Zde najdete pracovní příklad tohoto kódu.

Video Návody: jsDevMeetup - Ondřej Žára - JavaScript: The Hard Parts (Smět 2024).