Inserting JavaScript into a webpage is much like inserting any other HTML content. The tags used to add JavaScript in HTML are <script> and </script>. The code surrounded by the <script> and </script> tags is called a script blog. The ‘type‘ attribute was the most important attribute of <script> tag. However, it is no longer used. The browser understands that <script> tag has JavaScript code inside it.
<script> // JavaScript Code </script>
Write Structured JavaScript Code: To write a structured JavaScript code right now you have to careful about Statements, Semicolons, and Comments.
JavaScript can be added to your HTML file in two ways:
- Internal JavaScript
- External JavaScript
Method 1(Internal JavaScript):
- Create an HTML file(.html) extension and write JavaScript code inside the ‘script’ tag
- Then simply load the HTML file in the browser
Method 2(External JavaScript):
- Create a separate JavaScript file(.js) with .js extension. Write your code in it.
- Now link this js file with the HTML document using script tag like:
<script src='relative_path_to_file/file_name.js'></script>
- Either in the body or in the head.
Let’s understand the code structure with the help of a simple JavaScript example that will make a block disappear with javascript only.
Code Structure:
-
HTML(index.html):The HTML code contains a simple div element that is wrapped inside an anchor tag(link) so that whenever we click the div element, the javascript code works. Inside the ‘div’ element there’s some random text. Inside the script tag, we are linking the javascript file saved as ‘script.js’ with the HTML document.
-
CSS(styles.css): The CSS code only targets two elements ‘a’ and ‘div’ element whose ID is ‘plain’.
-
JavaScript(script.js): The Javascript code is called when we click the ‘div’ button, as we have linked them with the ‘a’ tag and also ‘onclick=’toggle(plain)’. Inside the function, we are passing the ‘ID’ of the ‘div’ element and then accessing the element from the ‘DOM’ using the getElementByID method and then a simple if-else condition which checks if the ‘div’ is of type ‘block’ then change the display to none, else change it to display block.
Example: Here in this example we have created HTML, CSS and JavaScript file to show the actual directory structure with valid code structure.
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="script.js"></script> <link rel="stylesheet" href="styles.css"> <title>Button Vanisher</title> </head> <body> <a onclick="toggle('plain')"> <div id="plain"> How many times were you frustrated while looking out for a good collection of programming/algorithm/interview questions? What did you expect and what did you get? This portal has been created to provide well written, well thought and well-explained solutions for selected questions. Geeksforneveropen is the one stop solution to all your coding problems! Join us so that we can shape your future. </div> </a> </body> </html> |
CSS
#plain { border: 2px solid black; max-width: 200px; height: 300px; margin: 0 auto; display: block; } a { display: block; } |
Javascript
// JavaScript function to change the content of the function toggle(id) { let button = document.getElementById(id); if (button.style.display == 'block') { button.style.display = 'none'; } else { button.style.display = 'block'; } } |
Output: Live Output
Code Explanation:
- A page is known as a document for the purpose of scripting on a web page.
- Properties of the document can be referenced by writing the document followed by a dot, followed by the property name. The document has lots of properties.
- After the <script> tag browser starts to interpret the text as JavaScript until the </script> comes.
The above code is a decent example of how we should make a directory, how to link different types of code files with each other, and how to write simple yet effective code.
