Web осень 2012 лекция 9

  • View
    206

  • Download
    1

Embed Size (px)

Transcript

  • 1. JavaScript

2. 3. JavaScript ECMAScript (JScript, ActionScript) 4. var _true = true; // O, Realy ? if (a < b) return 1 for (i = 0; i < arr.length; i++) { arr[i] += 1; } try { throw 'test'; } catch (e) { console.log(e) } 5. var a = 10, b = 20; window.x = 30; : a = 1; b = 1.1; // Number str = 'hello' // String b = true; // Boolean obj = {}; arr = []; // Object f = function () { return 1 } // null undefined , 6. JSON [] - , {} - , , var rata = { 'result': true, 'message': 'hello world', 'ids': [1, 2, 33, 100500], 'actors' : [ { 'name' : 'Peter', 'age' : 30 }, { 'name' : 'David', 'age' : 35 } ] }; 7. function doSomething(a, b, c) { . . . } var doSomething = function(a, b, c) { . . . } function addHandler(obj, msg) { function say() { alert(msg) } obj.addEventListener('click', say); } 8. // quiz 1 function doSomething(a, b, c) { if (!x) { var x = 5; } alert(x); } // quiz 2 funcs = []; for (var i = 0; i < 10; i++) { funcs[i] = function() { alert(i) }; } funcs[3](); 9. function hideButNotNow(id, timeout) { var elem = document.getElementById(id); setTimeout(function() { elem.style['display'] = 'none'; }, timeout); } hideButNotNow('mybtn', 1000) hideButNotNow('mybtn2', 2000) hideButNotNow('mybtn3', 3000) = + 10. Math , Infinity NaN String , , , immutable RegExp , search/match/replace, RegExp.$1 Date , UTC, , Function !! !! 11. Client-Side JS 12. ? CLICK PUSH

... ... 13. 1) , 2) JS 3) 4) 14. document.write('Hello'); // HTML alert('Ooops'); // .. if (onfirm(' ?')) // DEL prompr(' -'); // el = document.getElementById('content'); el.innerHTML = '
Hello
'; 15. API window ( ) document , HTML location URL , URL, location URL history , navigator cookie screen 16. XML, HTML XHTML DOM 17. DOM0 () document.forms[0].elements[0] document.formName.inputName document.anchors // document.images // document.all // IE onclick=... // onsubmit=... 18. DOM1 19. DOM1 20. DOM1 Node : type, appendChild, removeChild, insertBefore, insertAfter, parentNode, firstChild, childNodes, nextSibling, previousSibling Document , Node: createElement, createTextNode, createAttribute, getElementsByTagName, getElementById(*), getElementsByName(*) Element Node, : getAttribute, setAttribute, removeAttribute, getElementsByTagName Attr Node, : name, value Text Node, 21. DOM table = document.getElementById('tab1'); tb = table.getElementsByTagName('tbody')[0]; row = tb.lastChild; newRow = row.cloneNode(); tb.appendChild(newRow); tds = newRow.getElementsByTagName('td'); for (var i = 0; i < tds.length; i++) { children = td[i].childNodes; for (var j = 0; j < children.length; j++) { td[i].removeChild(children[j]); } } 22. : click (mousedown, mouseup) keypress (keydown, keyup) mouseover (mousein, mouseout) change, submit : . (, , ) 23. (bubbling) -: a , form ..

Hello world CLCK

24. CLCK 25. Asynchronous Javascript And XML AJAX 26. AJAX 27. HTTP 28. 29. AJAX 30. XHR var xmlhttp = getXmlHttp() xmlhttp.open('GET', '/xhr/test.html', true); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) { if(xmlhttp.status == 200) { alert(xmlhttp.responseText); } else { alert('error' + xmlhttp.status); } } }; xmlhttp.send(null); 31. func({ 'res' : 'ok', . . . }); AJAX (: iframe) (: JSONP) 32. obj.addEventListener('click', function(ev) { . . . }); // FF, Chrome, Opera abj.attachEvent('onclick', function() { var ev = window.event; }); // IE xhr = new XMLHttpRequest(); // FF xhr = ActiveXObject("Msxml2.XMLHTTP"); // IE () JavaScript 33. JavaScript 34. jQuery 35. jQuery, $ - $(document), $(this), $('a.btn'), $($('div')) $('div') nodeset, $('div').filter(':even').addClass('blue') .addpend('body').fadeOut('slow'); $(document.window).width() $('#mylink').attr('href') jQuery - 36. : .clazz #id div > + , : input:radio // input:checked // checkbox span:visible // span li:nth(n) // n- li:nth-child(n) // n- p:eq(n) // n+1 p:gt(n) // , n+1 p:not(.special) // special p:has(a.mylink) // a.mylink jQuery - 37. $(...).find('input[name=age]') // $(...).children('.nice') // $(...).parent() // $(...).closest('.containter') // $(...).siblings() // $(...).next() $(...).nextAll() $(...).prev() $(...).prevAll() $(...).filter(':checked') // $(...).each(function(id) { // alert(this) }) jQuery - traversing 38. $(...).appendTo('.another') $(...).insertBefore('.smth') $(...).remove() $(...).clone() $(...).replaceWith() $(...).wrap() $(...).html('hello') $(...).text('plain text') $(...).attr('href') $(...).attr('href', x) $(...).addClass('some') $(...).removeClass('some') jQuery DOM 39. AddClass / removeClass / hasClass / toggleClass $(...).height() // $(...).width() // $(...).position() // $(...).offset() // {'left':10, 'top':20} $(...).css('float') $(...).css('float', 'left') $(...).css({ left: 10, top: 20 }) CSS 40. $.ajax({ url: '/vote.php', data: { id: 33, action: 'like' }, success: function (data, status) { alert('ok: ' + data); }, error: function (xhr, status) { alert('fail: ' + status); } }); $('#some_div').load('/list.php', { id: 33 }); jQuery AJAX 41. CLCK $('#myid').data('mydata'); $('#myid').data('flag', 'on'); $('a.delete').live(function() { var $e = $(this); $.post('/delete/', { id : $e.data('id') }); $e.remove(); }); $(function() { alert('page loaded') }); 42. jQuery jquery.modal // jquery.validate // jquery.accordion jquery.slider jquery.suggest // ! 43. jQuery UI 44. Best Practice ! data- js-login-block, js-login-block-btn b_login_overlay, b_login_overlay__btn__inner (function() { // do some work })(); 45. JavaScript 46. Class-Based Views Django Templates () , 47. , smal@corp.mail.ru