JavaScript - Zero to Hero!🚀

🏠 https://askudhay.com

@AskUdhay

Hey, Am Udhay (OO-dhy)

JavaScript - Zero to Hero!🚀 🏠 https://askudhay.com @AskUdhay Hey, Am Udhay (OO-dhy)

JavaScript - Zero to Hero

By Udhayakumar G

JavaScript - Zero to Hero

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.

5 years ago
3,171

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!

askudhay.com
AskUdhay

	<div>
	<button onclick="sayHello()">
	Click me!
	</button>
	</div>

	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;

	// Person object
	let person = {
	name: 'Udhay',
	yrsofExperience: 11;
	isWorkingFromHome: true;
	}

	// Array of primitive values
	let techCompanies = [
	'Apple',
	'Google',
	'Amazon',
	'Facebook',
	'Microsoft'
	];

JavaScript - Zero to Hero!🚀

Agenda

Hello JS! 👋

Real world examples

History 📊

Companies that bet on JavaScript

JavaScript - Today!

Single Page

App

Backend API

Machine Learning (Tensor flow)

Web App (Server side support)

Web App (Client side support)

The Three Musketeers 🕸️

Web page in nut shell..

HTML

CSS

JS

Yay! It's dance floor..

Variable / Constant / Primitive type

Objects & Arrays

Functions

DOM Manipulation

Demo - ToDo App

HTML

CSS

JavaScript

Deploy the app

Useful links

Thanks!

JavaScript - Zero to Hero

JavaScript - Zero to Hero

Udhayakumar G

	// 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 = "";
	}

	typeof name
	"string"

JavaScript - Zero to Hero!🚀

JavaScript - Zero to Hero

More from Udhayakumar G