Studying Writing Javascript in HTML

Studying Writing Javascript code in HTML

Javascript is a programming language that operates on the browser to be written in HTML code. There are four ways of writing javascript code in HTML.

First way: The <script>

The first common way is to write code javascropt in the tag <script> . Tag <script> can be made in the tag <head> that exist in html, and in the tag <body> tags that exist in html. 

Example Code, you can try it out by writing on a notepad, notepad ++, sublimetext or any other text editor and save as a .html file, or you can try also here  HTML editor FajarYusuf.Com :


<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>Writing Javascript</title>
    
     <script>
     console.log ("This is the output for the console");
     </script>
    
</head>
<body>
<script>
document.write("This is Javascript that appears on the body!");
</script>
</body>
</html>


The result:
Studying Writing Javascript in HTML


Second way: Through External Files

If you do not want the Javascript code mixed with HTML, you can write it in a separate file. The trick, create a file with extension js javascript file extension, such as coding the following contents:
// file-external.js
alert ("This is the Output of an external Javascript file");


After storing the above code, we need to connect an external file with the HTML file. You do this by using the tag <script> attributes src to determine the location of javascript files (in this example I determine the location html and javascript file on a folder):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Coding writing Javascript</title>
<script src="file-eksternal.js"></script>
</head>
<body>
</body>
</html>

The result:
Studying Writing Javascript in HTML


Third way: Using the Event Attributes

For the next method is often used to call a function on an certain event or action. For example, when an element or object is clicked, it will run the process of coding Javascript, such as coding examples below:

<!DOCTYPE html>
<html>
<head>
     <meta charset = "utf-8">
     <title>Writing Javascript </title>
    
     <script>
     console.log("This is the output for the console");
     </script>
    
</head>
<body>
<button onclick="alert('Ok Thank you!')">Click This!</ button>
</body>
</html>

The result:

Studying Writing Javascript in HTML


Not only is there a javascript onclick event on a wide range of other events, such as onsubmit, onload, ondoubleclick, onmouseover, onmouseout, and so on.

Fourth Way: Using the URL

For the last way that the writing Javascript in your URLs. This control is rarely used, but we also need to know to get to know javascript. Javascript writing the protocol URL by using Javascript. For example, try to write code like this in the browser URL.
javascript:alert("This output From Javascript")
The result will be executed output Javascript by the browser.

Then, How can we use this method in HTML?

This way we can use the tag <a> , then fill the javascript code to the attribute href . This method could replace the javascript function onclick event .

Example code :

<!DOCTYPE html>
<html>
<head>
     <meta charset = "utf-8">
     <title>Writing Javascript </title>
    
     <script>
     console.log("This is the output for the console");
     </script>
    
</head>
<body>
<a href="javascript:alert('Great right !!!')">Click This</a>
</body>
</html>


The result:
Studying Writing Javascript in HTML
Artikel Terkait:
Disqus Comments