JavaScript - Zero to Hero🚀
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) ❓
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)
History 📊
Reference - 🔗
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
🕺
Yay! It's dance floor..
JavaScript - Today!
Single Page
App
Backend API
Machine Learning (Tensor flow)
Web App (Server side support)
Web App (Client side support)
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 - To Do 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="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
div > p{
background-color: #ccc;
padding: 10px;
}JavaScript
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 = '';
}