Events

Fra HTX Arduino
Spring til navigation Spring til søgning

Hvad er et event

Event er et vigtigt bindeled mellem html og JavaScript. For det meste anvendes event i form af attributter i html-tags. Event starter altid med on, som f.eks. onclick=. Efter lighedstegnet kommer JavaScript kommandoen. Har du flere kommandoer som skal udføres, er det en god ide at lægge dem i en funktion, og efterfølgende kalde dem med onclick="etellerandet()"

For eksempel kan vi bruge onClick-eventet på en knap for at angive, at en funktion vil starte, når en bruger klikker på knappen.

Eksempler på events: onclick -> Man klikker og en funktion sker. onmouseover -> Når man fører musen hen over noget starter en function. onchange -> Når der sker en ændring sker der noget.

Der er vist eksempler på forskellige events på w3schools.com[1]

Onclick

En af de meste anvendte attributter er onclick. Denne fortæller browseren at hente/udføre et script når et element klikkes med musen.

<html><head><title>onclick</title> 
</head><body> 
<form name="test" action=""> 
<input size="35" name="retur" readonly><br /> 
<input type="button" value="Seneste opdatering" 
onclick="this.form.retur.value=document.lastModified"> 
</form> 
</body></html>

Her er et eksempel -> Det der sker er når man trykker på knappen vises tid og dato.


Onmouseover

Onmouseover udfører handling når musen føres hen over elementet.

<html><head><title>onmouseover</title> 
</head><body> 
<h1 id="test" 
 onmouseover="this.innerHTML='Læs videre og se hvad de andre event handler anvendes til'" 
 onmouseout="this.innerHTML='Hej og velkommen til JavaScript lektioner'">Hej og velkommen til JavaScript lektioner</h1> 
</body></html> 

Her er et eksempel -> Når du fører musen hen over skriften ændre den sig til en anden tekst. Det er onmouseover som gør at teksten ændres.


Onfocus

Handling udføres når der sættes fokus på elementet - altså når man klikker på objektet på siden. Dette kan F.eks. være en lille tekst boks som man klikker på med musen og så sker handlingen. Dette gør den fordi onfocus er i brug og dermed er tekstboksen i "fokus".

<html><head><title>onfocus</title> 
</head><body> 
<form name="test" action=""> 
<input size="35" onfocus="this.value='Her er en tekst'"><br /> 
<input size="35" onfocus="this.value='Dette er en anden tekst'"><br /> 
<input size="35" onfocus="this.value='En sidste tekst'"><br /> 
</form> 
</body></html> 

Her er et eksempel -> når du klikker på boksene kommer der forskellige tekster fordi de er i fokus.

Andre Events

Keyboard event er den event der udløses, når der trykkes på en tast. Der udløses faktisk hele 3 events.

Hele det område der hedder Tid i javaScript er også eventdrevet

En samlet oversigt over events kan ses på w3schools[2]

Referencer

  1. http://www.w3schools.com/js/js_htmldom_events.asp w3schools javaScript event beskrivelse
  2. http://www.w3schools.com/jsref/dom_obj_event.asp w3schools domain object model events
Programmering
Programmeringsbegreber Initialisering - Sekvens - Algoritme - Hexadecimal - Det Binære Talsystem - HEX-fil - ASCII - Interrupt - Events - Styresystem - Autocomplete - Selvstudie Programmering - Hour Of Code - Stepwise Improvement - Syntaks - Prog-links - Microcontroller - ChatGPT
Grundlæggende C C float - C double - C-løkker - Datatyper - Konstanter - Regnearter - Funktioner - Return - Returværdi - Rekursion - Semikolon
Variabel Typer boolean - byte - int - unsigned int - word - long - unsigned long - short - float - double - char - unsigned char - string - char array - String - object - Array - 2-dimensionelt Array - void
Program-klassikere Polling - State-machine - Trykknap - Forkant - Bagkant - Prel
Arduino Arduino til Programmering - C til Arduino - Programmering Shield - Arduino PC-software - Arduino Udviklingsmiljø - Arduino Pin Library - Funktion - Arduino Seriel - Arduino String - Arduino String Split - Arduino StateChangeDetection - setup() - loop() - Compilerdirektiver - Asynkron kommunikation - millis() - micros() - Scratch for Arduino - Send fra Arduino til Excel - [[]] - [[]]
Processing Grafik i Processing‎ - Keyboard i Processing - Mus i Processing‎ - Tid i Processing‎ - Draw() - Setup() - Tal Input til Processing - Syntaksfarvning - Kommunikation fra Arduino til Processing - Kommunikation fra Processing til Arduino
javaScript Javascript input‎ - Javascript output‎ - Javascript strukturer‎ - Javascript syntaks‎ - Tid i javaScript - Objekt‎ - AJAX
Serverprogrammering PHP - MySQL - Task Scheduler - WeMOS
PIC JAL - [[]]
Scratch for Arduino S4A Installation - S4A programmering - S4A undervisningsforløb - S4A begrænsninger
Program Dokumentation Algoritme - Flowchart - Pseudokode - Datastruktur - Dataabstraktion - Pulsplaner - Program-kommentar - Teori - Test - UML


Webcode
JavaScript for - while - do while - for in - løkke - løkker i løkker - if - if-else - else-if - Conditional - Switch - break - continue - Funktion - Return - Returværdi - Rekursion - Sekvens - Javascript strukturer
js Input Checkbox - Dropdown - Form - Input button - Input filter - Input password - Input text - Textarea - submit knap - Option - Prompt - Confirm - Radio button - Select - Input-Tag - Keyboard event
js Output Alert - Document.write - Frameset output - Objekt egenskaber - Objekt output - Text-felt til output - Vindue output - Billed egenskaber - Canvas
js Syntaks Arrays - Betingelse - Identifyer - Variabel - Variabel scope - Type - Sekvens
js Objekt Canvas - Billed egenskaber - Egne objekter - Events - HTML-objekter - Keyboard event - Event-handler - Browser detektering - Preload images - Document Object Model
Tid i JavaScript Date objektet - setTimeout - setInterval
PHP Header - Include