JS 101

Posted on:April 8, 2024

Web Development, Why?

  1. Websites Still Account for a Lot of Software Development Projects
    • Despite the rise of mobile applications and other technologies, websites continue to be a significant part of software development. Businesses and individuals rely on websites to showcase their products, offer services, and provide information.
    • Web development skills are in high demand, making it a valuable area of expertise for developers seeking job opportunities.
  2. Transferable Skills
    • Web development skills can be directly or indirectly transferred to other areas of development, such as mobile app development or full-stack development. Understanding the fundamentals of web development sets a strong foundation for branching out into other domains.

What is Web Development?

  1. It’s More than Just HTML, CSS & JS
    • While HTML, CSS, and JavaScript are vital components of web development, there is much more to it. Web development involves understanding the client-server architecture, handling server-side programming, and utilizing various frameworks and libraries.
    • A website’s functionality and interactivity go beyond the static HTML, CSS, and JavaScript files.
  2. Understanding the Client-Server Interaction
    • When you visit a website, there is a process that takes place involving a client (your web browser) and a server (hosting the website). It’s important to grasp the concepts of how these two entities communicate and exchange data.
    • On the client side, HTML, CSS, and JavaScript are responsible for rendering and providing interactivity to the user interface.
    • On the server side, programming languages like JavaScript (with Node.js) handle server logic and database interactions.

The JavaScript History

Any application that can be written in JavaScript, will eventually be written in JavaScript

— Jeff Atwood, Co-Founder of Stack Overflow

The Beginning

JavaScript was invented by Brendan Eich in 1995. It was developed for Netscape 2 and became the ECMA-262 standard in 1997. In 1996, Netscape and Brendan Eich took JavaScript to the ECMA International Standards Organization, and a technical committee (TC39) was created to develop the language.

ES6 was a huge success, it was released in 2015, and all the major browsers were fully compliant by March 2017. Initially, JavaScript was designed as a scripting language for use with a flagship browser, Netscape Navigator. Initially known as LiveScript, Netscape changed the name to JavaScript so they could position it as a companion for Java language. Apart from some superficial similarities though, JavaScript is in no way related to the Java Programming Language.

After its release, more and more browsers started adding JavaScript support. Its earliest releases suffered from notable performance and security issues, but developers had no choice without JavaScript. If they wanted to run programs in the browser, they had to use JavaScript.

The Major Turning Point

In 2008, the creation of Google’s open-source Chrome V8, a high-performance JavaScript engine, provided a crucial turning point for JavaScript. Google’s fast JavaScript engine made it possible for developers to build sophisticated browser-based applications with desktop and mobile applications.

Soon after, Ryan Dahl released an open-source, cross-platform environment called Node.js

Node.js provided a way to run JavaScript code from outside a browser. It freed JavaScript from the browser’s confines and led directly to JavaScript’s current popularity.

Today, we can use JavaScript to write all kinds of applications, including browser, server, mobile, and desktop apps.

— From History of JavaScript

JavaScript is a multi-paradigm, dynamic, interpreted or JIT compiled programming language with a robust ecosystem.

Basic concepts

Variables

Variables are used to store data values. They can be declared using var, let, or const.

var x = 5; // old way
let y = 10; // block-scoped
const z = 15; // constant

Data Types

JavaScript supports various data types including numbers, strings, booleans, arrays, objects, and more.

let num = 10;
let str = "Hello, world!";
let bool = true;
let arr = [1, 2, 3];
let obj = { name: "John", age: 30 };

Functions

Functions are blocks of reusable code. They can be declared using the function keyword or as arrow functions.

function greet(name) {
  return "Hello, " + name + "!";
}

let greet = name => {
  return `Hello, ${name}!`;
};

Conditional Statements

Conditional statements allow you to execute different code based on certain conditions.

let num = 10;

if (num > 0) {
  console.log("Positive");
} else if (num < 0) {
  console.log("Negative");
} else {
  console.log("Zero");
}

Loops

Loops are used to repeatedly execute a block of code.

for (let i = 0; i < 5; i++) {
  console.log(i);
}

let arr = [1, 2, 3];
arr.forEach(item => {
  console.log(item);
});

Basic Built-in Functions

console.log()

console.log("Hello, world!");

alert()

alert("This is an alert message!");

Math.random()

let randomNumber = Math.random();
console.log(randomNumber);

These are some basic built-in functions in JavaScript. There are many more available for various purposes, and mastering them will greatly enhance your JavaScript programming skills.

Try it out

Complete the following code to sort an array:

let arr = [];
for (let i = 0; i < 10; i++) {
  arr.push(Math.floor(Math.random() * 100));
}
// Sort the array
function sortArr(arr) {
  // Your code here
}

The JavaScript Ecosystem

Package Manager

npm: Node Package Manager, the default package manager for Node.js.

Usage:

npm init
npm install package-name

Formatter & Linter

Frameworks & Libraries

Backend Frameworks

Typing Solutions

Other concepts