- These attributes are 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 emphasize the selected row.
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.
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.
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.
POP UP 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”);
SAMPLE:
Alert Messages
Click on the "x" symbol to close the alert message.
×
Danger! Indicates a dangerous or potentially negative action.
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”);
SAMPLE:
RESULTS
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.
will return the encoded value; else, it will return null.
Syntax:confirm(“message”);
SAMPLE:
RESULTS
LESSON 2
Conditions, Controls, and Loops
- Conditional Statements
In JS, conditional statements perform different actions for
different decisions.
If Statement
- The “If Statement” is used to check or verify a condition and execute a set of statements only if the condition is true. This
should be referred as a statement and not as a function.
The If statement is one of the most popular and most important
conditional constructs in JS and in many other programming
languages. This conditional statement construct evaluates a
condition to True or False.
It then runs a specific code depending
on the result of this evaluation.
SAMPLE:
RESULTS
Nested if statement
- Nested If statement is like an “if statement” with another “if statement” just like a parent and a child. Nested if is used when
“child” condition is only checked when the parent condition is true.
For example, in purchasing a car, first the car color is verified if it
looks good, only if it satisfies the parent condition which is the price
and goes on to a more superior condition
SAMPLE:
RESULTS
IF ELSE STATEMENT
- If-Else statement has also the same format as “if statement”. The only thing, is that an Else part is added to an If statement. So, if the
condition satisfies the statement inside an If statement, part of the
code will be executed. And Else statement inside Else part only will
be executed. The If-Else statement is similar to the If statement, except that we
are giving an alternative instruction in case the arguments isn’t
TRUE.
SAMPLE:
RESULTS
If Else If Statement
- We don’t always evaluate just one condition. Sometimes more than one or multiple conditions must be evaluated.
This is possible with the If-Else-If statement. The name refers to an
if statement that depends on another if statement.
When you use the If Else If statement, you are simply telling the
browser that is something is True, then do something else, if the
other thing is True, then do something else, and so on.
SAMPLE:
RESULTS
SWITCH STATEMENT
- In the previous example, we used the If Else If statement to test multiple conditions. What if there are a lot of options? The If Else If
statement can be tedious. To address this issue, JS offers an easier
way to implement multiple conditions, that is through the Switch
statement. Switch statement is used when a condition may have multiple results
and a different set of operation is done based on each result or
input.
SAMPLE:
RESULTS
LESSON 3
Conditions, Controls, and Loops
- A function is a self-contained piece of code that performs a
particular “function” when it is called and it is also a set of
statement or blocks of codes combined together for a particular
use, also known as method. It is usually used so that you will not
have to retype your codes again when you need them, all you have
to do is to call it and execute it.
- A function can be called anywhere within the page or even from an
external JS file. Functions can be defined anywhere in the head
section or body section; however, it is ideal to put the function in
the head section so that you are assured that it is loaded properly.
FUNCTION
JS functions are defined using the keyword “function” followed by its name and then open and close parentheses. This is known as
an argument.
Argument provides additional information needed by the function
to process.
SYNTAX:
function
functionname(var1,var2,var3…,varN)
{ //Place your codes here }
functionname is the name of the function. var1, var2, var3...,VarN are the parameters. These are the values that are passed on to the function whenever it is triggered. Open and close braces are required in functions.
- A function without parameters should include the open and close parentheses
() after the name of the function and remember the function must be in
lowercase, otherwise, a JS error will be called.
- Remember document.write(), add() and check()? All of these are functions:
document.write() – a predefined function add() and check() – user-defined functions
The return Statement
- A function may require specifying a resulting output, for example that of a computation, the return statement will be used to give that
output.
- Therefore, functions that give out a value must use the
return statement.
SAMPLE:
RESULTS
LESSON 4
LOOPS
There are times when you want a block of code repeated over and over again
until a certain condition is satisfied. This can be done by creating a loop. A
loop is a repetitive cycle of a block of code until the condition is met.
In JS, there are a variety of loops:
For loop – it loops through a block of code within a specified number of
times.
While loop – It loops through a block of code until the condition is
satisfied.
Do-while loop – It is like while loop; however, it will execute the set of
codes at least one.
For-in loop – It loops through the elements of an array.
FOR LOOP
SAMPLE:
WHILE LOOP
SAMPLE:
DO-WHILE LOOP
SAMPLE:
FOR-IN LOOP
SAMPLE:
BREAK EXAMPLE
SAMPLE:
CONTINUE EXAMPLE
SAMPLE:
