Saturday, May 16, 2020

Can Code Scripts Save to an External File

Placing JavaScripts directly into the file containing the HTML for a web page is ideal for short scripts used while learning JavaScript. When you start creating scripts to provide significant functionality for your web page, however, the quantity of JavaScript can become quite large, and including these large scripts directly in the web page poses two problems: It may  affect the ranking of your page with the various search engines if the JavaScript takes up a majority part of the page content. This lowers the frequency of use of keywords and phrases that identify what the content is about.It  makes it harder to reuse the same JavaScript feature on multiple pages on your website. Each time you want to use it on a different page, you will need to copy it and insert it into each additional page, plus any changes the new location requires.   It is  much better if we make the JavaScript independent of the web page that uses it. Selecting JavaScript Code to Be Moved Fortunately, the developers of HTML and JavaScript have provided a solution to this problem. We can move our JavaScripts off of the web page and still have it function exactly the same. The first thing that we need to do to make a JavaScript external to the page that uses it is to select the actual JavaScript code itself (without the surrounding HTML script tags) and copy it into a separate file. For example, if the following script is on our page we would select and copy the part in bold: script typetext/javascriptvar hello Hello World;document.write(hello);/script There used to be a practice placing JavaScript in an HTML document inside of comment tags to stop older browsers from displaying the code; however, new HTML standards say that browsers should automatically treat the code inside of HTML comment tags as comments, and this results in browsers ignoring your Javascript.   If you have inherited HTML pages from someone else with JavaScript inside of comment tags, then you dont need to include the tags  in the JavaScript code that you select and copy. For example,  you would only copy the bold code, leaving out the HTML comment tags !-- and --  in the code sample below: script typetext/javascript!--var hello Hello World;document.write(hello);// --/script Saving JavaScript Code as a File Once you have selected the JavaScript code you want to move, paste it into a new file. Give the file a name that suggests what the script does or identifies the page where the script belongs. Give the file a .js suffix so that you know  the file contains JavaScript. For example we might use hello.js as the name of the file for saving the JavaScript from the example above. Linking to the External Script Now that we have our JavaScript copied and saved into a separate file, all we need to do is reference the external script file on our HTML web page document. First,  delete everything between the script tags: script typetext/javascript/script This doesnt yet tell the page what JavaScript to run, so we next need to add an extra attribute to the script tag itself that tells the browser where to find the script. Our example will now look like this: script typetext/javascriptsrchello.js/script The src attribute tells  the browser the name of the external file from where the JavaScript code for this web page should be read (which is hello.js in our example above).   You do not have to put all of your JavaScripts into the same location as your HTML web page documents. You may want to put them into a separate JavaScript folder. In this case, you just modify the value  in the src attribute to include the files location. You can specify any relative or absolute web address for the location of the JavaScript source file. Using What You Know You can now take any script that you have written or any script that you have obtained from a script library and move  it from the HTML web page code into an externally referenced JavaScript file. You may then  access that script file from any web page simply by adding the appropriate HTML script tags that call that script file.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.