Wednesday, January 1, 2020
FREE JAVASCRIPT COURSE- Lesson 7
Friends hope you are doing fine, today I will be discussing a very important feature in
JavaScript and that feature is Popup Box. Note that this is our seventh lesson ( these are the previous lessons on JavaScript: 1, 2, 3, 4, 5, 6. ). Please check them out in case you missed any of them. If not then let's continue!
The beauty of scripting (coding) in JavaScript is not complete without some sorts of things popping up on the screen.
In JavaScript, there are basically three most common types of popup boxes. These popup boxes tend to mandate the users of a website or web app to take a certain action(s).
Let’s look at each of the popup boxes critically and see how they work.
1. 1. Alert
Box
Web
designers and programmers use Alert Box whenever they to be
sure that a certain information or message get through to the user.
This
means that whenever an alert box popup on a web page, the user must click “Ok” in
order to proceed.
Consider
these two examples below
Open your
text editor and write the following lines of codes
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"></head> <body> <script> alert("Happy New Year");</script> </body></html>
Example two
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"></head> <body> <button type="button" onclick="alert('Happy New Year');">ClickMe Display</button> </body> </html>
2. Prompt
Box
Another
type of popup box widely used by coders in the digital space is prompt
box. The primary function of a prompt box is that it triggers the user
to make a choice before visiting a web page. For instance, when a popup box
appears on a page, the user will have input some value, and afterward, to decide
whether to click “OK” or “CANCEL” before entering a page.
Example
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"></head> <body> <script>var user = prompt("Please enter your name");alert(user);</script> </body></html>
3. Confirm
Box
The
third and the last type of JavaScript popup boxes we gonna be learning in this lesson is known as the confirm box. Just as the name implies,
confirm box is often used to make the users or website visitors verify, accept
or confirm something on the website before proceeding.
Whenever
this confirm box appears on the screen, the user must click either “OK” or
“CANCEL” before he or she can proceed.
Example
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"></head> <body> <script>var result = confirm("Do you really want to proceed with the payment?");if (result == true) { alert("Thanks for your patronage");}else { alert("Look for cheaper products, Thanks!");} </script> </body></html>
Final Words
Please be very careful about how you use all these pop-up boxes because they can be very dangerous on a website.
For instance, your visitors may not be able to access or move to any other part of your website until the box is closed.
Do you have any questions? Please ask them in the comment box below, I will be glad to help!
See you at our next lesson!
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment