HTML: sündmused ja elementide vormid

Interneti-turundus

Sisukord:

HTML: sündmused ja elementide vormid
HTML: sündmused ja elementide vormid
Anonim

Veebiressursi nõuetekohane arendamine, elementide mugav paigutamine lehele, professionaalse disaineri töö kasutamine, kogenud projektikoordinaatori teadmised ja rikkalik kogemus Interneti-programmeerimisel – see kõik on väga oluline. Saidi äratamine intelligentse esitlustehnoloogia, dünaamilise sündmustesüsteemi ja mugava dialoogi abil on mitu suurusjärku olulisem.

Põhisündmus on külastaja saabumine. Kui külastaja jääb saidile, saab soovitud tulemuse ja toob kaasa kümmekond kolleegi, sõpra või juhuslikku tuttavat - sait töötab hästi, "vastutab oma sõnade eest" ja teeb vajalikud toimingud.

Sündmuste spekter ja tähendus

HTML-üritused on hästi organiseeritud kontseptsioon. Leheelemendid võivad sündmusi käivitada. Arendajal on mehhanism sündmuste levitamiseks elementide pesastamise teel.

Põhisündmusi pole palju, kuid nende kasutamiseks ja kombineerimiseks on palju võimalusi. Tegelikud ülesanded nõuavad ainulaadsete sündmuste töötlemise algoritmide moodustamist.

Põhilised HTML-elemendi sündmused
Põhilised HTML-elemendi sündmused

Selles tabelis on märgitud olulisemad sündmused. Konkreetses rakenduses võivad olla asjakohased täiesti erinevad, näiteks brauserist: onafterprint, onbeforeonload, onmessage jne. Vormi jaoks on olemas: oncontextmenu, onforminput ja oninvalid. Sündmusi on palju, kuid saidi taaselustamiseks piisab tabelis esile tõstetud sündmustest.

Kõiki sündmusi ei tohiks kasutada. Näiteks võite võtta aega ja veenduda, et HTML onclick sündmusest piisab: ondblclicki kasutamine pole otstarbekas. Ondblclick näeb eriti kummaline välja nutitelefonides ja tahvelarvutites. Nagu alati, on lihtsus edu võti. Teabe esitamisel ja sündmuste käsitlemisel on see reegel ülim alt tähtis.

Saidi ja selle sündmuste loogika

Saidi puhul on peamine töö loogika. Mis tahes populaarse sisuhaldussüsteemi (CMS) kasutamine piirab arendajat, kuid kiirendab arendusprotsessi. Oma unikaalset dialoogi saab luua külastajaga ainult “käsitööna valminud” saidil, st. nullist tehtud, kui loote oma saidikontseptsiooni, mis põhineb teie enda põhiarengutel, mitte kolmandate osapoolte mallidel, mustritel, raamistikel ja teegidel:

  • väljakutse on alati ainulaadne ja tõeline;
  • disain ja teabe esitus – ainulaadne stiil;
  • otsustusprotsess (dialoog) on dünaamiline "intelligentne" suhtlusprotsess.

Iga, isegi parim CMS, surub alati oma tööstiili saidi arendajale ja omanikule peale. See ei puuduta adaptiivset dialoogi konkreetsegakülastaja poolt (dialoog kohandub külastajaga ise), vaid saidi kasutamise kohta nii, nagu see on kombeks konkreetses CMS-i "arusaamades" teatud ülesannete valdkonnas.

CMS: sündmused ja piirangud
CMS: sündmused ja piirangud

Näiteks näevad veebipõhised ostusaidid välja samasugused, kui need on tehtud mõne populaarse CMS-iga, ja ükski neist ei aita teil teha teadlikku valikut külmiku, pesumasina ja veelgi enam arvuti vahel.. Otsingumootorid ei anna kunagi "mõistlikke" tulemusi. Mõlemal juhul peab külastaja soovitu saamiseks ise mõtlema ja ise otsuseid langetama.

Lihtne vorm: sündmuste käsitlemise näide

Saidi ellu äratamiseks piisab, kui kasutada loetletud HTML-i sündmusi. Selles näites kuvatakse tavaline kasutaja saidile sisselogimise vorm. See kasutab sisenemiseks ja väljumiseks HTML-i valikuelementi ja sündmusi div-elementidel.

Sündmuse kasutamise näide
Sündmuse kasutamise näide

Tavaliselt ei kasutata sisselogimisvormis valijat tööteemade loendist, kuid mõnel juhul on mugav kasutada kasutajate liigitamist kategooriate ja juurdepääsuõiguste järgi. Näiteks võib see olla mõttekas, kui külastaja oskuste taset kujundab saidi asetus, mis annab külastajale jõudu.

Elementide omadused

Sündmusi saab määrata peaaegu igale elemendile ja kui see pole võimalik, saate lihts alt juhtida hiire liikumist üle ekraani. Ja korraldage vajalikud sündmused.

Sisendseadme juhtimine
Sisendseadme juhtimine

Näiteks on ekraanil linnakaart. Külastaja liigutab kursorit ning info selle kohta, milline tänav, mis majanumber, mis objekt ja nende omadused ilmuvad kohe eraldi aknasse.

Näiteks sündmused kaardil
Näiteks sündmused kaardil

Tuleb märkida, et mõned elemendid ei tohiks olla sündmuste käitlejatega varustatud. Eelkõige ei ole ül altoodud näites käitleja valitud külge riputamine õige. Kuigi kui seda tehakse teadlikult, peaks programmeerijal olema ettekujutus, mida ta teeb.

Sama võib öelda ka HTML-vormingus nuppude sündmuste kohta. Vorm ise põhjustab sündmuse käsitlemise. Selle standardtöötluse täiendamine mõne teise töötlejaga ei ole paljutõotav.

Katkesta "a" sildi töötlemine pole samuti eriti huvitav. Link ise moodustab ülemineku ja põhjustab sündmuse käsitlemise, täiendav töötleja võib tekitada ebaselgust või ootamatut käitumist.

Teabe sisestus

Sündmuste rakendamine vormielementidele on kõige nõudlikum. HTML-i sisestusmärgend – sündmused, mis võimaldavad kontrollida külastaja käitumist lennult. Iga andmesisestusväli saab jälgida sündmust: "onblur" - fookuse kaotus - ja teha toiminguid andmete ümberarvutamisega kogu vormi ulatuses, saata teavet serverisse või kinnitada ja tagastada fookus õigeks sisestamiseks "paigale".

Sündmus: sisendi fookus
Sündmus: sisendi fookus

Fookuse seadmine "onfocus" on samuti huvitav sündmus: saate pakkuda külastajale vaikeväärtust või arvutada fookuse saanud välja väärtuse teiste väljade sisu põhjal.

Määra töötlejad

JavaScript võimaldab arendajal määrata sündmuste käitlejad käigu pe alt. Üldreeglina, nagu on näidatud ül altoodud näites, saab sündmuste töötleja määrata HTML-i elemendis - JavaScripti funktsioonis.

AJAX-mehhanismi kaudu saate sündmuste töötlemise serverisse ümber suunata. Tegelikult saab arendaja kontrollida külastaja käitumist viimase töö ajal, laadides vastav alt vajadusele vajalikku teavet.

Hiire liikumise või klaviatuuri sündmused võivad saata serverile päringuid ja muuta leheelemente. DOM-i leheelementide puu ei ole dogma ega ka konstruktsioon, mis moodustatakse HTML-lehe algsel laadimisel. Iga HTML-märgendite sündmusekäsitleja võib põhjustada märgendite endi muutumise. See on täiesti tavaline toiming.

Dünaamikas käsitlejate määramine
Dünaamikas käsitlejate määramine

Selles näites määratakse töötlejad skripti täitmise ajal ja kui neid enam ei vajata, siis need eemaldatakse.

JavaScript võimaldab teil luua mitte ainult sündmuste käitlejaid, vaid ka DOM-elemente. Sel juhul tekib ainult üks probleem: arendaja peab esindama saidi tööd dünaamikas. See on piisav alt raske. Ideaalis on hea HTML-leht üksainus silt, näiteks "Tere", kuigi praktikas võib selle tere olla varustatud veebiressursi, domeeni või ülesande semantikaga.

Külastaja tuli – ja sait otsustas sisu üle

Niipea, kui külastaja saidile tuleb, hakkab viimane tema jaoks kujunema. See on ideaalne variant. Lihtne näide: otsingumootor. Kui külastaja on siin juba käinud ja teda saab unikaalselt tuvastada, oleks suurepärane lahendus koheselt kuvada mitte saidi standardleht, vaid versioon, milles külastaja eelmise seansi lõpetas.

Külastaja huvid=saidi sisu
Külastaja huvid=saidi sisu

HTML-sündmused ja võimalus töötada küpsistega annavad arendajale võimaluse külastajat meeles pidada ja alati sobitada sellega, mida ta võiks teha. Lisaks mälule võimaldavad sündmused korraldada "tagasi": toimingute tagasivõtmine on iga ressursi oluline lisa.

HTML-standardil pole mälu, kuid seda saab sündmuste ja AJAX-mehhanismi abil hõlpsasti jäljendada.

Tööloogika prioriteet

Ilusa ja kaasaegse veebisaidi tegemine pole probleem. Populaarse CMS-i kasutamisel on see üldiselt 15-20 minuti küsimus. Siiski on vahe kohe loodud saidil ja veebiressursil, mis võttis kuu, kolm või isegi aasta tööd.

Saidi mälu ja dünaamika
Saidi mälu ja dünaamika

Klient tahab alati kõike korraga, aga kõik korraga on ainult informatsioon ja disain. Sellest ei piisa klientide klientide tähelepanu dünaamiliseks köitmiseks. Saidi loogika – külastaja huve arvestades keskendusid HTML-i sündmused mitte lehe siltide serveerimisele, vaid kliendi huvide ja soovide väljaselgitamisele.

Kliendi nägemise järgi tundmine ja tema mõtete käigu äraarvamine on hea strateegia kvaliteetse veebiressursi loomiseks.

Populaarne teema