Applying JavaScript
JavaScript is not HTML, you will need to let the browser know in advance when you enter JavaScript to an HTML page. This is done using the <script> element. The JavaScript code is executed when the browser encounters <script> element in the HTML code. That may actually be before the full HTML document is loaded. This is why the script location is important. In any case we can define inside the script special statements to activate it when the document is loaded. This will be demonstrated later.
We can write JavaScript internally in the HTML file or we can include external JavaScript file in the HTML code.
You can place any number of scripts (internal and/or externals) in your HTML document.
Internal JavaScript
We apply JavaScript to HTML by inserting the code between <script> and </script> tags. You can place <script> in any place in the <head> and in the <body> sections of the document.
Where to place the script
It is a good idea to place scripts at the bottom of the <body> element. This can improve page load, because script compilation can slow down the display. By putting it at the bottom of the page, the script is loaded and executed after the whole page is already parsed and loaded, giving a better experience to the user over keeping it in the head tag. In general however, it is advisable to keep as much as possible in the <head> section, unless it becomes a performance/page load issue.
Better way is to use external script for big scripts (see below).
External JavaScript
JavaScript code can be written in external file. The file extension must be .js. External scripts cannot contain <script> tags. We just write the code. You have to link external file to HTML. This is done by including the file inside the <script> element in the HTML file, e.g.
<script src="scripts/my.js"></script>
Placing JavaScripts in external files has some advantages:
- It separates HTML and code
- It makes HTML and JavaScript easier to read and maintain
- Cached JavaScript files can speed up page loads
Where to place the script
It is a good idea to place scripts at the bottom of the <body> element. This can improve page load, because script compilation can slow down the display. In general however, it is advisable to keep as much as possible in the <head> section, unless it becomes a performance/page load issue. Today, browsers support the async and defer attributes on scripts (see browsers support on Can I Use). These attributes tell the browser it is safe to continue parsing while the scripts are being downloaded. This allows your scripts to be downloaded asap without blocking the browser.
- If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page
- If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing). This means the script is executed as soon as it's downloaded, without blocking the browser in the meantime. This implies that it's possible to script 2 is downloaded & executed before script 1.
- If async is not present and defer is present: The script is executed when the page has finished parsing. Modules (ES6) — including inline scripts — defer by default. A positive effect of this attribute is that the DOM will be available for your script.
These attributes make only sense when using the script in the head portion of the page, and they are useless if you put the script in the body footer.
Example: insert script in the head with defer that writes to the console and add script at the end that writes to the console. See the order of the outputs in the console.
When should I use what?
Typically you want to use async where possible. Here are some general rules to follow:
- If the script is modular and does not rely on any scripts then use async
- If the script relies upon or is relied upon by another script then use defer
- If the script is small and is relied upon by an async script then use an inline script with no attributes placed above the async scripts.
See more details about async and defer in the web documentation. For example see Efficiently load JavaScript with defer and async
General Notes on JavaScript
JavaScript syntax is based on the Java and C languages — so many structures from those languages apply to JavaScript as well:
- Javascript statemenets end with a semicolon. Semicolon is optional (be careful, there are situations where JavaScript fails to assume a semicolon where it is really needed. It is safer to use semicolon).
- Javascript is case-sensitive (capital letters are different from lowercase letters).
- JavaScript uses the same comments as C.
- Conditional and iteration statements are as in C (for, while, if, switch). Note that unlike C, switch can use in values non a number or string.
System Dialogs
JavaScript has three kinds of system dialogs. All of them are attached to global object window:
- window.alert() - Is often used if you want to make sure information comes through to the user. It displays an alert dialog with the optional specified content and an OK button. Example:
window.alert( message );
- window.confirm() - Is often used if you want the user to verify or accept something. When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false. Example:
result = window.confirm( message );
- window.prompt - Is often used if you want the user to input a value before entering a page. When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value. If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null. Example:
result = window.prompt( message, default );
You can not style the given popup boxes. Later you will be able to define your own popup boxes with any styling you desire.
Console
The Web Console shows you information about the currently loaded Web page, and also includes a command line that you can use to execute JavaScript expressions in the current page. The Web Console is great for executing single lines of JavaScript. It is possible to output a message to the Web Console. This is done using console.log() function in the JavaScript code. To see the result you have to open the console window. See on the web how to open it in the browser you are using.