? ? ???? ?? ???? ?? ??? "??"?? ? ?? ????? ?????. ?? ??, ?? DOM ??? ?? ? ? ????? ?? ??? ?? ? ????.
??? ??? ??? ?? ? ??? ??? ??? ??? ??? Domtable ??? ?? ? ? ????.<%= javascript_include_tag 'prototype' %>
?? ??? ????? ?? ???? ?? ? ? ???? :
<br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")
?? ???
??? ??? ?? ?? ??? ? ?? ??? ? ?? ??? ????? : bind and bindaseventlistener. ? ???? ?? ??? ?? ??? ??? ?? ??? ????? ? ?? ?????. ??? ??? ??? ??? ? ?? ?????. ??? ?? ??????? :
?????, ???? ??? ??? ??? ? ?, ??? myObject? ?? myDiv ??? ???? ??? ??? ????? message? ???? ?????. ??? ?? ??? ???? ?? ??? ??? ??? ? ????.
??? ???? myObject? ????? ??? ?? ?? ? ?????. ?? BindaseventListener? ??? ??? ????? ??? ??? ??? ???? ?? ???? ???? ????? ? ?? Window.event? ?? ??? ??? ????. ??? ?????? :
?? EventHandler ??? ??? ??? ??? ? ? ????. ? ? ?? ??? ?? ??? ??? ??? ????? ??? ? ????.
// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))
??? ??? ? ?? ???
??? ??? ?? ??? ??? ??? ?? ??? ??? ??????. ?? ? ??? ??? ?? ?????.
// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")
??? ??? ???? ??? ??? ?????. ??? ?? ?? ???????!
$F takes an ID and returns the value of any form field, for instance, a select box like this:
???, Times Method? ??? ???? ??? ??? ??? ?? ?? ??? ??? ?????. ? ?? ??? ???? ?? ?? ??? ??? ? ??????. ??? ?? ? ????.
Ruby Way? ?? : ?? ???? ??
??? ??? ??? ?? ? ??? ?? ??? ?? ?? ?? ???, ???? ??? ???. ??? ???? ??? ???? ????. ??? ?? ???????.
??? ?? ??? ??? ?????. ???, Object.Extend? ???? ??? ?? ??? ?? ? ?, ?? ??? ??? ???? ? ?? ??? ??? ?????. ?? ??? ??? ??? ??? ?? ??? ??????? ?? ???? ??? ??? ??? ????. ??? ??? "?? ?"???? ? ??? ?? ?? ? ?? ????.
??? ???? ?? ???? Magic ?? $ H? ??????. ??? ??? ?? ??? ?? ??? ?? ? ? ? ? ??? ????.<%= javascript_include_tag 'prototype' %>
<br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")
???? ????? ???? ?? ? ? ?? ??? ?? ?? ?? ?? ? ???, ?? ???? ???? ??? ?? RSI? ?? ? ? RSI? ?? ???? ?? ? ????! ?? ??? ?? ????? ??? ??? ??? ?? ?? ? ????. ??? ? ? ????
"> Encyte Media?? ?? ? ??? ?? ??? ??????. // all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))
??? ??? ?? ????? JavaScript? ??? ???? ? ??????. ??? ??? ???? ??? ?? :
?? ??? ???? ??? ??? ???? ?? ? ?? ???? ???? ???? ??? ??? ??? ???? ?????.
? ???, ??? ?? ?? ??? ? ??? ?? ?????? Dean Edwards? Addevent? ?? ?? ? ??? ?? ???? ?? ???? ?? ????.
?? ?? // an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")
?? ? ?? ??? ??? ??? Ajax ??? ???? ???? ??? ?? ? ?? ??? ?????? ?? ?? ????? ??? ??? ?????.
?? ??
????? ?? ??? ???? ??? ?? ID ?? ?? ??? ????.
?? ??
?? ??? ?? ?? ??? ???, ? ??? ????? ?? ??? ??? ???? ??? ?? ID ?? ?? ??? ????.
?? ???
??? ?? ???? ??? ?????? ?? ?? ??? ??? ?? ??? ???? ?? ? ?? ??? URL? ??? ? ??? (??)?? ???? ?? ?????. ?? ??,? ??? ?????? :
<.> ??? ?? ?? ??? ????? ??? ???? ???? ?????? ??, ??, ??? ? ??? ??? ???? ?????. Form.serialize? ?? ??? ????? ? ? ? ??? Ajax? ?? ?? ? ? ????? ?????.
? ????? ???? ?????? ??? ????, ???? MyCallbackFunction? ?? ? ????.
? ?? ??? ???? ??? ???? ??? ?? ?? ?? ?? ???? ?? ? ?? ??? ?????. ??? ?? ??? ? ???? :
??? ?? ??? ??? ???? ???? ?? ??? ???? ?? ? ???? ?????. ??? ??? ???? ???? ?? ??? ?? ??? ????? ??? ? ???? ??????. Dom ??
??? ???? 4 ?? ?? (??, ??, ??? ??? ??)??? ??? ??? DOM ??? ???? DOM? ??? ?? ???? ??? ?? ???? ???? ??? ???????. ???? ? ??? ??? ??? ??? ??????.
?? ??
?? ???? ???? ??? ??? ??? ???? ?????. ???? ?? ??? ??? ????? ??? ?? ID ?? ?? ??? ?????. ??? ?? ??? ?? ? ??? ?? ? ???? :
Sergio Pereira ???? ?? ??? ??????
?? ??
?? ??? ???? ?? ?? ????. ??? ?? ???? ????. ??, ?? ??? ?? ???? html ???? ?????. ???? 4 ?? ??? ???? : ?, ?, ?? ? ??. ??? ID "Myelement"??? ?? ?? HTML? ???? ?????.
? ?????? ? ??? ??? ??? ??? ???? HTML ???? ?? ?? ??? ?????.
<%= javascript_include_tag 'prototype' %>
?? ??
?? ??? ??? ??? ??? ?? ???? ?? ??? ???? ?? ??? ?? ??? ??? ???? ?? ???? ?? ? ??? ?? ??? ?????. ??? ?????, ?? ? ??? ? ?? ??? ???? ??? ?? ???? ??????. ??? ??? ?? ??? ??????.
? 2.0? ? ?????
“???!” ??? "?? ??? ??? ?? ?? ?? ?? ???? ????." ?????. ??? ??? Ajax ??? ???? ?? ??? ?? ?????. ???? ??? ?? ?? ?? ?? ?? ?? ?? ??? Ajax? ?? ??? ? ? ??? ??? ?? ???, ??? ??? ??? ???? ? ??????.
ajax, ?? ? ? ?? ?? ?? ??? ?? ??, ???? ?????? ?? ??? ???? ?? ????? xmlhttprequest ?? (?? ?? ???)? ???? ?? ????. ??? ??? ???? ?? ??? ??????? Xmlhttprequest? ?? ??? ??? ?? ?? ????.
??? ?? ? 2.0 ??? ??? ?? ?? ???????. ?? ??? Ajax ??? ?? ?????.
ajax.request ???? URL? ?? ??? ?????. ? ?? ?? ?? (??)? hello.php? ??? ??? ????? ???? ??? ??? ????). ?? ??? ??? ????? ?? ??? ?? ? ??? ????. ??? ???? ?? ??? ?? ?????.
??? ??? ?? AJAX ??? ??? ?? HTTP ??? ???? ?? ?? ????? ?? ??? ?? AJAX ???? ?? ? ? ??????. ??? ??? ????.
??? Ajax ??? ???? ? ???? PHP ?? ????.
? ??? ???? ???? ?? ????? ???? ??? JavaScript? ?????? ??? ???? Ajax ?? ????? ??? ? ??? ?? ?????.
form.serialize? ???? ???? ajax.request? ?????
??? ? ? ??? ?? ?? ??? URL ??? ? ?? ???? ???? ? ?????. ???? ? ???? ???? Ajax ?? ????? ????? ???? ???? ??? ???? ?? ?? ???? URL ??? ? ???? ???? ?? ?? ???? ??? ? ????.
<%= javascript_include_tag 'prototype' %>
ajax ??? ??? ??
?? ??? onsuccess? onfailure? Ajax ??? ???? ? ?? ????. ajax.request ??? ?? ??? ??? ??? ??? ??? ??? ?????. ?? ajax ??? ?? xmlhttprequest ?????. ?? ??? ??? ?? ?? ?? resp?? ????. ? ??? ???? ???? ??? ?? ? ????.
??? resp? xmlhttprequest ?? ? ???? ?? ??????. ??? ?? ??? ??? ? ????. .
X-JSON ?? ??? JSON ???? ???? ???? JSON?? ???? ?? ? ????. ??? ???? ??? ??? ?? ???? ? ???? ??? ?????. <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")
.
ajax.updater and ajax.periodicalupdater
?? ajax ???? ???? HTML? ?? ? HTML? ???? ???? ?? HTML? ?????? ????. ajax.updater ??? ajax? ??? Quest.request? ? ??? ?? ?? ??? ??????. ??? ?? ??? ????.
?? ? ??? ??? "mydiv"? ??? ??? ???? ?? ? ???? ?????. ajax.periodicalupdater? ????? Ajax? ?? ? ???? ????? ?????.
?????? ajax
AJAX ???? ???? ????? ???? ?? AJAX ??? ?? ??? ? ??? ??? ???? ?? ? ? ????. AJAX ??? ??? ?? ????? ???? ? ?? ?????. ?? ?? AJAX ??? ??? ??? ???? ?????? ?? ? ? ????.
??? ???? Ajax? ?? ??? ?? ???? ??? ???????.
> ?? ????
? ??? ?? ?? ?? ??? ??? ????? ?? ??? ??? ?? ?? ?????? ?????? ??? ???? ?????. ??? ?? ?? ? ?? ???????? ????.
script.aculo.us ? moo.fx <%= javascript_include_tag 'prototype' %>
Thomas Fuchs? script.aculo.us? ?? whiz-bang ??? ??? UI ??? ?? ?? ??? ?? ????. ??? ?? ?? ??? ?? ?????? ?? ??? ? ???? ??? ??? ??????.
??? ??? ???? ???? Script.aculo.us? ????? ??, ???? ?? ??? ? ?? ?? ? ??? UI ?? ??? ?? ??? ??? ??? ???? ?????. ? ????? ?? ??? ???, ??? ???? ??? ?? ???? ???, ??? ??? ????? ???? ?????. Script.aculo.us? ?? ??? ?? ??? ?? ??? ???? ???? ?? ?????? ???? ? ??? ???? ? ?? ???? ??? ??? ? ????. ??? ?? ????? ??? ??? ????.
??? ??? ? ?? moo.fx? ??? ?????. ??? 3k? ???? ??? Ajax ?? ?????? ??? ????? ?? ???? ? ??? ??? ?????. ??? ??? ?? ??? ?? ??????. ??? ??? ??? ???? ?????? ??? ?? ??? ??? ??????. Valerio? ???? ?? ??? ??? ? ?? ????? ???? ??? ??? '???'?? (? 10K? ?? ?)? ? ??? Ajax.request? ????. ??? ??? ????.
??
??? CSS ???? ???? ??? ??? ?? ? ??? DOM ???? ??? ? ??????. ??? ?? ? ??? ?????.
?? ????? ??? ?? ??? ??????. ??? ??? ??? $$ ??? ???? ??? ??? ?? ?? ? ? ???? ?? ?? ? ? ????.
jQuery jQuery? ??? ???? ? ???? ?? ?? ??????? XPath ? CSS 3 Selector? ??? ??? $ ??? ?? ??? ??? ????. ??? ?? ??? ??? ??? ?? ??? ?? ?? ???? ? ??? ?????. ??? ??????.
? ?
??? ??? ? ??????? DOM ???? ???? ?? ? ? ??? ?????. ????, ? ??? ??? ???? ?? ?? ??? ??????! ???? ???? ??? ??? ?? ??? ????? ?? ??? ????. ??? ??? ?? ??? ?? ?? ??? ???? ??? ????.
? ?? ??? Ronnie Roller? Prototypedoc.com? ???????. ????!
???? JavaScript ??? ??? ?? ?? ?? ?? (FAQ)
Painless JavaScript ??? ???? ??????
????? JavaScript ??? ??? ?? ??? ???? ??? ??? ?? ? ??? JavaScript? ??? ?????. ?? ??? ?? ??? ??????. ? ??? ??? ??? ???? ?? ??? ????? ?? ?? ?????. ??? ?? ??? ?? ???? ?????.
???? JavaScript ??? ??? ?? JavaScript ??? ??? ??? ??
?? JavaScript ??? ?? ?? ? JavaScript ??? ??? ?? ? ??? ???? ??? ?? ? ? ????. ?, ??? ??? ???? ?? ? ??? ???? ?? ??? ?? ? ? ????. ??? ?? ??? ?? ? ???? ?? JavaScript ??? ????. ???? JavaScript ??? ??? ??? ??
???? JavaScript ??? ??? ??? ??? ??? ???? ???? ??? ???? ?? ??? ???? ??? ??? ??? ??? ???? ?? ?????. ??? ?? ??? ????.
function car (make, model, year) { ?? ? ? ???? JavaScript ??? ??? ??? ?? ? ? ?????
?, ?? ? ? ???? JavaScript ??? ??? ??? ?? ? ? ????. ??? '??? ??'??? ???? ?????. ?? ??? ????. car.prototype.color = 'black';
? ???? 'Color'??? '???'??? ??? ?????. ????? JavaScript ??? ??? ???? ?? ? ? ?????
?, ???? JavaScript ??? ??? ???? ?? ? ? ????. ?? '??? ??'??? ???? ??? ???? ?? ?? ???? ?????. ?? ??? ????. car.prototype.start = function () {
console.log ( 'car start');
}
? ??? '??'??? '???'??? ??? ?????.
???? ?? ???? ??? ??? ???? ?? ??? ?????? ??? ??? ?? ??? ?? ??????. ??? ??? ??? ? ??? ?? ??? ???? ????? ??? ??? ??? ???? ?? ??? ?? ? ????. ?? ?? ?? ??? ???? ????? ????? ?? ? ????. Painless JavaScript ??? ??? ???? ? ??? ??? ?????
Painless JavaScript ??? ??? ???? ???? ? ?? ??? ? ??? ?? JavaScript ???? ???? ???? ?? ?? ? ?? ? ? ??? ????. ??? ??? ????? ???? ?? ??? ??? ? ? ????.
?? JavaScript ??? ?? ????? JavaScript ??? ??? ??? ? ????? ?, ?? JavaScript ??? ?? Painless JavaScript ??? ??? ??? ? ????. ???, ??? ?? ?? ??? ???? ???? ??? ??????? ??? ?? ?????. ? ?? ?????? ???? ???? JavaScript ??? ?????? ??? ???? JavaScript ??? ?? ?? ???? ??? ???? ?? ?? ????.
????? JavaScript ??? ??? ?? ? ?? ?? ??? ?? ??????
????? ????? ??? ??? ?? ?????? ???? JavaScript ??? ??? ?? ? ?? ?? ? ????. ????? ?? ?? MDN (Mozilla Developer Network) ? Codecademy ? Udemy? ?? ????? ??? ??? ??? JavaScript ??? ? ??? ?????.