Category: Javascript

Introduction to HTML

If you are wondering how to build websites or web applications then this Lecture will be helpful for you.

In this Lecture I will discuss

1. Technologies needed to build Websites or Web Applications
2. Introduction to HTML

Code is available on Github

Technologies needed to build Websites or Web Applications
The basic technologies required to create a website are HTML, CSS and Javascript.
We will explore HTML in this Lecture. CSS and Javascript are topics for coming lectures.

What is HTML?
Hyper Text Markup Language can be used to structure a web page. It is a Markup Language.

HTML Elements
You can use the following elements to build your Page.

  • Paragraph
  • Headings
  • Images
  • Lists

Learn about Conditional Statements in Javascript

In this Lecture we will discuss about conditional statements in javascript

  • if – else statement
  • switch statement
  • ternary operator

The code examples below are also available on Github

if…else

Syntax

if (condition) {
// code
} else {
// code
}

else if
To add more else conditions you can use else if clause

if (1<x<2) {

} else if (2<x<3) {

} else {

}

We can use conditional operators like <, >, <= etc.

if(x == ‘A’) {

}

From the documentation

Any value that is not false, undefined, null, 0, NaN, or an empty string (”) actually returns true when tested as a conditional statement, therefore you can simply use a variable name on its own to test whether it is true, or even that it exists (that is, it is not undefined.)

 

if (data) {
console.log(data);
}

Switch Case
If-else is good when we have few conditions to take care of. What if we want to add more conditions. Let us look at an example

let day = ‘Monday’
switch(day) {
case ‘Monday’:
console.log(‘Today is Monday’)
break;
case ‘Tuesday’:
console.log(‘Today is Tuesday’)
break;
case ‘Wednesday’:
console.log(‘Today is Wednesday’)
break;
default:
console.log(‘No Match’)
}

This example demonstrates how to use switch statements.

Ternary Operator
It’s a convenient way to write if-else in a compact manner.

Instead of writing

let x = 8

 

if(x>2) {
// print 3
} else {
// print 5
}

we can write

let x = 8
(x > 2) ? 3 : 5

Learn about some useful methods in Javascript Arrays

In this tutorial we will explore some methods which will help you to do certain operations on Javascript Arrays.

The code for this lecture is available on Github

Consider this string

let fruits = 'Mango, Peach, Banana';

What if we want to separate out the fruits from this String i.e. get an array of fruits.

To do this we can use the split() method.

split()
In order to use split() we need to pass the character which needs to be used to perform the split.

let fruitArray = fruits.split(',');
fruitArray // ['Mango', 'Peach', 'Banana']
fruitArray[0] // Mango

To combine all the array elements back, so that we can get a String, we can use the join() method.

join()

fruitArray.join('-') // 'Mango-Peach-Banana'

Alternatively we can use the toString() method.

How to add and remove elements to or from an Array?

To add or remove an element at the end of the Array you can use push() and pop()

push()
push() lets us add an element to the end of the Array.

fruitArray.push('Orange')

pop()
pop() lets us remove an element from the end of the Array.

fruitArray.pop()

Similarly, to add or remove an element at the start of the Array you can use unshift() and shift()

Arrays in Javascript – The Basics

What are Arrays ?

Arrays can be used to store a list of data items. Like a list of numbers or objects.

let ageList = [15, 17, 25, 16, 14]

So if we do not use arrays then we need to declare separate variables for all the ages. Imagine if we had 100 people. Declaring 100 variables will be very inefficient.

Each element in an array is stored at an index. Indexes start from 0.

Index : 0 1 2 3 4
Value : 15 17 25 16 14

How to access elements in an array ?

It is easy to access the elements stored in the array using index.

Like if we want to get element stored at the 3rd location we can use

ageList[3]

Similarly we can assign new value to an index

ageList[3] = 32

How to find number of items in the array ?

To find the length of array or number of items in the array we can use the length property.

ageList.length

Learn about the String Methods in Javascript

Do more with Javascript Strings

Handling words and sentences is very important in programming.

Most things in JS are objects. String is one of them. So when we create a new String we get a bunch of properties and methods which helps us to perform various operations. Let’s explore some useful methods available in Javascript.

The code examples below are also available at Github

Length
To find length of a String we can use length property as follows

let message = 'Hello';
message.length

Get a Character
To get a specific character we can give the index in []
message[3]
This will return ‘l’, quite like arrays. The first index location is 0.

0 1 2 3 4
H e l l o

Get index of a Substring
We can use indexOf() method to get the index of a substring.

let str1 = 'jackma';
str1.indexOf('ma') // prints 4
str1.indexOf('Jam') // prints -1

Extract a Substring
You can use the slice() method to extract a substring. You need to provide start and end indexes. The end index won’t be included.

let str1 = 'jackma';
str1.slice(2,3); // prints c
str1.slice(3,5); // prints km

If you don’t give end index then all characters from start index till end are extracted.

str1.slice(2); // prints ckma

Change the string case
To convert characters of a string to all lower case use toLowerCase()

str1.toLowerCase() // prints jackma

To convert characters of a string to all upper case use toUpperCase()

str1.toUpperCase() // prints JACKMA

Replace part of a String with another string

Let’s say we want to replace ‘get’ in ‘doget’ to ‘put’.

str2 = 'doget';
str2.replace('get', 'put') // prints doput

Learn about Numbers and Operators in Javascript

NUMBERS AND OPERATORS

Github Code – https://github.com/ankur-srivastava/javascript-lectures/blob/master/Lecture3/index.js

Usually we deal with three types of numbers –

  1. Integers like 3, 34
  2. Floating Point like 3.12, 93.34
  3. Doubles like 1.3452345

JS has only one data type for numbers called Number.

Let’s declare two numbers

let num1 = 32;
let num2 = 44;

Arithmetic Operators

With JS you have all the mathematical operators available to perform various operations.
Like add, substract etc.

2+3
4/2
4%2

We use operator precedence rules when evaluating a complex expression

let x = 3+2*6/2

It’s good to use parenthesis.

(3+2)*(6/2)

Increment Operators using Postfix operator

let x = 4;
x++
x

Comparison Operators

If you want to check that two values are identical you can use === operator
Similarly to check if they are not equal you can use !==

=== compares the data type also, in addition to it’s value. == does not.

Other frequently used comparison operators include : <, >, <=

Mostly in conditional statements like if-else
if(x > y)

Learn about Variables in Javascript

If you have done any programming you will be at home with variables. If you haven’t then don’t worry it’s quite easy to understand.

Variables are used to store values. Value can be a string, a number or other forms of data.

Code - https://github.com/ankur-srivastava/javascript-lectures/blob/master/Lecture2/index.js

Let’s understand this with an example. You may have seen websites that ask you to enter your first name etc. Now to store that name we need a variable.

let firstName = 'Ankur';

Here firstName is a container that stores Ankur.

Declare a Variable
To use variables you need to declare them. We use keywords like let, var or const to declare variables. const is used to declare variables whose values do not change.

let age = 30;
const color = 'red';

What happens if you just write

let day;
console.log(day)

It gives undefined, since we dint assign any value.

Initialize a Variable
Initialize means assigning a value to a variable.

let day = 'Tuesday';
console.log(day)

Why you should use let instead of var ?

With var you can declare a variable after initializing. This is known as hoisting. And is not good. You cannot do the same thing with let.
Another thing that works with var and not let is that with var you can declare a variable multiple times.

var fName = 'Ankur';
var fName = 'Sid';

For these reasons it’s not advisable to use var.

A variable declared using let or var can be updated.

let name = 'Jack';
name = 'Sid';

Variable Naming Rules

1. Don’t use numbers at the start of variables. This is not allowed.
2. Variable names are case sensitive.
3. Using camelCase is safe and recommended.
4. Variable names should be intuitive.
5. Don’t use the reserved words. That is words that are part of JS syntax. Like let, const, function etc.

Variable Types

You don’t need to specify variable types in JS. It’s a dynamically typed language, quite similar to Python. In other languages like C or Java you may have seen various data types being used like int, long, boolean, float etc. Not needed with JS.

You can store numbers, strings, booleans, arrays and objects.

Let’s see some examples:

let message = 'Hello all';
let age=32;
let flag = false;
let a = [10, 12, 32]

An introduction to Javascript

How Javascript was born ?

In 1993 the first web browser with a GUI was released. It was called Mosaic. Due to it’s GUI it made www quite popular.

It’s lead developers then founded Netscape which released an enhanced version called Netscape Navigator. The pages were static though. They lacked interaction.

To make the pages more interactive Netscape needed a scripting language. To do this they hired Brendan Eich. Same guy who later co-founded Mozilla project. His job was to put this language “in the browser”. The first version was completed in 10 days. It was called Mocha. Then renamed to Livescript and subsequently to Javascript.

What exactly is Javascript ?

Javascript is an interpreted or just in time compiled programming language. What this means is that the program you write is compiled at run time.
Unlike Java where you need to first compile the program and then run the generated byte code.

It is one of the core technologies of the World Wide Web (www) along with HTML and CSS. You can build interactive websites using JS. When you see some animations like page elements fading in and out or resizing then it’s more or less the work of JS.

All major web browsers have a dedicated JS engine which can execute the JS code.

Most of the websites you see use Javascript to handle client side behavior. But with the advent of technologies like Node JS we can now write code in JS which can be executed on Server side.

Why should you learn Javascript ?

To build any modern day website Javascript is required. And now JS can be used to build backend, like APIs. So whether you want to work for a company as a developer or you plan to build your pwn websites you will need JS.

Code – https://github.com/ankur-srivastava/javascript-lectures/tree/master/Lecture1

PPT – Introduction to JavaScript from Ankur Srivastava