The document provides an overview of core web technologies including HTTP, HTML, CSS, JavaScript and how they work together. It explains how HTTP is used to transfer data between client and server, how HTML structures content, CSS styles content, and JavaScript controls behavior. It also discusses how these technologies have evolved over time and how jQuery simplifies working with them through its selector and method chains that abstract browser differences.
34. Css rules priorities
- #id == 3
- .classname == 2
- [attr] == 2
- el == 1
Sum = … -> order -> priority = …
35.
36.
37. JavaScript –
is a powerful programming language,
embedded into the browsers,
letting us control the behavior of contents
38. Unobtrusive JavaScript
10 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.
39. 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>
40. 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>
44. 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.
45. 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>
46. 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;
}
51. 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
55. CSS, or jQuery selectors
p a { color: green; }
$(“p a”).css(„color‟, „green‟);
$("p:even");
$("tr:nth-child(1)");
$("body > div");
$("a[href$=pdf]");
$("body > div:has(a)");
56. 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())
59. Usual Ajax workflow
1. Simple HTTP Get through click
2. Page loads javascript logic for ajax
3. Certain actions lead user to async ajax requests
4. Browser sends request to server without reloading page
5. Server examines that the request is async
6. Server s sends back piece of html or json
7. Client gets response and applies it to page