Javascript

JavaScript Getting Started


Before we begin, make sure that you have some working knowledge of HTML and CSS. If you don’t have, you can visit our HTML and CSS tutorials from the menu.


What do I need to create JavaScript?

You can create JavaScript using the same equipment/ tools you use when creating HTML and CSS. Which is:

  • A Computer
  • Text editor. For example, Notepad (for Windows), Pico (for Linux), or Simpletext (Mac) . Additionally you can use more advanced editors like Atom, Sublime Text or Visual Studio.
  • Web Browser. For instance, Google Chrome, Internet Explorer or Firefox, etc.. You will need to ensure JavaScript is enabled within your browser’s settings (this is normally enabled by default).

Adding JavaScript to Your Web Pages

There are typically three ways to add JavaScript to a web page

  1. Creating an external JavaScript file with the .js extension and then load it within the page through the src attribute of the <script> tag.
  2. In HTML’s  <head>  or  <body>  sections inside the <script>…  </script>  tags.
  3. Placing the JavaScript code directly inside an HTML tag using the special tag attributes such as onclickonmouseoveronkeypressonload, etc.

As a beginner, focus on the first and second ways of placing Javascript. You will learn more as you progress.


External JavaScript

Scripts can be placed in external files. To place your JavaScript code into a separate file basically create a file and give it a descriptive name with a .js extension, and then link that file in your document through the src attribute of the <script> tag, like this:

<script src="js/main.js"></script>

External scripts are useful and practical when the same code is used in a number of different web pages.
JavaScript files have the file extension .js.


JavaScript in <head>

You can place any number of scripts in an HTML document.
Typically, the script tag is placed in the head of the HTML document.
Like this:

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <title> javascript in head </title>
   <script>
    var sayHello = "Hello World!";
    document.write(sayHello); // Prints: Hello World!
    </script>
</head>
<body>
 
</body>
</html>

JavaScript in <body>

Alternatively, include the JavaScript in the <body> tag.

Example Code

<!DOCTYPE html>
<html>
<head> </head>
<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="doSomething()">Try it</button>


<script>
function doSomething() {
  document.getElementById("demo").innerHTML = "Paragraph text changed.";
}
</script>
</body>
</html>

It’s a good idea to place scripts at the bottom of the <body> element. Unless you have a reason to use it in the head section
Placing scripts at the end of the body section, just before the closing </body> tag, will make your web pages load faster, since it prevents obstruction of initial page rendering.