Client-side: JavaScript.html (4019B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html><head><link rel="stylesheet" type="text/css" href="sitewide.css"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 6.13.3 (455969)"/><meta name="created" content="2018-01-11 11:10:25 AM +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2018-01-18 4:31:16 PM +0000"/><title>Client-side: JavaScript</title></head><body><div><ul><li>interpreted, no compilation<br/></li><ul><li>interpreter is embedded in another app (browser)</li></ul><li>scripts operate in document/browser</li><li>dynamically typed — untyped variables, typed values</li><li>objects</li><ul><li>an object is a set of properties</li><li>no classes!</li><li>a property is a unique-name key:value pair</li><li>created with a constructor:</li></ul></ul></div><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><div><font face="Courier New">var ob = new Object();</font></div></div><div><font face="Courier New">ob.testing = “test”;</font></div></blockquote></blockquote><font face="Helvetica Neue"><ul><ul><li>deleted with delete:</li></ul></ul></font><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><font face="Courier New">delete ob.testing;</font></div></blockquote></blockquote><ul><ul><li><font face="Helvetica Neue">built in: window (browser window), document (page in window)</font></li></ul><li><font face="Helvetica Neue">DOM API (Document Object Model)</font></li><ul><li><font face="Helvetica Neue">by W3C recommendations</font></li><li><font face="Helvetica Neue">works with document tree</font></li><li><font face="Helvetica Neue">functions from JS are called through HTML attributes</font></li><li><font face="Helvetica Neue">can add noes, remove nodes, change attributes</font></li></ul><li><font face="Helvetica Neue">Events</font></li><ul><li><font face="Helvetica Neue">when should shit happen?</font></li><li><font face="Helvetica Neue">after page loads, while(forever) wait for event</font></li><li><font face="Helvetica Neue">predefined: click, mouseover, mouseon, mouseout, keypress, resize, scroll, etc.</font></li><li><font face="Helvetica Neue">write a function to respond to event, then subscribe/register/bind it</font></li><li><font face="Helvetica Neue">browser calls it when needed</font></li><li><font face="Helvetica Neue">event “bubbling”: events execute from lowest node upwards</font></li></ul><li><font face="Helvetica Neue">AJAX (more like AJAJ or whatever, not really XML anymore, but AJAX sounds cooler)</font></li><ul><li><font face="Helvetica Neue">recipe (always the same)</font></li><ol><li><font face="Helvetica Neue">Make initial page</font></li><li><font face="Helvetica Neue">Set up event handlers</font></li><li><font face="Helvetica Neue">When called, handlers do magic (request new data from server over HTTP in XML/JSON/whatever)</font></li><ul><li><font face="Helvetica Neue">asynchronous, execution continues all the time, there’s no wait for the server</font></li><li><font face="Helvetica Neue">shitty using XMLHttpRequest, better with jQuery</font></li></ul></ol><li><font face="Helvetica Neue">fast, easier for users</font></li><li><font face="Helvetica Neue">weak browser integration (e.g. back button), low search engine indexing, accessibility, response time, security</font></li><li><font face="Helvetica Neue">same origin policy: requests to other sites will be blocked, unless the target site opts in explicitly</font></li><li><font face="Helvetica Neue">some AJAX calls return HTML, others JSON (originally XML)</font></li></ul><li><font face="Helvetica Neue">libraries — jQuery</font></li></ul><div><br/></div></body></html>