JavaScript Course | Understanding Code Structure in JavaScript

Previous article: JavaScript Course | Printing Hello World in JavaScript
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.
‘type’ attribute was the most important attribute of <script> tag. However, it is no longer used. Browser understands that <script> tag has JavaScript code inside it.

<script></script>

How to write, run and save code



Method 1:

  • Create an html file(.htm) extension and write javascript code inside the ‘script’ tag
  • then simply load the HTML file in the browser

Method 2:

  • 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 tage 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 where will make a block dissapear with javascript only.

Code structure:

index.html
styles.css
script.js


index.html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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.
          Geeksforgeeks is the one stop solution to all 
          your coding problems! Join us so that we can shape 
          your future.
        </div>
    </a>
</body>
  
</html>

chevron_right


The above HTML code contains a simple div element which 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. Also the CSS file is linked too.
styles.css

filter_none

edit
close

play_arrow

link
brightness_4
code

#plain {
    border: 2px solid black;
    max-width: 200px;
    height: 300px;
    margin: 0 auto;
    display: block;
}
  
a {
    display: block;
}

chevron_right


The above CSS code only targets two element ‘a’ and ‘div’ element whose ID is ‘plain’.
script.js

filter_none

edit
close

play_arrow

link
brightness_4
code

// 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';
    }
}

chevron_right


The above 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.
Output: (Before Clicking anywhere on div)

Output: (After Clicking anywhere on div)

Learning from the Code

  • Page is known as document for the purpose of scripting in a web page.
  • Properties of the document can be referenced by writing document followed by a dot, followed by the property name. The document has lots of properties.
  • After <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.
Next article: JavaScript Course | Variables in JavaScript



My Personal Notes arrow_drop_up

Executive Software Developer at Cavisson Systems

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.