Lab 3 Reflection
Lab 3 felt more like 5 labs packaged into 1. There were a total of 5 exercises in lab 3, all dealing with jQuery and doing something to change the content of the page. The lab had a set of instructions which provided an HTML file and all necessary script/style links with each exercise, so I didn't have to waste time setting up and could spend more time programming in jQuery.
The first exercise called for changing the text on a webpage with a string the user input into a form. Having working with forms before, I knew an onclick function was necessary to get this functionality, but instead of using DOM and HTML, I would be using jQuery. I would need to code a line in the script which looked roughly like $(target).on("click", function(){ //code });. In jQuery, this adds an event listener to the intended element, or target, and executes that event via a function when the event occurs. I put code inside this function which stored what the user typed into the form and replaced the inner HTML of a certain class of elements with the value of this variable, looking something like var input = $(user-input).val(); $(target-class).html(input);.
The second exercise implemented jQuery event listening as well but called for changing the CSS and attribute of a certain element instead of its inner HTML. This was done using one of 3 ways, .css(), .attr(), and .addClass(). The jQuery .css() method allows you to add CSS to a certain selected object, an example being $("h1").css("color", "black");, specifying property and value in the parenthesis. The .attr() method allows you to alter or add an attribute to a certain element, an example being $("h1").attr("id", "heading");, specifying the attribute and value in the parenthesis. Finally, with the .addClass() method, you get to add an already existing CSS class to a selected element, an example being $("h1").addClass("heading");, with the desired class going in between parenthesis.
The third exercise required using functions exclusive to jQuery to create a UI. One of these functions was .datepicker(), a function that overlays a calendar in an input field and allows the user to pick a certain date in between a minDate and maxDate which are specified in code using the format (new Date(Year, Month, Day));, much weirder that the US' date format also considering the position of a month is 1 minus its ordinal number in the standard Gregorian calendar, so January is 0 in jQuery. Another one of these functions was .sortable(), making certain elements able to be moved from top to bottom and vice versa as if they were in a dynamic list. Finally, .tooltip() allowed a certain textbox to appear over an element if it were hovered over and this textbox can be customized with CSS.
The fourth exercise was about creating a canvas and buttons that would draw triangles and clear the canvas. The canvas was created in the HTML using a new tag, the <canvas></canvas> tag. In the jQuery, we set the context of the canvas to 2D and can start drawing. When drawing actual shapes, we use .beginPath() to let the code know we are starting to draw. We use moveTo(x, y) to define a starting point, lineTo(x,y) to both move the starting point to another point and draw a line between the original point and new point, and closePath(); to draw a straight line between where a path first started and where the point is now. Methods like .fillStyle, .strokeStyle, and.lineWidth alter the look of the path.
Finally, the fifth exercise was about making a web page interactive using a plugin. The plugin is linked to using the <link> tag and allows for certain classes to be used so that elements with that class look and behave a certain way. I used it to manipulate the tooltip on a photo so that it displayed social media stats and gave the user an option to follow the person in the picture on various social media platform.
These skills are important to a web designer because jQuery allows web designers to code the same things they can using JS/DOM but with less code. jQuery is a JS library and many functions, like getElementById, are redefined in jQuery and take less code to execute. In addition, the jQuery library has many things which can make a website's UI more convenient and appealing, such .datepicker() for calendar and .tooltip for element that can be hovered over. Overall, these skills make interacting with a website more appealing.
The first exercise called for changing the text on a webpage with a string the user input into a form. Having working with forms before, I knew an onclick function was necessary to get this functionality, but instead of using DOM and HTML, I would be using jQuery. I would need to code a line in the script which looked roughly like $(target).on("click", function(){ //code });. In jQuery, this adds an event listener to the intended element, or target, and executes that event via a function when the event occurs. I put code inside this function which stored what the user typed into the form and replaced the inner HTML of a certain class of elements with the value of this variable, looking something like var input = $(user-input).val(); $(target-class).html(input);. The second exercise implemented jQuery event listening as well but called for changing the CSS and attribute of a certain element instead of its inner HTML. This was done using one of 3 ways, .css(), .attr(), and .addClass(). The jQuery .css() method allows you to add CSS to a certain selected object, an example being $("h1").css("color", "black");, specifying property and value in the parenthesis. The .attr() method allows you to alter or add an attribute to a certain element, an example being $("h1").attr("id", "heading");, specifying the attribute and value in the parenthesis. Finally, with the .addClass() method, you get to add an already existing CSS class to a selected element, an example being $("h1").addClass("heading");, with the desired class going in between parenthesis. The third exercise required using functions exclusive to jQuery to create a UI. One of these functions was .datepicker(), a function that overlays a calendar in an input field and allows the user to pick a certain date in between a minDate and maxDate which are specified in code using the format (new Date(Year, Month, Day));, much weirder that the US' date format also considering the position of a month is 1 minus its ordinal number in the standard Gregorian calendar, so January is 0 in jQuery. Another one of these functions was .sortable(), making certain elements able to be moved from top to bottom and vice versa as if they were in a dynamic list. Finally, .tooltip() allowed a certain textbox to appear over an element if it were hovered over and this textbox can be customized with CSS. The fourth exercise was about creating a canvas and buttons that would draw triangles and clear the canvas. The canvas was created in the HTML using a new tag, the <canvas></canvas> tag. In the jQuery, we set the context of the canvas to 2D and can start drawing. When drawing actual shapes, we use .beginPath() to let the code know we are starting to draw. We use moveTo(x, y) to define a starting point, lineTo(x,y) to both move the starting point to another point and draw a line between the original point and new point, and closePath(); to draw a straight line between where a path first started and where the point is now. Methods like .fillStyle, .strokeStyle, and.lineWidth alter the look of the path.Finally, the fifth exercise was about making a web page interactive using a plugin. The plugin is linked to using the <link> tag and allows for certain classes to be used so that elements with that class look and behave a certain way. I used it to manipulate the tooltip on a photo so that it displayed social media stats and gave the user an option to follow the person in the picture on various social media platform.
These skills are important to a web designer because jQuery allows web designers to code the same things they can using JS/DOM but with less code. jQuery is a JS library and many functions, like getElementById, are redefined in jQuery and take less code to execute. In addition, the jQuery library has many things which can make a website's UI more convenient and appealing, such .datepicker() for calendar and .tooltip for element that can be hovered over. Overall, these skills make interacting with a website more appealing.
Comments
Post a Comment