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.
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.
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.
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
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]
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.