Introduction to Vanilla JS

Course Code: CSC 4182 Course Title: Advanced Programming In Web

Technologies

Dept. of Computer Science

Faculty of Science and Technology

Lecturer No: 2 Week No: 01 Semester: Summer20-21

Lecturer: Md.Al-Amin (alamin@aiub.edu)
Lecture Outline

1. Introduction to Vanilla JavaScript (ES5)

2. History & Evaluation of Vanilla JS
3. Why Vanilla JS is so popular?
4. Variable Declaration
5. Data Types
6. Array & It’s methods
7. Functions
8. Strings & It’s methods
9. Loops
10.JS Objects
11.OOP in JS
Lecture Objective

1. Understanding & practicing the basics of JS

2. Revising the previous knowledge of JS
Introduction to Vanilla JS

What is "Vanilla JavaScript"?

- Vanilla JS is a name to refer to using plain JavaScript without any
additional libraries like jQuery.

So what's the difference between JS and Vanilla JS?

- No difference at all! JS & Vanilla Js both refers to the same thing!!!
The term Vanilla JS…

Why we're calling it in a different name?

- People use it as a joke to remind other developers that many things can
be done nowadays without the need for additional JavaScript libraries.

… by koen peters
History & Version of JS

JavaScript was invented Ver Official Name

by Brendan Eich in 1 ECMAScript 1 (1997)
1995 and became an 2 ECMAScript 2 (1998)
ECMA standard in 1997. 3 ECMAScript 3 (1999)
4 ECMAScript 4
ECMA-262 is the official 5 ECMAScript 5 (2009)
name of the standard. 5.1 ECMAScript 5.1 (2011)
ECMAScript is the official 6 ECMAScript 2015
name of the language.
7 ECMAScript 2016
8 ECMAScript 2017
9 ECMAScript 2018
Why JS is so popular?

Because you can do almost everything just by learning JavaScript.

You can develop the following using JS:

1. Desktop Application (Electron.js)

2. Mobile Application (React Native, Ionic etc.)
3. Web application
1. Frontend (Angular.js, Vue.Js, React.js )
2. Backend (Nodejs, Express.js)

and many more…

JS Variables

We can define variables by the following ways:

1. Without any keyword:
a = 10; (global declaration)
2. With keyword:
var a =10; (Scope specific)
let b = 20; (block specific)
3. We can also define variables by the const keyword.

At the begging of the script we can use the literal “use strict” to restrict
global declaration.
JS Data Types

As like PHP, JavaScript is also a loosely typed language. We

do not declare any data type before the variables. It has
dynamic types. This means that the same variable can be
used to hold different data types:

var x;           // Now x is undefined

x = 5;           // Now x is a Number
x = "John";      // Now x is a String
JS Array & It’s methods

An array is a special variable, which can hold more than one

value at a time. We can declare array in following two ways:

var names = [“Rakib", “Zahid", “Abir"];

var names = new Array(“Rakib", “Zahid", “Abir");

The two examples above do exactly the same. For simplicity, readability
and execution speed, use the first one (the array literal method).
JS Array & It’s methods

toString() - converts an array to a string of (comma separated) array values

Ex:
var names = [“Rakib", “Zahid", “Abir"];
var data = fruits.toString(); // value of data is “Rakib,Zahid,Abir”

Like the above toString() methods we have many more array manipulation
methods in JS. Some of them are following:

join() , pop(), push(), Shift(), splice(), concat(), sort(), reverse() etc.

We have a special property for called “length” that gives the number of
element of an array.
JS Functions

Function is a block of code designed to perform a particular task. We

have to use a keyword called “function” before the name of the
function. The syntax is following:

function sum(a1, a2) {

  return a1 + a2;   // The function returns the sum of a1 and a2
}

We can also store a function in a variable like the following:

var sum = function (a1, a2) {

  return a1 + a2;   // The function returns the sum of a1 and a2
}
Function as parameter
As we know that we can store a function in a variable so we can pass it as
parameter of other function. Syntax is following:

var f1 = function (){ function f2 (f1){

return “this is f1 function”; f1();
} }

function f2 (f1){ f2(function (){

f1(); return “this is f1 function”;
} }
);
f2(f1); // output: this is f1 function
// output: this is f1 function
This is another representation of
the same code. Here the f1 function
had a special name called “call
back function ”
JS Strings & it’s methods

In JavaScript everything is object so string literals is also an object.

Thus, it has some predefine methods for complex string
manipulations. Some of the functions are following:

- The length property returns the length of a string.

- The indexOf() method returns the position of the first occurrence of a
specified text in a string
- The search() method searches a string for a specified value and returns
the position of the match
- slice() extracts a part of a string and returns the extracted part in a new
string.
- The replace() method replaces a specified value with another value in a
string. Etc.
JS Loops

Like other programming languages JavaScript also has the following loops:

 for - loops through a block of code a number of times

 for/in - loops through the properties of an object
 for/of - loops through the values of an iterable object
 while - loops through a block of code while a specified condition is true
 do/while - also loops through a block of code while a specified condition
is true
JS Objects

In JavaScript, almost "everything" is an object except the primitive data

types (A primitive value is a value that has no properties or methods.).

 Booleans can be objects (if defined with the new keyword)

 Numbers can be objects (if defined with the new keyword)
 Strings can be objects (if defined with the new keyword)
 Arrays are always objects
 Functions are always objects
 Objects are always objects

In this lecture we are focusing on ES5 version of JS so there is no Class in

this version.
JS Object Declaration

We can create object in many ways in JavaScript. Following is the syntax:

Example-1:
var student = new Object();
student.name = “XYZ”;
student.age = 20;
student.getName = function (){ return this.name}

Example-2:
function student(name, age) {
this.name = name;
this.age = age;
}
var s1 = new student(“ABC", 20);

Example-3:
var s1 = { name: “XYZ", age: 50 };
Object Property & Method Access

We can access the methods and property of an object in

following two ways:

var student = {
name: ‘xyz’,
age: 20,
getName() = function(){ return this.name}
}

 student.name (by using dot . Operator ) and

 student[‘name’], student[‘getName’]()
Books

 PHP Advanced and Object-Oriented Programming, 3rd Edition; Larry

Ullman; Peachpit, Press, 2013
 PHP Objects, Patterns and Practice, 5th Edition; Matt Zandstra; Apress,
2016
 Learning PHP, MySQL, JavaScript and CSS, 2nd Edition; Robin Nixon;
O’Reilly, 2009
 Eloquent JavaScript: A Modern Introduction to Programming; Marijn
Haverbeke; 2011
 Learning Node.js: A Hands On Guide to Building Web Applications in
JavaScript; Marc Wandschneider; Addison-Wesley, 2013
 Beginning Node.js; Basarat Ali Syed; Apress, 2014
References

1. https://www.w3schools.com/js/default.asp
2. https://www.tutorialspoint.com/javascript/index.htm
3. https://stackoverflow.com/questions/20435653/what-is-vanillajs
4. http://www.cs.ucc.ie/~gavin/javascript/
5. https://www.w3schools.com/js/default.asp
Thank You!