How to writing JavaScript Code
JavaScript Writing Code
In this Tutorial we will learn “How to writing JavaScript Code“, how to write External and Internal Java Script code? which type of script is used to writing JavaScript code? etc. You will learn here with coding examples, so that you can understand better.
How to writing JavaScript Code?
JavaScript code should be written inside the <script> element. Look below;
<script> document.write("Hello StudyMuch") </script> |
But where you write and put the <script> element?
We can write Java Script code in two method or two types, that are;
- Internal JavaScript
- External JavaScript
Internal JavaScript
In Internal JavaScript, the <script> element can either be placed in <head> tag, in the <body> tag or both <head> and <body> tag.
In JavaScript the “text/javascript” indicate that the content is JavaScript, but this is not use in regular basis in JavaScript code.
JavaScript in the <head> Tag
When we write the JavaScript code inside the <head> element, it is recommended to put the <script> before the </head> closing tag. Or between the opening <head> tag and closing </head> tag. Look below the programming example to better understanding;
Example, <script> is inside the <head> element;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS Code Writing</title> <style type="text/css"> button{color: white; outline: none; border: 2px solid red; border-radius: 10px;} button{background: linear-gradient (to right, red, blue);} </style> <script type="text/javascript"> function myFunc(){document.getElementById ("studymuch").innerHTML="Hello Everyone this is StudyMuch." } </script> </head> <body> <p id="studymuch">Good Morning!</p> <button type="button" onclick="myFunc()">Change Value</button> </body> </html> |
You can see above the coding of JavaScript is inside the opening <head> tag and closing </head> tag, so that is Internal JavaScript.
Output of above JavaScript programming;
JavaScript in the <body> Tag
When we write the JavaScript code inside the <body> element, it is recommended to put the <script> before the </body> closing tag. Between the opening <body> tag and closing </body> tag. Look below the coding programming example.
Example, <script> is inside the <body> Element;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>Script Inside Body</title> </head> <body> <p id="study">Good Morning!</p> <button type="button" onclick="studymuch()">Change Value </button> <script type="text/javascript"> function studymuch() {document.getElementById("study") .innerHTML = "Hello, this is StudyMuch!"; } </script> </body> </html> |
You can see in the above JavaScript coding, the <script> is written inside the <body> element.
Output of above JavaScript coding;
What is difference in <script> is inside the <body> and <head> element;
When the <script> is inside the <head>, it loads first before the content of the pages. And when it’s inside the <body> element, it loads after the content of the pages.
But if you put the <script> before the <body> closing tag, or inside the <body> tag, that time everything is work, because the HTML element loads first before the event listener.
NOTE; – It is recommended to put the JavaScript <script> code in the body when using internal JavaScript.
External JavaScript
You can also be placed the JavaScript code in external files. JavaScript file have the file name extension of .js, for example; script.js.
External JavaScript file is using beneficial, when multiple web pages use the same script.
It is also organizing codes and help maintain readability as JavaScript is separated from HTML.
Example of External JavaScript;
HTML File;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>Script Inside Body</title> <script>scr="script.js"</script> </head> <body> <p id="study">Good Morning!</p> <button type="button" onclick="studymuch()">Change Value </button> </body> </html> |
The script.js file contain the code (JavaScript File)
<script type="text/javascript"> function studymuch() {document.getElementById("study") .innerHTML = "Hello StudyMuch!"; } </script> |
The above HTML and script.js file, script.js file is external JavaScript File.
To run the External JavaScript, you need link sript.js file to the HTML file then it works or run smoothly.
NOTE; – The External and Internal scripts behave the same way, that is not important to use only External or Internal JavaScript, you can use your own choice.
So, in this Tutorial (How to writing JavaScript Code), you learned how to write the JavaScript code, method of writing JavaScript Code and types of writing JS code, this tutorial is all about how to writing the JavaScript Code.
I hope you learned this tutorial better; in next tutorial you will learn something new from JavaScript.
Read Also –
3 Comments
gralion torile · August 14, 2022 at 2:31 am
Having read this I thought it was very informative. I appreciate you taking the time and effort to put this article together. I once again find myself spending way to much time both reading and commenting. But so what, it was still worth it!
zoritoler imol · December 31, 2022 at 7:02 pm
Yay google is my queen assisted me to find this outstanding site! .
Andreas Niesborella · January 16, 2023 at 8:25 am
Some times its a pain in the ass to read what blog owners wrote but this internet site is very user pleasant! .