Learning Intro to Programming | Intro to JavaScript | Variables | Data Types. Drop your notes and doubts here.
2 Likes
@dharshini-ta-fsr On 22-05-2023,Screen Recording is not fully uploaded in edyoda js module 1st session.
2 Likes
Javascript notes 22/05/2023
JavaScript is the world’s most popular programming language.
JavaScript is the programming language of the Web.
JavaScript is easy to learn.
JavaScript Can Change HTML Content
One of many JavaScript HTML methods is getElementById().
The example below “finds” an HTML element (with id=“demo”), and changes the element content (innerHTML) to “Hello JavaScript”:
Example
document.getElementById(“demo”).innerHTML = “Hello JavaScript”;
JavaScript accepts both double and single quotes:
Example
document.getElementById(‘demo’).innerHTML = ‘Hello JavaScript’;
JavaScript Syntax
JavaScript syntax is the set of rules, how JavaScript programs are constructed:
// How to create variables:
var x;
let y;
// How to use variables:
x = 5;
y = 6;
let z = x + y;
JavaScript Values
The JavaScript syntax defines two types of values:
Fixed values
Variable values
Fixed values are called Literals.
Variable values are called Variables.
JavaScript Literals
The two most important syntax rules for fixed values are:
- Numbers are written with or without decimals:
10.50
1001
2. Strings are text, written within double or single quotes:
“John Doe”
‘John Doe’
JavaScript Comments
JavaScript comments can be used to explain JavaScript code, and to make it more readable.
JavaScript comments can also be used to prevent execution, when testing alternative code.
Single Line Comments
Single line comments start with //.
Any text between // and the end of the line will be ignored by JavaScript (will not be executed).
This example uses a single-line comment before each code line:
Example
// Change heading:
document.getElementById(“myH”).innerHTML = “My First Page”;
// Change paragraph:
document.getElementById(“myP”).innerHTML = “My first paragraph.”;
This example uses a single line comment at the end of each line to explain the code:
Example
let x = 5; // Declare x, give it the value of 5
let y = x + 2; // Declare y, give it the value of x + 2
Multi-line Comments
Multi-line comments start with /* and end with */.
Any text between /* and */ will be ignored by JavaScript.
This example uses a multi-line comment (a comment block) to explain the code:
Example
/*
The code below will change
the heading with id = “myH”
and the paragraph with id = “myP”
in my web page:
*/
document.getElementById(“myH”).innerHTML = “My First Page”;
document.getElementById(“myP”).innerHTML = “My first paragraph.”;
It is most common to use single line comments.
Block comments are often used for formal documentation.
JavaScript Variables
4 Ways to Declare a JavaScript Variable:
Using var
Using let
Using const
Using nothing
What are Variables?
Variables are containers for storing data (storing data values).
In this example, x, y, and z, are variables, declared with the var keyword:
Example
var x = 5;
var y = 6;
var z = x + y;
In this example, x, y, and z, are variables, declared with the let keyword:
Example
let x = 5;
let y = 6;
let z = x + y;
In this example, x, y, and z, are undeclared variables:
Example
x = 5;
y = 6;
z = x + y;
From all the examples above, you can guess:
x stores the value 5
y stores the value 6
z stores the value 11
When to Use JavaScript var?
Always declare JavaScript variables with var,let, orconst.
The var keyword is used in all JavaScript code from 1995 to 2015.
The let and const keywords were added to JavaScript in 2015.
If you want your code to run in older browsers, you must use var.
When to Use JavaScript const?
If you want a general rule: always declare variables with const.
If you think the value of the variable can change, use let.
In this example, price1, price2, and total, are variables:
Example
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
The two variables price1 and price2 are declared with the const keyword.
These are constant values and cannot be changed.
The variable total is declared with the let keyword.
This is a value that can be changed.
Just Like Algebra
Just like in algebra, variables hold values:
let x = 5;
let y = 6;
Just like in algebra, variables are used in expressions:
let z = x + y;
From the example above, you can guess that the total is calculated to be 11.
Note
Variables are containers for storing values.
JavaScript Let:
Variables defined with let can not be redeclared.
Variables defined with let must be declared before use.
Variables defined with let have block scope.
Cannot be Redeclared
Variables defined with let can not be redeclared.
You can not accidentally redeclare a variable declared with let.
With let you can not do this:
let x = “John Doe”;
let x = 0;
With var you can:
var x = “John Doe”;
var x = 0;
Block Scope
Before ES6 (2015), JavaScript had Global Scope and Function Scope.
ES6 introduced two important new JavaScript keywords: let and const.
These two keywords provide Block Scope in JavaScript.
Variables declared inside a { } block cannot be accessed from outside the block:
Example
{
let x = 2;
}
// x can NOT be used here
Variables declared with the var keyword can NOT have block scope.
Variables declared inside a { } block can be accessed from outside the block.
Example
{
var x = 2;
}
// x CAN be used here
Redeclaring Variables
Redeclaring a variable using the var keyword can impose problems.
Redeclaring a variable inside a block will also redeclare the variable outside the block:
Example
var x = 10;
// Here x is 10
{
var x = 2;
// Here x is 2
}
// Here x is 2
Redeclaring a variable using the let keyword can solve this problem.
Redeclaring a variable inside a block will not redeclare the variable outside the block:
Example
let x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
JavaScript Const
The const keyword was introduced in ES6 (2015).
Variables defined with const cannot be Redeclared.
Variables defined with const cannot be Reassigned.
Variables defined with const have Block Scope.
Cannot be Reassigned
A const variable cannot be reassigned:
Example
const PI = 3.141592653589793;
PI = 3.14; // This will give an error
PI = PI + 10; // This will also give an error
Must be Assigned
JavaScript const variables must be assigned a value when they are declared:
Correct
const PI = 3.14159265359;
Incorrect
const PI;
PI = 3.14159265359;
When to use JavaScript const?
Always declare a variable with const when you know that the value should not be changed.
Use const when you declare:
A new Array
A new Object
A new Function
A new RegExp
Constant Objects and Arrays
The keyword const is a little misleading.
It does not define a constant value. It defines a constant reference to a value.
Because of this you can NOT:
Reassign a constant value
Reassign a constant array
Reassign a constant object
But you CAN:
Change the elements of constant array
Change the properties of constant object
Constant Arrays
You can change the elements of a constant array:
Example
// You can create a constant array:
const cars = [“Saab”, “Volvo”, “BMW”];
// You can change an element:
cars[0] = “Toyota”;
// You can add an element:
cars.push(“Audi”);
But you can NOT reassign the array:
Example
const cars = [“Saab”, “Volvo”, “BMW”];
cars = [“Toyota”, “Volvo”, “Audi”]; // ERROR
Constant Objects
You can change the properties of a constant object:
Example
// You can create a const object:
const car = {type:“Fiat”, model:“500”, color:“white”};
// You can change a property:
car.color = “red”;
// You can add a property:
car.owner = “Johnson”;
But you can NOT reassign the object:
Example
const car = {type:“Fiat”, model:“500”, color:“white”};
car = {type:“Volvo”, model:“EX60”, color:“red”}; // ERROR
JavaScript Data Types
JavaScript has 8 Datatypes
- String
- Number
- Bigint
- Boolean
- Undefined
- Null
- Symbol
- Object
The Object Datatype
The object data type can contain:
- An object
- An array
- A date
Examples
// Numbers:
let length = 16;
let weight = 7.5;
// Strings:
let color = “Yellow”;
let lastName = “Johnson”;
// Booleans
let x = true;
let y = false;
// Object:
const person = {firstName:“John”, lastName:“Doe”};
// Array object:
const cars = [“Saab”, “Volvo”, “BMW”];
// Date object:
const date = new Date(“2022-03-25”);
Note
A JavaScript variable can hold any type of data.
The Concept of Data Types
In programming, data types is an important concept.
To be able to operate on variables, it is important to know something about the type.
Without data types, a computer cannot safely solve this:
let x = 16 + “Volvo”;
Does it make any sense to add “Volvo” to sixteen? Will it produce an error or will it produce a result?
JavaScript will treat the example above as:
let x = “16” + “Volvo”;
Note
When adding a number and a string, JavaScript will treat the number as a string.
Example
let x = 16 + “Volvo”;
Example
let x = “Volvo” + 16;
JavaScript evaluates expressions from left to right. Different sequences can produce different results:
JavaScript:
let x = 16 + 4 + “Volvo”;
Result:
20Volvo
JavaScript:
let x = “Volvo” + 16 + 4;
Result:
Volvo164
In the first example, JavaScript treats 16 and 4 as numbers, until it reaches “Volvo”.
In the second example, since the first operand is a string, all operands are treated as strings.
JavaScript Types are Dynamic
JavaScript has dynamic types. This means that the same variable can be used to hold different data types:
Example
let x; // Now x is undefined
x = 5; // Now x is a Number
x = “John”; // Now x is a String
JavaScript Strings
A string (or a text string) is a series of characters like “John Doe”.
Strings are written with quotes. You can use single or double quotes:
Example
// Using double quotes:
let carName1 = “Volvo XC60”;
// Using single quotes:
let carName2 = ‘Volvo XC60’;
You can use quotes inside a string, as long as they don’t match the quotes surrounding the string:
Example
// Single quote inside double quotes:
let answer1 = “It’s alright”;
// Single quotes inside double quotes:
let answer2 = “He is called ‘Johnny’”;
// Double quotes inside single quotes:
let answer3 = ‘He is called “Johnny”’;
You will learn more about strings later in this tutorial.
JavaScript Numbers
All JavaScript numbers are stored as decimal numbers (floating point).
Numbers can be written with, or without decimals:
Example
// With decimals:
let x1 = 34.00;
// Without decimals:
let x2 = 34;
Exponential Notation
Extra large or extra small numbers can be written with scientific (exponential) notation:
Example
let y = 123e5; // 12300000
let z = 123e-5; // 0.00123
Note
Most programming languages have many number types:
Whole numbers (integers):
byte (8-bit), short (16-bit), int (32-bit), long (64-bit)
Real numbers (floating-point):
float (32-bit), double (64-bit).
Javascript numbers are always one type:
double (64-bit floating point).
You will learn more about numbers later in this tutorial.
JavaScript BigInt
All JavaScript numbers are stored in a a 64-bit floating-point format.
JavaScript BigInt is a new datatype (ES2020) that can be used to store integer values that are too big to be represented by a normal JavaScript Number.
Example
let x = BigInt(“123456789012345678901234567890”);
You will learn more about BigInt later in this tutorial.
JavaScript Booleans
Booleans can only have two values: true or false.
Example
let x = 5;
let y = 5;
let z = 6;
(x == y) // Returns true
(x == z) // Returns false
Booleans are often used in conditional testing.
You will learn more about booleans later in this tutorial.
JavaScript Arrays
JavaScript arrays are written with square brackets.
Array items are separated by commas.
The following code declares (creates) an array called cars, containing three items (car names):
Example
const cars = [“Saab”, “Volvo”, “BMW”];
Array indexes are zero-based, which means the first item is [0], second is [1], and so on.
You will learn more about arrays later in this tutorial.
JavaScript Objects
JavaScript objects are written with curly braces {}.
Object properties are written as name:value pairs, separated by commas.
Example
const person = {firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”};
The object (person) in the example above has 4 properties: firstName, lastName, age, and eyeColor.
You will learn more about objects later in this tutorial.
The typeof Operator
You can use the JavaScript typeof operator to find the type of a JavaScript variable.
The typeof operator returns the type of a variable or an expression:
Example
typeof “” // Returns “string”
typeof “John” // Returns “string”
typeof “John Doe” // Returns “string”
Example
typeof 0 // Returns “number”
typeof 314 // Returns “number”
typeof 3.14 // Returns “number”
typeof (3) // Returns “number”
typeof (3 + 4) // Returns “number”
You will learn more about typeof later in this tutorial.
Undefined
In JavaScript, a variable without a value, has the value undefined. The type is also undefined.
Example
let car; // Value is undefined, type is undefined
Any variable can be emptied, by setting the value to undefined. The type will also be undefined.
Example
car = undefined; // Value is undefined, type is undefined
Empty Values
An empty value has nothing to do with undefined.
An empty string has both a legal value and a type.
Example
let car = “”; // The value is “”, the typeof is “string”
3 Likes
let ch = “harshitraj”;
console.log(ch.substring(0, 1).toUpperCase() + ch.substring(1, ch.length + 1));
1 Like
@harshitrajlnctcse @dharshinim.ug20.cs .
As per my doubt, i have copied the code in codepen. mentioned my doubts in the JS section.
1 Like
@harshitrajlnctcse sir, i have added image on right section. i tried to adjust the margin with positive px value, it does not show any changes. same when i apply negative px value, changes are visible. I am not sure is this the right approach, yet it works. also unsure why positive px value doesnt show up any changes.
1 Like
Negative margin tells that you want negative spacing for your element. Meaning, Example :- The way positive margin-top pushes content down, Negative top margin pulls content up.
I have changed in your code. Keep in mind whenever we issue with margin or padding, Go inside inspect and check also you can give some border or quick check.
There are some basic issue in your code. That I’ll tell you in today’s session.
happy coding 
2 Likes
Practise Source code for String and functions with functions Discription.
let Myname = “Arun Kumar Nirala”;
let sortName = ‘Arun’;
let NickName = Nirala;
console.log(Myname);
console.log(sortName);
console.log(NickName);
//.length calculate your length of your string like how many character in your string
console.log(NickName.length);
//.toLowecase and .touppercase is the function which will change your string in to alphabet
console.log(Myname.toLowerCase());
console.log(sortName.toUpperCase());
console.log(Myname[5]);
console.log(NickName[0]);
console.log(Myname[500]);
//concatFunction it will join to 2 string together
let MidName= “Kumar”;
let fullName = sortName.concat(" "+MidName+ " " +NickName);
console.log(fullName);
//substring and slice is find the substring from your given String
console.log(fullName.substring(0,8));
console.log(fullName.slice(0,8));
// split function can split your string according to your prefrence
let river = “gabaga is very Log River”;
console.log(river.split(“,”));
console.log(river.substring(0,1).toUpperCase() + river.substring(1, river.length+1));
//trim function it will remove sapce from the sentence
let dummy = " ARavisha ";
console.log(dummy);
console.log(dummy.trim());
//indexof cam return the index of of your given character which is in your string
// lastIndexOf can return from the last of your string
console.log(dummy.indexOf(“v”));
console.log(dummy.indexOf(“a”));
console.log(dummy.lastIndexOf(“a”));
// .includes it will check that given substring is your specified string or not it will return boolean value either true or false
console.log(dummy.includes(“vi”));
console.log(dummy.includes(“iv”));
// .charAt it will return the char which is present in your string according to your input index
console.log(dummy.charAt(7));
2 Likes
@k38062143 First Very Happy you tried this.
Interesting Story for this piece of code.
The typeof operator in JavaScript is known to have some quirks and inconsistencies, including how it handles certain values. In the case of null, the typeof operator returns the value "object", which is indeed misleading.
The historical reason for this behavior is a bug in the implementation of JavaScript in older versions of JavaScript engines, including the original implementation in Netscape Navigator. This bug has been preserved for backward compatibility reasons, as changing it would have introduced compatibility issues with existing code.
In reality, null is its own primitive type in JavaScript and should ideally have a typeof result of "null". However, due to this historical bug, it is returned as "object".
To check if a variable is null, it is recommended to use the === strict equality operator:
Hope it helps you in understanding and i will talk about this today.
@everyone read this. This is very interesting history of Javascript.
2 Likes
More you can read here.. BUG IN JAVASCRIPT
1 Like