DEV Community

Cover image for JavaScript 101: Introduction to Modern JavaScript Overview.
Daniel Obare
Daniel Obare

Posted on

JavaScript 101: Introduction to Modern JavaScript Overview.

JavaScript is a lightweight, cross-platform, and interpreted scripting language. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client-side developments as well as Server-side developments.

  • Client-side: It supplies objects to control a browser and its Document Object Model (DOM). Like if client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation. Useful libraries for the client-side are AngularJS, ReactJS, VueJS and so many others.

  • Server-side: It supplies objects relevant to running JavaScript on a server. Like if the server-side extensions allow an application to communicate with a database, and provide continuity of information from one invocation to another of the application, or perform file manipulations on a server. The useful framework which is the most famous these days is node.js.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        Basic Example to Describe JavaScript
    </title>
</head>

<body>
    <script>
        console.log("Welcome Daniel");
    </script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

External scripts

If we have a lot of JavaScript code, we can put it into a separate file. Script files are attached to HTML with the src attribute:

<script src="/path/to/script.js"></script>
Enter fullscreen mode Exit fullscreen mode

Here, /path/to/script.js is an absolute path to the script from the site root. One can also provide a relative path from the current page. For instance, src="script.js", just like src="./script.js", would mean a file "script.js" in the current folder.

Code structure

We can have as many statements in our code as we want. Statements can be separated with a semicolon.

alert('Hello'); alert('World');

Variables

let message;
message = 'Hello!';

alert(message); // shows the variable content
Enter fullscreen mode Exit fullscreen mode

Data types

Number

let n = 123;

String
let str = "Hello";

Boolean (logical type)

let nameFieldChecked = true; // yes, name field is checked
let ageFieldChecked = false; // no, age field is not checked

``let isGreater = 4 > 1;
alert( isGreater ); // true (the comparison result is "yes")
Enter fullscreen mode Exit fullscreen mode

The “null” value
let age = null;

The “undefined” value
let age;

The typeof operator
The typeof operator returns the type of the argument. It’s useful when we want to process values of different types differently or just want to do a quick check.

typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

typeof Math // "object"  (1)

typeof null // "object"  (2)

Enter fullscreen mode Exit fullscreen mode

Summary

number for numbers of any kind: integer or floating-point, integers are limited by ±(253-1).
bigint is for integer numbers of arbitrary length.
string for strings. A string may have zero or more characters, there’s no separate single-character type.
boolean for true/false.
null for unknown values – a standalone type that has a single value null.
undefined for unassigned values – a standalone type that has a single value undefined.
object for more complex data structures.
symbol for unique identifiers.

Applications of JavaScript:

  1. Web Development: Adding interactivity and behavior to static sites JavaScript was invented to do this in 1995. By using AngularJS that can be achieved so easily.
    Web Applications: With technology, browsers have improved to the extent that a language was required to create robust web applications. When we explore a map in Google Maps then we only need to click and drag the mouse. All detailed view is just a click away, and this is possible only because of JavaScript. It uses Application Programming Interfaces(APIs) that provide extra power to the code. The Electron and React is helpful in this department.

  2. Server Applications: With the help of Node.js, JavaScript made its way from client to server and node.js is the most powerful on the server-side.
    Games: Not only in websites, but JavaScript also helps in creating games for leisure. The combination of JavaScript and HTML 5 makes JavaScript popular in game development as well. It provides the EaseJS library which provides solutions for working with rich graphics.

  3. Smartwatches: JavaScript is being used in all possible devices and applications. It provides a library PebbleJS which is used in smartwatch applications. This framework works for applications that require the internet for its functioning.
    Art: Artists and designers can create whatever they want using JavaScript to draw on HTML 5 canvas, make the sound more effective also can be used p5.js library.

  4. Machine Learning: This JavaScript ml5.js library can be used in web development by using machine learning.

Oldest comments (0)