Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Client Web

503 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
  • Be the first to comment

  • Be the first to like this

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

×