Wednesday, April 29, 2015

Onload Event (JavaScript)

I am a computer programmer/coder by trade who just happens to enjoy traveling. I often tweet or post neat factoids about locations or places that I visit. Last week, someone asked if I could start posting random helpful tips for people who may be new to or just curious about coding. Whether it be asp, vb.net, php, or html, I will start randomly tweeting "a tip" and writing a small blog snipit to accompany it. I welcome any and all questions. If I don't know the answer, I will help you find the answer. To help identify my helpful coding tips, I will attach the following image to the right.

So that being said...Lets get to it.



Tip 1: Onload Event (JavaScript)


JavaScript is an object-oriented computer programming language that is commonly used to create interactive page elements and effects such as navigation buttons or drop-down menus and is supported by all web browsers. When a web page is being loaded, the page coding is generally processed from top to bottom. Whether php, html, or css, as the browser comes upon a section of code it is executed and the intended action is preformed. The onload event occurs when the object has been loaded. The onload is most often used within the element and is executed once the entire webpage and all the content including images, css, scripts, or what have you has been copleted loaded.

Below are a few ways to call an onload event.

This is how to call the onload in the <body>.

****Start Example Code****
<!DOCTYPE html>
<html>
<title>Tip 1: onload Event (JavaScript) demo 1</title>
<script>
//this is the function to be ran onload
function FirstFunction() {
alert("This will be ran first.");
}
</script>
<body onload="FirstFunction()">
<p>Tip 1: onload Event (JavaScript) demo 1</p>
</body>
</html>
****End  Example Code****

This is how to call just with script outside of the <body>.

****Start Example Code****
<!DOCTYPE html>
<html>
<title>Tip 1: onload Event (JavaScript) demo 2</title>
<script>
//this is the function to be ran onload
function FirstFunction() {
  alert("This will be ran first.");
}
window.onload=FirstFunction;
</script>
<body>
<p>Tip 1: onload Event (JavaScript) demo 2</p>
</body>
</html>
****Start Example Code****

If you like this post and want to see more, follow me on my website www.chadcompton.com
Or if you prefer...