JavaScript - Zero to Hero!πŸš€

Hey, Am Udhay (OO-dhy)

Agenda

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

App

Backend API

Machine Learning (Tensor flow)

Web App (Server side support)

Web App (Client side support)

The Three Musketeers πŸ•ΈοΈ

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

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

Web page in nut shell..

HTML

CSS

JS

πŸ•Ί

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
"string"

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 = [
  	'Apple', 
  	'Google', 
  	'Amazon', 
  	'Facebook',
  	'Microsoft'
];

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'
  }
]

Functions

// Function with no arguments
function sayHello(){
  console.log('Hello!')
}

// 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
document.getElementById("tasks").appendChild(pNode);

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

//Append Text element to HTML element
document.getElementById("tasks").appendChild(textNode);

Demo - ToDo App

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <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"/>
</head>
<body>
    <div id="mainDiv">
        <div>
            <h1>To Do App</h1>
            <input type="text" id="taskInput" autocomplete="off"/> 
            <button onclick="createTask()">+</button>
        </div>
        <div id="tasksDiv">

        </div>
    </div>
</body>
</html>

CSS

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;
}

JavaScript

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!");
    return;
  } 

  // 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.appendChild(taskTextNode); 
  taskPNode.addEventListener("click", function () {
	this.style.textDecoration = "line-through red";
  });
  
  // Append the Paragraph node to TasksDiv
  divNode.appendChild(taskPNode);
  
  // Reset the text box value
  taskInputObj.value = "";
}

Deploy the app

  • Deploy the app on the Internet using Surge.sh.
  • 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

Thanks!

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,951