Getting to Know Numbers, Operators, and Strings - Javascript: Ultimate Guide to Javascript Programming (2016)

Javascript: Ultimate Guide to Javascript Programming (2016)

Chapter 1. Getting to Know Numbers, Operators, and Strings

Browsing the internet alone gives you access to millions of lines of JavaScript codes. The moment you start your favorite internet browser (e.g. Google Chrome, Mozilla Firefox, and Internet Explorer) and began to visit a certain website, you are already communicating using the JavaScript language.

In this chapter, we will be discussing the fundamental building blocks of JavaScript language. This will help you establish a concrete foundation once you move on to advanced frameworks like jQuery.

You will learn more about numbers, operators, and strings. This chapter will also cover the different processes for you to manipulate values using operators and how can you store these values inside variables. Lastly, you will also learn how to create, run, and find JavaScript codes within HTML codes.

The Console

Before anything else, it is vital for you to have access to the web browser console. The web browser console serves as one of the developer’s tools. It logs information associated with the current web page. The information includes CSS, security errors, and JavaScript. The console will also allow you to engage with the web page by asserting JavaScript expressions.

This is where we will be executing our sample JavaScript codes within the book. You can access it by pressing F12 key on your keyboard. Look for the Console tab and you are now ready to begin.

c8SPG

Basic Numbers and Prompt

There are 2 symbols you need to familiarize as you begin to learn JavaScript:

> The greater than symbol; and,

→ The arrow symbol

The > symbol represents the JavaScript prompt. All the codes we want to enter into the console will be written after this symbol. The → symbol refers to the result produced by the code we entered.

In JavaScript language, numbers are automatically recognized. Writing the number after the prompt and hitting the Enter key on your keyboard will give you the same value as a result. Try to enter number 13 into the console and it will show the same value in return.

> 13

→ 13

The same goes with numbers that have decimal values.

> 13.29

→ 13.29

Operators

In JavaScript, mathematical operations are also acceptable. The operations commonly used in JavaScript syntax are the following:

· Addition

· Subtraction

· Multiplication

· Division

· Modulus

Addition is expressed through the + sign.

> 1 + 3

→ 4

Subtraction is expressed through the – sign.

> 10 – 5

→ 5

Multiplication is expressed through the * sign.

> 2 * 9

→ 18

Division is expressed through the / sign.

> 25 / 5

→ 5

Modulus, on the other hand, is a special operation in JavaScript language. It is expressed through the % sign. The result you’ll get is the remainder between the two numbers after dividing them.

> 23 % 2

→ 1

In the modulus example above, the console divides 23 by 2. Even if it goes 11 times in the number 23, the console will only show the remainder as the result which is 1.

PEMDAS Order

JavaScript programming follows the popular mathematical order of operations: the PEMDAS. This acronym stands for:

P - Parentheses

E - Exponents

M - Multiplication

D - Division

A - Addition

S - Subtraction

Let us take the following expression for example.

> (10 + 5) * 3

Upon pressing Enter, the console will give you this answer in return.

→ 45

The operation inside the parentheses will be solved first. In our case, it is 10 + 5 which gives us 15. After which, the sum will then be multiplied to 3. Hence, the console gives you 45.

Let us try a longer expression.

> (7 * 2) + 5 – 10 / 2

Following the order of PEMDAS, the expression will be solved as follows:

14 + 5 – 10 / 2

14 + 5 – 5

19 – 5

Hence, the console will give you this answer in return.

→ 14

Comparators

Aside from operators, JavaScript language recognizes logical operators as well which we call comparators. The comparators commonly used in JavaScript are expressed through the following syntax:

> Greater than

< Less than

== Equal

!= Not equal

>= Greater than or Equal

<= Less than or Equal

Sending an expression in JavaScript using these comparators is like asking the console with a logical question. The answer that you will get from the console may either be “true” or “false”. These answers are known to be as Boolean values.

Let us try to send the following expression to the console.

>10 != 9

This expression is like asking the console if 10 is not equal to 9 in JavaScript language. And so, the console will give you “true” as an answer since 10 is not numerically equal to 9.


Strings

Split-String-in-Javascript-Step-1

JavaScript handles, stores, and processes flat text as strings. To inform the console that we want to process flat texts, we need to enclose them within quotation marks. This will allow the console to recognize the texts as a string and will return the string back to us.

> “The quick brown fox jumps over the lazy dog”

→“The quick brown fox jumps over the lazy dog”

Multiple strings can be combined by using the concatenation method. We concatenate two or more strings by simply adding a + sign in between of strings. The console will combine all concatenated strings into a single string.

> “Lee” + “and” + “Haide”

→“Lee and Haide”

Did you notice that there is a space at the beginning and at the end of the string “ and “? This is because concatenation does not automatically considers the + sign as space. Let us try another example using a combination of strings and numbers.

> “I will deliver this at” + 5 + “PM”

→“I will deliver this at5PM”

There are two things you should notice here. First, there is no need for quotation marks for numbers when concatenating them with strings. Second, the results we received is not how we want it to be. Hence, we should add a space at the end of the first string and at the beginning of the second string. It should go like this.

> “I will deliver this at “ + 5 + “ PM”

→“I will deliver this at 5 PM”

Aside from numbers, you can also concatenate strings, numbers, and expressions altogether. Take note, however, that the console automatically evaluates mathematical expressions.

> “The rooftop needs to be “ + 15 + “ feetand “ + 1/4

→“The rooftop needs to be 15 feet and 0.25”

The fraction in our JavaScript code was automatically transformed into a value. If you need to keep the expression as it is, then you need to assert them within a string. It should be like this.

> “The rooftop needs to be “ + 15 + “ feet and 1/4”

→“The rooftop needs to be 15 feet and 1/4”

Formatting Strings with Special Characters

You can use special characters to format how strings look. One good example is the special character backslash ( \ ) followed by the letter “t”.

\t Signals the console to advance to the next tab stop

Writing strings with this additional command and the result you will get should look like this.

> “Height:\t6 ft.\t\t\tWidth:\t26 ft.”

→“Height: 6 ft.Width: 26 ft.”

Adding quotation marks within a string should be written with backslash as well.

\” Signals the console that the following quotation mark is not the start or the end of a string.

Here is how your string line should look like when asserting quotation marks inside the string and the output you will get in return.

> “Nicknames:\t\”The Geek\” \”Com Wiz\” \”Backslasher\””

→“Nicknames: “The Geek” “Com Wiz” “Backslasher””

The same rule applies if you want to assert the backslash symbol in your string output.

\\ Signals the console to add the following backslash as it is in your output.

When writing this command, the string and the output should appear as follows.

> “Target Folder:\t\”C:\\Program Files\\Directory 1\\Directory 2\””

→“Target Folder: “C:\Program Files\Directory 1\Directory 2””

You can also command the console to put values to a new line by simply adding the letter “n” after the backslash.

\n Signals the console to assert the next values in a new line.

This is how your code and the output should look like.

> “Member 1:\tFebz\nMember 2:\tDonz\nMember 3:\tTaz”

→“Member 1: Febz

→ Member 2: Donz

→ Member 3: Taz”

Comparators and Strings

Aside from numbers, comparators can also be used to compare strings to get Boolean values as an output. Let us try to use the equal comparator.

> “Obi-Wan Kenobi” == “Obi-Wan Kenobi”

→true

Basing from the example above, we got the Boolean value “true” in return because the first string is exactly the same with the second string. Let us try to alter one of these strings.

> “Obi-Wan Kenobi” == “Obi-Wan Kinobi”

→ false

Keep in mind that JavaScript language is case sensitive. Hence, if the first string was written with uppercase characters and the second string was completely written in lowercase characters; then the console will treat them as not equal.

> “Obi-Wan Kenobi” == “obi-wan kenobi”

→ false

Counting String Length

In JavaScript language, you can easily access the length of your strings. Doing so will command the console to count all the characters including the spaces and non-alphabet characters between the quotations mark that signify the beginning and end of your string. We do it by adding the following property right after the string.

.length Commands the console to count the characters within the string it follows.

This is how we write it and what kind of output we will get.

> “Pneumonoultramicroscopicsilicovolcanoconiosis”.length

→45

Now let us try to use a string with spaces and non-alphabet characters.

> “Pink, Blue, Black, Red, Purple, White, and Green”.length

→48