javascript-html-web-development

JavaScript Exercise 05: Introducing HTML and JSBin

In this exercise, we will learn the basic of HTML and incorporate it with JavaScript. We will also take a look at a great tool that can help us to work with JavaScript and HTML: JSBin.

Exercise 5.1. Introducing HTML

You may have wondered about why we write JavaScript code with in a web browser. The answer is obvious. JavaScript is originally designed for web development.

But JavaScript is not the only thing needed for a web page. Almost every website consists three things: JavaScript, HTML, CSS. JavaScript is responsible for interactions and effects; HTML builds the structure of a web page, like locations for the navigation and images; CSS does the decorations, like colours, font size, etc. You don’t have to go into these for now. We will walk you through some basics of HTML.

Create a new file on you computer, name it as index.html, put the following code in it and save.

<html>
<head>
  <title>Title for the browser</title>
</head>
<body>

  <h1>I'm a Heading 1 title</h1>
  <p>This is a paragraph.</p>

</body>
</html>

Now open it with your browser (you can simply drag it to your browser). You will see a web page:

index-html

Back to the code. It’s obvious that HTML begins with <html>  and ends with </html>. They are called opening tag and closing tag. It’s the basic of HTML syntax, you can see them all over a HTML file.

Inside HTML, we have two parts, the head and the body. The head deals with configurations, like the title of the page for the browser, which is not showing in page. On the other hand, the body part contains everything that shows on the page.

Let’s take a closer look at the <h1>  tag. H1 is short for Heading 1. Just like the <html>  tag, it ends with </h1>. Whatever in between is affected by it. If you don’t like the default font size, you can adjust it with CSS, but we are not gonna talk about it here.

HTML has many tags like these, for example, <img>  for images, <a>  for links, etc. You will come to them later.

Exercise 5.2. JavaScript in an HTML file

You can write JavaScript inside of a HTML file, just use the <script>  tag for JavaScript code:

  <script>
    alert("JavaScript in HTML.");
  </script>

You might be wondering if you should put this in the head or the body. Actually both are fine. Here is an example to put it in the body:

<html>
<head>
  <title>Title for the browser</title>
</head>
<body>

  <h1>I'm a Heading 1 title</h1>
  <p>This is a paragraph.</p>

  <script>
    alert("JavaScirpt in HTML.");
  </script>

</body>
</html>

Go back to your browser and refresh our page, you should see a popup window:

 

JavaScript HTML Alert
JavaScript Alert with HTML

If you change alert()  to console.log() , you won’t be seeing anything. Because console.log() prints to JavaScript console, you have to open the console to see the result. Remember how to open the JavaScript console (JavaScript 01)?

Okay now, you know how to work with HTML and JavaScript altogether. Let me introduce you a new toy to play with, the JS Bin.

Exercise 5.3. Introducing JS Bin

You have JavaScript, you have HTML and you need your browser to see the result.  That’s quite many things. Therefore an amazing programmer created JS Bin, a JavaScript editor that combines JavaScript, HTML, CSS, Console and Output (live result) on one web page. And it’s free.

Here is how JS Bin looks like:

JS Bin
JS Bin

As you can see, you can edit HTML in the HTML column, write your JavaScript code in the second column. If you don’t need the JavaScript console, you can turn it off using the buttons in the center. In the last column, you can see the result of you code as on a web page immediately. Make sure to uncheck the Auto-run JS option, otherwise it will try to run your code while you are typing, that would be annoying and cause a lot of errors. So it’s better to use the Run with JS button after finishing all your code.

Now let’s try some code in JS Bin. We don’t need HTML, just keep JavaScript, Console and Output on the screen:

console.log("This is for the Console.");

alert("This is for the popup.");

document.write("This is for the web page.");

Here is the demo:

JavaScript JS Bin Demo Example

We’ve know that console.log()  is for the Console, while alert()  is for popup. Our new command document.write()  is for the web page, in other words, the HTML file. The HTML file is exactly the document in document.write(), therefore you see it in the Output column.

Exercise 5.4. Practice what you’ve learned in JS Bin

From now on, we will be using JS Bin for this series. We suggest you practice all previous codes on JS Bin as a way to review what you’ve learned and to get used to the new tool.

Tagged with: , , , ,

No comment yet, add your voice below!


Leave a Reply