Variables and data display in JavaScript - ProgrammerTech
Language:

Search

Variables and data display in JavaScript

  • Share this:
Variables and data display in JavaScript

variables in javascript

Variables JavaScript, which in Arabic is called a variable and is denoted by var. Variables ( variables ) are places that are reserved in memory for the purpose of storing data in them while the program is running. We will consider it a box in which data is placed and a name is specified for it, and we can use the data by calling the box in its name.

To create a variable in JavaScript, type var at the beginning and give it a name and then an equal sign =.

 

Data types in JavaScript

There are many types of data in JavaScript:

  1. String text variables.
  2. Numerical variables number represents numbers in all their integer and decimal types.
  3. Boolean variables with a value of true or false.
  4. Undefined variables.
  5. Null variables are often used to remove data from RAM.
  6. Object variables are for more complex data.

 

The rules for variable names in JavaScript

  • Variable name can start with a capital letter, for example var Name.
  • Variable name can start with a lowercase letter, for example var name.
  • The variable name can start like this - eg var _name.
  • A variable name can start with $, for example var $name.
  • Variable name must not start with a number, eg var 1name is considered a false variable.
  • Variable name must not begin with a dot, eg var .name is considered an invalid variable.
  • The variable name must not contain any special keyboard shape.
  • The variable name does not have to be one of the reserved words in the JavaScript language, for example var else This is an error, you can see the reserved words in the JavaScript from this link w3school.

 

String javascript variables

String variables are used in JavaScript to define strings. And it is defined by writing the reserved word var, then the name we want for the variable, then an equals sign, and then we put two quotes and write the text inside it.

We want to define a text variable that holds the text value Programmer Tech and what this looks like

var name = "Programmer Tech";

We have created a text variable named name and this variable has the value Programmer Tech stored in it.

 

Number variables in javascript

Number variables are used in JavaScript to define numbers or integers. And it is defined by writing the reserved word var, then the name we want for the variable, for example number, then the equals sign, and then we write the number directly.

We want to define a scalar variable with the scalar value 28 and the form of this is as follows

var number = 28;

We have created a scalar variable named number and this variable has the value 28 stored inside it.

We can use arithmetic operations within numbers in variables, for example we want to use addition.

var number = 23.5 + 20;

When displaying the data for this variable, the result will be:

43.5

 

Boolean variables in javascript

These variables are used in logical operations and their value is limited to true or false only. And it is defined by writing the reserved word var, then the name we want for the variable, for example, boolean, then the equals sign, and then we write the value.

var boolean = true;

 

undefined variables undefined javascript

It means undefined data, and this type is often dealt with in the case of writing the variable name incorrectly or using a variable whose value is not specified. and writes as

var x;

Here this variable was written incorrectly and when we display the value of this variable, the display result will be

undefined

 

Null variables in javascript

This type of data is used to erase the data from the variable, it means empty or in the simplest sense it is used to remove data from RAM and it is one of the reserved words in this language. In Javascript, the Null data type has only one value, which is null.

If the value of the variable is null, then the variable does not contain a valid number, string, boolean, array, or object. So we can clear the contents of a variable by assigning it a null value.

 

Object variables in JavaScript

The way to write object data is by writing var, followed by a variable name, = sign, and parentheses {}. And within the parentheses, we specify a property and then a colon, followed by a value for it, and we separate each property with a comma.

var person = {firstName:"Muhammad", lastName:"Alush", age:28};

We note from the previous code that the data and its values ​​are differentiated with a comma.

Example:

var car = {
	name:"scoda",
	modele:"2002",
	color:"white"
};

We took the car object and gave it 3 values:

 

  • Name: scode.
  • Model: 2002.
  • the color is white.

 

And the way to display the data for this method is that we create an id in the html page and we called it an object as follows:

<div id = "object"> </div>

The way to display the data is in the form

var car = {
	name:"scoda",
	modele:"2002",
	color:"white"
        };
document.getElementById("object").innerHTML = "Name: " + car.name;

We wrote document.getElementById and then opened parentheses and wrote the word object, which is the hands we wrote in the html file. And then we wrote .innerHTML=, meaning we want to display the following data. We wrote Name to write this word and then the value of the data we want to assign to it. And we wrote the name of the variable car and we specified a name for it, which means show me the value of the name from this code.

When viewing the data in the browser the result will be:

Name: scoda

We notice that the word Name that we wrote is written to us so that we can write the value after it. And in the same way if we want to display other data such as color and model.

There is another way to write the object, which is:

var car = {};
car.name = "mercedes";
car.model = "2014";
document.getElementById("object").innerHTML = "Name: " + car.name;

When we run the code, we will get the result

Name: mercedes

In the future, we can change the values ​​of the variables and display them in the console.

var car = {
	name:"scoda",
	modele:"2002",
	color:"white"
        };
car.modele = "scoda 2022";
console.log(car.modele);

We also noted how we updated the modele's data values ​​for 2022 and review these results in the console. If we run this code, the result will be updated as follows

scoda 2022

And if we want to delete one of the properties from the object, for example, we want to delete the color and the delete code will be.

var car = {
	name:"scoda",
	modele:"2002",
	color:"white"
        };
car.modele = "scoda 2021";
delete car.color;
console.log(car.color);

And if we review this result, it will be like:

undefined

 

View data in javascript

We will explain to you the ways to display data in JavaScript, in the event that we have variables that we want to display, for example. There are three ways to display data in JavaScript:

  1. via console.
  2. Via dialuk alert popup.
  3. Via html and bind it in id and use getElementById.

 

View data via the javascript console

Display the data through the console and we write console.log and then open parentheses and we write inside the data or the variable whose data we want to display. Then we open the page in the browser and press the right button on the mouse and choose Inspect Element and go to the console option and find the data in it.

var age = 28;
console.log ("Age: \n" + age);

When we open the browser and go to the console, we will find the result inside it as follows.

view-data-in-console-javascript1-1.webp

 

Displaying data with dial alert javascript

We type the reserved word alert and then open parentheses and we write inside the data or write the name of the variable whose data we want to display.

var age = 28;
alert ("Age: \n" + age);

When we open the work page in the browser.

view-data-in-alert-javascript2-1.webp

We notice that it shows us the data as a dialog when we open or update the page.

 

View data by getElementById

By creating an html element within the html file and giving it a specific id, as in this example.

  • in html file
<body>
	<h1 id="learn javascript"></h1>
</body>

We created the h1 element and gave it the hands learn javascript to invoke via javascript.

  • in a javascript file.
var age = 26;
document.getElementById("learn javascript").innerHTML = "age: \n" +age;

We created the variable age and then started displaying the data and associating it with the html by typing document.getElementById, opening parentheses, and placing the hands we selected into the html file and rendered.

view-data-getelementbyid3-1.webp

 

note:

JavaScript is case sensitive, for example, an uppercase letter is different from a lowercase letter. If we want to know the data type of a variable we write typeof.

var age = 28;
console.log (typeof age);

When you run it and display the result in any data view, the result will be

number

 

Writing a variable var in javascript

if(4==4){
	var name = "data:";
	var age =27;
	var name1 = "kaissar:";
	var age1 = 21;
}
console.log(name,age,name1,age1)

We create a condition and say if 4 equals 4 and inside the condition we write several text and numeric variables, and display the data through the console.

When you run the code, you will see the result.

4-1.webp

 

let variables in JavaScript

if(4==4){جافاسكربت
	let name = "data:";
	let age =27;
	let name1 = "kaissar:";
	let age1 = 21;
}
console.log(name,age,name1,age1)

We create a condition and say if 4 equals 4 and inside the condition we write several text and numeric variables let, and display the data through the console.

5-1.webp

 

As we have noticed, this error has appeared to us that it does not exist, so let's take another example and correct it in order to understand the difference more.

if(4==4){
	let name = "data:";
	let age =27;
	let name1 = "kaissar:";
	let age1 = 21;
console.log(name,age,name1,age1)
}

We put the data display inside the conditional statement and not outside it.

The result will be.

6-1.webp

 

As we have noticed, the data has been shown to us and the difference between var and let. When we use the console in let outside the conditional, it will give an error. Rather, we must use the display of data inside the conditional statement in order for the command to be executed correctly.

 

const variables in javascript

if(4==4){
	const name = "data:";
	const age =27;
	const name1 = "kaissar:";
	const age1 = 21;
console.log(name,age,name1,age1)
}

If we put the data display command outside the conditional statement, it will give a non-existent error, but the data display must be used as in let inside the conditional statement. If we try to change the value in var and let it will change without problems but in const we can't change it.

7-1.webp

 

Summary of the lesson on variables in javascript

  1. In var it is possible to modify the value and the way the data is displayed outside the conditional statement.
  2. In let it is possible to modify the value and the way the data is displayed within the conditional statement.
  3. In const it is not possible to modify the value and the way the data is displayed inside the conditional statement.

Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش من سورية من ريف حلب الشرقي 1994, محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com