BUILDING
WEB APPS
HELLO!
I am Varun
Sr. Applications Architect
Skcript Technologies Ptv. Ltd.
@zathvarun
Agenda for the day
1. UNDERSTAND
Will walk you through what web apps are.
2. ANALYSE
Given a problem, will help you analyse it and plan for a solution
3. EXECUTE
Building the solution on your own.
1.
What are web apps?
Whatever that runs inside your web browser!
Then what’s the difference between website and a web app?
“
HERE IT IS.
Web Sites.
Web Apps.
Why Web Apps Are Getting Popular
Lot more. That too when I’m a big fan of it.
Let’s
Jump Into it
I know the stats are boring.
THE THREE MAIN ELEMENTS
HTML
Helps to build the skeleton of the apps.
CSS
Helps to dress up the apps.
JAVASCRIPT
Gives superpowers to the apps.
OLDEN
DAYS
OF WEB APPS
BROWSER
DATABASE
SERVER
CURRENT
DAYS
OF WEB APPS
SERVER
DATABASE
BROWSER
JavaScript is powerful
So why don’t we give it a shot?
1.
Fundamentals
Just like any other programming language.
The building blocks of any programming language.
“
Variable Declaration
var x = 5;
var y = 6;
var z = x + y;
var s = “Hello World!”;
// Can also be.
var person = "Jeyanthan", age = 24;
Loops and Conditional Operators
if (condition) {
console.log(“Success”);
} else {
console.log(“Failed”);
}
for (i = 0; i < n; i++ ) {
console.log(i);
}
Function Declaration
function myFunction(p1, p2) {
// Codes
return p1 * p2;
}
2.
Data Structures
Believe me, it’s not that boring
These are they ways you organize your data.
“
Arrays
var a = [1, 2, 3, 4];
var b = [“GDG Chennai”, “SRM”, “Mozilla”];
Objects
var person = {
firstName:"Sundar",
lastName:"Pichai",
age:44,
};
Array of Objects
var a = [
{name: “Google”, founded_in: 1998},
{name: “Yahoo”, founded_in: 1985},
{name: “Mozilla”, founded_in: 2003},
{name: “Apple”, founded_in: 1976},
];
3.
DOM Operations
Here is the fun part. You can become artistic
These are the functions that helps you manipulate the HTML elements.
“
Selecting an Element
document.getElementById("demo"); //Single Elements
document.getElementsByClassName("demo"); //Array of Elements
document.getElementsByTagName(“div”); //Array of Elements
<div id=”demo”></div>
<div class=”demo”></div>
Functions on a Element
Changing HTML Elements
element.innerHTML
element.attribute
element.setAttribute(attribute, value)
element.style.property
Adding/Deleting HTML Elements
document.createElement(element)
document.removeChild(element)
document.appendChild(element)
document.replaceChild(element)
4.
Events and Handlers
Giving life to your web app.
There will be an event triggered whenever you do something in an element of the webpage.
“
Basic events in a element
onclick
onmouseover
ondblclick
onmouseout
onkeyup
onkeydown
onfocus
Handling an event
<button onclick='document.getElementById("demo").innerHTML=Date()'>
The time is?
</button>
<p id="demo"></p>
And lot more to consume, let’s make things practical.
“
Let the hackings begin
Time to get hands dirty
We’re going to build a live
HTML Editor
varunraj.in/madeditor
What all you need for it?
How you make it work?
1.
Creating the basic skeleton
Here is where everything starts
Creating the Project Folder
That’s a for basic setup. No complex config.
2.
Setting up the basic structure.
Cool things happens here. But pretty confusing so stay with me.
Setting up the Basic Code
This is simple so you should do it on your own. But I’ll help you with it.
<!DOCTYPE html>
<html>
<head>
<title>Your title goes here</title>
</head>
<body>
<!-- Other elements goes here -->
<script src=”index.js”></script>
</body>
</html>
3.
Add the DOM Elements.
Cool things happens here. But pretty confusing so stay with me.
Adding the basic DOM Elements
Everything should be inside <body> tag
4.
Adding the JavaScript Code.
The Judgemental Stage.
Giving life to the textboxes
Necessary steps.
Initialization
var html = document.getElementById("html");
var output = document.getElementById("output");
var style = document.getElementById("style");
var iframeDoc = output.contentDocument;
var iframeBody = iframeDoc.body;
var iframeHead = iframeDoc.head;
Functions
// For HTML
html.oninput=function(){
iframeBody.innerHTML = editor.value
}
// For CSS
style.oninput = function() {
var newCSS = document.createTextNode(style.value);
iframeStyle.innerHTML = "";
iframeHead.innerHTML = "";
iframeStyle.appendChild(newCSS);
iframeHead.appendChild(iframeStyle);
}
4.
Putting Everything together
Hopefully everything works :D
References
Helps you in your journey.
Helpful resources.
Any Questions?
Ask me as much as possible
Thank You!
@zathvarun