Exploring the intricacies of JavaScript for interaction and dynamism
](https://res.cloudinary.com/practicaldev/image/fetch/s--4rvLT3jN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn-images-1.medium.com/max/3440/0%2ARljh-DignzpyFxj6.png)
In the last part of this series on the introduction to front-end web development, we’ll look at a very fundamental tool, probably the most important if you aim to build interactive and engaging websites for users.
In this article, we will be introduced to JavaScript. In all your interactions with webpages, you must have heard of or come across JavaScript in use and probably wonder what it does. We’ll look at the intricacies of JavaScript in detail.
Table of Contents
JavaScript: The Tool for Interaction and Dynamism
History of JavaScript
Adding JavaScript to HTML
JavaScript Syntax
JavaScript in use
JavaScript Frameworks
Conclusion
JavaScript: The Tool for Interaction and Dynamism
When you fill out and submit a form on a webpage, have you thought about what handles the form submission? Or when you want to switch between light and dark modes, do you ever wonder, “What makes this work?” These questions and more are answered by one word. JavaScript.
JavaScript is a scripting language that is used to make webpages “come alive”. It is used to improve a website’s functionality, making it more interactive and dynamic. JavaScript is the powerhouse that performs actions such as submitting a form and getting a response, displaying updates to content, basically, anything that makes a website more interesting and purposeful to interact with.
History of JavaScript
JavaScript was created in 1995 by Brendan Eich. It was initially developed for the Netscape Navigator, a popular web browser at the time. JavaScript was made an ECMA standard in 1997.
JavaScript is formally known as ECMAScript. The latest version of ECMAScript is ES6 (abbreviated). There have been further updates every year from 2016 to the current updated version of ES6, which is ES14, as of June 2023.
JavaScript and Java are two different languages. Though they have similar syntax, they are very different from one another in design and application.
Adding JavaScript to HTML
JavaScript can be incorporated into HTML texts using the script tag in either the head or body tags. It is bad practice to use the script tag at the bottom of the body tag.
JavaScript files must be saved in .js format to import them with the script tag to HTML, e.g. script.js, as shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="script.js">
</script>
</head>
<body>
</body>
</html>
JavaScript Syntax
JavaScript is a scripting language, therefore it is written differently from HTML and CSS.
JavaScript is case-sensitive; for example, frame is different from Frame
JavaScript doesn’t read any meaning to whitespace.
JavaScript defines two value types, which are literals and variables
The use of semicolons to terminate lines of code in JavaScript is not compulsory but is advisable.
JavaScript supports comments both on a single line and spanning several lines
JavaScript identifiers are characters used to identify a variable, function, or keyword. It can only start with an underscore, a dollar sign, or a letter (uppercase or lowercase).
JavaScript in Practice
Variable
A variable can be described as a store of data. It is the value that is assigned to an identifier. There are two ways to define a variable.
Using let : This allows you to assign a new value to an already-defined value
Using const : This defines a constant value. A new value can’t be assigned to it.
A variable can also be undeclared. These kinds of variables will be declared when they’re used. Demonstrating the use of variables in an external JavaScript file
The code on line 6 above targets a paragraph tag with the “output” id in the HTML document and displays the result there.
The result of the javascript code is shown below
Function
A function is a block of JavaScript code that is designed to perform a particular task. A function in practice will be demonstrated below.
let a = 20;
let b = 22;
let c = a + b;
function calculate() {
// let a = 52;
// let b = 76;
sum = a + b;
return sum;
}
document.getElementById('output').innerHTML = "The sum of both numbers is " + calculate();
This will give the result shown below:
Notice the commented-out part inside the function? If the comment slash is removed, the values of a and b inside the function will replace those declared outside the function, and the result will be 128 as shown below.
The values of a and b declared outside the function are called global variables, and they will be applied at every instance called in any function. You can override global variables if they are reassigned inside the function.
JavaScript Frameworks
JavaScript frameworks are libraries that are written in JavaScript code to provide an easier development process for software developers. Building coding projects with HTML, CSS, and vanilla JavaScript from scratch takes a lot of time to complete. It also involves writing a lot of code.
JavaScript frameworks help developers build complex apps faster and easier. Read more about frameworks here.
JavaScript frameworks are numerous, and examples include React, Angular, Vue, and Svelte, among others.
Learning a framework is a necessity as a frontend developer because a lot of companies require it and it helps in the faster and less strenuous building of projects.
For a deeper insight into JavaScript, the following platforms will be of use:
https://developer.mozilla.org/en-US/docs/Web/JavaScript
https://www.w3schools.com/js/default.asp
Conclusion
This guide has covered the basics of the tools needed to kick-start a career in front-end web development.
Frontend web development is a lucrative field with room for flexibility and upskilling. There is room to apply your creative potential in great working conditions. Moreover, having tech skills will ensure an individual is better placed for a future filled with technological innovations.
Having a deep understanding of how these different languages work will make you very valuable in the frontend development field, provide access to the best opportunities, and reward you financially. Cool, isn’t it?
Have an exciting and wonderful tech journey ahead!
Top comments (0)