Thursday, February 13, 2020

JavaScript Language Fundamentals

JavaScript Fundamentals

JavaScript allows us to implement complex features to create dynamic elements and interactivity on web pages. JavaScript is a translated language. JavaScript is executed once the data from the HTML and CSS in the source code is being parsed and constructed. The JavaScript can trigger any events or variables to modify described in the web page when the Document Object Model (DOM) will be updated and then the output will be rendered on the browser screen. The HTML and CSS are used to control the look and feel of the web page but JavaScript is used to induct the interactivity and dynamicity to the web page.


How Does JavaScript Works?

When a page is requested, the HTML and CSS are parsed and constructed to create the DOM (Document Object Model), which is then rendered and loaded. The DOM represents the document's data in a logical tree format. The DOM fetches the data from the web page in a tree-structured format making nodes and objects to depict various elements and their respective values. This data can be accessed and manipulated by JavaScript at the time of page loading and after the page load and makes document dynamic.



How to write the first code in JavaScript?


We can enclose the JavaScript code within <script> </script> tag in HTML. We can also use type attribute in <script> tag with HTML/JavaScript value.

<script type="HTML/JavaScript">

//Write some JS Code here

</script>
  
We can write <script> tag anywhere on the HTML page, but its good practice to write this code in the header section. Keeping scripts at the bottom of the body section improves the display speed of the web page because script translation makes page display slower.

The scripts can also be placed in some external document and linked to the web page. These are known as external scripts. This is a good practice as the HTML Mark up and script code can be kept separated and independent. It also improves the maintainability and readability of the code. It also improves the speed of page loading due to the JS pages are cached by the browser.

Creating a program to print "HelloWorld" 

<html>
  <head>
    <script>
      document.write('Hello World<br>')
      document.write('Welcome JavaScript')
    </script>
  </head>
  <body bgcolor='yellow'>
  </body>
</html>