JavaScript is commonly utilised in both front-end and back-end web development. However, the focus of this lesson will be on front-end JavaScript implementation.
The structure of a web page is provided by HTML, the layout and rudimentary animations are provided by CSS, and the website's interactivity is provided by JavaScript.
So, in a nutshell we can say : HTML = NOUN, CSS = ADJECTIVE, JS = VERB.
JavaScript can support:
- Rich UI libraries
- Validation of forms, which may be linked to the backend
- Browser APIs to manipulate HTML and CSS
- Three-dimensional animations which CSS isn't capable
Plus a lot more!
The following material shows how to use the <script> element in a web browser to implement JavaScript.
Externally, JavaScript can be used by generating a separate file with the .js extension and linking to the HTML file. This is called external JavaScript. Or it can be used inside HTML files which is called internal JavaScript.
JavaScript code can be written in the HTML file inside <script> tag.
Note:
a) If the <script> content is inside the <body> content, then make sure to include it at the last.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal JS</title>
</head>
<body>
<h1 id = "main"></h1>
<script>
"use strict";
let x = document.getElementById("main");
x.textContent = "Internal JavaScript";
</script>
</body>
</html>b) If the <script> content is inside the header content, then add window.onload function before writing the code. Else, the following error will display in the browser's Console window because the JavaScript file runs even before the page load.
After adding the window.onload function:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal JS</title>
<script>
"use strict";
window.onload = function what() {
let x = document.getElementById("main");
x.textContent = "Internal JavaScript";
};
</script>
</head>
<body>
<h1 id = "main"></h1>
</body>
</html>The output is shown below, after running the HTML file.
The most reliable approach to construct the webpage is to write the JavaScript code in a separate file. It should always be a practice to write JavaScript code in the separate file, so that when a programmer creates a large block of code, they can quickly traverse the code snippets in the separate file rather than scrolling through the HTML page.
The following code snippet is added inside the header content to link JavaScript with the HTML file:
<script src = "file_name.js"></script>
The js file is shown below:
"use strict";
window.onload = function what() {
let x = document.getElementById("main");
x.textContent = "External JavaScript";
};The output is shown below, after running the HTML file.
Note:
If there is no window.onload function in JS file, add the <script> tag at the end of the body content. Otherwise it will load before the body content and throw an error.
<body>
<h1 id = "main"></h1>
<script src = "../JS/script.js"></script>
</body>Else, it can be added in the head content and JS can access the DOM elements if window.onload function is included.
In most low-level languages, the code gets compiled and then executed accordingly. But in JavaScript, compilation takes place during the execution of the file. This type of compilation is known as Just-In-Time(JIT) compilation.
For example, V8 engine is used for compilation of JavaScript files. It is developed by Google.
The Source code of JS file is converted into the byte code, which is the intermediate conversion.
This bytecode gets interpreted by Virtual Machine. Then it is converted to machine understandable code in section-wise (can be per function or per line) dynamically so that the program can run faster.
Source: Flowchart by V8 engine (Google)
- Suited for dynamic programming languages.
- More secure
- The source code can be executed again without compilation. The files get cached and can be reused.
- Less memory usage.
- JIT reserve more cache memory.
- JIT requires more startup time when executed for the first time.
- JavaScript offers browser API as well as a graphical user interface, which HTML and CSS cannot accomplish.
- When implemented, JavaScript uses the notion of object-oriented programming to decrease the load on the server.
- JavaScript contains a large library of libraries, such as jQuery, AJAX, and others, that are useful for complex work/projects.
- Many front-end engineers prefer JavaScript because of its clear and straightforward syntax.
- JavaScript is rapidly improving as a result of its popularity, and its capacity to make web pages more interactive is growing by the day.
- The console API provided by JavaScript is useful for debugging the code.
- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript
- https://www.w3schools.com/js/
- https://trio.dev/blog/examples-javascript
- https://en.wikipedia.org/wiki/Just-in-time_compilation
- https://stackoverflow.com/questions/7807235/javascript-just-in-time-compilation
- https://www.freecodecamp.org/news/just-in-time-compilation-explained/
Contributors: Subhendu Dash