Starting with Javascript through its syntax

•0•0Comment iconComment iconComment iconComment icon

To develop our functions in Google Spreadsheet we will need to learn Javascript! Let's start with its syntax

Writer image

Translated byEditorial

Writer image

Revised byEditorial

Edit Article

Javascript is one of the main programming languages in 2021. Most websites use it to make their content interactive.

Like any language, we will start by studying its syntax. How should we write so the computer understands something? This guide to understanding syntax was written based on the explanations provided by Mozillalink outside website, one of the main browsers today.

You will need to test your code while you learn!! For this, I recommend any online platform focused on JavaScript. Repl created a very cool website where you can write your code in JavaScript and immediately see the results, you can access it herelink outside website, we recommend it.

So, shall we start writing in JavaScript?

Variables

A variable is an object capable of holding data. They are associated with "names", called identifiers. In general, variables are stored in your computer's RAM, which can be accessed extremely quickly.

To create a variable in JavaScript, just think of a nice name and put it after the words: var, let or const. For example:

| var professor_leon;

The example above creates the variable "professor_leon". At this moment I have not assigned anything to it; it is a variable that is not defined, it simply exists. Let’s understand:

var -> Declares a variable, optionally initializing it with a value.

let -> Declares a block-scoped local variable, optionally initializing it with a value.

const -> Declares a block-scoped constant, read-only.

"Block scope" is a somewhat advanced term; it tells where your variable will be used: whether you will use it throughout execution or whether you can discard the variable when changing functions. For now, we will only start variables in the most traditional way: using var.

Some variables already exist automatically even if you have not created them. These variables are part of the JavaScript system and you can access them. Therefore, these names are prohibited for creating new variables because they are already being used:

alertarraybreakboolean
bytecasecatchchar
continuedatedocumentdelete
doelseescapefinally
floatfunctiongotohistory
ifimportimagelocation
namenewobjectopen
privatepublicshortstatic
statusstringvarvoid
voidvolatilewhilewith

There are more names than these and as JavaScript grows there will probably be even more, but these are examples of the most common ones.

Basic syntax

In the previous example, we saw a semicolon at the end of the sentence that called the variable (";"). Each instruction given to JavaScript is preferably separated by a semicolon (";"), so it symbolizes the end of the instruction that created a variable.

JavaScript is also case-sensitive and uses the Unicode character set. For example, professor_leon and professor_Leon are two different variables and both will be stored in memory. Unicode refers to the range of letters you can use; emojis are not allowed, but German or Latin characters are allowed (professor_leão).

The Console

When programming, it is very important to follow your code and check whether everything is going according to plan. For this, JavaScript has a function called "console.log". This function will display on the screen the value of the variable or what is passed as input. Example:

| var professor_leon;

| console.log(professor_leon);

The instructions above will display the value "undefined" at the end, which means "undefined". The value of the variable professor_leon was indeed not defined, and that is what was requested to be displayed since it served as input to the "console.log" function.

Comments

Code can be very complicated, and so we do not get lost we can write comments in the middle of it. Comments can be written in 2 ways.

The first way is to use 2 forward slashes ("//") to ignore any text on the same line after them.

| var professor_leon; // hi

The second way is to open and close with slash and asterisk ("/" and "/") and JavaScript will ignore any text inside it, even if there are several lines between them.

| /*

| Everything here will be ignored

| */

Object types

In JavaScript there are several object types available, such as:

- Undefined

- Integer number

- Floating-point number

- String

- Boolean

- Array

- Object or dictionaries

Integer Number Vs Floating-point Number

There are several ways to store numbers in the computer. Most of the time you will use two types of number storage for variables: int and float.

Int are whole numbers:

| var numero_int = 0;

| var numero_int = new Number(0);

Float are rational numbers and are accessed by placing a "point" right after the number to denote the decimal separator (in the international decimal system a period is used, while in Brazil a comma is used):

| var numero_float = 10. ;

You can transform a float number into an int using the parseInt formula:

| var numero_int = parseInt( numero_float );

The opposite with the parseFloat formula:

| var numero_float = parseInt( numero_int );

String

String is used to store and manipulate characters and text. It can be initialized in the following ways:

| var texto = 'Leon';

| var texto = String('Leon');

| var texto = new String('Leon');

We need to close the text with quotes both at the beginning and at the end. The quotes can also be double: " or '; the important thing is to close the text the same way it started.

If you need to use a quote and do not want to end the String yet, you can use escape characters to tell the system that that character is literal:

| var texto = "Leon\"";

Returns Leon".

You can join two variables of the String type by adding them.

| var primeiro_nome = 'Leon';

| var segundo_nome = 'Diniz';

| var nome_inteiro = primeiro_nome + segundo_nome;

It will return "LeonDiniz" all together. You can add a space between them:

| var nome_inteiro = primeiro_nome + " " + segundo_nome;

It will return "Leon Diniz", more correctly.

You can also add variables of different scope, which will cause them to be automatically converted to String.

| var juntar = 'Leon' + 2;

It will return 'Leon2'.

| var juntar = '2' + 2;

It will return '22'.

To convert from String to Number, you should use the parseInt and parseFloat formulas.

Boolean

Boolean can take two values, true and false. You can define the variable manually as Boolean or adopt a mathematical comparison:

| var first_boolean = true;

| var second_boolean = false;

| var third_boolean = 4 > 2; // will return true

| var fourth_boolean = 1 > 2; // will return false

Array

An array literal is a list of zero or more expressions, each of which represents an array element, enclosed in square brackets ([]). When you create an array using an array literal, it is initialized with the specified values as its elements, and its length is defined by the number of specified elements.

| var string_array = ["French Roast", "Colombian", "Kona"];

| var number_array = [2, 3, 3];

An array is very useful for storing a lot of information in one place. To access one of these pieces of information, you can use the position of the item in the array. Arrays start at zero, that is, the first item is in position zero.

| number_array[0]; // will return 2

| string_array[2]; // will return "Kona"

Objects or dictionaries

An object literal is a list of zero or more pairs of property names and associated values, placed between curly braces ({}).

| var dictionary_object = {

| 'L': 'Lion',

| 'G':'Giraffe'

| };

This object will work like a dictionary. When looking up the letter L, it will return 'Lion'. When looking up the letter G, it will return 'Giraffe'. Very good for playing STOP or for when you have various customer characteristics and want to store them (CPF, Phone, Name, etc...).

To retrieve stored values, there are two ways:

| dictionary_object.L // will return 'Lion'

| dictionary_object['L'} // will return 'Lion'

| dictionary_object.G // will return 'Giraffe'

| dictionary_object['G'] // will return 'Giraffe'

Exercises

1. Check the type of the following variables:

var a = 10, b = 4.50, c = "Water", d = true, e;

2. Create 5 variables of type String and concatenate them at the end to make a text.

3. Create an array from number 1 to number 30. Access the item in position 25. What number is it?

4. Create a dictionary of your life:

(a) Write the following information in it: CPF, First Name, Family Name, Phone, Email, Date of Birth, How old you are, Text about what you think about JavaScript.

(b) Concatenate the First Name with the Family Name to result in your Full Name.

Send your news

Topics

javascript programação google planilhas
Le Cursos logo