Assessment 4, Writing scripts
The Javascript side of web development is what had me most interested. My passion is coding, and this was exactly that. Coming up with creative ways to add functionality to my webpage appeals to me greatly.
The main part of my website that needed Javascript was the ordering system. I started out with a good idea of what it was I wanted my site to do, and armed with very basic knowledge of JS, I quickly learnt what else I needed to know through Stack Overflow, W3 Schools and other online resources. Google searches such as “Run functions in Javascript” turned up results for the onClick attribute, and “html object as parameters javascript” showed me the way to add the item that called it to the parameter list. After that, things flowed well, and I made some more adjustments to my CSS to get the desired results.
The first task I wanted my menu to do was to expand and collapse when a category title was clicked, and show the rest of the items available under the menu, and collapse them if they were already showing. This was achieved using one function that looked at the visibility of the given element. If it was visible, make it hidden and set the height to 0. If it was hidden, make it visible and set the height to auto.
The next function I had was more complicated. It started out by just adding an item to a paragraph, but I quickly realised that this would make it very hard to remove items, and hard to organise in a way that would be easily visible. My solution was to add the items to an unordered list, which was a huge benefit, for may reasons. The complicated string building behind the scenes allowed me to create a list item with a click event to remove it from the list, as well as give it price data that I could use to calculate a total, something that would no doubt be more complicated in plain text. I could also modify the CSS to give these new list items a style that changed their color and display an X icon when hovered, showing that they could be deleted by clicking on the item. All of these items were added to the HTML, and not stored in the script as an array or another data structure. As far as best practices go, it’s probably not ideal, but it’s functionality is exactly what I was after.
The next part was removing an item from the list. The string building included an onClick=“RemoveItem(this)” which gave me the action, but the method itself turned out to be more complicated than a simple ‘this.delete()’.
Some more googling returned the little tidbit of information that an element cannot delete itself, it must instead be referenced from it’s parent element, according to the Document Object Model, or DOM. The handy way to do that is to backtrack to the parent, then point to the child, then delete it. The particular line of code is ‘elmnt.parentNode.removeChild(elmnt)’, where ‘elmnt’ is the node to be removed. This was the simple part.
Around this time, I realised the most important thing for my menu would be adding up the price of the items ordered. Using a new HTML5 convention, the ‘data-’ attribute gives you a field that will be ignored at runtime by a browser, but can be accessed by a javascript query. I embedded all of my prices in a data-price attribute, then spent a long time extracting and parsing the numbers as doubles, rounding them off so they wouldn’t have huge numbers of decimal places, and performing math on them to add and subtract them as items were added and deleted. This accounted for almost half of the code I’d written, just trying to get them under control.
The end result is a functional menu, that allows users to add items and remove them through a fairly intuitive interface.
Open Platform Programming
Open platform programming is the practice of developing an Application Program Interface (API) that allows others to access the functionality of your software, and add to it in their own way. Say for example, you had created some software that acted as a calculator, by making a publicly available API you could allow others to use the functions of your calculator in their own applications.
Client Side Scripting
Client side scripts are run in a web browser, on the computer of the person viewing the website. These types of scripts can add loads of functionality to a page, such as showing messages or asking for confirmation, smooth scrolling and other animations, what happens when you right click(e.g, does it show the regular menu, or do you have a specific menu you want them to see instead?)and only loading the parts of a page that you want to change, rather than the whole page. One of the main advantages of client side scripting is that it massively reduces the load on the server, if you had to send every user request back to your server, then run some code then send it back to the user to display it, it would greatly hamper the performance of your website. Client side scripts are sent to the client once, and most will even run if the client is offline. Some of the main drawbacks are that a client can simply turn off scripts, and without a carefully designed webpage this can have disastrous effects in your page’s look and functionality.