JavaScript

High-level, often just-in-time compiled, and multi-paradigm programming language.


me Filip Hostinský

Start Here

Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web. JavaScript enables interactive web pages and is an essential part of web applications. The vast majority of websites use it for client-side page behavior, and all major web browsers have a dedicated JavaScript engine to execute it.

As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM). However, the language itself does not include any input/output (I/O), such as networking, storage, or graphics facilities, as the host environment (usually a web browser) provides those APIs.

JavaScript Quick Start


A Hello World example

JavaScript is one of the most popular modern web technologies! As your JavaScript skills grow, your websites will enter a new dimension of power and creativity.

To begin, let's examine how to add JavaScript to your page for creating a Hello world! example.

The Console method log() outputs a message to the web console. The message may be a single string (with optional substitution values), or it may be any one or more JavaScript objects.

console.log("Hello World");

 

Language Basics Crash Course


To give you a better understanding of how JavaScript works, let's explain some of the core features of the language. It's worth noting that these features are common to all programming languages. If you master these fundamentals, you have a head start on coding in other languages too!

Variables

Variables are containers that store values. You start by declaring a variable with the var (less recommended) or the let keyword, followed by the name you give to the variable:

let myVariable = {};
Variable Explanation Example
String This is a sequence of text known as a string. To signify that the value is a string, enclose it in single quote marks. let myVariable = 'Bob';
Number This is a number. Numbers don't have quotes around them. let myVariable = 10;
Boolean This is a True/False value. The words true and false are special keywords that don't need quote marks. let myVariable = true;
Array This is a structure that allows you to store multiple values in a single reference. let myVariable = [1,'Bob','Steve',10];
Object This can be anything. Everything in JavaScript is an object, and can be stored in a variable. Keep this in mind as you learn. let myVariable = document.querySelector('h1');

Comments

Comments are snippets of text that can be added along with code. The browser ignores text marked as comments. You can write comments in JavaScript just as you can in CSS:

/*
Everything in between is a comment.
*/

If your comment contains no line breaks, it's an option to put it behind two slashes like this:

// This is a comment

Functions

Functions are a way of packaging functionality that you wish to reuse. It's possible to define a body of code as a function that executes when you call the function name in your code. This is a good alternative to repeatly writing the same code. You have already seen some uses of functions previously. For example:

function multiply(num1,num2) {
    let result = num1 * num2;
    return result;

 

JavaScript Objects


Object Definition

You define (and create) a JavaScript object with an object literal:

let person = {
    firstName: "John", 
    lastName: "Doe",
    age: 50, 
    eyeColor: "blue"
};

Accessing Object Properties

You can access object properties in two ways:

objectName.propertyName

or

objectName["propertyName"]

Object Methods

Objects can also have methods. Methods are actions that can be performed on objects.

Methods are stored in properties as function definitions.

var person = {
    firstName: "John",
    lastName : "Doe",
    fullName : function() {
        return this.firstName + " " + this.lastName;
    }
};

Accessing Object Methods

You access an object method with the following syntax:

//objectName.methodName()
person.fullName()

 

The this Keyword

In a function definition, this refers to the "owner" of the function.

In the example above, this is the person object that "owns" the fullName function. In other words, this.firstName means the firstName property of this object.

Read more about the this keyword at JS this Keyword .

var person = {
    firstName: "John",
    lastName : "Doe",
    fullName : function() {
        return this.firstName + " " + this.lastName;
        } 
    };

Sources:

hackr.io
W3schools
Wikipedia
developer.mozzila
Eloquent Javascript (book)