A brief view at client web                      Markiyan Matsekh                             Web developer
No, we won’t
HTTP   HTMLCSS     JS
Transport    ContentAppearance   Behavior
Http (HyperText Transfer Protocol) –is a deal between client and server onhow to deliver data
Http- Request/Response model- Stateless- Operates with text
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?
Https- Agree on PreMasterSecret- Encrypt traffic with it- Send data safely
Html (HyperText Markup Language) –is a tool for describing contents withpre-defined limited set of words
Is a set of rules,   by which browserreads this description
<form name="input" action=“your_url"method="get">     Text: <input type=“text" name=“text” />     Radio: <input type="chec...
The number of html elements is growing…Because what really matters nowadays…
Html5 is just a logical step in evolution of web             ordo ab chao               After chaos comes order
Css (Cascading Style Sheets) –is a way of describing how your contentsshould look
Css rules priorities
Css rules priorities        -   #id == 3        -   .classname == 2        -   [attr] == 2        -   el == 1  Sum = … -> ...
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 filesbody {    background-col...
Bad, mixing JavaScript with HTML<button type="button“  onclick=“document.getElementById(„photo).style.color=red;“>Click Me...
Unobtrusive JavaScript<button type="button" id="testButton">Click Me                                 <-clean HTML</button>...
HTTP   HTMLCSS     JS
Transport    ContentAppearance   Behavior
Separation of concerns
Events• World Wide Web – it’s events that make it all  happen1 Set up the user interface.2 Wait for something interesting ...
Netscape Event Model (march 1996)                   DOM Level 0 Event Model•   Hanlder function is assigned to attribtues ...
Across the browsers?1. IE doesn’t invoke function with ‘event’   $(„#button1‟)[0].onfocus = function(event) {      if (!ev...
Event bubbling
Event bubblingdocument.onclick = function(event) {  alert(event.target.tagName);}Events bubbling (propagation)Browsers:   ...
The DOM Level 2 Event Model (november2000)function doFirstThing() {}function doSecondThing() {}addEventListener(eventType,...
jQuery
What is jQuery?$(), jQuery() – is function, just another piece of js code. But morepleasant onevar jQuery = function(selec...
What does jQuery do?
$(selector).action()<div>Some text</div><div class=“winter”>Winter text</div><script type=“text/javascript”>$(div.winter)....
CSS, or jQuery selectorsp a { color: green; }$(“p a”).css(„color‟, „green‟);$("p:even");$("tr:nth-child(1)");$("body > div...
The jQuery Event Model$(„img‟).bind(„click‟, function(event) {    alert(„Image clicked ‟ + $(this).attr(„alt‟));});•   Uni...
Ajax (Asynchronous JavaScript and Xml) –is a chance to reload the contentwithout reloading the whole page
Usual Ajax workflow1. Simple HTTP Get through click2. Page loads javascript logic for ajax3. Certain actions lead user to ...
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 Cook...
And now time foranother demo
Client Web
Client Web
Client Web
Client Web
Client Web
Client Web
Client Web
Client Web
Client Web
Client Web
Client Web
Client Web
Client Web
Client Web
Client Web
Client Web
Client Web
Client Web
Client Web
Upcoming SlideShare
Loading in …5
×

Client Web

407 views
355 views

Published on

A brief view at core components that compose client web nowadays.
This presentation is targeted on newbies in this area

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
407
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Intensive development of the web caused too hasty decisions and lack of standards. Later monopolization of the market be IE killed web for years…
  • You can make add any features to your toy, as long as it conforms standards
  • You can make add any features to your toy, as long as it conforms standards
  • These are the 4 main concepts of client web
  • No questions? Then let me ask you – how do you transfer binary data as text? Big data?And how do you maintain state?
  • Why? Remember mobile phones boom? And planshets? They all render data as the user got used to, not how we want it to be rendered.
  • These are the 4 main concepts of client web
  • Client Web

    1. 1. A brief view at client web Markiyan Matsekh Web developer
    2. 2. No, we won’t
    3. 3. HTTP HTMLCSS JS
    4. 4. Transport ContentAppearance Behavior
    5. 5. Http (HyperText Transfer Protocol) –is a deal between client and server onhow to deliver data
    6. 6. Http- Request/Response model- Stateless- Operates with text
    7. 7. How to transfer large binary files through protocol which operates with text?
    8. 8. How to maintain statein stateless protocol?
    9. 9. How to get updates from serverwhen all you can do is ask for?
    10. 10. Http methods- Get- Post- Put- Delete- (few less used)
    11. 11. Time for a small demo
    12. 12. What about security?
    13. 13. Https- Agree on PreMasterSecret- Encrypt traffic with it- Send data safely
    14. 14. Html (HyperText Markup Language) –is a tool for describing contents withpre-defined limited set of words
    15. 15. Is a set of rules, by which browserreads this description
    16. 16. <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
    17. 17. The number of html elements is growing…Because what really matters nowadays…
    18. 18. Html5 is just a logical step in evolution of web ordo ab chao After chaos comes order
    19. 19. Css (Cascading Style Sheets) –is a way of describing how your contentsshould look
    20. 20. Css rules priorities
    21. 21. Css rules priorities - #id == 3 - .classname == 2 - [attr] == 2 - el == 1 Sum = … -> order -> priority = …
    22. 22. JavaScript –is a powerful programming language,embedded into the browsers,letting us control the behavior of contents
    23. 23. Unobtrusive JavaScript10 years ago<body bgcolor=“#000”>BAD! Now we move styles into separate filesbody { background-color: #000;}Same with javascript. We put him into separate file.
    24. 24. 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>
    25. 25. Unobtrusive JavaScript<button type="button" id="testButton">Click Me <-clean HTML</button><script type="text/javascript">window.onload = init;function init() { document.getElementById(testButton).onclick =makeItRed;}function makeItRed() { document.getElementById(„photo).style.color = red;};</script>
    26. 26. HTTP HTMLCSS JS
    27. 27. Transport ContentAppearance Behavior
    28. 28. Separation of concerns
    29. 29. Events• World Wide Web – it’s events that make it all happen1 Set up the user interface.2 Wait for something interesting to happen.3 React accordingly.4 Repeat.
    30. 30. 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>
    31. 31. 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;}
    32. 32. Event bubbling
    33. 33. 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, submitEvents 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
    34. 34. 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);
    35. 35. jQuery
    36. 36. What is jQuery?$(), jQuery() – is function, just another piece of js code. But morepleasant onevar jQuery = function(selector, context) { return new jQuery.fn.init(selector, context);}jQuery.fn.init - returns wrapped set
    37. 37. What does jQuery do?
    38. 38. $(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>
    39. 39. 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)");
    40. 40. 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())
    41. 41. Ajax (Asynchronous JavaScript and Xml) –is a chance to reload the contentwithout reloading the whole page
    42. 42. Usual Ajax workflow1. 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
    43. 43. Ajax lets us use more HTTP then <form> element
    44. 44. Don’t forget!• Javascript is tricky• Javascript is single-threaded• Events run it all• Use Ajax wisely• Use Cookies wisely
    45. 45. And now time foranother demo

    ×