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 = '';
}