Erase the topics one by one
Introduction to programming
Programming is a way to write tasks to be performed by the computer.
A program can be written in a programing language.
Many programming languages like C, C++, Javascript, Python, Java, etc.
Each language has its own rules, following which we need to write a set of
instructions that the computer can perform.
Programming tasks could be as simple as adding two numbers and writing
complex algorithms that help rockets land on the moon.
Introduction to JavaScript
Simply put, JavaScript is a programming language that helps you write
instructions that a computer, to be more specific, a browser can understand.
JavaScript was primarily used to be executed on browsers, but then NodeJS
was created, which can help execute JavaScript on your machine outside the
browser.
JavaScript is a single-threaded, synchronous, high-level programming
language.
Let’s understand the previous statement clearly.
● Single-threaded means that a javascript program cannot be broken into sub-programs and
execute the sub-programs parallelly. Understand the entire program as rope and a sub-program
as a thread of the rope.
● Synchronous means that the order of execution will always happen sequentially; the program
can’t skip some lines of code and come back to it later. But that being said, we can perform
asynchronous tasks in javascript using web APIs; we’ll learn about this later
● High-level programming language means that it is more human-readable and understandable
and less machine-understandable.
History of Javascript
● JavaScript was invented by Brendan Eich in 1995. He was recruited by
Netscape to develop a language which can be run in the browser.
● In 1996, Microsoft released their own version of JavaScript and it was
named as JScript. To prevent this conflict, Netscape went to the
European Computer Manufacturers Association, aka ECMA to develop
standard JavaScript .
They standardized JavaScript and renamed it as
ECMAScript, since it was developed by them.
ECMAScript, since it was developed by them.
Why use JavaScript
Why should you learn javascript? Well, there are a few reasons for that.
A program will always be in javascript on the front-end that is the UI of any
website.
The browser understands only HTML, CSS, and Javascript.
Now, there are languages like GWT(Java), dart, etc.,
using which we can
create UI, but those languages translate the code into javascript, and then the
javascript code gets executed on the browser.
create UI, but those languages translate the code into javascript, and then the
javascript code gets executed on the browser.
So why not write your code in javascript itself, you’ll save time that takes to convert any language to
javascript and also you’ll have more control over the code.
javascript and also you’ll have more control over the code.
Another reason is that once you learn javascript you can become a full-stack developer without the need to learn any other language.
Also, Javascript is used to create Desktop apps with Electron and React native desktop frameworks.
And Javascript is also used to create android and IOS apps using React native.
Mozilla Firefox multi-line console
Firefox provides a multi-line console where you can write and execute your javascript code without the need for a code editor.
To use it, first download firefox from here and install it in your system.
Open the Firefox browser and press ‘F12’ OR right-click and click on inspect. You’ll see the dev tools window open like below
First, click on the ‘more options’ icon ( top-right corner ) besides the ‘close’ icon and choose the ‘separate
window’ option. Now your dev-tools window will be open in a separate window.
Select console tab.
On the left side, we have the code panel and right side we have the console. You can write your javascript
code on the code panel and click on ‘Run’ and the output will be shown on the console on right.
Your window will look like below
window’ option. Now your dev-tools window will be open in a separate window.
Select console tab.
On the left side, we have the code panel and right side we have the console. You can write your javascript
code on the code panel and click on ‘Run’ and the output will be shown on the console on right.
Your window will look like below
Understanding function
A function is a block of code which can perform some task. It takes some input, applies some logic on
it and gives the output.
A function is a block of code which can perform some task. It takes some input, applies some logic on
it and gives the output.
Writing an executing first program: Hello World
Usually, when we learn a new programming language we always start by executing a ‘hello world’
program in it. So, let’s do it with Javascript too.
Write the following line of code in firefox code panel
program in it. So, let’s do it with Javascript too.
Write the following line of code in firefox code panel
And click on ‘Run’
You should see ‘Hello world’ on your console.
You should see ‘Hello world’ on your console.
Awesome, you just ran your first code in javascript. Now let’s understand the line of code.
‘console.log()’ is a function that helps you print any data on the browser console or on your terminal
window if you are executing the javascript code in nodejs.
‘console.log()’ is a function that helps you print any data on the browser console or on your terminal
window if you are executing the javascript code in nodejs.
Understanding console.log()
Diving deeper into ‘console.log()’, ‘console’ is an object that provides access to
the browser's debugging console. And ‘log’ is a method in console object that
will print whatever string you pass as an argument to it.
Diving deeper into ‘console.log()’, ‘console’ is an object that provides access to
the browser's debugging console. And ‘log’ is a method in console object that
will print whatever string you pass as an argument to it.
Now, I know there are many terms here that you might not understand like what is an object, what is
a method, what do you mean by argument. These you’ll understand as and
when you proceed with the coming sessions. But for now, just remember what
is ‘console.log()’
a method, what do you mean by argument. These you’ll understand as and
when you proceed with the coming sessions. But for now, just remember what
is ‘console.log()’
Variables
In order to store values like numbers, words, objects, etc we need variables.
Variables are placeholders for values.
Every language has specific keywords to declare variables.
In Javascript, you can create variables using any of the following keywords
In order to store values like numbers, words, objects, etc we need variables.
Variables are placeholders for values.
Every language has specific keywords to declare variables.
In Javascript, you can create variables using any of the following keywords
When we declare a variable we name it like ‘num1’, ‘str1’, ‘bool’ in the above value.
And also we assign a value to it to be stored in the variable. So that we can use it later in our program
when needed.
Let’s try to understand variables in-depth, when we declare a variable the system memory reserves a
memory location and stores the value assigned to it in that memory space. And when we reference
the variable name again in the program, the value is fetched from that memory space.
And also we assign a value to it to be stored in the variable. So that we can use it later in our program
when needed.
Let’s try to understand variables in-depth, when we declare a variable the system memory reserves a
memory location and stores the value assigned to it in that memory space. And when we reference
the variable name again in the program, the value is fetched from that memory space.
Let’s understand the difference between var, let, and const
● When we declare a variable with ‘var’ keyword, it is function-scoped
● When we declare a variable with ‘let’ keyword, it is block-scoped
● When we declare a variable with ‘const’ keyword, it is block-scoped, but we cannot re-assign the value. The value with which we initialise the const variable will remain constant throughout the program.
We’ll learn about function-scope and block-scope in later sessions
Comments in Javascript
Comments are basically textual information in your code that is ignored by the compiler and is used to
Comments are basically textual information in your code that is ignored by the compiler and is used to
communicate information about the code.
Commenting your code is a good practice for others to understand what your code does.
For single-line comments use ‘//’
For multi-line comments use ‘/*....*/’
Data types
There are seven primitive data types and an object data type.
There are seven primitive data types and an object data type.
1. Number: used to represent numbers including negative, positive and 0
2. String: used to represent textual data
3. Boolean: values are ‘true’ and ‘false’
4. Null: value is ‘null’, represents the intentional absence of any object value.
5. Undefined: value is ‘undefined’, represents value as uninitialized
6. Big Int: The Big Int type is a numeric primitive in JavaScript that can represent integers with
arbitrary precision.
7. Symbol: A Symbol is a unique and immutable primitive value and may be used as the key of an Object property
● An object is a special data type that contains a series of key-value pairs.
● An array is also a special type of object that contains a list of values; it can contain values of all data types, including objects
Numbers
Numbers are collections of different digits. They can be integers or decimal numbers.
Numbers are collections of different digits. They can be integers or decimal numbers.
There are different types of numbers like integers, decimal numbers, exponential numbers, special numbers like Infinity, NaN and so on.
Example –
1. var num = 123; //Integer
2. var num = 212.13456
console.log(num.toExponential(4)); //toExponential function is used to write exponential
numbers.
Output -> 2.13e+0
We can directly write numbers in exponential form too. For example0
var num = 2.13e+10;
3. Special numbers like Infinity and NaN are kind of error values.
NaN
When any operation got failed or parsing failed, we get NaN as error
Number(‘Hello’)
Output -> NaN
In the above code, Number() is a function to get the number value of argument passed. Here we
passed ‘Hello’ which is a string and cannot be parsed. hence we got NaN as output
Infinity
When number value is too large or it is divided by zero, we get Infinity as output
a = 3/0console.log(a)
Output -> Infinity
a = 3/ -0
console.log(a)
Output -> -Infinity
Boolean
Boolean can be 2 values either true or false. Whenever we want to store a value whose value can be either true or false, we can use Boolean datatype to store it.
Example – let x = true;
Boolean can be 2 values either true or false. Whenever we want to store a value whose value can be either true or false, we can use Boolean datatype to store it.
Example – let x = true;
Null and Undefined –
“Null” and “undefined” refers to null value or when we don’t assign any value to it. When we do not give value to a variable, it denotes undefined. When we give an empty value to the variable, it will be considered null.
Example –
var a = null;
var b;
console.log(a) // print null
console.log(b) // print undefined
“Null” and “undefined” refers to null value or when we don’t assign any value to it. When we do not give value to a variable, it denotes undefined. When we give an empty value to the variable, it will be considered null.
Example –
var a = null;
var b;
console.log(a) // print null
console.log(b) // print undefined
String –
A string is a collection of alphanumeric characters and symbols. To store different words, letters, and
sentences, we use strings. In JavaScript, we can either use single or double quotes to define it. We
can also use backticks to define strings.
Example –
var str = “Hello World” // double quotes
var str = ‘Hello World’ // single quotes
var str = `Hello World` //backticks
var multillineStr= `Say hello
to multi-line
string `;
Hello, World datatype is a string in the above example.
A string is a collection of alphanumeric characters and symbols. To store different words, letters, and
sentences, we use strings. In JavaScript, we can either use single or double quotes to define it. We
can also use backticks to define strings.
Example –
var str = “Hello World” // double quotes
var str = ‘Hello World’ // single quotes
var str = `Hello World` //backticks
var multillineStr= `Say hello
to multi-line
string `;
Hello, World datatype is a string in the above example.
Operators
When we want to execute any operation like addition, subtraction, division, multiplication, etc in a
programming language, we have to use ‘operators.’
There are various types of operators in javascript,
Increment/Decrement operators: a++, --a,
Unary operators: typeof, +, !
Arithmetic operators: +, -, /, *
Relational operators: >, <, >=, <=
Equality operators: ==, !=, ===, !==
Assignment operators: +=, -=, /=, *=
When we want to execute any operation like addition, subtraction, division, multiplication, etc in a
programming language, we have to use ‘operators.’
There are various types of operators in javascript,
Increment/Decrement operators: a++, --a,
Unary operators: typeof, +, !
Arithmetic operators: +, -, /, *
Relational operators: >, <, >=, <=
Equality operators: ==, !=, ===, !==
Assignment operators: +=, -=, /=, *=
Assignment Solutions
1. Create a basic calculator program using JavaScript.
2. Use different arithmetic operators and variables to show working of calculator
Solution:
let num1 = parseFloat(prompt('Enter num1: '));
let num2 = parseFloat(prompt('Enter num2: '));
const operation = prompt('Select the operator in promot (+, - , * , /): ');
let result;
if (operation == '-') {
result = num1 - num2;
}
else if (operation == '+') {
result = num1 + num2;
}
else if (operation == '/') {
result = num1 / num2;
}
else {
result = num1 * num2;
}
console.log(`${num1} ${operation} ${num2} = ${result}`);
Output:
22 + 33 = 55
1. Create a basic calculator program using JavaScript.
2. Use different arithmetic operators and variables to show working of calculator
Solution:
let num1 = parseFloat(prompt('Enter num1: '));
let num2 = parseFloat(prompt('Enter num2: '));
const operation = prompt('Select the operator in promot (+, - , * , /): ');
let result;
if (operation == '-') {
result = num1 - num2;
}
else if (operation == '+') {
result = num1 + num2;
}
else if (operation == '/') {
result = num1 / num2;
}
else {
result = num1 * num2;
}
console.log(`${num1} ${operation} ${num2} = ${result}`);
Output:
22 + 33 = 55