JavaScript 101
aromalsanthosh.com
alwinjohn.me
Day - 1
aromalsanthosh.com
alwinjohn.me
Who we are ?
Aromal S
aromalsanthosh
@aromalhere
in/aromalsanthosh/
Alwin John
Dexters-Hub
_alwin_john
in/alwinjohn/
Software Engineer Intern, Katha Infocom Pvt. Ltd
GitHub Campus Expert
JavaScript is not Java.
What is JavaScript ?
JS is NOT related to Java other than by name and some syntactic similarities
aromalsanthosh.com
alwinjohn.me
aromalsanthosh.com
alwinjohn.me
What JavaScript Really Is ?
aromalsanthosh.com
alwinjohn.me
JavaScript is a dynamic programming language that's used for web development, in web applications, for game development, and lots more. It allows you to implement dynamic features on web pages that cannot be done with only HTML and CSS.
What JavaScript Can Do ?
aromalsanthosh.com
alwinjohn.me
Web Development
App Development
Game Development
ML
Top websites built with JavaScript
aromalsanthosh.com
alwinjohn.me
aromalsanthosh.com
alwinjohn.me
aromalsanthosh.com
alwinjohn.me
Let's dive in...
Hello World in JavaScript
console.log("Hello World");
//output: "Hello World"
aromalsanthosh.com
alwinjohn.me
JS Variables
let name = "John Doe";
var Name = "Thomas";
var a = 10;
var b = 20;
var c = a + b;
console.log(c); //output: 30
var num = 10;
var num= 20;
console.log(num);//output: 20
let number = 10;
let number = 20;
console.log(b);
//output: SyntaxError: Identifier 'number' has already been declaredaromalsanthosh.com
alwinjohn.me
Variable is a name given to a memory location which stores data
JS Constants
const pi = 3.14;
pi = 3.15;
console.log(pi);
//output: TypeError:
//Assignment to constant
//variable.
aromalsanthosh.com
alwinjohn.me
Constants are fixed values that doesn't change during execution time.
let & const are introduced in ES6 version of JavaScript
JS Datatypes
aromalsanthosh.com
alwinjohn.me
aromalsanthosh.com
alwinjohn.me
JavaScript Operators
aromalsanthosh.com
alwinjohn.me
Type Conversion
Equality
console.log(21 == 21); //output: true
console.log(21 == '21'); //output: true
console.log('food is love'=='food is love'); //output: true
console.log(true == 1); //output: true
console.log(false == 0); //output: true
console.log(null == undefined); //output: true
console.log('hello world' === 'hello world'); //output: true
console.log(true === true); //output: true
console.log(5 === 5); //output: true
console.log(true === 1); //output: false
console.log(true === 'true'); //output: false
console.log(5 === '5'); //output: false
aromalsanthosh.com
alwinjohn.me
Difference between the ‘==’ and ‘===’ operators that the javascript provides, though they look similar, they are very different.
Conditional Statements
aromalsanthosh.com
alwinjohn.me
Why it is seen in every programming language, and what are they in JavaScript
if, else if, switch
Looping Statements
aromalsanthosh.com
alwinjohn.me
for, while, do while,
Functions
aromalsanthosh.com
alwinjohn.me
To avoid repeating the same code all over places, you can use a function to wrap that code and reuse it.
function functionName(parameters) {
// function body
// ...
}
function sayHello(name) {
console.log('Hello ' + name);
}
sayHello('JavaScript');
Functions
aromalsanthosh.com
alwinjohn.me
function square(number) {
return number * number;
}
console.log(square(5)); //output: 25
function area(length, width) {
return length * width;
}
console.log(area(5, 6)); //output: 30
Functions - Hoisting
aromalsanthosh.com
alwinjohn.me
In JavaScript, you can use a function before declaring it. This feature is called Hoisting.
Function hoisting is a mechanism that the JavaScript engine physically moves function declarations to the top of the code before executing them.
showMe(); // a hoisting example
function showMe(){
console.log('an hoisting example');
}aromalsanthosh.com
alwinjohn.me
Scope Of Variabes
JavaScript Arrays
const mixedTypedArray = [100, true, 'freeCodeCamp', {}];
const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
const salad = new Array('🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑');
salad[0]; // '🍅'
salad[2]; // '🥦'
for(let i=0; i<salad.length; i++) {
console.log(`Element at index ${i} is ${salad[i]}`);
}
aromalsanthosh.com
alwinjohn.me
In JavaScript, arrays can be a collection of elements of any type.
aromalsanthosh.com
alwinjohn.me
Array Methods
aromalsanthosh.com
alwinjohn.me
JavaScript Objects
Modern JavaScript
aromalsanthosh.com
alwinjohn.me
What is ECMASCRIPT ?
aromalsanthosh.com
alwinjohn.me
ECMA International is an organization that creates technology standards
ECMA-262 is a standard published by ECMA that contains specification for a general purpose scripting language
JavaScript is a general purpose scripting language that conforms to ECMA
ES6 is the 6th edition of the ECMA-262 standard, and features major changes and imrovements to ECMAScript specification.
aromalsanthosh.com
alwinjohn.me
Destructuring - Arrays
aromalsanthosh.com
alwinjohn.me
Rest & Spread
aromalsanthosh.com
alwinjohn.me
Ternary Operator
aromalsanthosh.com
alwinjohn.me
Template Literals
aromalsanthosh.com
alwinjohn.me
Arrow Functions
aromalsanthosh.com
alwinjohn.me
Modules, Imports & Exports
End Of Day - 1
Thank You !!
Contact Us
@aromalhere
Aromal S
+91 7902293783
aromalsanthosh.com
Alwin John
+91 9995703457
alwinjohn.me
@_alwin_john
JavaScript 101
aromalsanthosh.com
alwinjohn.me
Day - 2
Asynchronous JavaScript
aromalsanthosh.com
alwinjohn.me
aromalsanthosh.com
alwinjohn.me
Callbacks
aromalsanthosh.com
alwinjohn.me
Timeouts & Intervals
aromalsanthosh.com
alwinjohn.me
Promises
aromalsanthosh.com
alwinjohn.me
async & await
Event Loop,
aromalsanthosh.com
alwinjohn.me
Modern JavaScript
Frameworks & Libraries
aromalsanthosh.com
alwinjohn.me
NODE.JS & npm
aromalsanthosh.com
alwinjohn.me
Where to get node modules ?
aromalsanthosh.com
alwinjohn.me
Let's Make A Telegram Bot
aromalsanthosh.com
alwinjohn.me
Technologies Used
Node.js
Telegraf node module
Jimp image processing module
Pexels API
Botfather API
aromalsanthosh.com
alwinjohn.me
https://pastebin.com/x2pCqiXz
aromalsanthosh.com
alwinjohn.me
GitHub Reference
Thanks!
Contact Us
@aromalhere
Aromal S
Alwin John
+91 9995703457
@_alwin_john