Client Web

A brief view at client web

Markiyan MatsekhWeb developer

No, we won’t

HTTP HTML

CSS JS

Transport Content

Appearance Behavior

Http (HyperText Transfer Protocol) –is a deal between client and server on how to deliver data

-Request/Response model-Stateless-Operates with text

Http

How to transfer large binary files through protocol

which operates with text?

How to maintain statein stateless protocol?

How to get updates from serverwhen all you can do is ask for?

Http methods- Get- Post- Put- Delete- (few less used)

Time for a small demo

What about security?

-Agree on PreMasterSecret-Encrypt traffic with it-Send data safely

Https

Html (HyperText Markup Language) –is a tool for describing contents with pre-defined limited set of words

Is a set of rules, by which browser

reads this description

<form name="input" action=“your_url" method="get">

Text: <input type=“text" name=“text” /> Radio: <input type="checkbox" name=“radio"/> <input type="submit" value="Submit" />

</form>

Here comes Http

The number of html elements is growing…

Because what really matters nowadays…

Html5 is just a logical step in evolution of web

ordo ab chaoAfter chaos comes order

Css (Cascading Style Sheets) –is a way of describing how your contents should look

Css rules priorities

- #id == 3- .classname == 2- [attr] == 2- el == 1

Sum = … -> order -> priority = …

Css rules priorities

JavaScript –is a powerful programming language,embedded into the browsers,letting us control the behavior of contents

Unobtrusive JavaScript10 years ago

<body bgcolor=“#000”>

BAD! Now we move styles into separate files

body { background-color: #000;}

Same with javascript. We put him into separate file.

Bad, mixing JavaScript with HTML

<button type="button“ onclick=“document.getElementById(‘photo').style.color='red';“> Click Me </button><div id=“photo”>I am photo</div>

Unobtrusive JavaScript<button type="button" id="testButton">Click Me</button>

<-clean HTML

<script type="text/javascript"> window.onload = init;

function init() { document.getElementById('testButton').onclick = makeItRed;}function makeItRed() { document.getElementById(‘photo').style.color = 'red'; };</script>

HTTP HTML

CSS JS

Transport Content

Appearance Behavior

Separation of concerns

Events• World Wide Web – it’s events that make it all

happen

1 Set up the user interface.2 Wait for something interesting to happen.3 React accordingly.4 Repeat.

Netscape Event Model (march 1996)DOM Level 0 Event Model

• Hanlder function is assigned to attribtues on html element (onclick)

<button id=“button1” value=“I’m button” onclick=“alert(‘I\’am clicked’)” />

<script type="text/javascript"> $(function() { $(‘#button1’)[0].onfocus = function(event) { console.log(‘Focused!’); } }); </script>

Across the browsers?1. IE doesn’t invoke function with ‘event’ $(‘#button1’)[0].onfocus = function(event) { if (!event) event = window.event; }

2. IE has event.target instead of event.srcElement: var target = (event.target) ? event.target : event.srcElement;

$(‘#button1’)[0].onfocus = function(event) { if (!event) event = window.event; var target = (event.target) ? event.target : event.srcElement;}

Event bubbling

Event bubblingdocument.onclick = function(event) { alert(event.target.tagName);}

Events bubbling (propagation)Browsers: event.stopPropagation();IE: event.cancelBubble = true;These don’t bubble: focus, blur; change, submit

Events default actions<form name=“myform” onsubmit=“return false;”></form|><a href=“http://www.mysite.com” onclick=“return false;”></a>Browsers: event.preventDefault();IE: event.returnValue = false;

event.currentTarget – doesn’t work on IE

The DOM Level 2 Event Model (november2000)

function doFirstThing() {}function doSecondThing() {}

addEventListener(eventType, listener, useCapture)

someElement.addEventListener(‘click’, doFirstThing, false);someElement.addEventListener(‘click’, doSecondThing, false);// (порядок виконання не гарантується)

IE: attachEvent(eventName, handler); // window.event :(someElement.attachEvent(‘onclick’, doFirstThing);someElement.attachEvent(‘onclick’, doSecondThing);

jQuery

What is jQuery?

$(), jQuery() – is function, just another piece of js code. But more pleasant one

var jQuery = function(selector, context) { return new jQuery.fn.init(selector, context);}jQuery.fn.init - returns wrapped set

What does jQuery do?

$(selector).action()<div>Some text</div><div class=“winter”>Winter text</div>

<script type=“text/javascript”>$('div.winter').hide();// jQuery chaining$('div.winter').hide().show();

$('div.winter').hide().show().removeClass('winter').addClass('spring');

// same as:var myDiv = $('div.winter');myDiv.hide();myDiv.show();myDiv.removeClass('winter');myDiv.addClass('spring');</script>

CSS, or jQuery selectorsp a { color: green; }$(“p a”).css(‘color’, ‘green’);$("p:even"); $("tr:nth-child(1)"); $("body > div"); $("a[href$=pdf]"); $("body > div:has(a)");

The jQuery Event Model

$(‘img’).bind(‘click’, function(event) { alert(‘Image clicked ’ + $(this).attr(‘alt’));});

• Unified way of adding event handlers• Easy to add many handlers at once• Standard names (click, focus);• ‘event’ is always present and in the same form• Unified way of canceling and preventing default actions

(event.preventDefault()) (event.cancelBubble())

Ajax (Asynchronous JavaScript and Xml) –is a chance to reload the contentwithout reloading the whole page

1. Simple HTTP Get through click2. Page loads javascript logic for ajax3. Certain actions lead user to async ajax requests4. Browser sends request to server without reloading page5. Server examines that the request is async6. Server s sends back piece of html or json7. Client gets response and applies it to page

Usual Ajax workflow

Ajax lets us use more HTTP then <form> element

Don’t forget!

• Javascript is tricky• Javascript is single-threaded• Events run it all• Use Ajax wisely• Use Cookies wisely

And now time for another demo

Client Web

Technology

jquery event model

new jquery

jquery selectorsp

preventdefault event

ajax asynchronous javascript

tricky javascript

http methods

simple http