JavaScript is connected to webpages via the <script>
. And it's done so two different ways: inline and external script.
Inline means that JavaScript is, in fact, right inside the HTML. This method is suitable for very simple scenarios when there isn't much code:
<html>
<head>
</head>
<body>
<!-- JS inside the script tag -->
<script>
const greeting = 'hello, world!';
// Displays a greeting on the screen in a modal browser window
alert(greeting);
</script>
<script>
// There can be any number of these tags on the page
</script>
</body>
</html>
The example uses the alert()
function. It displays a modal window with the text specified. In real code, alert()
is rarely used, but it does sometimes get used for training. Click to see the result of this function.
Generally, scripts from external services, such as analytics systems, are linked in this way. It looks like this:
// The code is minified so as to take up as little space as possible (this speeds up loading)
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
If you open the source code of this page right now, inside the HTML you'll see a lot of <script>
tags with similar inserts. Most of these inserts are located closer to the beginning of the HTML, since it's important for analytics systems to load as early as possible so they can track user actions.
Inline scripting isn't used in frontend applications. All code is loaded via plug-in files. External scripts are loaded as follows:
<html>
<head>
<script src="/assets/application.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/core.js"></script>
</head>
<body>
</body>
</html>
JavaScript connected in this way is preprocessed through assembly systems, such as Webpack. They optimize the code for browsers, make it smaller, remove unnecessary things, split it files to speed up downloads, and various other things.
The <script>
tag is executed by default in the order in which it occurs in the HTML, regardless of whether we are working with an external file or an inline script, so the location matters. The further on the scripts are located, the faster the user will see the page on the screen. Therefore, ideally, all scripts will be connected immediately before </body>
.
The loading order can be controlled using the defer
and async
attributes. You can read about it here.
There is also a third way to execute JavaScript code on a page. This method is suitable for debugging and experimentation. There is an analog of REPL in the browser, Node.js. To do this, you need to find DevTools (developer tools) in the browser menu and call them. This will make a section appear at the bottom of the screen containing the console tab. In this tab, you can execute any JavaScript code like you can in the server REPL. But that's not all, the console is connected to the page it's located on. In other words, we can control the contents of the screen from here. Make sure you access it at some point, we'll need it for experimentation in future lessons.
Browser and server-based (via Node.js) JavaScript is the same language. I.e., Node.js is not a separate programming language. Despite this, each environment has its own characteristics that you need to know about:
Most of the built-in modules in Node.js are not available in the browser. Therefore, they have to be replaced with separate libraries. Some modules are available as global objects, for example, the URL
in the browser is available by default.
The JavaScript version on the server is determined by programmers who set a specific version of Node.js. It is impossible to control the JavaScript version in frontend development, since we don't know which browser the page with our code will be loaded in. What if it's a browser built into a TV or a car? Therefore, it's quite dangerous to use the latest JavaScript features in frontend development. They may simply not be supported by browsers, and some users will see errors instead of the website. We'll learn about how to solve this problem in a future lesson.
JavaScript in the browser must be able to interact with the browser itself and the structure of the page. Otherwise, we wouldn't be able to do any of the useful things that modern web applications do. To do this, the browser embeds objects in JavaScript, which we can use to manipulate what's happening on the screen. Further lessons will be largely devoted to studying these objects.
The Hexlet support team or other students will answer you.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
From a novice to a developer. Get a job or your money back!
Sign up or sign in
Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.