JavaScript - Zero to Hero!πŸš€

Hey, Am Udhay (OO-dhy)


Let's get our hands dirty with JavaScript!

Hello JS! πŸ‘‹

JavaScript is the most widely used Scripting language on Earth, which runs on all major web browsers.

  • JavaScript was released in 1995
  • It was early called as LiveScript
  • Name was changed to JavaScript with the excitement around Java at that time
  • Lite weight, interpreted programming language
  • Used in client side validation, retrieving data from remote APIs, DOM manipulation & more
  • Works great for server side development too.. (For ex: Node.js)

Real world examples

  • Google Search - Autocomplete
  • Facebook:
    • Search profiles
    • React to a post
    • Comment on a post
  • Twitter:
    • Post a tweet
    • Like a tweet
    • Retweet
    • Comment on a tweet
  • YouTube - Like/Dislike a video

History πŸ“Š

Reference - πŸ”—

Companies that bet on JavaScript

JavaScript - Then

JavaScript - Now

JavaScript - Today!

Single Page


Backend API

Machine Learning (Tensor flow)

Web App (Server side support)

Web App (Client side support)

The Three Musketeers πŸ•ΈοΈ

  <button onclick="sayHello()">
    Click me!
function sayHello(){
html, body{
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
 height: 100%;

Web page in nut shell..





Yay! It's dance floor..

Variable / Constant / Primitive type

// string literal
let name = 'Udhay'; 

// Number or Integer
let yearsOfExperience = 11; 

// boolean literal
let isWorkingFromHome = true; 

// Default value when not assigned
let eventRating = undefined;

// Explicitly set to null
let favoriteBrand = null;

// Interest rate
const interestRate = 6.75;
typeof name

Use typeof to check the Type of variable / constant.

Objects & Arrays

// Person object
let person = {
	name: 'Udhay',
	yrsofExperience: 11;
	isWorkingFromHome: true;
// Array of primitive values
let techCompanies = [

Object is also called JSON (JavaScript Object Notation)

// Array of objects
let companies = [
    name: 'Google',
    ceoName: 'Sundar Pichai'
    name: 'Microsoft',
    ceoName: 'Satya Nadella'
    name: 'Facebook',
    ceoName: 'Mark Zuckerberg'
    name: 'Amazon',
    ceoName: 'Jeff Bezos'
    name: 'Apple',
    ceoName: 'Tim Cook'


// Function with no arguments
function sayHello(){

// Function with 1 argument
function sayHello(fName){
  console.log('Hello ' + fName + '!')

// Function with 2 arguments
function sayHello(fName, lName){
  console.log('Hello ' + fName + ' ' + lName + '!')

DOM Manipulation

// Get HTML Form Element value
let task = document.getElementById("taskInput").value;

// Assign HTML Form Element value
document.getElementById("taskInput").value = 'Swimming at 12:30 PM';

// Create new HTML element
let pNode = document.createElement("p");

//Append Paragraph element to HTML element

// Create HTML Text Node
let textNode = document.createTextNode('Reading a book at 4:00 PM');

//Append Text element to HTML element

Demo - ToDo App


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>To Do App</title>
    <script src="todo.js"></script>
    <link rel="stylesheet" href="app.css"/>
    <div id="mainDiv">
            <h1>To Do App</h1>
            <input type="text" id="taskInput" autocomplete="off"/> 
            <button onclick="createTask()">+</button>
        <div id="tasksDiv">



body {
  background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);

#mainDiv {
  border-radius: 5px;
  background-color: #f9f8fc;
  padding: 20px;
  margin: 10% 30%;
  width: 30%;

#taskInput {
  padding: 10px;
  width: 75%;

button {
  background-color: #dab139;
  color: white;
  font-size: 30px;
  min-width: 10%;
  border: none;
  margin-left: 8px;

div > p {
  background-color: #e8e8e8;
  padding: 10px;
  cursor: pointer;
  font-size: 20px;


function createTask() {
  // Get the Task Textbox value	
  let taskInputObj = document.getElementById("taskInput");
  let task = taskInputObj.value;

  // Check if the value has empty string after trimming?
  // If so alert the user and return from this function
  if (task.trim() == '') {
    alert("Please enter Task before you try to add!");

  // Create a textNode with Task value    
  let taskTextNode = document.createTextNode(task);  
  // Create a Paragraph HTML DOM Node
  let taskPNode = document.createElement("p");
  // Identify the TasksDiv HTML Node using the Id "tasksDiv"
  let divNode = document.getElementById("tasksDiv");    
  // Append the textNode to Paragraph Node
  taskPNode.addEventListener("click", function () { = "line-through red";
  // Append the Paragraph node to TasksDiv
  // Reset the text box value
  taskInputObj.value = "";

Deploy the app

  • Deploy the app on the Internet using
  • Install surge using npm in your local machine.
npm i -g surge
  • Run the command "surge" from the project folder.
  • Login or Create Surge account. Enter email and password.
    Confirm the project folder (Hit Enter). Make sure you have html, js and css files under the project folder.
  • Confirm the domain (Hit Enter).
  • You should see message "Success!". Your app is running on the domain shown in the above step. Go ahead and share it with World!
~todo >surge

Useful links


JavaScript - Zero to Hero

By Udhayakumar G

JavaScript - Zero to Hero

This is my recent talk for Jeppiar Institute of Technology - Students on Introduction to JavaScript. Feel free to share this deck with your friends / colleagues. Any questions? Reach me @askudhay on Twitter. Happy learning! Thanks.

  • 2,673