1 of 50

BUILDING

WEB APPS

2 of 50

HELLO!

I am Varun

Sr. Applications Architect

Skcript Technologies Ptv. Ltd.

@zathvarun

3 of 50

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.

4 of 50

1.

What are web apps?

Whatever that runs inside your web browser!

5 of 50

Then what’s the difference between website and a web app?

6 of 50

HERE IT IS.

Web Sites.

  • Mostly static.
  • Used for promotions.
  • Boring.

Web Apps.

  • Highly dynamic.
  • Used for various tasks.
  • Fun.

7 of 50

Why Web Apps Are Getting Popular

  • Easier to build.
  • Maintainable.
  • Easier Shipping & Updates.
  • Secured. (Hard for pirates)
  • Easier Access (Anywhere anytime)

Lot more. That too when I’m a big fan of it.

8 of 50

Let’s

Jump Into it

I know the stats are boring.

9 of 50

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.

10 of 50

OLDEN

DAYS

OF WEB APPS

BROWSER

DATABASE

SERVER

11 of 50

CURRENT

DAYS

OF WEB APPS

SERVER

DATABASE

BROWSER

12 of 50

JavaScript is powerful

So why don’t we give it a shot?

13 of 50

1.

Fundamentals

Just like any other programming language.

14 of 50

The building blocks of any programming language.

15 of 50

Variable Declaration

var x = 5;

var y = 6;

var z = x + y;

var s = “Hello World!”;

// Can also be.

var person = "Jeyanthan", age = 24;

16 of 50

Loops and Conditional Operators

if (condition) {

console.log(“Success”);

} else {

console.log(“Failed”);

}

for (i = 0; i < n; i++ ) {

console.log(i);

}

17 of 50

Function Declaration

function myFunction(p1, p2) {

// Codes

return p1 * p2;

}

18 of 50

2.

Data Structures

Believe me, it’s not that boring

19 of 50

These are they ways you organize your data.

20 of 50

Arrays

var a = [1, 2, 3, 4];

var b = [“GDG Chennai”, “SRM”, “Mozilla”];

21 of 50

Objects

var person = {

firstName:"Sundar",

lastName:"Pichai",

age:44,

};

22 of 50

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},

];

23 of 50

3.

DOM Operations

Here is the fun part. You can become artistic

24 of 50

These are the functions that helps you manipulate the HTML elements.

25 of 50

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>

26 of 50

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)

27 of 50

4.

Events and Handlers

Giving life to your web app.

28 of 50

There will be an event triggered whenever you do something in an element of the webpage.

29 of 50

Basic events in a element

onclick

onmouseover

ondblclick

onmouseout

onkeyup

onkeydown

onfocus

30 of 50

Handling an event

<button onclick='document.getElementById("demo").innerHTML=Date()'>

The time is?

</button>

<p id="demo"></p>

31 of 50

And lot more to consume, let’s make things practical.

32 of 50

Let the hackings begin

Time to get hands dirty

33 of 50

We’re going to build a live

HTML Editor

varunraj.in/madeditor

What all you need for it?

How you make it work?

34 of 50

1.

Creating the basic skeleton

Here is where everything starts

35 of 50

Creating the Project Folder

  • Create a new folder somewhere
  • Create the following two files.
    • index.html
    • index.js
  • Drag and drop the entire folder into sublime editor

That’s a for basic setup. No complex config.

36 of 50

2.

Setting up the basic structure.

Cool things happens here. But pretty confusing so stay with me.

37 of 50

Setting up the Basic Code

  • Open the index.html and create a basic html structure.
  • Import the index.js file inside that html with <script> tag

This is simple so you should do it on your own. But I’ll help you with it.

38 of 50

<!DOCTYPE html>

<html>

<head>

<title>Your title goes here</title>

</head>

<body>

<!-- Other elements goes here -->

<script src=”index.js”></script>

</body>

</html>

39 of 50

3.

Add the DOM Elements.

Cool things happens here. But pretty confusing so stay with me.

40 of 50

Adding the basic DOM Elements

  • Add the required elements.
  • Two <textarea> for input of HTML and CSS.
  • One <iframe> for showing the output html

Everything should be inside <body> tag

41 of 50

4.

Adding the JavaScript Code.

The Judgemental Stage.

42 of 50

Giving life to the textboxes

  • We need to listen to new entries in html <textarea>.
  • Append the values of <textarea> as html in <iframe>
  • Do the same for CSS <textarea> as well, but different way.

43 of 50

Necessary steps.

  • Select all the involved elements and store it to a variable.
    • document.getElementById("id")
  • Write oninput function for the textbox elements.
    • oninput
  • Copy the value of the textbox as html to iframe element.
    • innerHTML

44 of 50

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;

45 of 50

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);

}

46 of 50

4.

Putting Everything together

Hopefully everything works :D

47 of 50

References

Helps you in your journey.

48 of 50

Helpful resources.

  • W3School.com
  • Code academy
  • Stackoverflow.

49 of 50

Any Questions?

Ask me as much as possible

50 of 50

Thank You!