Landing : Athabascau University

Group members: this is the place for your learning diary. Use this to post your zipped-up site at least once each unit, and your reflections as often as you wish (at least once per unit). Please write your reflections directly in the post, not as attached files. Where you do need to attach documents, such as for unit 1 designs, use PDF, PNG or JPG formats. You can attach files using the 'Embed content' link in the editor.

QUICK COURSE LINKS:  Add blog post - Read latest group postsFAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : MiscPodcasts for each unit

Updated resource pages:  Unit 1 - Unit 2  - Unit 3Units 4 & 5 - Unit 6 - Unit 7

mportant notice: the student web server is unavailable. Until this is fixed, we do not require you to upload your site to the student server. See Running a web server on your local machine for details of how to meet the requirements for the final unit

Unit 6: Using Libiraries

  • Public
By Jiaying Zhao in the group COMP 266 May 22, 2021 - 2:40pm

This job is based on the web page has been a series of JavaScript writing and through the basic debugging and testing, on this basis, using jQuery library to further optimize and deal with the interaction of the web page. JQuery library can be added to the web page through a simple line of tags. In this page, I create a new JS folder in the file root directory and put it into the library file of jquery.min.js, which contains all the functions of jQuery. Then, I successfully add JQ to the web page through the tag < script SRC =. / JS / jQuery. Min.js "> < / script >. In this website, the jQuery language is home page. HTML, Shope_ page.html,contact_ Us. HTML. I use the $(document). Ready (function () {}) method to execute the functions when the page is loaded. In the homepage.html page, use the hover method in jQuery to achieve the effect of moving the mouse up and out. The hover () method specifies two functions to run when the mouse pointer hovers over the selected element. The method triggers mouseenter and mouseleave events. When the mouse moves up, the class name of none will be moved out of the specified element. When the mouse moves out, the class name of none will be added to the specified element. In Shope_ In page.html, I still use the hover method. When I move the mouse up, I modify the left style value of the specified element to 0. When I move the mouse out, I modify the left style value of the specified element to - 250px, and the element slides left and right. In contact_ In the us.html file, I assign a specific ID value to each input box, and control the DOM element operation through the ID value. I use the blur method to trigger an event when the user loses the focus of the input box and judge the input content. The DOM element of each input box is followed by a prompt statement, which is hidden by default. When the input box has no input and loses the focus, the prompt will be displayed. Otherwise, the next step will be executed. It should be noted that I have made regular matching processing for the e-mail format. If the input does not conform to the general e-mail format, the prompt of wrong format will pop up. When the user clicks the submit button, the operation is performed through the click event. When all the above contents are entered correctly, the user can submit, otherwise the corresponding prompt will pop up. When the user clicks the reset button, the click event is used to clear all the input contents.

This is my website: