Introducing the Basics of JavaScript

Objectives

After completing this lesson, you will be able to:

Discover the Basics of JavaScript
Describe variables
Explore data structures and types

JavaScript

Introduction

JavaScript is a scripting language that is usually used in websites and is then executed by the visitor's browser. Originally, in 1995, JavaScript was still called LiveScript. It was developed by Netscape.

JavaScript ensures that web pages can be built dynamically and adapted to the user. Complex control queries can be programmed in JavaScript and linked to backend services to check the entries of the visitors. Extensive browser games are written in JavaScript.

JavaScript is a cross-platform, object-oriented scripting language. It is a compact and resource-saving language. Within a host environment, JavaScript can be linked to the objects in its environment to control them programmatically.

Watch the following video introducing the JavaScript.

Overview

JavaScript includes a standard library of objects such as Array, Date, and Math, as well as a core of language elements such as operators, control structures, and statements. The JavaScript core can be extended for a variety of use cases by adding additional objects to it.

JavaScript is defined in a declarative functional programming styles. It is prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented and imperative.

The standard for JavaScript is ECMAScript. As of 2012, all modern browsers fully support ECMAScript 5.1. Older browsers support at least ECMAScript 3. On 17 June 2015, ECMA International published the sixth version of ECMAScript, which is officially called ECMAScript 2015 and was initially referenced as ECMAScript 6 or ES6. Since then, there has been a new version of ECMAScript standards every year.

JavaScript borrows most of its syntax from Java, but is also influenced by languages such as Awk, Perl and Python.

Language

JavaScript is case-sensitive (distinguishes between upper and lower case) and uses the Unicode character set.

Client-side JavaScript extends the core language by providing objects to control a browser and its Document Object Model. For example, client-side extensions allow an application to create elements in an HTML form and respond to user events such as mouse clicks, form input and page navigation.

Server-side JavaScript extends the core language by providing objects that are relevant to the execution of JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, get information from one call to the application to the next, or make changes to files on a server

In JavaScript, statements are called statements and are separated by a semicolon . A semicolon is not necessary if each statement is on a new line. If several statements are written in one line, each must be separated by a semicolon. It is also common practice to write a semicolon after each statement. The source code of JavaScript is read by the interpreter and converted into sequences of input elements such as JavaScript tokens, control characters, character breaks and object instances. ECMAScript describes keywords reserved for the interpreter as well as object instances and has built-in rules for automatic semicolon insertion (ASI) to terminate statements. However, it is recommended to end each statement with a semicolon; this avoids unwanted side effects.

When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order in which you put things.

JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses <link> elements to apply external stylesheets and <style> elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the <script> element.

You can place any number of scripts in an HTML document.

Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

Scripts can also be placed in external files. External scripts are practical when the same code is used in many different web pages.

JavaScript files have the file extension, .js.

To use an external script, put the name of the script file in the src attribute of a <script> tag.

Comments

Comments can also be written in JavaScript in the source code.

The browser ignores text marked as comments. You can write comments in JavaScript, just as you can in CSS.

Single line comments start with //

Multi-line comments start with /* and end with */.

Variables

Characters

Variables are used to store values. In the process, a variable is given a name, called an identifier or identifier, which follows certain rules.

A JavaScript identifier must begin with a letter. There is a best practice for naming functions and variables, which introduced the underscore (_) for private variables and methods, as the concept of visibility of methods was never implemented. The following characters can also be numbers. Since JavaScript is case-sensitive thus "B" represents a different letter than "b".

Most of the ISO 8859-1 and Unicode characters can be used, such as ü or å, but Unicode escape sequences can also be used.

For using Unicode characters, the html site needs to have the charset defined as an meta tag.

Declare Variables

There are 3 ways to declare variables:

1. let: Using let allows you to declare variables that are limited to the scope of a block statement, or the expression on which it is used, unlike the var keyword, which declares a variable globally, or locally to an entire function regardless of block scope. The other difference between var and let is that the latter is initialized to a value only when a parser evaluates it.

2. const: One can create a read-only named constant with the keyword const. The syntax for a constant identifier is the same as for variable identifiers: it must begin with a letter, can contain alphabetic characters, numeric characters and underscores.

The value of a constant cannot be changed at runtime by assignments or new declarations. Therefore, constants must always be initialized. You cannot declare a constant with the same name as a function or variable in the same scope.

3. var: The var statement declares a function-scoped or globally-scoped variable, optionally initializing it to a value.

Global variables are in fact properties of the global object. In web pages, the global object is the window object, so global variables can be set and accessed by using the syntax, window.variable.

Consequently, global variables declared in one window or frame can be accessed from another window or frame by specifying the window or frame-name.

With the assignment of a variable, such as x = 13. If this form is used outside of a function, the variable is declared globally. A strict JavaScript warning is generated. This variant should be avoided.

But why are there different types?

Well, that is somewhat easy. Until ES5, there was only the way to declare variables with var.

In the release of ES5, the let and const keyboard were introduced to remake the whole variable concept and to implement a real constant variable that cannot be reassigned.

Variable Scope

If a variable is declared outside a code block, it is called a global variable because it is now available in every area. However, if a variable is declared within a code block, it is only available within that block and is called a local variable for this reason.

JavaScript did not have a block statement scope before ECMAScript 2015; therefore, a declared variable in a block was always counted as part of the function (or global scope) in which the block was located.

The behavior changes when using the let declaration introduced in ECMAScript 2015.

Strict Mode

In JavaScript, there are many potential sources of errors due to the turbulent history with many proprietary methods and the very simple possibility of introducing global variables. This is why ECMAScript 5 introduced a strict mode, which activates a standardized subset of the programming language that has been cleansed of error sources.

With every typing error in a variable name, you create a new variable in JavaScript, while the desired variable or method is not processed. Often, these errors are only noticed later and then lead to an inexplicable program abortion, which you first have to laboriously debug. In strict mode, such errors are immediately recognized as reference errors.

Hoisting

Another feature of variables in JavaScript is that you can reference a variable before it has been declared without causing an error. This concept is known as hoisting; variables in JavaScript are hoisted and effectively lifted to the beginning of the function or statement. Whenever variables are hoisted, they will return the value undefined.

Therefore, undefined is always returned if you use the variables before they have been declared and initialized. Because of the pull-up, all var statements should be placed as far as possible at the beginning of the function. In ECMAScript 2015, let and const are not pulled up to the beginning of a block. Referencing the variable in the block before it has been declared will result in a ReferenceError.

Data Structures and Types

Data Types

JavaScript is a dynamically typed language. This means that you do not specify the data type of a variable when you are declaring it. The data type is automatically converted during execution, if necessary.

The latest ECMAScript standard defines seven data types.

The following seven data types are primitive data types:

Note

Object: Although the number of data types is relatively small, they open up the possibility of creating useful functions for applications. Objects and functions are the other fundamental elements of the language. Objects can be thought of as named containers for values and functions that the application can execute.

In expressions involving numeric and string values with the + operator, JavaScript converts numeric values to strings.

Save progress to your learning plan by logging in or creating an account

Continue to next lesson