In this lesson, we will learn more about <script>. It’s the tag with which we link JavaScript to web pages. And there are two ways to do so:
- Inline scripting
- External scripting
Inline scripts
The word inline means we place JavaScript right inside the HTML. This method is suitable for basic scenarios with a small amount of code:
<html>
<head>
</head>
<body>
<!-- JavaScript is inside the script tag -->
<script>
const greeting = 'hello, world!';
// It 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 above example uses the alert() function. It displays a modal window with the specified text.
In actual code, we rarely use alert() but it is useful for training. Click to see the result.
Generally, scripts from external services, such as analytics systems, are linked in this way. It looks like this:
// We minimized the code to take up as little space as possible and to speed 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, you’ll see many <script> tags with similar inserts inside the HTML. Most of these inserts are closer to the beginning of the HTML since it’s important for analytics systems to load as early as possible to track user actions.
External scripts
There is no inline scripting in the front-end applications. We load all the code via plugin files. Loading external scripts looks like this:
<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>
When we include JavaScript in this way, it is preprocessed by assembly systems such as Webpack. They optimize the code for browsers, make it smaller, remove unnecessary things, and split it into files to speed up downloads.
Order of execution
By default, the <script> tag runs in the order in which it appears in the HTML. It works the same regardless of whether we work with an external file or an inline script. So the location is important. The further we place the script, the faster the user will see the page on the screen. Optimally, all scripts should be just before </body>.
The loading order can be controlled using the defer and async attributes. You can read about this here.
REPL
There is a third way to run JavaScript code on a page. This method is great for debugging and experimenting.
There is an analog to REPL in the browser, Node.js. To use it, find DevTools in the browser menu and run it. It will bring up a section at the bottom of the screen with the Console tab. You can execute any JavaScript code in this tab, just like in the server REPL.
But that’s not all. The console is connected to the page it’s on. In other words, we can control the content of our screen from here. Make sure you access it from time to time. We’ll need it for experiments in future lessons.
Features of browser-based JavaScript
Browser-based and server-based JavaScript are the same language. That is, Node.js is not a separate programming language. However, each environment has its characteristics that you need to be aware of.
Modules
Most of the built-in modules in Node.js are not available in the browser. Therefore, we have to replace them with libraries. Some modules are available as global objects. For example, the URL is available in the browser by default.
Versions
The version of JavaScript on the server is determined by the programmer, who specifies a particular version of Node.js.
It’s impossible to control the JavaScript version in front-end development because we don’t know what browser people will use to load the page with our code. What if it’s a browser built into a TV or a car?
That’s why we shouldn't use the latest JavaScript features in front-end development. These features may not be supported by browsers, so some users will see errors instead of the page. We’ll learn how to solve this problem in future lessons.
Browser and content
JavaScript in the browser must be able to interact with the browser itself and the page structure. Otherwise, we wouldn’t be able to do any great things that modern web applications do.
To do so, the browser embeds objects in JavaScript that we can use to manipulate what’s happening on the screen. Much of this course will be devoted to exploring these objects.
Do it yourself
- Open the console in your browser.
- Try running code in it for execution, for example, simple arithmetic operations
Recommended materials
For full access to the course you need a professional subscription.
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.
