1 Star2 Stars3 Stars4 Stars5 Stars (13 votes, average: 5.00 out of 5)

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!

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.

Subscribe To My YouTube Channel:

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 *

Please keep in mind if you are on a mobile device you may not see the code properly. Click here to see the code properly if you are on a mobile device.

<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";
}</pre>
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

JavaScript Absolute Beginner Web Development Lesson 10 was last modified: June 21st, 2017 by Maximus Mccullough

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

a1-tutorial-javascript-absolute-beginner-web-development

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.