JavaScript location in HTML File
There is flexibility in providing JavaScript code anywhere in an HTML document. However, the most preferred ways to include JavaScript in an HTML file are:
- Script in the area .
- Script in the area .
- Script in the area . and .
- Script in the peripheral file and then include in the area .
In the next section, we will see how we can put JavaScript in an HTML file in different ways:
JavaScript in the area .
If you want to have a script run on some event, such as when the user enters somewhere, then you will put that script in the Head as follows:
Execute the above code to see the result.
JavaScript in the area .
If you need a script to run when the page loads so that the script creates content in the page, then the script should be part of the document. In this case, you will not have any functions defined by using JavaScript. See the following code:
This is web page body
This code will produce the following result:
Hello World
This is web page body
JavaScript in the area and
You can place JavaScript code in the area and as follows
Execute the above code to see the result.
JavaScript in the peripheral file
When you start working more extensively with JavaScript, you will find that there are cases where you are reusing JavaScript code uniformly across multiple pages of a site.
You are not limited to maintaining consistent code in multiple HTML files. The script tag provides a technique that allows you to save JavaScript in an external file and then include it in your HTML files.
Here is an example to show how you can include a peripheral JavaScript file in HTML code using its script tag and src attribute.
To use JavaScript from an external source file, you need to write all your JavaScript source code in a single text file with the ".js" extension and then include that file as above.
For example, you can keep the following content in filename.js and then you can use the sayHello function in the HTML file after including this filename.js.
function sayHello () { alert ( "Hello World" ) }
According to Tutorialspoint
Previous post: Enable JavaScript in browsers
Next article: Turning in JavaScript
You should read it
- What is Currying in Javascript? How to use Currying in JavaScript
- What is JavaScript?
- Learn about ES6 in Javascript
- JavaScript code to generate error charts & graphs
- Things to know about 'this' in JavaScript
- Udemy's top 5 JavaScript courses
- Summary of JavaScript exercises with sample code
- JavaScript code that generates box and whisker charts containing outliers
May be interested
- How to create a simple contact form using HTML, CSS, and JavaScriptlearn how to create a contact form for the web with ease by following these steps, ensuring you communicate effectively with your visitors.
- PHP & AJAXajax stands for asynchronous javascript and xml. ajax is a new technique for creating better, faster, and more interactive web applications with the help of xml, html, css, and javascript.
- Introduction to HTMLa few basic things to know about html before starting to learn this language.
- How to insert CSS to create styles for HTML pageswhen the browser reads the format file (stylesheet), it will format the html text according to the information in that format file.
- The id attribute in HTMLin html, the id attribute is used to specify a unique id for an html element (the value must be unique in the html file).
- String object in JavaScriptthe string object helps you work with a series of characters; it helps handle the original string data types in javascript with some help methods.
- How to Make a Basic JavaScript Quizmaking a game with javascript can be fun and satisfying as well as a bit of a puzzle. the code in the this article is one way of making a game using javascript. once you know the basics, feel free to adapt and play around with it. set up...
- Basic examples of HTMLin the previous html lesson, you know which tools to use to write html code, how to save and open html files. this article will give some basic examples of html text.
- Reference Canvas in HTMLthe html canvas tag is used to draw graphics on the fly, via scripting (usually javascript). to learn more about canvas, please read the html canvas tutorial.
- How to Make a Scrolling Marquee in HTMLa scrolling marquee is moving text added to a website, but html is no longer commonly used for this feature and is not recommended. the html tag for scrolling marquees has been deleted from the standard html library. to accomplish a...