Transforming
Background Color with HTML5 events.
Hola guys..
Today’s post
will be about HTML5 events. Do you know what is html5 events? I’ll explain it
to you. Html5 (hyper text markup language) is the latest version of standard markup language for creating Web pages, and it describes the structure of Web pages
using markup. So, HTML5 events can be
something the browser does, or something a user does. Let’s begin..
First, open any
kind of text editor, I’m using notepad++, and save it as html file. You can create
your own title and background color as you like. For example, see the picture
below.
Use the tag
<title> to write the title of the page, and close it with </>
(applies for all the tag in html). To create background color on the body of
the page, use tag <body bgcolor=(the color)>. You can simply change it to
red or blue or any color you want, but excluding the # and “” sign. Inside the
body tag, you can put any text using the <text> tag, or <p> paragraph
tag, or without tags.
Now, let’s apply
one html event first.
We’ll start with the onkeydown event
attributes. Onkeydown event attributes will fires
when a user is pressing a key. So, if we type something, the font and background color will change.
We create a
textbox as the place to type, using the <input type=”text” id=”text”> tag
with the id. Then, we use the document.getElementById to get the element with
id “text”. The element with the id “text”
will be used and will be applied together with event attribute onkeydown, and this event attribute will
change the format of the element id=”text” with the format in function test1. In
function text1, it’s written style properties this.style.background and this.style.color.
It is used to change the font and background color before, and change it with
the one that is inside the style properties. In simple way, the element background
will be replaced with background in function text1 by the time user press the
keyboard (onkeydown). So when we
press the keyboard, the font color will become white and the background color
will be change into pink.
Basic Step:
document.getElementById(“text”).onkeydown
= text1;
function text1
() {
this.style.background = 'pink';
this.style.color = 'white'; }
----------------------------------------------------------------
Let’s apply
the second event attribute, which is onkeyup
attributes. It still has the connection with the previous event attribute. Onkeyup
attributes will fires when user releases a key. It is the opposite type with
the previous event attribute, but has the same usage which is to change the font
and background color. Step to create it is also the same, but since that the
text box has already exist, then we can just continue to the next step. Create
the document.getElementById using the same id “text”, but change the event
attributes from onkeydown to onkeyup. Then create new function with
same format like before, using this.style.background and this.style.color, and change
the font color to black and the background color to grey, but you can also
change it to different color. So when we press a key, the font color will be
white and the background color will be pink, however when we releases the key
the font color will be black and the background color will be black.
The display
when user presses a key.
The display
when user releases key.
Third Event
Attributes. In this stage, we will use two event attributes and function, with
one id, just like the two previous attributes (onkeydown and onkeyup). I will
explain directly two event attributes at once not separatedly. The two
attributes is onmousemove and onmouseout. Onmousemove attribute will
fires when the mouse pointer is moving while it is
over an element, meanwhile onmouseout attribute will when
the mouse pointer moves out of an element. Same step applies like
before, but in this events does not use the textbox, only using the document.getElementById
and creating a function. After that, make the text with the id.
The display
when Pointer Moving in an element
The display
when Pointer Moving out of an element
The fourth attribute
is ondblclick. Ondblclick will fires
if a mouse double click on an element. It has the same basic step with previous
(onkeydown), we just have to make new id, new function and new element
(text/button).
The button
font and background color has change after user click it.
The last event
attributes that I’m going to explain to you guys is ondblclick. This event attribute is just like the other event
attribute. It fires when user double click an element. For this event
attribute, I am going to change the background of a canvas. First, make the
blank canvas with the <canvas> tag (don’t forget about the id) and
declare the variable to create a rectangle inside the canvas. Then, continue to
the basic step like in the previous attribute. Use the getElementById, create
the function and the event attribute. Look at the picture below.
That is the last
event attribute that I’ve already explain, and here’s the whole code of the five
event attributes.
<html>
<head>
<title>
Transform Background Color with HTML5 events </title>
</head>
<body
bgcolor="#ff6363">
<text>
<center><font face='Segoe Print' size=5px> Follow Instruction Below
to See Different Background Color </font></center></text>
<text> <font
face='Segoe Script'> Change Color When Type Something : </font></text> 
 
<input
type="text" size="30" id="text"> <br />
<text>
<font face='Segoe Script'> Move Mouse Pointer to the Text :
</font></text>    
<font
face='comic sans ms' id="pointer"> WARNING! </font> <br
/> <br />
<text>
<font face='Segoe Script'> Click The Button : </font></text>
 
<input
type="button" value="Click" id="klik"> <br
/><br />
<canvas
id="canvas" width="300" height="150"
style="border:1px solid #000000;"></canvas>
<script>
var cont =
document.getElementById("canvas");
var context =
cont.getContext("2d");
context.fillStyle
= "#FF0000";
context.fillRect(150,
25, 150, 100);
document.getElementById("canvas").ondblclick
= dble;
document.getElementById("klik").onclick
= klik;
document.getElementById("text").onkeydown
= text1;
document.getElementById("text").onkeyup
= text2;
document.getElementById("pointer").onmousemove
= pmove;
document.getElementById("pointer").onmouseout
= pout;
function
klik() {
this.style.background = 'black';
this.style.color = 'white';}
function text1
() {
this.style.background = 'pink';
this.style.color = 'white'; }
function
text2() {
this.style.background = 'grey';
this.style.color = 'black';}
function
pout() {
this.style.background = 'black';
this.style.color = 'white';}
function
pmove() {
this.style.background = 'red';
this.style.color = 'white';}
function
dble() {
this.style.background = 'white'}
</script>
</body>
</html>
This would be
the display
That’s all
from me and thank you for visiting..
