Extra Block Types (EBT) - New Layout Builder experience❗

Extra Block Types (EBT) - styled, customizable block types: Slideshows, Tabs, Cards, Accordions and many others. Built-in settings for background, DOM Box, javascript plugins. Experience the future of layout building today.

Demo EBT modules Download EBT modules

❗Extra Paragraph Types (EPT) - New Paragraphs experience

Extra Paragraph Types (EPT) - analogical paragraph based set of modules.

Demo EPT modules Download EPT modules

Scroll

Javascript Lesson 1 Variables and Operations on Them

16/04/2025, by Ivan

I won't beat around the bush describing every variable type and operation—we don't need that. Our main goal is to grasp the basic syntax of JavaScript, then move on to learning jQuery, and from there you’ll be able to expand your JavaScript knowledge on your own. If you're more interested in studying JavaScript in-depth and don't care for working with this amazing framework, you should probably find a more comprehensive JavaScript textbook. But if you want to build sites in Drupal and learn jQuery afterward, then we're on the same path. So let's get started.

In this lesson, we’ll go over variables—what they are and how to work with them.

Variables are one of the core concepts in programming. To understand programming, you need a clear grasp of what a variable is, how and where it's stored, and what happens to it during the execution of a program. A variable is a value that changes as the program runs.

Variables are data used in a program that have names. As you know, data is stored and processed in a computer's memory—temporarily in RAM while a program runs, and permanently on disk storage when saved. When creating programs, we use various data types—different types of variables. These could be numbers, characters, text, boolean values, procedures, dates, and so on, which may also have subtypes. For example, numerical data may be integers or floating-point numbers. Based on the data type, the program allocates a certain number of memory cells to store the variable’s value. These cells are given names—variable names—and store the corresponding values. They remain until the program ends or until the variable is assigned a new value. The variable name stays the same for the program’s duration, but its value can change. In JavaScript, not only can the value of a variable change, but its type can as well.

New variables are declared using the var keyword:

var x;

This declares the variable x. We can also assign it a value right away:

var x = 10;

Note that in JavaScript (like in C++ and PHP), we end each statement with a semicolon. We also used the assignment operator (=) to assign the value 10 to the variable x. Variable names should be written in Latin letters and without spaces, for example:

var myname; – correct

var my name; – incorrect

A variable name can't begin with a digit or special character, but it can contain digits. For example:

var name1; – correct

var name2; – correct

var test4me; – correct

var lesson2you; – correct

var 3money; – incorrect

Data Types (Variable Types) in JavaScript

For now, it's enough to know about numeric and string types. Later, we’ll learn about booleans, arrays, objects, and other types. We'll cover them as needed in the course.

Numeric Variables

Numeric variables store numbers:

var y = 15;
alert(y);

We can perform arithmetic operations with numbers just like in math:

// declare variables
var x = 10;
var y = 5;
var z1, z2, z3, z4; // declare multiple variables at once

// perform operations
z1 = x + y;
z2 = x * y;
z3 = x - y;
z4 = x / y;

// output results
alert(z1);
alert(z2);
alert(z3);
alert(z4);

String Variables

String variables contain text, and we wrap them in quotes:

var str = 'Hello, everyone!';
alert(str);

You can use either single or double quotes. Strings can be concatenated using the + operator:

var str1 = 'Hello';
var str2 = ', everyone';
alert(str1 + str2 + '!');

JavaScript also allows type conversion, for example:

var str = '11'; // string variable
var num1 = 2; // number variable
var num2; // another number variable
var num3;

num2 = parseInt(str); // convert string to number
num3 = num1 + num2;
alert(num3); // should output 13

Here, we use the parseInt() function (we’ll cover functions in a separate topic later) to convert a string to an integer.