client web
Post on 10-Dec-2014
480 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related