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!
