Udhayakumar G
Am a seasoned Full stack java developer, have close to 11 years experience in developing software systems (both frontend and backend). Love to share my knowledge with community. Happy coding!
Hey, Am Udhay (OO-dhy)
Let's get our hands dirty with JavaScript!
JavaScript is the most widely used Scripting language on Earth, which runs on all major web browsers.
Reference - π
JavaScript - Then
JavaScript - Now
<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%;
}
πΊ
// 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.
// 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'
}
]
// 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 + '!')
}
// 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);
<!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>
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!");
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 = "";
}
npm i -g surge
~todo >surge
By Udhayakumar G
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.
Am a seasoned Full stack java developer, have close to 11 years experience in developing software systems (both frontend and backend). Love to share my knowledge with community. Happy coding!