CS1046 Lab 10 - csd.uwo.calreid2/cs1046/labs/lab10/lab10.pdf · Download the following files and...

1

CS1046 – Lab 10

Timing: 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.net

3. 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:

http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/lab10ex1.html

http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/lab10ex1.css

http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/changecolor.js

http://jsfiddle.net/

2

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 box

8. 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 colours

10. 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 CornflowerBlue

12. In the JavaScript area change the function changeTheColorToGreen, add a line to make the

backgroundColor change to limegreen

13. 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!

3

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:


b. http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/lab10ex1.css

c. http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/reverser.js



http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/reverser.js

4

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

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.

5

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 picture below). If you did it correctly,

6

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.

7

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

8

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


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.

https://jquery.com/

9

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.

http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/lab10ex3a.html

http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/paragraphs.js


10

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:


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.html

11. In Notepad, create a new file called: fadingfast.js

12. 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.


http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/smoke.png

http://www.csd.uwo.ca/~lreid/cs1046/labs/lab10/house.png


11

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

12

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).


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)

https://wts.uwo.ca/services/web/activate_my_personal_web_space.html

https://winscp.net/eng/download.php

13

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 id

c. PASSWORD: your Western password

d. PORT: 22

(Note: this will likely be filled in already)

6. Click on the Login button

7. On the left side of the screen (your computer), find the folder you made in exercise 3 called puff

8. 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.

https://filezilla-project.org/

14

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.


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.

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!

CS1046 Lab 10 - csd.uwo.calreid2/cs1046/labs/lab10/lab10.pdf · Download the following files and...

Documents

Transcript of CS1046 Lab 10 - csd.uwo.calreid2/cs1046/labs/lab10/lab10.pdf · Download the following files and...