Lab 5 Reflection
Lab 5 was about using jQuery to create animations. We were to create a web page with a square and buttons that changed some aspect of the square. I broke down the web page into 2 sections, a display for the shape and a place for all the buttons, first starting with the display area which consisted of a div containing another div, the child div being the shape itself the the parent - the background. Once the display was set up, I created another div underneath it containing 5 buttons for the 5 things I wanted to do to the square: change shape, size, opacity, position, and casade (all 4 changes at once). The onClicks of these buttons weren't necessary as what I would do later in jQuery replaced them.
To use jQuery, I first needed to link to the jQuery library in the HTML which I did by downloading the library and setting the src attribute of the <script> in the <head> to the location it was in. Now that I was able to use jQuery in the lab's JS file, I started off by setting up $(document).ready(function(){//stuff goes here});. By doing this, I tell the page to execute the code I wrote when the page is done loading, preventing the user from doing something prematurely and not getting a proper result. Inside the document ready I first stored the shape in a global variable to make it easy to refer to, writing var shape = $("#shape");.Then I wrote all the onclick functions for the buttons in jQuery, looking something like $("#buttonID").click(function({//action code});. In jQuery, this is an event listener which executes its assigned function whenever the button of the same id is clicked. Each of my buttons did different things but all used .animate({parameter}, speed) to change the properties of the shape. The parameter of the animate function was a CSS property that was set different to the initial CSS of the square, so changing the size of the square consisted of writing shape.animate({width: "150px"}, "slow"});. The other CSS properties that were changed by the other buttons were borderRadius for shape, position for... position, and opacity for... opacity. The cascade function used 4 lines of code with all properties being changed. Once all my jQuery click functions were finished, the lab was functional.
To use jQuery, I first needed to link to the jQuery library in the HTML which I did by downloading the library and setting the src attribute of the <script> in the <head> to the location it was in. Now that I was able to use jQuery in the lab's JS file, I started off by setting up $(document).ready(function(){//stuff goes here});. By doing this, I tell the page to execute the code I wrote when the page is done loading, preventing the user from doing something prematurely and not getting a proper result. Inside the document ready I first stored the shape in a global variable to make it easy to refer to, writing var shape = $("#shape");.Then I wrote all the onclick functions for the buttons in jQuery, looking something like $("#buttonID").click(function({//action code});. In jQuery, this is an event listener which executes its assigned function whenever the button of the same id is clicked. Each of my buttons did different things but all used .animate({parameter}, speed) to change the properties of the shape. The parameter of the animate function was a CSS property that was set different to the initial CSS of the square, so changing the size of the square consisted of writing shape.animate({width: "150px"}, "slow"});. The other CSS properties that were changed by the other buttons were borderRadius for shape, position for... position, and opacity for... opacity. The cascade function used 4 lines of code with all properties being changed. Once all my jQuery click functions were finished, the lab was functional.
These skills are important for a web designer since they make a site look more lively. A completely static website can look nice but adding changing elements give it an extra kick. If certain animations happen in response to user interaction, like in this lab after the user clicks a button, it makes the user feel like what they're doing is actually affecting something and isn't pointless. Sometimes sites take a while to load or don't load all at once and adding animations can make this look a bit smoother. By using a document ready function, you can animate certain elements to gradually make them selves clear once the site is finished loading so that things look more smooth and less sudden and disjointed.
Comments
Post a Comment