JavaScript is connected to webpages via the <script>. And it's done so two different ways: inline and external script.
Inline scripts
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.
External scripts
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.
Order of execution
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.
REPL
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.
Features of browser-based JavaScript
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:
Modules
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.
Versions
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.
Browser and content
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.
Do it yourself
- Open the console in your browser.
- Try running code in it for execution, for example, simple arithmetic operations
Are there any more questions? Ask them in the Discussion section.
The Hexlet support team or other students will answer you.
About Hexlet learning process
- Article “How to Learn and Cope with Negative Thoughts“
- Article “Learning Traps“
- Article “Complex and simple programming tasks“
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.
Sign up
Programming courses for beginners and experienced developers. Start training for free
- 130 courses, 2000+ hours of theory
- 1000 practical tasks in a browser
- 360 000 students
Our graduates work in companies:
From a novice to a developer. Get a job or your money back!
Use Hexlet to the fullest extent!
- Ask questions about the lesson
- Test your knowledge in quizzes
- Practice in your browser
- Track your progress
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.