狠狠撸

Javascript & Templates Ideas to Inspire Better Coding

Overview Javascript Objects Prototype statement Event delegation Examples JSON Javascript templates Putting it all together Questions Suggestions

First, a good JavaScript site Want to become a better JavaScript developer? Here is a good link, filled with all sorts of good understanding of how to write better code.

Javascript Objects Object types: Object Date Array Function Event New instances of Object types created using: var w = new Object(); //can contain anything var x = new Date(); //value = today date AND time var y = new Array(鈥�); //index values can be specified var z = new Function(鈥�) {鈥 //objects can be passed in, function accessed like a variable (ie, no 鈥�()鈥� after 鈥榶鈥�

Primitive Types Primitive Types: undefined number string New instances of Primitive types created using: var w = 5; //number var x; //undefined var y = 鈥�3鈥�; //string var z = 4; //number Primitive types allow you to do silly things: w+z+y = 鈥�93鈥�; w+y+z = 鈥�534鈥�; x+w = NaN; //Not a Number (isNan() can test these) isNan(y) = false; //string looks like number (quirk) isNan(x) = true;

Determining Object Type typeof is a statement you can use to determine which type of Object a variable is. var x = new Date(); alert(typeof(x)); //displays 鈥淒ate鈥� This method is useful to determine if functions exist, variables are defined, etc. if(鈥渇unction鈥� == typeof(doSomething)) { 听听听 doSomething(); }else if(鈥渦ndefined鈥� = typeof(doSomething)) { 听听听 //alert user, insert js library, etc }

Associative Arrays Associative Arrays are like HashMaps in Java. They are typeof Object , not Array Useful for keying data by Objects, rather than index. var mailArchive = {鈥渕sgID_43": "Dear nephew, ...", "the second e-mail": 鈥淏lah...鈥�, /* and so on ... */};

Associative Arrays (cont鈥檇) var mailbox = {0: " mail number 1)", 1: "(mail number 2)", 2: "(mail number 3)"}; Note that Associative arrays are objects, so the values you put in them need to be name:value and followed by a comma (except for last one) To iterate: for (ind in mailbox) alert("Processing" + ind + ": " + mailbox[ind]); This does not work: for (var ind = 0; ind <= mailbox.length; ind++) //. length attribute is not defined for Object

Object Definition var mailbox = {0: " mail number 1)", 1: "(mail number 2)", 2: "(mail number 3)"}; OR, create your own object type : function FormObject(id) { 听听听 var obj = oForm[id]; 听听听 obj.originalValue = obj.value; 听听听 obj.dirty = false; 听听听 obj.onchange = doSomething(); };

prototype statement The prototype statement allows you to extend the functionality of an object. Custom variables Custom methods Custom events Think of a prototyped object like any Java Object that extends another Object. Do not add prototypes to the global scope for native Javascript objects. Create your own object type!

Extending Objects Date.prototype.format = function(vFormat) { 听听听 //'this' is just like in Java 听听听 alert("The date to format:"+this); 听听听 var x = (//...do date formatting w/ 鈥榯his鈥� & 鈥榲Format鈥�); 听听听 return x; }

Practical use of prototype Overwriting browser specific methods to make the cross-browser window.showModalDialog (IE only) window.prototype.showModalDialog can be coded to do a browser test and use IE implementation, and use custom code in Firefox. Adding useful methods to objects Abstraction of functionality Limiting scope of variables not used by other code Building powerful custom object types Anything that JavaScript can do, can be written into an object鈥檚 abilities (AJAX, DOM Manipulation, event delegation, etc)

Event Delegation Events are fired when certain events occur in the browser. They can be captured with 鈥淓vent Handlers鈥�: onload : when the HTML code has been parsed and displayed by browser onchange : when the value of a form object changes onsubmit : when the form is submitted. (return false, if you want to stop the form submit) onclick : when an page element is clicked on. More鈥� Event Handlers call JavaScript code, not necessarily functions. <img src=/slideshow/javascripttemplating/1466488/鈥溾€︹€� onclick=鈥渄oSomething(鈥�)鈥�/>

Handler functions can be passed the event object <img src=/slideshow/javascripttemplating/1466488/鈥溾€︹€� onclick=鈥渄oSomething( event )鈥�/> The event object is most useful for finding: The DOM object that triggered the event The type of event that occurred getTargetElement finds the object the event was triggered by (i.e., an input that changed, button clicked, etc.). Once we have the element, we can traverse the DOM. function getTargetElement(evt) { 听听听 evt = (evt)? evt: ((window.event) ? window.event : ""); 听听听 var elem; 听听听 if (evt.target) { 听听听听听听 elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target; 听听听 } else { 听听听 elem = evt.srcElement; 听听听 } 听听听 return elem; } function doSomething(evt) { 听听听 var oElem = getTargetElement(evt); 听听听 //oElem.parentNode, oElem.innerHTML, oElem.getAttribute(鈥�), etc }

DOM (Document Object Model) The DOM is the structure of the HTML document (or XML document). It follows a data type definition (DTD) of strict, loose, transitional, defined by a <meta> tag. You can adhere to the DOM DTD, but because it鈥檚 structure is understood, you can start adding attributes to elements. <table id=鈥渞esources鈥� onclick=鈥渆ditTechnician(event)鈥�> 听 <tr PK=鈥�335abc鈥�><td>Bob Smith</td></tr> 听 <tr PK=鈥�3fe2452鈥�><td>Sally Jones</td></tr> 听 <tr PK=鈥渁be325鈥�><td>Marky Mark</td></tr> </table> <input name=鈥渂lah鈥� isDirty=鈥渇alse鈥� origValue=鈥�${鈥鈥� value=鈥�${鈥鈥�/>

Events and DOM Using the event capturing method, we can use the structured data that the DOM presents us to: Reduce the need to 鈥榬e-request鈥� data Remove JavaScript objects containing info already in the DOM (another reason why custom attributes are encouraged, more data available). Reduce JavaScript code & function calls function editTechnician(evt) { //user clicked 鈥淏ob Smith鈥� 听 var oElem = getTargetElement(evt); //TD or TR 听 var oTR = getRow(oElem); //ensures we have the TR elem 听 var userId = oTR.getAttribute(鈥淧K鈥�); //get PK attribute 听 //do something with "userID" }

Custom Objects, Events and prototype function FormObject(id) { //constructor pattern 听 //set properties to the form element's DOM object dynamically 听 var obj = oForm[id]; 听听 obj.originalValue = obj.value; //original value preserved 听 obj.dirty = false; //has object value changed? 听听 //register an onchange to each input needing validation 听 obj.onchange = this.validate; } //assign validation function to FormObject's FormObject.prototype.validate = function(e) { //by doing it this way, you don't have to change any occurrence of //"onChange" attributes calling an updated function name var evt = e ? e : window.event; var oElem = oForm[this.name]; if(oElem && oElem.getAttribute("validate")) { //test for null 听 var value = oElem.value; 听 //automatically update the dirty flag 听 oElem.dirty = (value != oElem.originalValue); 听 if("phone" == oElem.getAttribute("validate")) 听听听 validatePhone(value); 听 else if("email" == oElem.getAttribute("validate")) 听听听 validateEmail(value); 听 } }

Sample Code #1 Example 1: validations.js validate_old.html View in Browser NOTE: If the event Handler changes it鈥檚 name, it is going to be tedious to find and change all references in the application.

Sample Code #2 & 3 Example 2: validations.js FormObject.js (NOTE: object js files are Capitalized) validate.html Example 3: validations.js FormObject.js validate_best.html View in Browser (Demonstrate how easy it is to change validate in source) NOTE: Auto-Validation occurs as a behavior of FormObject objects

JSON (pronounced Jason) JSON === JavaScript Object Notation A JSON object is just a Javascript Object that follows a very specific and SIMPLE format. There is an RFC that exists for it. An 鈥淩equest For Comments鈥� (RFC) is a document that is working notes of the Internet Research and Development Community. An RFC document may be on essentially any topic related to computer communication, and may be anything from a meeting report to the specification of a protocol standard. JSON documented on the net: http://www.json.org/

JSON Objects JSON objects can be assembled by ANY language, but only useful when passed to Javascript at some point. Some servers and servlets are already allowing the Java code the option to return data in JSON format. Struts 2 can do this DWR returns a JavaScript object that can be easily transformed into a JSON object. There is a JSON tag-library that I鈥檓 poking around with to see if it鈥檚 worth using in house.

JSON Format "Image": { "Width": 800, 听听听 "Height": 600, 听听听 "Title": "View from 15th Floor", 听听听 "Thumbnail": { 听听听听听听 "Url": "/image/481989943", 听听听听听听听 "Height": 125, 听听听听听听听听听听听听 "Width": "100鈥� 听听听 }, 听听听 "IDs": [116, 943, 234, 38793] } Note that JSON objects have a simple and rich structure. It is possible to convert structured objects (Java, XML, other) into JSON objects with the appropriate compiler or tools. JSON taglib JSON for Java

This is a JSON array containing two objects: [ 听 { "precision": "zip", 听听听 "Latitude": 37.7668, 听听听 "Longitude": -122.3959, 听听听 "Address": "", 听听听 "City": "SAN FRANCISCO", 听听听 "State": "CA", 听听听 "Zip": "94107", 听听听 "Country": "US"}, //Note: comma delimited objects 听 { "precision": "zip", 听听听 "Latitude": 37.371991, 听听听 "Longitude": -122.026020, 听听听 "Address": "", 听听听 "City": "SUNNYVALE", 听听听 "State": "CA", 听听听 "Zip": "94085", 听听听 "Country": "US" } ]

Note that JSON format doesn鈥檛 natively follow a definition of it鈥檚 structure var tech = { 听听听鈥� name鈥� : 鈥淏rian Ruhl鈥�, 听听听鈥� branchId鈥� : 鈥渁bc_pest_4322鈥�, 听听听鈥� jobs鈥� : [ 听听听听听听 { 鈥渁ddress鈥� : 鈥�...鈥�, 听听听听听听听鈥� time鈥� : 鈥�15:30鈥�, 听听听听听听听鈥� num_of_services鈥� : 32 听听听听听听 }, 听听听听听听 { 鈥渁ddress鈥� : 鈥�...鈥�, 听听听听听听听鈥� time鈥� : 鈥�17:30鈥�, 听听听听听听听鈥� num_of_services鈥� : 3, 听听听听听听听鈥� required鈥� : true //Allowed, but sloppy 听听听听听听 } 听听听 ], 听听听鈥� techId鈥� : 鈥�352a3bd鈥� }

JSON in JSP <%@ taglib uri="/WEB-INF/c.tld" prefix="c"%> {听听听听 "name" : "${initData.name}", 听听听 "address" : "${initData.address}", 听听听 "phone" : "${initData.phone}", 听听听 "serviceType" : "${initData.serviceType}", 听听听 "serviceLength" : ${initData.serviceLength}, 听听听 "prefTechs" : [ 听听听 <c:if test="${not empty initData.prefTechs}"> 听听听听听听 <c:forEach var="tech" items="${initData.prefTechs}"听听听听听听听听听听听听听听听听 varStatus="status"> 听听听听听 { 听听听听听听 "name" : "${tech.first}", 听听听听听听 "techId" : "${tech.second}" 听听听听听 }<c:if test="${!status.last}">,</c:if> 听听听听听听 </c:forEach> 听听听 </c:if> 听听听 ] }

AJAX & JSON JSON can be generated by Java, JSP, taglibrary. Responding to AJAX requests with JSON offers structured data that Javascript natively understands. Currently, browsers don鈥檛 accept the 鈥渁pplication/json鈥� MIME type, but it鈥檚 ok to return it as 鈥渢ext/plain鈥�. When requesting JSON data via AJAX, the responseText must be evaluated: var j = eval('(' + XHRObj.responseText + ')'); The '{' operator is subject to a syntactic ambiguity in JavaScript: it can begin a block or an object literal. We wrap the text in parenthesis to eliminate the ambiguity.

DWR and JSON DWR defines how to convert Java objects into Javascript objects. These Javascript objects are in JSON format. DWR 鈥渇unction call鈥� makes AJAX request and response is returned as JSON object. Data can be displayed two ways: oElem.innerHTML += /slideshow/javascripttemplating/1466488/鈥溾€︹€�; Templates

Templates Templates make code: Reusable Maintainable Easier to read and test Test scripts testing code in a fragment can be reused by other scripts Tiles, <jsp:include>, <@page file=/slideshow/javascripttemplating/1466488/鈥溾€︹€�> are some examples in JSP Template support can be written in Javascript, and it already has鈥�

Why use Javascript templates? Cacheable! If you need JavaScript code to generate a lot of HTML (or even new JavaScript), you鈥檙e probably familiar with seeing more complex variations of escaped code, than my example below: '<a onclick="skillDeleteRows('+array[0]+');" style="cursor: pointer"><img src=/slideshow/javascripttemplating/1466488/"/images/button_trash.gif鈥� alt="Remove"/></a>'+'<input type="hidden" name="skillIds" value="'+array[0]+'"/>'; By using a template, you can make this code look more like code (no escaping, no 鈥�+鈥� stuff, etc): <a onclick="skillDeleteRows(${data.id});" style="cursor:pointer;"> 听 <img src="/images/button_trash.gif" alt="Remove"/> </a> <input type="hidden" name="skillIds" value="${data.id}"/>

template.js library A library that allows you to format HTML code into a syntax VERY close to JSTL Documentation Code can be reusable, but implementation requires you to put template fragment inside of a <textarea> ( dumb ) Dumb : We now have these <textarea>s that are submitted by the form that shouldn鈥檛 be The reason for putting this in a <textarea> was so that the template could be extracted without risking modification by parsing (ie, Javascript) Dumb : Once the pattern is parsed and the data object is compiled through it, we get a HTML string, which 99% of the time we want to write to an element on the page. However, to do the 鈥榳rite鈥� to the page, we need to write another line to do the innerHTML write. Able to access other Javascript objects (functions, variables, etc)

Using template.js Don鈥檛, unless you need to parse the generated HTML string one more time...for some reason. Requires: JSON data object template.js included on page <textarea id=/slideshow/javascripttemplating/1466488/鈥溾€︹€� style=鈥渄isplay:none鈥�> containing the pattern var s = TrimPath.processDOMTemplate(templateId, jsonDataObj); var l = document.getElementById(IdOfWriteLocation); if(l){ 听听 l.innerHTML = s; }

exttemplate.js Extends template.js parser objects Retrieves template pattern file via AJAX Able to access other Javascript objects (functions, variables, etc) Resources required template.js exttemplate.js prototype.js (NOTE: This should not be confused with the prototype statement, it鈥檚 a powerful JS library with an unfortunately confusing name)

Using exttemplate.js Template data patterns follow those of template.js Method call requires: JSON data object JST template file location ID of HTML element to write compiled template source into We name the template files with an extension of .jst (JavaScript Template), to distinguish them from JSPs and other fragments. TrimPath.processTemplateFile('/<filepath>.jst', jsonObj, 听听听听听听听听听document.getElementById(idOfWriteLocation));

Example: Javascript template Javascript template example: customerPrefDetails.jst Documentation for template.js

Putting it all Together Currently, the 鈥淧referred Technician鈥� Map is using DWR, JSON, and Javascript Templates . /** * onClick event for a dot, gets the customer preference * data from DWR */ function getCustomerDetails(customerId) { 听听听 $('customerDetails').update(); 听听听 PrefTechDWR.getCustomerDetails(customerId, 听听听 {callback:function(xferObj) { 听听听听听听 displayCustomerData(xferObj)}, 听听听听听听 errorHandler:function(str){ 听听听听听听听听听 alert("there was an issue with the server:"+str)}, 听听听听听听 asynch:false 听听听 }); } /** * Given a customer object, draw the data using trimpath * into the page. */ function displayCustomerData(customer) { 听听听 var oObj = {customer:customer}; 听听听 TrimPath.processTemplateFile('/configuration/customerPrefDetails.jst', 听听听听听听 oObj, $('customerDetails')); }

Suggestions How could I have made this better? Was it easy to understand? What would you like to learn more about? 鈥� less about?

狠狠撸

Javascript Templating

Recommended

More Related Content

What's hot (20)

Similar to Javascript Templating (20)

Javascript Templating