JavaScript Absolute Beginner Web Development Lesson 10

If you are an absolute beginner in web development you must be aware that JavaScript is essential. We are going to break it down for you in the simplest of terms. So if you are a beginner this lesson is for you. This is going to be fun!

#AbsoluteBeginner

Document Object Model

Document Object Model (DOM) is a fancy word for saying "webpage". We developers use this term a lot. Its kind of like linguistics for web developers. We use it when we refer to JavaScript as well. Usually we are referring to page loading. Many times when we are programming something in JavaScript we will check to see if the page is loaded before executing a script that we have created.

Functions in JavaScript

We will be creating functions in JavaScript. Many times we will manipulate the DOM when a button is clicked. This will give the user interaction with the webpage that they are on.

Client Side Events

Do not let this term confuse you. It is really simple. When we create a JavaScript function nearly most of the time it is a client side event. This means that there is really nothing happening on the server side. The fact that we can program JavaScript without having a processor lets you know that it is a "Client Side Event". For example if someone enters a credit card for a purchase online that would have to be processed though the server. That server then connects to another server to make sure the card is good. If it is then it will return something. However with JavaScript we do not have to wait on the server. This is because it is a client side event. If you do not grasp it now, do not worry. When we get into the "processor" classes then it will all come clear, like a bright light turning on in your head. :-)

innerHTML and style

In this lesson we are going to break it down to 2 simple things, innerHTML and style. innerHTML replaces content inside an element, style obviously styles an element.

Elements

If you have been following along in our lessons you already have a good idea what elements are. They are the "tags" that we have been referring too over and over again. Here are a short list of them

body
div
p
h1
h2
h3
span
img

Give Element an ID or Class

This is one of the main reason why I keep stressing to give your elements id's or classes. It doesn't matter if they are div's, body tags, p tags etc. The main idea here is to make sure that it makes sense and is logical. Let start out this lesson with our bare bones HTML and code from there.

Code Used in Today's Lesson

Here is the code for today's lesson.

<html>
<head>
<title>JavaScript Absolute Beginner Web Development</title>
<style>
#foo{
display:none;
}
</style>
</head>
<body>
<h1 id="foo">JavaScript Absolute Beginner Web Development</h1>
<button onclick="changeColor()">Change</button>
<button onclick="changeBack()">Change Back</button>
<button onclick="show()">Show</button>
<script>
function show(){
document.getElementById('foo').style.display="block";
}
function changeColor(){
document.getElementById('foo').style.color="red";
document.getElementById('foo').style.display="block";
document.getElementById('foo').innerHTML="We have changed!";
}

function changeBack(){
document.getElementById('foo').style.color="black";
document.getElementById('foo').style.display="block";
document.getElementById('foo').innerHTML="JavaScript Absolute Beginner Web Development";
}

</script>
</body>
</html>

Next Lesson