Scribd
Upload
78 views5 pages

Q3 Computer 10 Week 5

The document discusses different types of popup boxes in JavaScript that can be used to interact with users, including alert boxes, confirm boxes, and prompt boxes. It provides the syntax and sample code to create each type of box. Alert boxes display a short message to users, confirm boxes allow users to confirm or cancel an action, and prompt boxes prompt users to enter information. The document also covers JavaScript functions, how to define them, and sample code to call functions with parameters and return values.

Uploaded by

Andrhey Bagonbon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
78 views5 pages

Q3 Computer 10 Week 5

The document discusses different types of popup boxes in JavaScript that can be used to interact with users, including alert boxes, confirm boxes, and prompt boxes. It provides the syntax and sample code to create each type of box. Alert boxes display a short message to users, confirm boxes allow users to confirm or cancel an action, and prompt boxes prompt users to enter information. The document also covers JavaScript functions, how to define them, and sample code to call functions with parameters and return values.

Uploaded by

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

Computer 10

3RD Quarter

Lesson 5:
PREPARING AND INTERPRETING TECHNICAL DRAWING

Learning Competencies
 Create a program with proper logical flow using
Quarter 3 control structures
WEEK 5  Show and perform a process accurately by
interpreting its illustration or drawing.

Dialog Boxes in JavaScript

Introduction

JavaScript provides various popup boxes to notify, warn, or to get input


from the user. Popup boxes prevent the user from accessing other aspects of a
program until the popup is closed, so they should not be overused.

Learning Objectives/Outcomes:

At the end of the lesson, you will be able to:

1. Create dialogue /pop up boxes using JavaScript


2. Apply JavaScript properties

Lesson Proper:

In JavaScript you can create dialog boxes or popups to interact with the
user. You can either use them to notify a user or to receive some kind of user
input before proceeding.

Three different types of dialog boxes

 Alert
 Confirm
 Prompt

ALERT BOX

COMPUTER 10 Page 1
An alert dialog box is the most simple dialog box. It enables you to display a
short message to the user. It also includes OK button, and the user has to click
this OK button to continue.

An alert dialog box is mostly used to give a warning message to the users.
For example, if one input field requires to enter some text but the user does not
provide any input, then as a part of validation, you can use an alert box to give
a warning message.

You can create alert dialog boxes with the alert() method.

Syntax:

alert("message");

sample code:

<script>

alert("Hello!");

</script>

CONFIRM BOXES

A confirm dialog box allows user to confirm or cancel an action. A confirm


dialog looks similar to an alert dialog but it includes a Cancel button along with
the OK button.

You can create confirm dialog boxes with the confirm() method.

Syntax:

confirm("message");

sample code:

<script>

confirm("Do you want to proceed?");

</script>

PROMPT BOX

The prompt dialog box is used to prompt the user to enter


information. A prompt dialog box includes a text input field, an OK and a
Cancel button.

You can create prompt dialog boxes with the prompt() method.

COMPUTER 10 Page 2
This method returns the text entered in the input field when the user
clicks the OK button, and null if user clicks the Cancel button. If the
user clicks OK button without entering any text, an empty string is
returned.

Syntax:

prompt("message");

sample code:

<script>

prompt("Enter your age:");

</script>

JAVASCRIPT FUNCTIONS

JavaScript provides functions similar to most of the scripting and


programming languages. In JavaScript, a function allows you to define a block
of code, give it a name and then execute it as many times as you want.

A JavaScript function can be defined using function keyword.

Rules in creating and naming functions

 Always start with keyword function


 Function name should start with a letter. The rest can be numbers or
word, dashes and underscore
 Blank space is not allowed in naming functions
 Function names are case sensitive. myFunction() is different from
myfunction().

Syntax:

function <function-name>(parameter)
{
// code to be executed
}
<function-name>();

Sample code:

<script>
function greet()
{
alert("Welcome to JavaScript Functions");
}
</script>
<body>
<button onclick = "greet()"> click me </button>
</body>
Analysis:

COMPUTER 10 Page 3
 function greet() is a user defined function, or is a customized function
created by the programmer
 alert(“Welcome to JavaScript Functions”) is a statement that executes
whenever function greet() is called
 <button onClick =”greet”> calls the function greet() and therefore
executes the alert box.

Sample code 2:

<script>

function displayInfo()

var Age = prompt("Enter your age: "," Age here");

document.write("You are " + Age + "years old");

</script>

<body>

<p> Click the button to display information</p>

<button onclick = "displayInfo()"> Click me </button>

</body>

TO RUN AND TEST YOUR JAVASCRIPT CODE, VISIT THIS SITE

https://js.do/
NAME: __________________________________

COMPUTER 10 Page 4
SECTION: _______________________________

EXERCISES/ACTIVITIES:

Activity 1: What is the output of the code below?. Paste your answer on
the box

<script>

function ShowMessage(firstName, lastName) {

alert("Hello " + firstName + " " + lastName);

ShowMessage("Steve", "Jobs");

ShowMessage("Bill", "Gates");

ShowMessage(100, 200);

</script>

It’s now time to


evaluate your
learning.

Identification.

_______1. A pop up box that is used if the user needs to verify or accept
something
_______2. Used to notify or give warning to the user such as incomplete
input or leaving some fields or text box in a form.
_______3. Sets of codes that do a certain task.
_______4. Used if the user needs to verify or accept something.
_______5. Used if there is a need to get input from the user.

COMPUTER 10 Page 5

You might also like