Scribd
Upload
19 views

4QL1

The document discusses JavaScript events, which are actions that trigger functions on web pages, such as mouse clicks and keyboard strokes. It provides a table of various event triggers and examples of how to use them, including onload, onsubmit, and mouse events. Additionally, it explains the use of popup boxes in JavaScript, including alert, prompt, and confirm boxes, with sample scripts for each type.

Uploaded by

sxej.apol
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

4QL1

The document discusses JavaScript events, which are actions that trigger functions on web pages, such as mouse clicks and keyboard strokes. It provides a table of various event triggers and examples of how to use them, including onload, onsubmit, and mouse events. Additionally, it explains the use of popup boxes in JavaScript, including alert, prompt, and confirm boxes, with sample scripts for each type.

Uploaded by

sxej.apol
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

TLE/ICT 9

Fourth Quarter
Lesson 1
Events
What are Events?
It is possible to create dynamic Web pages using JS since it
can detect events. Events are actions that are triggered
either by mouse click, function calls, keyboard strokes,
loading of images, submitting an HTML form, etc.

Events are usually used in connection with functions.


Functions will not work without a force that will trigger it.
Events
What are Events?

A function does nothing unless it is called. This is where


the event handlers comes into play. You can have a dozen
of the cool JS functions on your page, but without event
handlers to call them at the most appropriate time, they
remain just a block of text.
Using event handlers, you can respond to an event on your
page.
Table of Event Triggers
Attribute To trigger the event
onabort The loading of an event is interrupted.
onblur An element loses focus.
onchange The user changes the content of a field.
onclick Mouse click of an object.
ondblclick Double mouse click of an object.
onerror An error occurs when loading a document or
image
onfocus An element gets focus.
Table of Event Triggers
Attribute To trigger the event
onkeydown A keyboard key is pressed.
onkeypress A keyboard key is held down.
onkeyup A keyboard key is released.
onload A page or image is finished loading.
onmousedown A mouse button is pressed.
onmousemove The mouse is moved.
onmouseout The mouse is moved off an element.
Table of Event Triggers
Attribute To trigger the event
onmouseover The mouse is moved over an element.
onmouseup A mouse button is released.
onreset The reset button is clicked.
onresize A window or frame is resized.
onselect Text is selected.
onsubmit The submit button is clicked.
onunload The user exits the page.
More event triggers can be used, you can search the net.
Events
• onload and onunload
The onload and onunload events are triggered when a
user enters or exits a web page. The onload event can
be used to check the web browser version type & version.
The onload and onunload events can also be used to
store and retrieve cookies. A cookie is a message given
to a web browser. The browser stores the information in a
text file and whenever the browser requests a page from
the server, the message is sent back to the server.
Events

• onload and onunload


Example: a website that will let you enter a username and
password. That username and password can be stored in
a cookie, so that the next time you visit the site, you don’t
need to login again. The web page can just retrieve the
details from the cookie.
Events

• onfocus, onblur, onchange


These attributes ae often used with the validation of fields
in a form. Example: a user selects a row in a table,
through JS, the whole row can be highlighted to give
emphasis to the selected row.
Events
• onsubmit
This attribute is used to validate all fields in the form
before submitting it.
Example:
<form method=“post” action=“trial.html” onsubmit=“returncheckFields()”>

This is how the onsubmit attribute is usually written. When the submit
button is clicked, it will call a function checkFields(). The function will
check all the fields in the form. If everything is cleared, it will return a
‘true’ so the form will be submitted; otherwise, it will return a ‘false’ so
the form will be cancelled.
Events

• onmouseover and onmouseout


These attributes are usually used for animation purposes.
Example: a button or link in a web page. When the mouse
is over it, it will display a different image, however, when
you remove the mouse, the button is set back to what it
was.
Events

• onclick
This is usually used to connect you to another webpage or
to trigger an event call. Example: a button in a webpage.
If that button is pressed, it will trigger a function that will
call a pop-up button.
• onclick
This is usually used to connect you to another webpage or
to trigger an event call. Example: a button in a webpage.
If that button is pressed, it will trigger a function that will
call a pop-up button.
Popup Boxes
• Popup boxes are those windows that pop-out of the
screen.
• They could be before a page is fully loaded, effect of an
event on a page or before leaving a page.
• JavaScript has three kinds of popup boxes: alert box,
user-input prompt box and confirm box.
• These popup boxes can be useful in warning the user,
gathering user input or simply to verify something.
Alert Box
• Usually used when you want to make sure that the
user reads your message such as a warning or a
greeting.

Syntax: alert(“message”);
Try this sample script
<!DOCTYPE html>
<html>
<head><script type=“text/javascript”>
function show_alert()
{alert (“WARNING! WARNING!”);}
</script></head>
<body>
<input type=“button” onclick=“show_alert()”
value=“show alert box”/>
</body>
</html>
User-Input Prompt Box
• This is usually used when you want data to be
prompted first before the user can enter a page. The
user will have to choose either “ok” or “cancel” to
continue. If the user chooses “ok”, the prompt box
will return the encoded value; else, it will return null.

Syntax: prompt(“message”,”defaultvalue”);
Try this sample script When the button is
clicked, a prompt box will
be shown asking for the
user input. The user
<!DOCTYPE html> input will be saved on the
<html> variable name. The user
input will then be
<head><script type=“text/javascript”> validated.

function show_prompt()
{var name=prompt(“Please enter your name:”);
if (name!=null && name!=“”)
{document.write(“Welcome ” +name + ”! Please come in!”);}}
</script>
</head>
<body>
<input type=“button” onclick=“show_prompt()” value=“Click
here to begin”/)
</body>
</html>
Confirm Box
• This is usually used when you want the user to verify
or accept something. The user will have to choose
either “ok” or “cancel”. If “ok” was chosen, the
confirm box will return true; else, it will return false.

Syntax: confirm(“message”);
Try this sample script When the button is clicked, a
<!DOCTYPE html> confirmation box will be shown
asking for confirmation if it will
<html> proceed. The choice will be
saved on the variable ans. The
<head><script type=“text/javascript”> choice will then be used to
function show_confirm() activate the proper block of
code..
{var ans=confirm(“Do you want to proceed?”);
if (ans==true)
{document.write(“You have entered Stage 2”);}
else{document.write(“You will remain at Stage 1”);}}
</script>
</head>
<body>
<input type=“button” onclick=“show_confirm()” value=“Click here
to begin”/)
</body>
</html>
Fourth Quarter e-Portfolio

1. The previous contents must be present.


2. Optional – 3rd quarter
3. ALL ACTIVITIES – COLLAB
4. 4th quarter lessons - application

You might also like