Landing : Athabascau University

Unit 6: Using Libraries, Diary

Initially, learning jQuery was a little intimidating. Shortened expressions with additional brackets and syntax. However, after going through a few examples, I started to understand its simplicity and power in manipulating the DOM.  


In order to truly understand the difference between traditional JavaScript and jQuery, I decided to re-write my Board Finder app (which is for for Ester and Jimmy who are looking to buy gear). In doing so, I found that it is easier and cleaner to manipulate the DOM using jQuery. Adding and removing HTML within element is quick and simple. Therefore, I proceeded to change all my interactions with the DOM to jQuery. The code is now cleaner and easier to understand. You can also easily use regular JavaScript code combined with jQuery code.  


Fetching JSON data using was also quite simple, 1 line of jQuery instead of 6 lines in JavaScript. I did struggle a little to find out how to assign a dataset from JSON to an array I can manipulate. I added a general grouping name called snowboards to my JSON file and I was able to assign this to a new array variable: var snowboard = data.snowboards;. I could then use snowboard[] wherever I needed. 


I then wanted to make the Board Finder table more interactive and sortable for Ester and Jimmy. I started to make a jQuery table sorter from scratch and in the process found a jQuery table sorting plugin (by Christian Bach and Rob G: which is simply to use and efficient. Upload the plugin, link to the proper files in the HTML , assign the correct class name to the table to be sorted, and finally add a few lines of jQuery code to activate the table’s sorting features. It was easy, I would use this again.   


I also needed to add terms of use to my website, which was a further requirement in my original plan in unit 1. I found another useful jQuery plugin for this called jQuery Modal by (@kylefox All I needed to do is, upload the plugin files, link to these files in the HTML , create a new HTML file called termsofuse.html, and add an achor with rel=”modal:open” to my web page. A modal DIV displaying terms of use appears when the anchor is clicked. Once done, the user can click the X or press ESC to close the modal DIV. 


I enjoyed using jQuery and I will use it in future projects to manipulate the DOM and data when it is efficient to do so via the clients browser.   


You can view my changes for assignment 6 here: 


Unit 6: Using Libraries, File Submission


These comments are moderated. Your comment will not be visible unless accepted by the content owner.

Only simple HTML formatting is allowed and any hyperlinks will be stripped away. If you need to include a URL then please simply type it so that users can copy and paste it if needed.