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)
Β
JavaScript is the most widely used Scripting language on Earth, which runs on all major web browsers.
Reference - π
<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="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>
div > p{
background-color: #ccc;
padding: 10px;
}
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 = '';
}
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!