€¦ · web view2020. 2. 7. · going back to your webpage, type something in the textbox and...
TRANSCRIPT
CS1046 – Lab 10Timing: This lab should take you approximately 90 minutes.
Objectives:
By the end of this lab you should be able to:
Use JSFiddle to test your code Use the debugger in Chrome to find mistakes in your code Use two jQuery library calls
Exercise 1 – Using JSFiddle to test your code
In certain situations, you may want to test something very quickly to see if it will work before you add it to your program. Or sometimes, something does not work and you are not sure why, and you want to send someone a copy of what you are working on in order to see if they can figure out the problem. For both of these situations, JSFiddle is a great tool. We will use the code from a previous lab to explore JSFiddle.
1. Open the following files in Notepad:a. http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/lab10ex1.html b. http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/lab10ex1.css c. http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/changecolor.js
2. Go to the following web address: http://jsfiddle.net3. If you see a blue are that says Start with a boilerplate: near the top, click on the X Close (pointed
to by the red arrow) but you might not see this, it doesn’t always come up:
1
4. Look at the screen. Notice there are four areas. The top left HTML area is where you put HTML code to test. The top right CSS area is where you will paste CSS code to test. The bottom left JavaScript area is where you will paste JavaScript code you need to test. The bottom right area shows what your webpage will look like and how it will act based on your current HTML, CSS and JavaScript code. You will see your webpage in the bottom right box AFTER you press the Run button that is along the top (see image).
5. Click on the dropdown button at the top of the JavaScript area (JavaScript area is the bottom left box) and change the two dropdown boxes (Frameworks & Extensions AND Load Type) to be (as indicated in image to the right):No-Library (pure JS)No wrap – in <body>
6. Copy and Paste the portion of your lab10ex1.html tags you just downloaded that falls BETWEEN BUT NOT INCLUDING the <body> and </body> into the top left box. (you don’t need to include the head stuff or any of the script stuff)
7. Paste all the .js code you just downloaded into the bottom left box8. Paste all the .css code you just downloaded into the top right box.9. Click on the Run button at the top left and wait 5 seconds for the heading 1 to change colours10. Notice your output in the bottom right box.
Let us edit our code right here in JSFiddle (NOT in NOTEPAD but rather right in the browser using JSFiddle) and observe the changes:
11. In the css area, make the background for the body be Orange rather than CornflowerBlue12. In the JavaScript area change the function changeTheColorToGreen, add a line to make the
backgroundColor change to limegreen13. In the HTML area, change the h1 to be h2 (don’t forget to change the </h1> as well as the <h1>)14. Click Run again and watch you changes take effect.
This is a great tool for playing around and testing stuff out!
2
15. Notice that I was a bad programmer and I did not properly indent my files . Click on the Tidy button at the top right corner of each of the 3 areas of code. It only becomes visible when your mouse is hovering in one of the 3 areas. It looks like this:
There is a tidy button for each area, so click on the three different tidy buttons and watch what happens each of your chunks of code. This is a good way to check if you are indenting your code properly.
16. Next to the Run button you will see a Save button. Click on the Save button now. Notice the URL at the top changes to something like: http://jsfiddle.net/y7kk3ju9/ (the letters at the end of yours will be different). Copy this URL and email it to yourself. Notice that you can now click on this link and see exactly what you did! Or you could email that link to a friend who was an expert JavaScript programmer and they could help you figure out your mistake.
Congratulations, you now can:
Create a JSFiddle of your HTML, CSS, and JavaScript files and test small bits of JavaScript and/or HTML and/or CSS.
Tidy up your code using JSFiddle Save the fiddle and pass it on to others to see what you have done.
Exercise 2 – Using the debugger in Chrome
We have already used the debugger in Chrome a little bit, but let us see some of the extra features it provides.
1. Download the following files and put them in a folder called lab10. Then open the downloaded files in Notepad or a text editor, save them with the same names as below:
a. http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/lab10ex2.html b. http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/lab10ex1.css c. http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/reverser.js
2. First of all we will look for syntax errors using the debugger. Syntax errors have to do with mistakes or errors in how the code was typed (if you make typing errors). For instance if you have added a semicolon (;) in the wrong spot or forgotten a closing curly bracket. Open your .HTML file in a browser (use Chrome) and then open the debugger by clicking on
3
the top right corner of Chrome on the 3 horizontal lines symbol(or 3 dots in new versions) and then select More Tools>Developer Tools
3. Now, click on the Sources tab and then in the left pane, click on the reverser.js file to open it as shown in the image to the right. However if you can’t see the .js file (or your.html file or your .css file) under the Sources Tab, click on the Filesystem tab and then click on the: + Add folder to workspace and browse to the folder where you put all the files for this exercise as shown in the image to the right.
4
4. Then double click on the file reverser.js to open it. 5. Then look at the message in the console tab at the bottom (you may have to click on the bottom
Console Tab if the What’s New Tab is open) that tells you which line was not working.(it will be highlighted in red).
6. Find this line in the code. Now fix this problem in Notepad (the mistake is subtle, the error
message gives you a hint and a line number, see if you can figure it out!), save your js file and reload your code and make sure that that error message no longer shows up in the console. (You might want to right click in the console area and do Clear Console to clean it up so you can be sure the error is gone).
7. Put some text in the input box and then click on the Reverse the word button. Notice that your Reverse the word button still doesn’t work. But this time it is NOT a syntax error, we have made some other kind of mistake, a Logic Error. It appears that the reverseString function isn’t even being called!!! The debugger will let us check that by adding Breakpoints. You can use breakpoints in situations when you want the browser to pause the program immediately at a statement, so that you can check what is happening. We will put in two breakpoints: one in the checkPal function, to make sure it is being executed and one in the reverseString function to make sure it is being called when the button is clicked. You put break points in USING Chrome, not Notepad. The way you put in breakpoints (in the Sources pane of the Chrome debugger) is, in the Sources tab, by moving your mouse to over the line number of the line you want to halt (or pause) the program at and then you LEFT click your mouse. So put your mouse over the number 19 on line 19 in checkPal and click and put your mouse over the number 6 on line 6 in reverseString and click (if you added any code your line numbers might be a bit different but aim for breaks around the statement lines shown in the
5
picture below). If you did it correctly, the line number will turn blue. It should look like this:
8. Now move your mouse over to the webpage, reload the page and type a word in the text box and click on the “Check if it is a palindrome” button and you will see this:
.
9. This means the program paused. If you look over at the Inspect area, you can see the line where the code paused because it turned blue.
10. Now hit blue arrow ( ),to start the program running again, it will complete the function by executing all the remaining lines.
11. Click on the “Check if it is a palendrome” button again and you should see this again:
because it will pause again at that breakpoint. This time click on the “Step” button (the gray
rounded arrow( ) button). This button walks through your code ONE LINE AT A TIME each time you press that button. Keep pressing it and watch in the inspect window as the blue line moves down to indicate which line is being executed. You should even see it make the decision on which part of the If statement to execute.
6
12. So remember: this play button resumes your code and does everything till the end OR
until it hits another break point. But this step button just executes one line at a time. You
must keep pushing to keep executing each line. Push the play button so the page is back to normal (not stuck at a breakpoint).
13. Now type something in the text box and click on our Reverse the word button. Notice that nothing is happening, the code is NOT pausing at Line 6 even though we put a break point there. This means that this function is NOT being called. When the user clicks on our Reverse the word button, it SHOULD call reverseString() but this is NOT happening. See if you can figure out why the reverseButton doesn’t work but the checkButton does work. Fix this problem and save your code and reload it. HINT: look in the window.onload function, the problem is there, a line is missing.
14. If the program pauses during the load, press the blue play button to continue with the loading. Then click on the Reverse the word button and notice that NOW the method is being called because the debugger stops at the line in the function that had the breakpoint. Press play (the blue button) to finish up this function.
15. If the breakpoints disappear when you reload (this might happen but it might not), click on line 6 again to add it back in.
16. Notice that our code still doesn’t work (it doesn’t reverse the word) but at least now we know the function is being called because our breakpoint causes us to pause inside the reverseString
function. Hit the play button to finish the code. 17. Let’s add a watch to observe what is contained in a
variable. In the Inspect area, find the Watch tab (it will look like one of the images to the right depending on your version of Chrome) Go to bottom right corner and click on the Watch tab and click on the + button, then type in len. We will see what value the length of the word is and it is contained in the len variable. Press the + again and this time type in word (we will also watch the word variable) and you will now see something like this
7
18. Going back to your webpage, type something in the textbox and click on the Reverse the word button again. When the program pauses, click on the Step button (it steps, line by line, through your function). Keep clicking on the Step button 2 more times then look over at the Watch window to see what is stored in the variables. Hmmm, notice the word variable is set correctly but the len (len should contain the length of the word variable) is not. See if you can identify the mistake that the programmer made when writing this code and see if you can fix it. Save your file and reload the webpage. Now type your name in the input box and press the button and press play when the program pauses. IT ALMOST WORKS BUT NOT QUITE .
19. Add 2 more variables to the Watch area to see if you can figure out what is going on. Add the variable i and add word.charAt(i). It should look like this
20. Step through your code (using the Step button), line by line (you will be put into the for loop) and see if you can figure out the final mistake. Fix your code and save it. Reload it and test it.
21. Remove the breakpoint in your code and test it one last time.
Putting alert() in your program is a great way of debugging but keep in mind that most browsers have wonderful tools like the Chrome debugger. Using a debugger to it’s fullest potential (we have just demonstrated a few features here) is something that indicates that you are not just a “Johnny come lately” programmer but rather a “Steve Wozniak can eat my dust” programmer
Congratulations, you now can:
Use the Chrome debugger to find syntax errors Use the Chrome debugger and breakpoints to determine if a section of code is being
executed Use the Chrome debugger to walk through the statements in your program Use the Chrome debugger to watch the value of variables in your program.
Exercise 3 – Mini Introduction to jQuery
The purpose of jQuery is to make it much easier to use and write JavaScript. jQuery is just a group of functions (a library), where each function already been written and tested by other programmers and then you, as a programmer, can call/use these functions. Basically, the jQuery developers have done all the hard work and you are reaping the benefits. jQuery is described as a “write less, do more” JavaScript library. jQuery is quite powerful, anything you can imagine is likely possible and doable using jQuery (for example, if you wanted to make an image fade away gradually, there is a jQuery function for that). We are just going to give you a taste of jQuery because there is so much JQuery can do, that we can’t possibly show you everything. Let’s get started.
8
1. Create a folder called lab 10 and download the following files into it and open the files in Notepad:
a. http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/lab10ex3a.html b. http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/paragraphs.js c. http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/lab10ex3.css
2. Open the lab10ex3a.html in Chrome and click on the button. Notice that the second paragraph disappears.
3. Look at the .html file using Notepad. Notice that there is a new <script> tag <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>NOTE: you MUST include this script tag in your webpage if you want to use jQuery. It tells your webpage where to find all the jQuery functions.
4. Now look at the .js file using Notepad. Anytime you want to refer to an element on your webpage (such as a button or a paragraph or a div), JQuery requires that you start with $ and enclose it in parenthesis, so the whole webpage is $(document). Every other element on the page has to be in quotes, so any paragraphs on your webpage would be referred to by this: $(“p”), a class called words in a paragraph would be referred to like this in jQuery: $(“p.words”) or for just the class, like this: $(“.words”) An id is referred to with a #, so if we had a paragraph with id=”para1”, then you would do this to refer to that element $(“#para1”) or like this: $(“p#para1”)Now, go to the .js file, and identify(i.e. find) the 3 elements that use this jQuery notation (the $ notation) in this example and then go back to the .html file and make sure you can find them in the .html file (one of the jQuery references is to the document, it just means the whole webpage)
5. The .ready method for the $(document) is similar to the window.onload, it runs before the webpage has completed loading. The code after it is says IF the $(“#goaway”) element is clicked then do the function in between the inner { }. Then we say, if the goaway button is clicked, call the .hide method on the second paragraph (on “#para2”). The parameter (the “slow”) on the .hide function says to hide the paragraph slowly. Change the “slow” to “fast”, save and reload your .html page and try it again. Now change the “fast” to 5000 (NO QUOTES AROUND THE NUMBER), and try it again. This says hide the paragraph over 5000 milliseconds or 5 seconds. Now change the .hide(5000) to .toggle(5000) Save your file and reload the html file in Chrome. Click on the button, it doesn’t look like anything different has happened but click on the button again and watch what happens now. Toggle does either .hide OR .show, depending on if the element is visible or not.
6. Now change the $(“#para2”) to $(“p”) and watch what happens. Change the 5000 to 2000 so that it is a bit faster. Make sure both paragraphs disappear now
7. Change the .click on the second line to .mouseenter. Then save and watch what happens when you move your mouse over top of the button.
8. Finally, change the .toggle to .fadeOut and watch what happens. You can use these methods to make dropdown menus.
9
9. Now we are going to use the jQuery method called animate to make a puff of smoke rise out of a chimney and disappear. Open this page and save it to your lab10 folder:
a. http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/lab10ex3.html b. Save these files to your lab10 folder also:
i. http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/smoke.png ii. http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/house.png
c. You should already have this .css file:i. http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/lab10ex3.css
10. Rename the file lab10ex3.html to be yourwesternuseridlab10ex3.html11. In Notepad, create a new file called: fadingfast.js12. View the .html file in Chrome to see the house image and smoke image. Notice that the smoke
and the house are lower on the page, this is because in the .css file I gave you, there is CSS rule that set the images to an absolute position near the bottom of the webpage.
13. In Notepad, modify the .html file, so that it brings in the jQuery library. You will need to add this tag to the head area, add it right under the <head> tag:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
14. In your .js file add the function that will be run just before the page finishes loading (remember that you might have to retype any double quotes, if you do a copy and paste, the wrong quotes might get copied):
$(document).ready (function () { $("???").click (function () { puffSmoke(); });});
Change the ??? to be the proper reference for the button on the page (look at the .html to figure out what it is, don’t forget the # if you use the id!)
15. Now we will write the function puffSmoke(). Create a function called puffSmoke below the existing function as follows:
function puffSmoke() { $("???").animate({top: '0px'},"fast");} //end of function
Change the ??? so that it is animating the smoke image (ie. Check the .html and figure out how to refer to the smoke image; don’t forget the # for the id.). Save your .js file, and save your .html file (since you added the jquery script line) and reload your .html file and click on the button.
10
Notice that the smoke moves to the top of the page, this is because we said animate it so that the top is at 0px (0 is the top of the webpage) and we said to do it fast using this line .animate({top: '0px'},”fast”);
16. Change that line so that it moves up slowly (either use “slow” or use 2000, for 2 seconds), save your .js and reload your .html and check to make sure it works.
17. Now, we will make the smoke get bigger and it goes up. Change the .animate to this:
$("#leftCloud").animate({top: '0px', height: '500px', width: '500px'},2000);
The cloud starts at a size of 100px by 100px and the above line says enlarge it to 500px by 500px over 2 seconds
18. Notice how the smoke hovers over the house like a fire, let’s make the smoke fade away. For that, we need to change the opacity of the image. Opacity goes from “1.0” (opaque, i.e. NOT SEE THROUGH) to “0.0” (i.e. completely transparent). It starts at 1.0 by default and we will animate it to transition to 0.0. Add this to your .animate opacity: '0.0' Try to figure out where it should go (HINT: It is just like changing the height or width or top). Save your .js file and reload your .html to see if it worked.
19. Now the problem is that if you click on the button a second time, it will not trigger any effect on our website. The smoke is still there, but because the opacity is 0.0, it is transparent. So always, before we animate it, we want to make it opaque. Do that by adding this line BEFORE the .animate line:
$("#leftCloud").css({opacity: '1.0'});
Save your .js file and reload your .html file and click on the button a few times and watch what happens now. Still not quite what we want.
20. Now add the parts you need to the .css({….}); that will put the smoke back down by the chimney at left 240px and top 500px (left and top are the hints here!). Save your .js file and reload your .html file and observe the changes. Getting closer!
21. Now add the code to the .css ({ }) that will set the cloud size back to 100px by 100px. (Hint: look above at how you make it bigger)
22. Right above the $(“#smoking”).click (function () { line, add a line to change the body of the page to YOUR favourite color. The .css would be .css({background: "orange"}); but you need to figure out what would go before the .css (the JQuery needed to refer to the body tag)
23. Double check that every time you click on the button it makes a puff of smoke. Please note that we made this animation using less than 10 lines of code!
24. Change the 2 images (the house and the smoke) to 2 other images of your choosing that would make sense animated in this way (e.g. someone blowing a bubble) and adjust the numbers/animation so that it works nicely for the 2 pictures you picked. HINT: png and gif images sometimes have transparent backgrounds so they might look better but you can pick any image you want (it doesn’t have to be perfect!). Consider picking images for an idea that might
11
make Laura smile since this is your last lab! Copy the images to your lab10 folder. Make sure your animation still works when you swap out the house and smoke for your new images.
25. Create a new folder called puff (all lower case) on your desktop and copy ALL the files you used to create this animation into this new folder (don’t forget your images, as well as your .js file, your .css file and your .html file).
Congratulations, you now can:
Modify your .html file so that it will use jQuery functions Make elements on your page hide and show over a given period of time using jQuery Animate elements on your webpage Change the opacity of elements on your webpage.
Exercise 4 – Sharing your work for everyone to see
One of the lovely things about doing this introductory course using JavaScript is that you can let other people (like your dear sweet Granma!) see your work or play your games without requiring them to have anything installed on their computer. All Granma needs is a browser such as Chrome or Safari and all you have to do is upload your .html files, your .css files and your .js files to a web server. In order to upload your files, you need two things:
Access to a web server and Software that uploads files (usually called SFTP software).
At Western, we have access to a web server (it is called panther.uwo.ca) AND the SFTP software is free, so let’s try it out.
1. First of all, activate your web area at Western by going to the following location and filling in the form and hitting the submit button: https://wts.uwo.ca/services/web/activate_my_personal_web_space.html
2. If you have a Windows machine, go here: https://winscp.net/eng/download.php and download a copy of WinSCP (click on the installation package)
3. If you have a Mac machine, go here: https://filezilla-project.org/ and download the FileZilla client.
4. Install the SFTP program you just downloaded. 5. Run the SFTP program you just downloaded and supply
the following information:a. HOST: panther.uwo.ca
(Note: on FileZilla you might have to type sftp://panther.uwo.ca)
b. USERID: your Western user id12
c. PASSWORD: your Western passwordd. PORT: 22
(Note: this will likely be filled in already) 6. Click on the Login button7. On the left side of the screen (your computer), find the folder you made in exercise 3 called puff8. On the
right side of your screen (the web server
side), find the folder called public_html and double click on that folder to go inside it.
9. Drag the puff folder from left side (your computer) to the right side (the web server), drop it in the white area (not inside another folder, although there likely wont be any other folders inside public_html)_in order to upload that folder from your computer to the web server. It should look like this
10. Now we have to double check that our upload worked. Open a browser and go to: http://publish.uwo.ca/~yourwesternuserid/puff as follows:
11. Click on the .html file to make sure that your chimmey still works. 12. Copy the link (the URL), as this is all that you have to submit for this lab! You do NOT need to
attach any files in owl, just paste the link into the Owl Submission Textbox.
Congratulations, you now can:
Upload your programs to a web server Run your program FROM ANY COMPUTER ON THE INTERNET (not just on your own
machine) Send the link of your work to a friend or your Granma or copy the link into Owl.
13
HAND THIS WORK INTO OWL IN ORDER TO GET YOUR LAB MARK:
1. Go into Owl and for Lab 10, PASTE JUST the URL (the link address) that you just copied in the last step above (you do NOT need to upload any files). We will click on that link in order to make sure your fun new animation (remember you should have replaced the smoke and chimney with your own images!) is working properly.
2. CONGRATULATIONS,…you have just finished your last lab for this course! 3. You are officially a PROGRAMMER (i.e. cool nerd) now!
14