In the field of web development, one of the most prominent programming languages is JavaScript. The wide use of JS makes it stand out as one of the most in-demand programming languages in the job market. But what is JavaScript actually? What is JavaScript used for?
Jump to:
What is JavaScript?
JavaScript is a lightweight programming language primarily used to interact with and manipulate the browser. JavaScript was created in just 10 days by Brendan Eich in 1995 while he was working at Netscape. Initially developed as a simple scripting language for web browsers, it has since then evolved into a powerful, versatile language that runs on both the client and server sides.
JavaScript is a single-threaded programming language, meaning that it can only execute one task at the time. It only has a thread of execution, also known as the “main thread”.
What is JavaScript used for?
The original and main purpose of JavaScript is to develop interactive websites, giving life to HTML and CSS pages. However, it is nowadays also used for the development of apps, games and even for machine learning.
Originally, JavaScript was just a client side language, meaning that it interacts with the browser to improve user experience. However, it is now possible to use JavaScript also on the server-side. The introduction of Node.js in 2009 allows programmers to use JS to interact with databases and handle HTTP requests amongst others. Node.js is a runtime environment powered by Google engine V8 that allows you to run JS on the server, thus creating full stack applications just with a single language.
How to add javascript to HTML?
We have said that the main focus of this programming language is to interact with the browser. There are 3 ways to include JavaScript into HTML files.
- Inline JavaScript – Achieved by directly binding code with the respective HTML element.
- Internal JavaScript – Written between the <script> </script> tags, usually positioned at the end of the body element or in the head section.
- External JavaScript – Written in a separate JS file such as index.js, and then subsequently embedded in the html file between <script> </script> tags.
What are JavaScript variables?
A variable is a container defined by a specific name aimed at storing data. Variables are at the core of any programming language, and so is the case for JavaScript. As mentioned before, they are used to store information and they can be declared in 3 different ways:
- Var – An outdated way to declare variables, which is in modern programming not recommended.
- Let – A block-scoped way to declare variables, which can be reassigned other values across the script.
- Const – Constant values that cannot be reassigned through the application.
Depending on the situation, you may decide to choose either const or let to declare variables.
Variable declaration refers to the process of identifying a variable with a precise name. Variable assignment instead, refers to the process of giving a variable a specific value, such as:
let greatings = "be"Types of data in JavaScript
JavaScript has 8 types of data, 7 are primary data types and one is non primitive or complex data type.
The primary data types are:
- Number
- String
- Boolean
- Null
- Undefined
- Symbol
- BigInt
Besides the primary data type, there is also an additional non-primitive data type which is derived from primary data, namely objects.
What are JavaScript functions and how do they work?
Functions are reusable blocks of code designed to perform specific tasks. They help keep our code organized and reduce redundancy. Here’s how you define a traditional function in JS:
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('Alice')); // Output: Hello, Alice!In this example, we define a function named greet that takes one parameter, name, and returns a greeting message. You can call this function by passing different arguments as parameters.
What are arrow functions?
Arrow functions were introduced in ES6 to provide a more concise programming syntax because they are shorter and cleaner. In the case of arrow functions, you don’t need the function keyword, and if the function body contains only a single expression. If returning one single value, curly braces can be omitted. ES6 arrow functions are especially useful for writing short, simple anonymous functions.
const greet = (name) => {
return `Hello, ${name}!`;
}
console.log(greet('Alice')); // Output: Hello, Alice!What are asynchronous functions?
JavaScript is normally executed line after line, in order. But in some situations this can be suboptimal. Asynchronous programming allows your code to start a potentially time-consuming task and continue executing other tasks while waiting for the first task to complete. This is crucial for operations like fetching data from an API or reading files, where you don’t want to block the main thread. There are 3 main ways to handle asynchronous operations in JavaScript: Callbacks, Promises, and Async/Await.
- Callback functions – Function that are passed into another function as an argument, which is then invoked inside the outer function when required.
- Promises – They provide a cleaner way to handle asynchronous operations and avoid complex callback logics. A promise represents an operation that hasn’t completed yet, but is expected to complete in the future.
- Async/Await – Functions introduced in ES2017 to write asynchronous code that looks synchronous, making it easier to read and maintain. They are nowadays the recommended option to handle asynchronous functions.
DOM manipulation
The Document Object Model (DOM) is a programming interface for web documents that allows programmers to dynamically change the content and structure of a webpage. Using JavaScript, you can select specific elements of an HTML document and then interact with those elements. For instance, some actions that can be performed are changing the content of a paragraph or conditionally updating the color of an element. Some of the most popular ways to selects elements are getElementById, getElementsByClassName, getElementsByTagName, querySelector, and querySelectorAll. Here is how to manipulate the DOM with JavaScript:
- First you select an element(s) using the most appropriate selector.
- Then you decide the action to be performed on the selected element(s).
- Finally the output is reflected on the HTML page.
Another alternative to interact with the DOM is utilizing Event Listeners to execute code in response to user interactions with specific page elements.
let button = document.getElementById('myButton');
button.addEventListener('click', () => {
alert('Button clicked!');
});Conclusion
JavaScript is a populate programming language that empowers developers to transform static HTML and CSS pages into dynamic interfaces. Although originally meant as a client-side language, the introduction of Node.js enables the development of full-stack applications. Its ability to manipulate the DOM, handle asynchronous operations, and integrate into HTML pages makes it a powerful language modern web development.
