Click image above to go to web site.
Resources: CodePen
There are a few concepts that you have to always be aware of when writing JavaScript code:
<body> <h1>JavaScript Vital Few</h1> </body>
<script>
alert("Hello, world");
</script>
</head>
There are two major ways to write text to a page.
The first way to write text DIRECTLY to a page is to use a write() method:
// alert("Hello, World");
<body>
<script>
document.write("This is computer generated text");
</script>
</body>
You can write text INDIRECTLY to a page. While using the write() method is a COMMON practice, it is not the BEST practice. It is better to use innerHTML property to write text to an existing element whether it is empty or not:
<h1 id="JS_heading">JavaScript Vital Few</h1>
<h1 id="JS_heading">JavaScript Vital Few</h1>
<script>
document.getElementById("JS_heading").innerHTML = "JavaScript is Awesome!!!";
</script>
<script>
document.getElementById("JS_heading").innerHTML = "JavaScript is Awesome!!!";
</script>
<h1 id="JS_heading">JavaScript Vital Few</h1>
<h1 id="JS_heading">JavaScript Vital Few</h1>
<script>
document.getElementById("JS_heading").innerHTML = "JavaScript is Awesome!!!";
</script>
<script>
// alert("Hello, World"); window.onload = function() {
document.getElementById("JS_heading").innerHTML = "JavaScript is Awesome!!!";
} // end of window.load code block
</script> </head>
In the first example above, the alert dialog box displayed before the page even loads. Typically, you want something to happen (e.g., an alert dialog box to be displayed) only after an event happens (e.g., a button is clicked).
There are four methods to make a button interactive. It is important to note that each method yield the EXACTLY SAME RESULT. The difference is the code ability to be reused in another document.
The first way is to embed an event handler directly inside an element. While this is the easy way to create an event, it is the least preferred method because you are TIGHTLY COUPLING the HTML code which makes it harder to reuse.
<h1 id="JS_heading">JavaScript Vital Few</h1>NOTE: Notice that the attribute is onClick and not onclick. Also note the statement is in single quotes because that attribute is in double quotes. Also, multiple statements could be added by separating them with semicolon.
<button onClick="alert('Hello, World')">Click to open Alert</button>
The second way is to write a function in the <head> and make a call to it FROM another object (e.g., a button). While this is a better approach it still couples the code (e.g., event handler) with the object (e.g., button):
<button onClick="showAlert()">Click to open Alert</button>
<script>
window.onload = function() {
document.getElementById("JS_heading").innerHTML = "JavaScript is Awesome!!!";
} // end of window.load code block
function showAlert()
{
alert("Hello, World");
}
</script>
The third way is to write an event using the object dot syntax that uses an anonymous function (e.g., object.event):
<button id="showAlertButton">Click to open Alert</button>
NOTE: Unlike a regular function that needs to be called or invoked outside of the function, this anonymous function is "called" when an event handler and as such there is no need for a function name.<script>
// alert("Hello, World");
window.onload = function() {
document.getElementById("JS_heading").innerHTML = "JavaScript is Awesome!!!";
document.getElementById("showAlertButton").onclick = function()
{
alert("Hello, World");
} } // end of window.load code block
/* function showAlert()
{
alert("Hello, World");
} */
</script>
<script>
var alertButton = document.getElementById("showAlertButton");
// alert("Hello, World");
window.onload = function() {
document.getElementById("JS_heading").innerHTML = "JavaScript is Awesome!!!";
alertButton.onclick = function()
{
alert("Hello, World");
} } // end of window.load code block
/* function showAlert()
{
alert("Hello, World");
} */
</script>
The last and best method to make an button interactive is to get a reference to the object in code and then tell the object to do something when an event happens. This is accomplished by using an addEventListener using the following syntax that listen for an event and then run a function when the event happens:
element.addEventListener('eventName', eventHandler, boolean)
var alertButton = document.getElementById("showAlertButton");NOTE: Notice the event is without the word "on" as used with a click handler. You also have an removeEventListener to remove the event once it is not needed anymore.
alertButton.addEventListener("click", function(){alert("Hello, World")});
} // end of window.load code block
<script>
// alert("Hello, World");
window.onload = function() {
document.getElementById("JS_heading").innerHTML = "JavaScript is Awesome!!!";var alertButton = document.getElementById("showAlertButton");
alertButton.addEventListener("click", showAlert);
function showAlert()
{
alert("Hello, World");
}
} // end of window.load code block
</script>
The ability to show/hide or toggle an object on a web site or in an app is a common practice. Again, we will create this technique in this order
Resource: showHideToggleAnObjectComplete.zip
Preview: Finshed Exercise
Before doing any programming, it is best to lay a good foundation by creating some or all of the objects that you will need, give them names, and then instruct them to do whatever you want.
Before making objects interactive or dynamic, it is best to create objects first without any associated CSS or JavaScript code. This is called the presentation layer.
!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Toggle An Object</title>
</head>
<body>
</body>
</html>
<body>
<button>Show Box</button>
<div>My Box</div>
</body>
While we could have named the objects at the same time we created them, we wanted to do these steps in a systematic manner. This step is used so that these objects can be "talk to" (or reference -- geek term) via CSS and JavaScript later.
<body>
<button id="myButton">Show Box</button> </br></br> <div id="myBox">My Box</div> </body>
Once you create objects, then you can tell them what to do or tell them to tell other objects what to do via CSS or JavaScript.
First, we will "talk" to the objects via CSS. An object need a name in order for it to be talked to. It can be its surname (button or div) or its nickname (id value: #myBox and #myButton). While we could use the ID value to talk to both, we will use the name for one and the ID for the other. The id name is unique (like a fingerprint to each individual of a given family), so only one element can be targeted with it.
<title>Show Hide Toggle An Object</title> <style>
/* Refer object by its real name */
button{
border-radius: 16px;
padding: 5px;
background-color: #E10C0F;
text-shadow: 0px 0px;
color: #FFFFFF;
font-weight: bold;
-webkit-box-shadow: 5px 5px 5px #000000;
box-shadow: 5px 5px 5px #000000; cursor:pointer;
margin-bottom:30px;
}
/* Refer object by its alias name */
#myBox{width: 100px; height: 100px; background-color: blue;
color: white;
font-family: Arial;
border: 2px solid red;}
</style>
#myBox{width: 100px; height: 100px;
background-color: blue;
color: white;
font-family: Arial;
border: 2px solid red;
display:none;}
As a beginner programmer, it is important to inspect portions of your code to ensure that you are getting correct values, data types, etc.
As a beginner developer, it is common practice to create "DUMMY" code to check to see if you code is written correctly than replace the dummy code with "ACTUAL" code. It this case, we will CHECK to see if the function is working correctly.
<button id="myButton" onClick ="showHideBox()">Show Box</button>
</style>
<script>
function showHideBox()
{
alert("The showHideBox function is working correctly");
}
</script>
Stub (noun) - a web page or app code that only provides:
that is intended for later development with the actual code.
In this case, we will write code to see if the variable that will be created will return the name of the object.
It is not always obvious as to the type of value that an object will return. You can ascertain properties values of an object by DRILLING down into it using object oriented dot syntax method (e.g., object.property.property or object.method()).
As a beginner developer and sometimes as an experienced developer, it is good to "stub" out the code to see if:
function showHideBox()
{
// alert("The showHideBox function is working correctly");
var myBoxVariable = document.getElementById("myBox");
alert (myBoxVariable.id);
}
Now that you KNOW for CERTAIN that the variable is returning the the correct REFERENCE name of the object (myBox), we can NOW use it to create the actual code.
function showHideBox()
{
// alert("The showHideBox function is working correctly");
var myBoxVariable = document.getElementById("myBox");
// alert (myBoxVariable);
myBoxVariable.style.display ="block";
}
While we could stop at the previous step, we could enhance the code so that the button behave as a toggle.
Beside using the double slashes (//) to COMMENT OUT code, we can use it to actually COMMENT ON the code:
Particularly true for beginner developers, it is important to comment your code so that if you or someone else needs to refer to it several months later to determine what was done or why it was done. You will find out that the more proficient you become at programming, the less you will have a tendency to comment your code because you will know the code better and you will make your code more self-commenting through the use of descriptive names of variables, functions, methods, etc.
<script>
function showHideBox()
{
// alert("The showHideBox function is working correctly");
var myBoxVariable = document.getElementById("myBox");
// alert (myBoxVariable);
// Create a toggle function to show or hide second form using an if/then and else statement
myBoxVariable.style.display ="block";
}
</script>
Instead of static code, you should always stride to make your code more flexible:
<script>NOTE: The TRIPLE EQUAL SIGN in the "if" statement condition is used to CHECK for a condition, the SINGLE EQUAL SIGN on the two variables are ASSIGNMENT OPERATIONS used to define their variables.
function showHideBox()
{
// alert("The showHideBox function is working correctly");
var myBoxVariable = document.getElementById("myBox");
// alert (myBoxVariable);
// Create a toggle function to show or hide second form using an if/then and else statementmyBoxVariable.style.display = "block";
if (myBoxVariable.style.display === "block")
{
myBoxVariable.style.display = "none";
}
else
{
myBoxVariable.style.display = "block"; // This code was MOVED into the "else" statement
}
}
</script>
<script>
function showHideBox()
{
// alert("The showHideBox function is working correctly");
var myBoxVariable = document.getElementById("myBox");
var myButtonVariable = document.getElementById("myButton");
// alert (myBoxVariable);
// Create a toggle function to show or hide second form using an if/then and else statement
// myBoxVariable.style.display ="block";
if (myBoxVariable.style.display === "block")
{
myBoxVariable.style.display = "none";
myButtonVariable.innerHTML = "Show Box";
}
else
{
myBoxVariable.style.display = "block";
myButtonVariable.innerHTML = "Hide Box";
}
}
</script>
Once you have completed the basic needs of your project, you may want to add some additional features or improvement to it. For example, you may want to add the ability to:
As a beginner developer you should always strive to make your code more flexible by separating the code from the elements, using functions, etc.
It is best practice not to have code "tightly coupled" with page elements. One way to decouple code is to use event listeners instead of simply event attributes.
IMPORTANT CONCEPT TO REMEMBER: Instead of invoking the showHideBox() function from WITHIN the button, an addEventHandler method will be used so that it will add this functionality to the button element from a distance so that the code can be made more flexible. For example, now you can cut and paste the code in the script element and paste it in another document and link it to a different element by using the element id attribute. Let's see how this works.
<button id="myButton"onClick ="showHideBox()">Show Box</button>
<script>
var myButtonVariable = document.getElementById("myButton");
myButtonVariable.addEventListener("click", showHideBox);
function showHideBox()
{
// alert("The showHideBox function is working correctly");
var myBoxVariable = document.getElementById("myBox");var myButtonVariable = document.getElementById("myButton");// This line is moved up ABOVE the function
// alert (myBoxVariable);
// Create a toggle function to show or hide second form using an if/then and else statement
// myBoxVariable.style.display ="block";
if (myBoxVariable.style.display === "block")
{
myBoxVariable.style.display = "none";
myBoxButton.innerHTML = "Show Box";
}
else
{
myBoxVariable.style.display = "block";
myBoxButton.innerHTML = "Hide Box";
}
}
</script>
<script>
window.onload = function() {
var myBoxButton = document.getElementById("myButton");
myBoxButton.addEventListener("click", showHideBox);
function showHideBox()
{
// alert("The showHideBox function is working correctly");
var myBoxVariable = document.getElementById("myBox");
var myBoxButton = document.getElementById("myButton"); // This line is moved up ABOVE the function
// alert (myBoxVariable);
// Create a toggle function to show or hide second form using an if/then and else statement
//myBoxVariable.style.display ="block";
if (myBoxVariable.style.display === "block")
{
myBoxVariable.style.display = "none";
myBoxButton.innerHTML = "Show Box";
}
else
{
myBoxVariable.style.display = "block";
myBoxButton.innerHTML = "Hide Box";
}
}
} // end of window.onload code block
</script>
button{
border-radius: 16px;
padding: 5px;
background-color: #E10C0F;
text-shadow: 0px 0px;
color: #FFFFFF;
font-weight: bold;
-webkit-box-shadow: 5px 5px 5px #000000;
box-shadow: 5px 5px 5px #000000; cursor:pointer;
margin-bottom:30px;
width:100px;
}