Javascript data types

Types in Javascript are a representation of data because it does not require variables to declare their type, because all types are automatically converted

Type boolean

The Boolean type simply distinguishes between two states, a success or enabled state, true value, true, and a failure or deactivated state, false value, false

Numeric types

The numeric types can be divided into real and integer

Type integer numeric

• Decimal

  integer base 10

  Both positive and negative

• Hexadecimal

  integer base 16

  Placed before the base number 16 0x or 0X

• Octal

  integer base 8

  We place a zero before the number in octal

Numeric type real

The actual is made up of a whole part and the other fractional separated by a point of the previous

The fractional part can be composed by an indicator of exponent E or E followed by an integer that indicates the value of the exponent

var1 = 20; //decimal
var2 = 0x14; //hexadecimal
var3 = 024; //octal

//real
var4 = 25.478;
var5 = 2.3E45;
var6 = 5.6E-2;
var7 = -3.789;

Type string

A string is a string of characters delimited by quotation marks

The quotation marks will be single or double according to a particular rule

The default is to use double quotation marks ("), but if any statement to be included in those quotation marks, if that statement contains a string or in turn another statement that must also be delimited by those quotation marks, these quotation marks will then be single quotation marks (')

confirm("Are you sure?");
OnMouseOver = "confirm('Are you sure?');

On the other hand, we must take into account the writing of special characters in what we call escape sequences

The escape sequence always begins with the character \ and then another character is written that represents the special code or the number in octal or hexadecimal of its ASCII code

Escape sequences represent a single character in the strings in which they appear

Arrays

We can create arrays that we will give a name and that we will access with an index that will start from element number 1 (not from 0 as in Java or in C / C++)

In the arrays as with variables, there are no default types

To create an array it is necessary to define a function like the one below:

function CreateArray(n){
    this.length = n;
    for (var i=1; i<=n; i++){
        this[i] = 0;
    }
    return this;
}

Comment on the function that the reserved word this refers to the current variable, that is, the variable that will contain the array

On the other hand, to observe that arrays have a length property that shows us the length of that array

Finally show the use of this function:

my_array = new CreateArray(2);
// new: We create an instance of the object, in this case an array
// We fill the array
my_array[1] = "Pepe";
my_array[2] = 35;
length = my_array.length; //length will be 2

Objects

Objects consist of a set of values, properties, and a set of methods applied to those values

It is these methods that allow us to modify the state of that object, that is, the value of its properties

In JavaScript there are predefined objects

In addition, the programmer can also create his own objects

To make use of the properties of an object, simply use the following notation:

my_object.property

This will be seen more clearly in the following example, in which we have a University object in which we have the properties: Name, Last Name, Age and Faculty

Assuming we have a Uni1 variable that contains a University object at any given time:

Uni1.Name = "Pedro";
Uni1.Last_name = "Navarro";
Uni1.Age = 13;
Uni1.Faculty = "Telecommunications";

But not only can we access the properties of an object by using the notation above, because, there is a relationship between objects and arrays, since we can access an object as if this were an array and its elements were the properties of object in the order in which they were defined

Uni1[1] = "Pedro";
Uni1[2] = "Navarro";
Uni1[3] = 13;
Uni1[4] = "Telecommunications";

Uni1["Name"] = "Pedro";
Uni1["Last_name"] = "Navarro";
Uni1["Age"] = 13;
Uni1["Faculty"] = "Telecommunications";

This type of vectors are referred to as associative arrays

A method it is a function assigned to an object

The following syntax is used to assign a function as a method of an object:

We can observe that the name of the method is the way in which we want to name the function within the object

A method can be called in a context using the syntax:

Object.methodName(parameters);

The reserved word this allows us to reference the current object

For example, suppose that the validate function allows you to validate the properties of an object through an associated minimum and maximum; we will have:

function validate(obj, lowval, hival){
    if((obj.value < lowval) || (obj.value > hival))
        alert("Invalid value");
}

You may call then the function validate to change the values of a form by using the reserved word this and the attribute OnChange to detect the changes of values

This is done through the HTML flag and the event:

<input type = "text" name = "age" OnChange = "validate(this,18,99)">

In general, the word this refers to the current object

The client and the server have a set of predefined objects that can be completed using new objects. The creation of an object is done in two stages:

1. The object is defined by a function
2. Create an object using the reserved word new

To define an object, a function will be created to specify its name, its functions and its associated methods

For example, if you want to create a university object whose properties would be name, surname, age and DNI, the following generic function will be defined:

The object instance will be created as follows:

function Univers(name, lname, age, dni){
	this.name= name;
	this.last_name = lname;
	this.age = age;
	this.dni = dni;
}  // this: property of the object from the arguments

//The object instance will be created as follows:
student = new univers("Juan","Delgado",12,44565789);

The properties of an object can be described by other objects

function Note_M(course1, course2, course3, final){
	this.course1 = course1;
	this.course2 = course2;
	this.course3 = course3;
	this.final = final;
}

We make the university object have a property of the Note_Mean object therefore:

function Univers(name, lname, age, dni, exp){
    this.name = name;
    this.last_name = lname;
    this.age = age;
    this.dni = dni;
    this.expedient = exp;
}

Therefore, to access the final note:

student.expedient.final

When an object is defined, it is possible to enrich its description through new properties

student.dni = 44567234;

Now the property id belongs to the instance of the object contained in the student

This modification will not affect the other objects of the university type, since to add a property to an object type it must appear in its definition

The definition of methods associated with an object can be specified in the object definition

For example, for the university object we define a function that shows the name, surname, DNI and faculty of a student

function Data(){
	var string = this.name + " " + this.last_name +
	" " + this.age + " " + this.dni +
	" " + this.expedient.course1 + " " +
	this.expediente.course2 + " " + this.expediente.course3 +
	" " + this.expedient.final;
	alert(string);
}  //this: object to which the method belongs

This function becomes a method associated to the type by performing in its definition the following:

function Univers(name, lname, age, dni, exp){
    this.name= name;
    this.last_name = lname;
    this.age = age;
    this.dni = dni;
    this.expedient = exp;
    this.Data = Data;
}

Its use will be:

student.Data();

The following example shows the function of the type of university that we have created

To do this we create the following form:

<center>
<form id="form1" name="form1">
<table border="1" style="font-size: 7.5px;">
    <thead>
         <tr>
             <th colspan="4"><center>Average mark of the academic stage</center></th>
         </tr>
     </thead>
        <td><label for="name"><strong>Name:</strong></label><input type="text" id="name" name="name" value="none" size="15" /></td>
        <td><label for="last_name"><strong>First surname:</strong></label><input  type="text" id="last_name" name="last_name" value="none" size="15" /></td>
        <td><label for="edad"><strong>Age:</strong></label><input type="text" id="age" name="age" value="none" size="15" /></td>
        <td><label for="DNI"><strong>DNI:</strong></label><input type="text" id="DNI" name="DNI" value="none" size="15" /></td>
    </tr>
    <tr>        
        <td><label for="note1"><strong>First course:</strong></label><input type="text" id="note1" name="note1" value="0" size="4" /></td>
        <td><label for="note2"><strong>Second course:</strong></label><input type="text" id="note2" name="note2" value="0" size="4" /></td>
        <td><label for="note3"><strong>Third course:</strong></label><input type="text" id="note3" name="note3" value="0" size="4" /></td>
        <td><label for="final"><strong>Final note:</strong></label><input type="text" id="final" name="final" value="0" size="4" /></td>
    </tr>  
</table>

<input type="button" value=" Show data" onClick="Show_Univers(this.form)"></input>
</form>
</center>

The Show_Univers (form) function is defined as follows:

function Show_Univers(form){
	var note = new Note_M(form.note1.value, form.note2.value,
	form.note3.value, form.final.value);
	var student = new Univers(form.name.value, form.last_name.value,
	form.age.value, form.DNI.value, note);
	student.Data();
}

Note Have not checked if the data that is inserted in the form are "correct", that is, if the notes are between 0 and 10, if the first and last names are composed only of letters or the age is numerical

Null value

In JavaScript variables can be assigned a value that indicates the empty value, this value is null

The conversion of data types

First of all, remember that JavaScript doesn't need type declaration

The contents of the variable will be converted automatically in the course of the programme according to its use

The type conversion scheme is based on the following principle: the associated type corresponds to that of the left operand

This is because the evaluation is done from left to right

For example, suppose you define the following variables:

var an_string = "7";
var a_number = 42;

If we evaluate the following expressions

x = an_string + a_number;
y = a_number + an_string;

The first expression will convert the a_number variable to a character string because the operand on the left an_string is a string of characters

This expression concatenates the two character strings and the result of x is:"742"

Conversely, the second expression converts the string an_string to a numeric value because the left operand a_number, is as its own name indicates, a number

This second expression sums the two numbers and the result of y is: 49

Type conversion cannot be done in all possible cases: certain character strings cannot be converted to number

Such conversions fail with an error

For example:

var an_string = "Pepe";
var a_number = 578;
y = a_number + an_string; // ERROR: Pepe can not become number

Table that summarizes type conversion in JavaScript: