Prezentácia JavaScript s funkciami

• Apríl 29, 2024

V predchádzajúcich článkoch sme vytvorili a doladili veľmi jednoduchú prezentáciu jazyka JavaScript. Táto prezentácia je úplne funkčná a dokonca zobrazuje niečo vhodné pre ľudí, ktorí nemajú JavaScript, ale chcem, aby sa miniatúra obrázka, ktorý práve zobrazujem, odlišovala od ostatných miniatúr. Usporiadal som sa pomocou ID CSS s názvom „aktuálny“, vďaka ktorému boli obrázky polopriehľadné a k vybranej miniatúre sa pridal tenký červený okraj. V mojom poslednom článku som toto správanie dostal pre pôvodne vybranú miniatúru, ale keď som vybral novú miniatúru, nová miniatúra sa nezmenila a pôvodná miniatúra ponechala vybraný štýl.

Keď používateľ v predchádzajúcej verzii prezentácie klikne na miniatúru, zobrazia sa súvisiace veľké obrázky. Chcem, aby to urobilo, je zmeniť veľký obrázok, nastaviť miniatúru predtým vybratého obrázka, aby sa vrátil k normálu a aby sa táto miniatúra zobrazila so špeciálnym štýlom pre vybratý obrázok. Pretože po kliknutí na miniatúru teraz robím viac vecí, prepnul som z umiestňovania celého kódu do atribútu onClick atribútu img označte pomocou funkcie. JavaScript funkcie zvyčajne ísť do hlava sekcii HTML, aby sa načítali a boli pripravené pri načítaní tela stránky. Môžu byť vložené priamo medzi skript tagy alebo put a súbor a zahrnutý. V prípade krátkych programov alebo keď aktívne kódujem, je ľahšie vložiť kód priamo na stránku ako tu.

Mohol som použiť funkciu pre každú miniatúru, ale pretože všetko, čo sa zmenilo z miniatúry na miniatúru, je názov obrázka a ID miniatúry (a použil som názov obrázka pre ID), napísal som jedinú funkciu, ktorá prevzala id ako argument a použil ho na vytvorenie príslušného názvu obrázka pridaním „.jpg“. Nazval som svoju funkciu displayLarge.

function displayLarge (id) {
// zmena veľkého obrázka
imageName = id + ".jpg";
document.getElementById ( "largeImage") src = imagename.
// nastaví štýl predchádzajúcej miniatúry späť na predvolenú hodnotu
. Document.getElementById ( "prúd") id = oldID;
// poznačte si ID skôr, ako ho zmeníme
oldID = id
// označí miniatúru ako aktuálnu aktuálnym štýlom
document.getElementById (id) .id = "aktuálne";
}

Aby táto funkcia fungovala prvýkrát, musela som uviesť aj počiatočnú definíciu oldID, premennú, ktorú používam na zapamätanie pôvodného ID miniatúry, ktorá je aktuálne vybraná. Celý tento kód ide do hlavovej časti webovej stránky, takže sa načíta pred načítaním stránky.

Nakoniec som zmenil HTML pre miniatúry, aby som zavolal svoju funkciu. HTML pre moju prezentáciu teraz vyzerá takto:











Tu nájdete pracovný príklad tohto kódu.

Video Návody: 04 Prvý JavaScript kód a prvotriedne funkcie() (Apríl 2024).