Javascript - <script> tag and its output

The place for Javascript

In our HTML, JavaScripts must be inserted between <script> and </script> tags. So, the lines between <script> and </script> is the place we put our JavaScript code. For example,

<script>
function myFunction() {
    document.getElementById("where_demo").innerHTML = "Where it goes?";
}
</script>

The browser, then, will interpret the code as JavaScript. We used to have type="text/javascript" in the <script> tag, however, it is no longer required since JavaScript is the default scripting language in HTML5.

JavaScript Functions and Events

Often, JavaScript code is written to be executed when an event occurs such a case when the user clicks a button. Our JavaScript code inside a function, can be invoked, when an event occurs.

We can put our scripts in the <head>, or in the <body> section of an HTML page, or in both. Often we see scripts at the bottom of the section, which can reduce display time. Sometimes we see all JavaScript functions in the <head> section. however, separating HTML and JavaScript, and thus putting all code in one place, is a recommended way of coding.

Javascript inside <head>:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("head_demo").innerHTML = "I am changed.";
}
</script>
</head>

<body>

<h1>Where to put script - head!</h1>

<p id="head_demo">Change Me</p>

<button type="button" onclick="myFunction()">Click Me</button>

</body>
</html>

Javascript inside <body>:

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

<body>

<h1>Where to put script - body!</h1>

<p id="body_demo">Change Me</p>

<button type="button" onclick="myFunction()">Click Me</button>

<script>
function myFunction() {
    document.getElementById("body_demo").innerHTML = "I am changed.";
}
</script>

</body>
</html>

external javascript

Javascript is located outside of html file, external:

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

<body>

<h1>Where to put script - external!</h1>

<p id="external_demo">Change Me</p>

<button type="button" onclick="myFunction()">Click Me</button>

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

</body>
</html>

The 'external.js' looks like this:

function myFunction() {
    document.getElementById("external_demo").innerHTML = "I am changed.";
}

Output from JavaScript

JavaScript can only be used to manipulate HTML elements, and it does not have any print or output functions.

HTML Element Manipulation

We use the document.getElementById(id) method to access an HTML element from JavaScript. We use the id attribute to identify the HTML element, and innerHTML to refer to the element content:

<!DOCTYPE html>
<html>
<body>

<h1>Javascript for manipulating HTML elements</h1>

<p id="manipulation_demo">javascript? What for?</p>

<script>
document.getElementById("manipulation_demo").innerHTML = "To change me.";
</script>

</body>
</html>

The JavaScript which is inside the <script> tags is executed by the web browser. document.getElementById("manipulation_demo") is JavaScript code for finding an HTML element using the id attribute. innerHTML = "Paragraph changed." is the code to change an element's HTML content via innerHTML.

document.write()

If we execute document.write() on a loaded HTML document, all HTML elements will be overwritten as shown in the following example:

<!DOCTYPE html>
<html>
<body>

<h1>document.write()</h1>

<p>Survice or not.</p>

<button onclick="myFunction()">Execute document.write(), it will shows a date</button>

<script>
function myFunction() {
   	document.write(Date());
}
</script>

</body>
</html>

Console

We can use the console.log() method to display JavaScript values. To do that, we need to activate debugging in our browser with F12, and select "Console" in the debugger menu.

The html file used for console writing:

<!DOCTYPE html>
<html>
<body>

<h1>Writing to console</h1>

<script>
a = 9;
b = 19;
c = a + b;
console.log(c);
</script>

</body>
</html>