JavaScript - Zero to Hero🚀

🏠 https://askudhay.com

@AskUdhay

Hey, Am Udhay (OO-dhy)

Agenda

  • Hello JS! 👋
  • History 📊
  • Web page? 🕸️
  • JavaScript - Today! 📅
  • Variable / Constant /Primitive Types
  • Objects & Arrays
  • Functions
  • DOM Manipulation
  • Discussion (Q/A) ❓

 

@AskUdhay

Hello JS! 👋

@AskUdhay

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)

History 📊

Reference - 🔗

@AskUdhay

@AskUdhay

Web page? 🕸️

<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

🕺

@AskUdhay

Yay! It's dance floor..

JavaScript - Today!

@AskUdhay

Single Page

App

Backend API

Machine Learning (Tensor flow)

Web App (Server side support)

Web App (Client side support)

Variable / Constant / Primitive type

@AskUdhay

// 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

@AskUdhay

// 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

@AskUdhay

// 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

@AskUdhay

// 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 - To Do App

@AskUdhay

HTML

@AskUdhay

<!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="main">
        <div>
            <h1>To Do App</h1>
            <input type="text" id="taskInput"/> 
            <button onclick="createTask()">Add Task</buttpn>
        </div>
        <div id="tasks">

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

CSS

@AskUdhay

div > p{
    background-color: #ccc;
    padding: 10px;
}

JavaScript

@AskUdhay

function createTask(){
    let taskInputObject = document.getElementById("taskInput");
    let task = taskInputObject.value;
    
    if(task.trim() == ''){
        alert('Please enter Task before you try to add!');
        return;
    }

    let taskTextNode = document.createTextNode(task);
    let taskPNode = document.createElement('p');

    taskPNode.appendChild(taskTextNode);

    let divNode = document.getElementById("tasks");

    divNode.appendChild(taskPNode);
    taskInputObject.value = '';
}

@AskUdhay

Useful links

https://www.w3schools.com/js/

https://dev.to/simonholdorf/9-awesome-projects-you-can-build-with-vanilla-javascript-2o1b

https://eloquentjavascript.net/Eloquent_JavaScript.pdf

https://developer.mozilla.org/en-US/docs/Web/JavaScript

https://www.freecodecamp.org/forum/t/javascript-projects-for-beginners/365887

Thanks!

JavaScript - Zero to Hero

By Udhayakumar G

Made with Slides.com

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.

  • 1,046
Loading comments...

More from Udhayakumar G