Submodule 5.3: JavaScript data types

Data types

There are three basic data types in JavaScript which can be inserted into a variable. These are:

1. Number
2. String
3. Boolean

Number

The number data type, consist of any number with or without decimal places.

var number1 = 12.35;
var number2 = 123;

var bigNumber = 123e4; /*1230000*/
var smallNumber = 123e-4; //0.0123

String

The string type is any type of text. Text must be surrounded with " " or ' '. Note that the quotes are not displayed on the page. If you need to have quotes displayed you must use additional quotes which shouldn’t be of the same type that you used to symbolized your script in JavaScript. For example, if you had this:var name = "This is my name", and you want to display quotes between the text, you should write: var name = " 'This is my name ' ".

var firstName = "Vasilis"; /*Vasilis*/
var lastName = 'Palilis'; //Palilis

var message = "It's alright"; //It's alright

Boolean

The Boolean type contains only two values, true and false. Booleans are commonly used on conditional as we will see later on the course.

var p = true;
var q = false;

var myBool = true; /*Boolean type*/
var myString = "true"; //String type

A variable type can change

If you do this:

var myVar = "true";

and then this:

myVar = true;

 the type of the variable is immediately changed from "string" to "boolean".

The JavaScript "typeof()"

JavaScript has an operation which gives us the type of a variable. This is the typeof() operator.
Try this on your console. Go and type typeof(3)or typeof (true). What do you see?

Exercise

1. Open your editor, create a new file and save it as exersice05.3.01.html in the folder "yourNameWEB2JS".
2. Copy the below code and paste it into the new file.
3. Save the file. You have your HTML page with the types of JavaScript variables. You can experiment on this!

Code:

The value of a variable can change

Arithmetic operators

The arithmetic operators in JavaScript are the same as the ones used in mathematics. So we have the +, -, * and / operators.
Also in JavaScript the modulus is symbolized with %. The modulus operator gives the remainder of the division. It is only applied to Integers. For example, 7%6 will give us 1.
++ and – are used for increment and decrement respectively.

Assignment operators

In JavaScript, we also have the assignment operators.

These are:

var a = 0;
  a ++ ; /* a = a + 1, The Increment operator, 1 */
 var b = 10;
  b --; /* b = b - 1, The Decrement operator, 9 */
 var c = 50; 
  c += 10; /* c = c + 10, 60 */
 var d = "Hello";
  d += "!" /* d = d + "!" , Add (concatenate) strings, Hello! */
 var x = a + b; /* The addition operator, 10 */
 var y = a * b /* The Multiplication operator, 9 */
 var z = a / b /* The Division operator, 0.1111111111111111 */
 var w = a % b; /* The Modular operator (%) returns the division remainder, 1 */

Exercise

1. Open your editor, create a new file and save it as exersice05.3.02.html in the folder "yourNameWEB2JS".
2. Copy the following code and paste it into the new file.
3. Complete the code and save the file. We want the console to display "x =13 y = 1 z = 30".

Code:

Answer:

var x = a + b; 
var y = a % b; 
var z = a * b

Some of Number and String methods

String methods

JavaScript also has String methods. These methods are very useful when working with strings.

• String length: .length. This gives us the length of a string which means how many characters we have.
• indexOf() . This gives us the position of the first occurrence of a specified text or symbol in a string, starting the counting from 0. If there are no results found, returns -1.
• Slice(). We use this method when we want to extract a particular part of a string. We specify the start and end position of the string we want to extract. The counting starts from zero. If you use positive numbers, then the counting starts from the beginning whereas if we use negative values it starts from the end.
• Substring(). This method is similar to slice() but it doesn’t accept negative values. In Substring() we specify only the start position. The second value represents the length of the string that we want to extract.

var str = "HTML, CSS, JavaScript";
 var sln = str.length; /* 21 */
 var pos = str.indexOf("C"); /* 6 */
 var res = str.slice(6, 9); /* CSS */

Number methods

JavaScript has Number Methods which are used to convert variables to numbers.
Some examples of Number Methods are:

• parseInt(). These coverts a number or a string to an integer.
• parseFloat().These coverts a number or a string to a floating point number.
• toString() . This converts a number to a string.
• toPrecision(). This converts a number to a string and returns it with the length we have specified. For example 7.89 toPrecision(2) gives 7.9.

Also, JavaScript has Math operators which are used to perform mathematical tasks.
Examples:

• Math.random(). This gives us a random number between [0,1).
• Math.sqrt(). This gives us the square root of a number.

var a = 12.345;
 var x = a.toPrecision(3); /* 12.3 */ 
 var y = Math.sqrt(16); /* 4 */
 var z = Math.random()*10; /* */
 var randomInt = parseInt(z) /* an integer between 0 and 9 */

Exercise

1. Open your editor, create a new file and save it as exersice05.3.03.html in the folder "yourNameWEB2JS".
2. Copy the below code and paste it into the new file.
3. Save the file. You have your HTML page with the Number and String methods. You can experiment on this!

Code: