Page 325 - Webapplication11_C11_Flipbook
P. 325

How JavaScript Works on a WebPage


                                                                                 Web Browser
                                                             HTML Parser
                                                 Load
                                                                          Parse HTML
                                                    WebPage

                                                                                    DOM

                                                                          Update
                                                   Load       CSS Parser
                                                              CSS Parser
                                                                                      Run Code to modify





                                                        Load


                                                                               JavaScript Engine




                   4.8 WHAT IS A SCRIPT TAG?
                 The <script> tag is an HTML element used to include JavaScript code or to link to external JavaScript files in a web page.
                 This tag allows developers to add dynamic functionality and interactivity to their websites, enabling features such as
                 form validation, event handling, animations, and much more.
                 The <script> tag informs the browser that the content between the opening <script> and closing </script> tags should
                 be treated as JavaScript code (or another scripting language).

                 The basic syntax of the <script> tag is as follows:
                        <script type="text/javascript" src="myScript.js"></script>
                 where,

                 Ð Ðtype: Specifies the type of script language. The default value is "text/javascript", which can be omitted.
                 Ð Ðsrc: Specifies the URL of an external JavaScript file to be loaded.
                 In an HTML document, JavaScript can be integrated in three distinct locations, each serving a specific purpose and
                 offering different advantages:

                 Ð ÐBody of the Page: When scripts are placed within the body section of the HTML, they are executed as the page
                   loads in the browser. This means that any output generated by the JavaScript code will be displayed as part of the
                   HTML content.

                 Ð ÐHeader of the Page: Including JavaScript in the header section is common when defining functions. In this way, the
                   code is encapsulated in a function, which groups together a collection of JavaScript statements. This function can
                   then be called or referenced by other scripts within the same page. Placing scripts in the header allows developers
                   to define functionality that can be executed later in response to events or conditions that occur after the page has
                   loaded.

                 Ð ÐAs an External File: JavaScript can also be stored in external files, which typically have a .js extension. This approach
                   is  beneficial  for  several  reasons.  First,  it  keeps  the  HTML  document  clean  and  organised,  separating  structure
                   from behaviour. Second, external JavaScript files can be reused across multiple HTML pages that promoted code
                   efficiency and maintainability.

                                                                                                  JavaScript Part 1  323
   320   321   322   323   324   325   326   327   328   329   330