PROGRAMMING LANGUAGES

MODULE 01

JavaScript

a typical interpreted language.

a high-level language (i.e. relatively easy to understand for people and separating us from the
hardware details).
the sole language supported by all major web browsers, and about 95% of web pages
worldwide embed JavaScript code within them.

Brendan Eich

Hired by the Netscape corporation, and tasked to develop a new language for their product,
the Netscape Navigator web browser which was called LiveScript

node.js

an interpreter installed independently of browsers as an environment in the computer's

operating system.

Just In Time Compilation technique (JIT Compilation)

This technique consists of compiling code fragments during the execution of the program
(more than a single instruction) and allows you to increase its performance.

Client-side Programming

Writing code to be executed in a browser

The code to be executed is loaded together with the page in the browser, on the user's side,
and the interpreter which is a part of the web browser allows for its execution.

Back-end Programming

programming the server-side parts of complex web applications

Code Obfuscation

consists of transforming our ready script into a slightly less readable form

Dynamic Typing

consists of the fact that we can store data of any type in a variable (a variable is a container in
which we store the data we will use).

Static Typing

A variable can only contain one type of variable (e.g. numbers) during program execution.
 REQUIREMENTS OF PROGRAMMING

❖ Code editor
❖ Compiler or interpreter
❖ Debugger
➢ a tool that allows us, among other things, to pause the program in the indicated place
and analyze its current state

Online Environments

commonly known as code playgrounds

sites that act as a simple editor and runtime environment.
They allow you to write code, run it for testing purposes and most often share it with other
users.
OpenEDG: a simple environment for writing and running code in several programming
languages, including JavaScript.

Local Environments

Other Tools for JavaScript

❖ Package Managers
enabling the management of libraries (containing ready-made solutions that we can use in
our programs) or components of the development environment
e.g. npm or yarn
❖ Task Runners and Module Bundlers
used, in simple terms, to automate the process of software development and merge the
resulting code from many files and libraries
e.g. Grunt or Webpack
❖ Testing Framework
allows for automatic testing of the correctness of our program in search of potential errors
e.g. Mocha, Jasmine, or Jest
❖ Security Analyzers
as you can guess, used to control the security of our solution
e.g. Snyk, RetireJS, or OWASP Dependency Check
Code Editor

an application that writes plain text.

1. Visual Studio Code

Powerful code editor free for both personal and commercial use. It has quickly become one of
the favorites when it comes to web development. It has built-in features like a JavaScript debugger,
and tools to streamline web projects. It’s also highly customizable via the extension system (there are
many additions dedicated especially to the JavaScript language).

2. Sublime Text

Fast and easy-to-use code editor with many advanced features, like multiple-line editing, fast
search, and others. A trial version is available, but for long-term usage, a license needs to be purchased
for both private and commercial use.

3. Notepad++

Free and lightweight code and text editor. The program is small and fast, supports dozens of
programming languages, and can be extended with plugins. It may be old and ugly, but it’s still sharp.

Interpreter

functions as a runtime environment for our program.

checks whether we have made any formal errors, and then it executes the program instruction
by instruction.
e.g. node.js, built-in JavaScript engines in Google Chrome and Mozilla Firefox

Debugger

a tool that allows you to slow down or even halt the execution of a program, run instructions step
by step, and look at and analyze the state of the program at any given moment.
Browser Developer Tools:
o the inspector
▪ which will allow us, for example, to analyze the individual HTML elements of an
open website;
o the JavaScript console
▪ which firstly shows all the information about the errors, and secondly allows us to
run single JavaScript commands in the context of the current page;
o the debugger
▪ which, among other things, shows the current values of variables, and allows you
to pause code execution in the indicated place and to perform step-by-step work
(i.e. execute single instructions of the program).
The "Hello, World!" Program

The phrase that was used a long time ago in a very important book about the C language that
marks someone as learning a new programming language for almost 50 years.

Console

a place where various messages are displayed, normally invisible to the browser user.

Function

a piece of code that allows you to perform a specific task such as displaying something on the
console

Method

a type of function belonging to an object

Client-side JavaScript

a language of the web and exists only in the web ecosystem wherein its code needs to be
embedded in an HTML document.

HyperText Markup Language

a set of tags used to describe the structure of a website that allows us to give a page the
format of a document containing sections, headers, paragraphs, lists, and the like.
<!DOCTYPE html>
o This is not a typical tag, as it is used to inform the browser that the whole document has
been prepared according to HTML5.
<head>
o contains additional information about the document
<title>
o sets the title of the page mostly visible in the browser title bar.

Two Ways of Attaching JavaScript to HTML

1. Embedding directly inside < 𝑠𝑐𝑟𝑖𝑝𝑡 > tag

2. Use 𝑠𝑟𝑐 attribute to point a separate file

Defer Async

means that the script should be means that the script will be executed
executed after the whole page is loaded; immediately, but in parallel to parsing
the rest of the page.

CSS: Cascading Style Sheets

a language used together with HTML to describe the appearance of a page and its elements.

𝐻𝑇𝑀𝐿 ∶ 𝑠𝑡𝑟𝑢𝑐𝑡𝑢𝑟𝑒 𝑜𝑓 𝑎 𝑑𝑜𝑐𝑢𝑚𝑒𝑛𝑡 ∷ 𝐶𝑆𝑆 ∶ 𝑝𝑟𝑒𝑠𝑒𝑛𝑡𝑎𝑡𝑖𝑜𝑛 𝑜𝑓 𝑎 𝑑𝑜𝑐𝑢𝑚𝑒𝑛𝑡

 VARIABLES

containers in which you can store certain information

Constant

used to store certain values, but once values have been entered into them during initialization,
they can no longer be modified

ReferenceError

it doesn’t know a variable by this name (so the variable itself is undefined).

𝒗𝒂𝒓

allows you to re-declare a variable, which can potentially lead to errors in the program execution.

𝒍𝒆𝒕

declare variables, if only because you don't want to accidentally declare a variable again.

Initialization

done by assigning a certain value to a variable (indicated by its name).

use the operator =.

"𝒖𝒔𝒆 𝒔𝒕𝒓𝒊𝒄𝒕";

used when we want to force the interpreter to behave according to modern JavaScript standards.

Indentation

code inside the block has been moved to the right.

Variable shadowing

declaring a global variable and a local variable of the same name.

Hoisting

refers to the built-in behavior of the language through which declarations of functions, variables,
and classes are moved to the top of their scope – all before code execution.
 DATA TYPES

A. Primitive

➢ a type of data whose values are atomic which means that the value is one, indivisible element.

1. Boolean

A logical data type mainly used as a conditional expression

It can only take one of two values: true or false.
Flag: a variable that signals something that can be either present or absent, enabled or
disabled

2. Number

main numeric type in JavaScript that represents both real numbers (e.g. fractions) and
integers.
allow for all typical arithmetic operations, like addition, subtraction, multiplication, and
division.
Range: −(253 − 1) 𝑡𝑜 (253 − 1)
Prefixes:
o 0𝑥 = ℎ𝑒𝑥𝑎𝑑𝑒𝑐𝑖𝑚𝑎𝑙 = 0𝑥
o 0𝑜 = 𝑜𝑐𝑡𝑎𝑙
o 0𝑏 = 𝑏𝑖𝑛𝑎𝑟𝑦
o 𝑒3 = 𝑒𝑥𝑝𝑜𝑛𝑒𝑛𝑡𝑖𝑎𝑙 𝑓𝑜𝑟𝑚 = 123𝑒 − 5 → 0.00123, 9𝑒3 → 9000
Three additional special values:
o Infinity
1
▪ , 𝑎𝑛𝑦 𝑝𝑜𝑠𝑖𝑡𝑖𝑣𝑒 𝑛𝑢𝑚𝑏𝑒𝑟 𝑑𝑖𝑣𝑖𝑑𝑒𝑑 𝑡𝑜 0
0

o -Infinity
1
▪ − 0 , 𝑎𝑛𝑦 𝑛𝑒𝑔𝑎𝑡𝑖𝑣𝑒 𝑛𝑢𝑚𝑏𝑒𝑟 𝑑𝑖𝑣𝑖𝑑𝑒𝑑 𝑡𝑜 0

o NaN (not a number)

▪ a notification that some arithmetic action (or mathematical function) could not
be performed because the argument is either not a number, or cannot be
converted to a number.

3. BigInt

allows us to write integers of virtually any length

Range: larger than 2^53 – 1
the division result will always be rounded down to the nearest whole number.
 4. String

represents a sequence of characters forming a piece of text.

Common operations: concatenation, extraction of the substring, and checking the length
Immutable: so when we want to change even one letter in a string, in reality, we create a
new string.
String literals: created using single or double quotes, as long as both beginning and end
quote characters match up.
A quote mark preceded by the \ (𝑏𝑎𝑐𝑘𝑠𝑙𝑎𝑠ℎ) character will be interpreted as ordinary
characters that are part of our string, not parts of a literal construction.
String Interpolation: allows you to treat a character string as a template, in which you can
place values in selected places, such as those taken from variables.
Addition Operation: creates a new string by combining two input strings.
Method: a special kind of function that belongs to an object.
o 𝒄𝒉𝒂𝒓𝑨𝒕()
▪ returns the character at the "index" position in the string (indexes start from 0)
o 𝒍𝒆𝒏𝒈𝒕𝒉
▪ property, returns the number of characters in a string
o 𝒔𝒍𝒊𝒄𝒆(𝒃𝒆𝒈𝒊𝒏𝑰𝒏𝒅𝒆𝒙, [𝒐𝒑𝒕𝒊𝒐𝒏𝒂𝒍] 𝒆𝒏𝒅𝑰𝒏𝒅𝒆𝒙)
▪ method, returns a new string that is created from the characters between
beginIndex (included) and endIndex (excluded); if endIndex is omitted, then the
new string is from beginIndex to the end of the string;
o 𝒔𝒑𝒍𝒊𝒕(𝒔𝒆𝒑𝒂𝒓𝒂𝒕𝒐𝒓, [𝒐𝒑𝒕𝒊𝒐𝒏𝒂𝒍] 𝒍𝒊𝒎𝒊𝒕)
▪ method, splits the string into substrings whenever a separator is found in that
string, and returns an array of those substrings (we will say a few words about
arrays in a moment), while an optional limit limits the number of substrings
added to the list.
Autoboxing: it converts the primitive to the corresponding object on the fly.

5. Symbol

doesn't have any literal value and can only be created using a special constructor function.
a form of identifier that are guaranteed to be unique.

6. Undefined

the default value that all variables have after a declaration if no value is assigned to them

B. Complex

➢ will consist of many elements of primitive (not complex) types.

1. Array

a complex data type that can be used to store a data collection.

2. Object

consist of many values (stored in properties) and methods

Record: a collection of named fields
Literals

a way of noting specific values (data) in the program code.

Operator

a symbol or name that represents some action to be performed on the indicated arguments.
+ 𝒔𝒚𝒎𝒃𝒐𝒍
o a two-argument operator representing summation.
𝒕𝒚𝒑𝒆𝒐𝒇 𝒐𝒑𝒆𝒓𝒂𝒕𝒐𝒓:
o unary: takes only one argument
o informs us of the type of data indicated as a given argument
o "undefined", "object", "boolean", "number", "bigint", "string", "symbol", "function"

Null

value itself is primitive, while the type to which it belongs is not a primitive type
used to indicate that the variable does not contain anything, and most often it is a variable that
is intended to contain values of complex types.

Constructor Functions

String: 𝑆𝑡𝑟𝑖𝑛𝑔();
o by default create and return an empty string – primitive "";
Number: 𝑁𝑢𝑚𝑏𝑒𝑟();
o by default create and return the value 0;
Boolean: 𝐵𝑜𝑜𝑙𝑒𝑎𝑛();
o by default create and return the value of false.
o False: 0, NaN, empty string, undefined, null
o True: any value
BigInt: 𝑆𝑡𝑟𝑖𝑛𝑔();
o requires you to pass some initial value to it
 HTML: SYNTAX

Empty page

<!DOCTYPE html>
<html>
<head>
<title>Empty Page</title>
</head>
<body>
</body>

</html>

JAVASCRIPT: SYNTAX

Displaying message

𝑐𝑜𝑛𝑠𝑜𝑙𝑒. log ("𝑚𝑒𝑠𝑠𝑎𝑔𝑒");

Declaring variables

𝑣𝑎𝑟 𝑣𝑎𝑟𝑖𝑎𝑏𝑙𝑒𝑁𝑎𝑚𝑒;

𝑙𝑒𝑡 𝑣𝑎𝑟𝑖𝑎𝑏𝑙𝑒𝑁𝑎𝑚𝑒;

Declaring constant variables

𝑐𝑜𝑛𝑠𝑡 𝑐𝑜𝑛𝑠𝑡𝑎𝑛𝑡𝑉𝑎𝑟𝑖𝑎𝑏𝑙𝑒;

Initializing variables

𝑣𝑎𝑟 𝑣𝑎𝑟𝑖𝑎𝑏𝑙𝑒𝑁𝑎𝑚𝑒 = "data";

𝑙𝑒𝑡 𝑣𝑎𝑟𝑖𝑎𝑏𝑙𝑒𝑁𝑎𝑚𝑒 = "data";

Displaying data of a variable

𝑐𝑜𝑛𝑠𝑜𝑙𝑒. log(𝑣𝑎𝑟𝑖𝑎𝑏𝑙𝑒𝑁𝑎𝑚𝑒) ;

Activating strict mode

"𝑢𝑠𝑒 𝑠𝑡𝑟𝑖𝑐𝑡"; // 𝑏𝑒𝑔𝑖𝑛𝑛𝑖𝑛𝑔 𝑜𝑓 𝑐𝑜𝑑𝑒

Changing variable values

𝑣𝑎𝑟𝑖𝑎𝑏𝑙𝑒𝑁𝑎𝑚𝑒 = "𝑛𝑒𝑤𝐷ata";
Program block

// 𝑖𝑛𝑠𝑒𝑟𝑡 𝑐𝑜𝑑𝑒 ℎ𝑒𝑟𝑒

Declaring function

𝑓𝑢𝑛𝑐𝑡𝑖𝑜𝑛 𝑡𝑒𝑠𝑡𝐹𝑢𝑛𝑐𝑡𝑖𝑜𝑛() {

𝑐𝑜𝑛𝑠𝑜𝑙𝑒. 𝑙𝑜𝑔("𝐻𝑒𝑙𝑙𝑜");

𝑐𝑜𝑛𝑠𝑜𝑙𝑒. 𝑙𝑜𝑔("𝑊𝑜𝑟𝑙𝑑");

Function call

𝑡𝑒𝑠𝑡𝐹𝑢𝑛𝑐𝑡𝑖𝑜𝑛();

DATA TYPES

Boolean

𝑙𝑒𝑡 𝑖𝑠𝐷𝑎𝑡𝑎𝑉𝑎𝑙𝑖𝑑 = 𝑡𝑟𝑢𝑒;

Number

A. Decimal

𝑙𝑒𝑡 𝑎 = 10; // 10

B. Hexadecimal

𝑙𝑒𝑡 𝑏 = 0𝑥10 // 16

C. Octal

𝑙𝑒𝑡 𝑐 = 0𝑜10; // 8

D. Binary

𝑙𝑒𝑡 𝑑 = 0𝑏10; // 2
BigInt (𝑛𝑢𝑚𝑏𝑒𝑟𝑠 𝑤𝑖𝑡ℎ 𝑡ℎ𝑒 … 𝑛 𝑠𝑢𝑓𝑓𝑖𝑥)

𝑙𝑒𝑡 𝑏𝑖𝑔 = 123𝑛;

String

𝑙𝑒𝑡 𝑠𝑡𝑟 = string;

𝑙𝑒𝑡 𝑚𝑒𝑠𝑠𝑎𝑔𝑒 = ′𝑇ℎ𝑒 𝑣𝑒𝑠𝑠𝑒𝑙 \′ 𝑀𝑎𝑟𝑠\′ 𝑐𝑎𝑙𝑙𝑒𝑑 𝑎𝑡 𝑡ℎ𝑒 𝑝𝑜𝑟𝑡.′ ; → 𝑇ℎ𝑒 𝑣𝑒𝑠𝑠𝑒𝑙 ⬚′𝑀𝑎𝑟𝑠 ′ 𝑐𝑎𝑙𝑙𝑒𝑑 𝑎𝑡 𝑡ℎ𝑒 𝑝𝑜𝑟𝑡.

𝑙𝑒𝑡 𝑡𝑒𝑠𝑡 = "100" − "10"; → 90

Addition Operation

𝑙𝑒𝑡 𝑝𝑎𝑡ℎ = "𝐶:\\" + "𝑊𝑖𝑛𝑑𝑜𝑤𝑠"; → 𝐶:\\𝑊𝑖𝑛𝑑𝑜𝑤𝑠

𝑙𝑒𝑡 𝑡𝑒𝑠𝑡 = "100" + "10"; → 10010

String Interpolation

𝑙𝑒𝑡 𝑐𝑜𝑢𝑛𝑡𝑟𝑦 = "𝑀𝑎𝑙𝑎𝑤𝑖";

𝑙𝑒𝑡 𝑐𝑜𝑛𝑡𝑖𝑛𝑒𝑛𝑡 = "𝐴𝑓𝑟𝑖𝑐𝑎";

𝑙𝑒𝑡 𝑠𝑒𝑛𝑡𝑒𝑛𝑐𝑒 = `${𝑐𝑜𝑢𝑛𝑡𝑟𝑦} 𝑖𝑠 𝑙𝑜𝑐𝑎𝑡𝑒𝑑 𝑖𝑛 ${𝑐𝑜𝑛𝑡𝑖𝑛𝑒𝑛𝑡}. `;

𝑐𝑜𝑛𝑠𝑜𝑙𝑒. 𝑙𝑜𝑔(`${𝑡𝑦𝑝𝑒𝑜𝑓 𝑠𝑡𝑟} ∶ ${𝑠𝑡𝑟}`);

Getting character from a string

𝑙𝑒𝑡 𝑟𝑖𝑣𝑒𝑟 = "𝑀𝑒𝑘𝑜𝑛𝑔";

𝑙𝑒𝑡 𝑐ℎ𝑎𝑟𝑎𝑐𝑡𝑒𝑟 = 𝑟𝑖𝑣𝑒𝑟. 𝑐ℎ𝑎𝑟𝐴𝑡(2);

Undefined

𝑙𝑒𝑡 𝑣𝑎𝑟𝑖𝑎𝑏𝑙𝑒𝑁𝑎𝑚𝑒;

Implicit Conversions

𝑐𝑜𝑛𝑠𝑡 𝑠𝑡𝑟1 = 42 + "1"; // -> 421

𝑐𝑜𝑛𝑠𝑡 𝑠𝑡𝑟2 = 42 − "1"; // −> 41

METHODS

𝑙𝑒𝑡 𝑠𝑡𝑟 = "𝑗𝑎𝑣𝑎 𝑠𝑐𝑟𝑖𝑝𝑡 𝑙𝑎𝑛𝑔𝑢𝑎𝑔𝑒";

Length

𝑐𝑜𝑛𝑠𝑜𝑙𝑒. 𝑙𝑜𝑔(𝑠𝑡𝑟. 𝑙𝑒𝑛𝑔𝑡ℎ); // −> 20

𝑐𝑜𝑛𝑠𝑜𝑙𝑒. 𝑙𝑜𝑔(′𝑡𝑒𝑠𝑡′. 𝑙𝑒𝑛𝑔𝑡ℎ); // −> 4

charAt()

𝑐𝑜𝑛𝑠𝑜𝑙𝑒. 𝑙𝑜𝑔(𝑠𝑡𝑟. 𝑐ℎ𝑎𝑟𝐴𝑡(0)); // −> ′𝑗′

𝑐𝑜𝑛𝑠𝑜𝑙𝑒. 𝑙𝑜𝑔(′𝑎𝑏𝑐′. 𝑐ℎ𝑎𝑟𝐴𝑡(1)); // −> ′𝑏′

𝒔𝒍𝒊𝒄𝒆(𝒃𝒆𝒈𝒊𝒏𝑰𝒏𝒅𝒆𝒙, [𝒐𝒑𝒕𝒊𝒐𝒏𝒂𝒍] 𝒆𝒏𝒅𝑰𝒏𝒅𝒆𝒙)

𝑐𝑜𝑛𝑠𝑜𝑙𝑒. 𝑙𝑜𝑔(𝑠𝑡𝑟. 𝑠𝑙𝑖𝑐𝑒(0, 4)); // −> ′𝑗𝑎𝑣𝑎′

𝑐𝑜𝑛𝑠𝑜𝑙𝑒. 𝑙𝑜𝑔(′𝑡𝑒𝑠𝑡′. 𝑠𝑙𝑖𝑐𝑒(1, 3)); // −> ′𝑒𝑠′

𝒔𝒑𝒍𝒊𝒕(𝒃𝒆𝒈𝒊𝒏𝑰𝒏𝒅𝒆𝒙, [𝒐𝒑𝒕𝒊𝒐𝒏𝒂𝒍] 𝒆𝒏𝒅𝑰𝒏𝒅𝒆𝒙)

𝑐𝑜𝑛𝑠𝑜𝑙𝑒. 𝑙𝑜𝑔(𝑠𝑡𝑟. 𝑠𝑝𝑙𝑖𝑡(′ ′)); // −> [′𝑗𝑎𝑣𝑎′, ′𝑠𝑐𝑟𝑖𝑝𝑡′, ′𝑙𝑎𝑛𝑔𝑢𝑎𝑔𝑒′]

𝑐𝑜𝑛𝑠𝑜𝑙𝑒. 𝑙𝑜𝑔(′192.168.1.1′. 𝑠𝑝𝑙𝑖𝑡(′. ′)); // −> [′192′, ′168′, ′1′, ′1′]

Object

𝑙𝑒𝑡 𝑜𝑏𝑗 = {};

𝑙𝑒𝑡 𝑡𝑒𝑠𝑡𝑂𝑏𝑗 = {

𝑛𝑟: 600,

𝑠𝑡𝑟: "𝑡𝑒𝑥𝑡"

};

Array

𝑙𝑒𝑡 𝑑𝑎𝑦𝑠 = ["𝑆𝑢𝑛", "𝑀𝑜𝑛", "𝑇𝑢𝑒", "𝑊𝑒𝑑", "𝑇ℎ𝑢", "𝐹𝑟𝑖", "𝑆𝑎𝑡"];

𝑐𝑜𝑛𝑠𝑜𝑙𝑒. 𝑙𝑜𝑔(𝑑𝑎𝑦𝑠[0]); // −> 𝑆𝑢𝑛

instanceOf operator

a two-argument operator, which requires the tested variable (or literal) and object class to be
specified.

𝑙𝑒𝑡 𝑑𝑎𝑦𝑠 = ["𝑆𝑢𝑛", "𝑀𝑜𝑛", "𝑇𝑢𝑒", "𝑊𝑒𝑑", "𝑇ℎ𝑢", "𝐹𝑟𝑖", "𝑆𝑎𝑡"];

𝑙𝑒𝑡 𝑑𝑎𝑦 = "𝑆𝑢𝑛𝑑𝑎𝑦";

𝑐𝑜𝑛𝑠𝑜𝑙𝑒. 𝑙𝑜𝑔(𝑡𝑦𝑝𝑒𝑜𝑓 𝑑𝑎𝑦𝑠); // −> 𝑜𝑏𝑗𝑒𝑐𝑡

𝑐𝑜𝑛𝑠𝑜𝑙𝑒. 𝑙𝑜𝑔(𝑡𝑦𝑝𝑒𝑜𝑓 𝑑𝑎𝑦); // −> 𝑠𝑡𝑟𝑖𝑛𝑔

𝑐𝑜𝑛𝑠𝑜𝑙𝑒. 𝑙𝑜𝑔(𝑑𝑎𝑦𝑠 𝑖𝑛𝑠𝑡𝑎𝑛𝑐𝑒𝑜𝑓 𝐴𝑟𝑟𝑎𝑦); // −> 𝑡𝑟𝑢𝑒

𝑐𝑜𝑛𝑠𝑜𝑙𝑒. 𝑙𝑜𝑔(𝑑𝑎𝑦 𝑖𝑛𝑠𝑡𝑎𝑛𝑐𝑒𝑜𝑓 𝐴𝑟𝑟𝑎𝑦); // −> 𝑓𝑎𝑙𝑠𝑒