What is JavaScript?

JavaScript is a programming language that is used to create dynamic, interactive websites and applications.
JavaScript enables users to create modern web applications that allow direct user interaction without repeatedly refreshing the page. It enhances the web application’s interactivity and user-friendliness, allowing for simple website navigation.

What Makes JavaScript Popular?

• There are many resources available for new users to get started with as well as a wealth of existing expertise.

• Unlike languages such as C, JavaScript does not require compilation in order to be run after being written. This makes prototyping a lot quicker.

• JavaScript can be utilized in both front-end and back-end web development.

• JavaScript is a high-level language. In essence, this means that people can read it easily especially if they've programmed in other languages.

• Anything you develop using JavaScript will typically operate smoothly on a wide variety of different machines since it is well-optimized.

• Thanks to a 'library' of functions that can be added as needed, JavaScript has a vast array of supplementary functionality. JavaScript may therefore be used for almost anything.

• It's typically not difficult to add new material to a website created entirely in another computer language using JavaScript.

What are the most common uses of JavaScript?

1. Web applications: JavaScript communicates directly with web browsers allowing programmers to create quick web applications.
2. Web development: JavaScript is used to create web pages. It enables us to add dynamic behavior and additional effects to the website.
3. Mobile applications: Cross-platform mobile applications for iOS and Android can be created using JavaScript. React Native is one of the most popular JavaScript frameworks for mobile apps.
4. Web servers: JavaScript can be used to build web servers when combined with the Node JS framework.
5. Game development: JavaScript may be used to make games when combined with HTML5.
6. Presentations: All current web browsers support interactive slide shows and presentations made with the JavaScript libraries Reveal JS and Bespoke JS.

Basic JavaScript Syntax

JavaScript syntax is the set of guidelines that govern how JavaScript programs are written.

JavaScript Variables

Data values are stored in variables.
Variable declaration is done using the keywords var, let and const.
Values are assigned to variables using the equal (=) sign.

// How to create variables:
var a;
let b;
const c;

// How to use variables;
a = 2;
b = 3;
c = 5;

Data Types in JavaScript

Data types define the sort of data that can be manipulated and saved by a program.
In JavaScript, there are 8 fundamental data types: string, number, bigint, boolean, undefined, null, symbol and object.

1. String

A string is an assortment of characters. Strings in JavaScript can be enclosed in single quotes, double quotes or backticks.

// Using single quotes
const greeting1 = 'Hello JavaScript'

// Using double quotes
const greeting2 = "Hello JavaScript"

// Using backticks
const greeting3 = `Hello JavaScript`

2. Number

All numbers in JavaScript are stored as floating-point decimal values. You can write numbers either with or without decimals.

// With decimals
const x = 3.69;

// Without decimals
const y = 69;

3. Bigint

All integers in JavaScript are kept in a 64-bit floating-point representation. JavaScript BigInt can be used to store integer values that are too large to fit into a standard JavaScript Number.

// BigInt Value
const bigint1 = 7235659267167105478n

4. Boolean

A boolean only has two possible values: true or false.

const a = 2;
const b = 2;
const c = 3;

(a == b) // Returns true
(a == c) // Returns false

5. Undefined

The undefined data type represents an unassigned value. A variable's value will be defined if it is declared but its value is not yet assigned. For instance:

let animal;
console.log(animal); // undefined

6. Null

The unique value null stands for an empty or undefined value. For instance:

let number = null;

7. Symbol

A symbol is a singular, immutable primitive value. For instance:

let value1 = Symbol('hello');

8. Object

An object data type enables us to store data collections. Object properties are represented using name: value pairs, separated by commas.

const dog = {
    name: "Rex",
    breed: "German Shepherd",
    age: 5
};

Visit W3schools, MDN Docs, Programiz, and JavaTPoint to learn more about the data types in JavaScript and to go deeper into each one.

JavaScript Functions

A JavaScript function is a block of code created to carry out a certain task.
The procedure must accept input and provide an output in order to be considered a function.

Declaring a function uses the following syntax:

function titleOfFunction () {
    // body
}

For example:

function greeting() {
    console.log("Hello JavaScript");
}

A function called greeting() has been declared in the program mentioned above. We must call that function in order to utilize it.

// calling the function
greeting();

This was only a quick introduction to functions. You can find out more information about them at w3schools, programiz, freecodecamp, among many other online sites.

Manipulating the DOM

In your brief experience with JavaScript, you may have encountered the acronym DOM and wondered what it meant.
The Document Object Model (DOM), which looks like a tree, depicts the hierarchical relationships between different HTML elements.
It can simply be described as a tree of nodes produced by the browser. JavaScript allows for the modification of each node's particular attributes and methods.
When building a web application with HTML and JavaScript, DOM manipulation is a crucial component. To alter or modify an HTML document that will be shown in a web browser, one must interact with the DOM API. This HTML document is editable, meaning that elements can be added, removed, updated, rearranged, etc.
By modifying the DOM, we can build web applications that can change the layout of a web page without refreshing it and update the data on it without doing so. Items in the document can be removed, moved, or rearranged at any time.

How to Select an Element in the DOM

You must choose a specific element in the DOM before you can alter or modify it. There are 6 ways to choose an element from a document using JavaScript's DOM manipulation:

• getElementById: returns an element whose id corresponds to a string argument. This method of selecting an element is the quickest because element ids are all distinct.
• getElementByClassName: returns a collection of HTML elements with the specified class name in it.
• getElementsByTagName: returns a list of all the components in the document that have the specified tag name, listed in the order of appearance.
• getElementsByName: returns a collection of the elements in which the provided string matches the value of the name attribute.
• querySelector: returns the document's first element that matches the provided selector. Only the element that matches one, more or all of the specific CSS selectors is returned.
• querySelectorAll: returns a static list of all the elements that match one or more selectors. An empty list is returned if there are no matching elements.

Visit W3schools, freecodecamp, and MDN Docs to find out more about using JavaScript to access and edit elements on a web page.

JavaScript Libraries and Frameworks

The front end of the majority of web applications is not written entirely in vanilla JavaScript. One of the growing numbers of open-source JS frameworks and libraries is used by at least 80% of apps created using JavaScript.
The React library is by far the most popular of these front-end technologies. The commercial popularity of the Angular and Vue.js frameworks is likewise high.
JavaScript libraries and frameworks make it easier to create online apps uisng JavaScript. You can build dynamic, interactive and responsive applications with the help of ready-made components and templates that they offer.
The fact that JavaScript libraries and frameworks save you time and effort is one of their key advantages. They offer you code snippets, functions and modules that you can reuse and customize, so you don't have to build everything from scratch.
As they eliminate the distinctions between browsers and devices, they also provide compatibility and cross-browser support.

Conclusion

We discussed JavaScript's essential role in web development in this article. We discovered some of JavaScript's most typical applications as well as what makes it so popular. We covered JavaScript's fundamental syntax, including variables and data types. Additionally, we discussed the purpose of functions and how to declare and call them. We described the fundamentals of the DOM and it interacts with JavaScript. Finally, we quickly discussed some of the most well-known JavaScript frameworks and libraries and showed how they help streamline development processes and improve functionality.

However, this article only covers some fundamental concepts in learning JavaScript. Check out the resources at freecodecamp, W3schools and codecademy, among many other online programming resources, to improve your JavaScript skills.