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