Bits & Bytes

Posts Tagged ‘simple’

A Simple JavaScript Code Example

To begin, create an HTML file and copy the code from our post A Basic HTML Page Template, and we will paste our JavaScript into it. You can use a simple text editor, like Notepad, to create the file. I will use “SimpleJavascriptExample.html” as the name of my file and paste this code inside the body tags:

<script type="text/javascript">
  document.write("Welcome to XoaX.net!");
</script>

After pasting the JavaScript code above into the HTML file, the code in the file should look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>XoaX.net</title>
</head>
<body>

<script type="text/javascript">
  document.write("Welcome to XoaX.net!");
</script>

</body>
</html>

Now, if we open the file with a browser, we will see the message “Welcome to XoaX.net!” printed out. This exact message could be written without JavaScript by just putting the message inside the body tags by itself. However, we are preparing the way to write more complex JavaScript examples.

In this example, we have one line of JavaScript code inside of the script tags. The script tags, along with the type designation “text/javascript,” tell the browser that the enclosed code is JavaScript. The single line of JavaScript code inside the tags tells the browser to call the write() function on the document object with the argument “Welcome to XoaX.net!”. The semicolon at the end of the line signals the end of the command.

A Basic HTML Page Template

Below, is a template for a basic HTML page or, more truthfully, a basic XHTML page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>XoaX.net</title>
</head>
<body>

</body>
</html>

This is the template that we will use for coding HTML, Cascading Style Sheets (CSS), and Javascript. Between the head tags, we will put things like style specifications and function definitions: generally, things which are not directly visible. On the other hand, we will put the items that are visible between the body tags.

The code above can be copied and pasted, as is, into a blank text document that you can create with any text editor. Then save it out with a .html file extension. Once you save the file, it should open automatically with your default browser when you double-click the file. If it does not, you can right-click and use “Open with” to select a program to set as your default program for opening .html files.

Note that this is a blank HTML page. So, it will not display anything on the page until you add something to it. It is simply a template.