-
Notifications
You must be signed in to change notification settings - Fork 0
/
debugging.txt
93 lines (47 loc) · 2.9 KB
/
debugging.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
Setup
Please install the Chrome browser using the following link:
https://www.google.com/intl/en/chrome/browser/
On Windows:
Install Notepad++
http://download.tuxfamily.org/notepadplus/6.1.3/npp.6.1.3.Installer.exe
On Mac:
Install TextWrangler
http://ash.barebones.com/TextWrangler_4.0.1.dmg
Open a text file called "debugging.html"
Part One
Inspecting a page
Open a Browser
Once you have it installed, open Chrome and point it to
//make sure this is the right URL
http://hcopperm.github.com/canvas-experiments/canvas_tutorial.html
---screenshot---
On Mac: Click on menu icon on far right, select "Tools", and then select "Developer Tools".
On PC:
You should see something that looks like this:
---screenshot---
This is the HTML Inspector. It shows you the code that your browser is interpreting.
Mouse over so you can see how different lines correspond to different things on the page.
Event Listeners
*Look through all the html elements. You should see <div id = "hello">
Now click on "Sources". You should see the "teaching.html" file there.
In our code, we get a handle on that and call it "hello".
We then add what's called an event listener. What does it look like the event listener does?
console.log("hello");
Try clicking on the page. What happens? If it looks like nothing is happening, select the button on the bottom left that has an arrow and horizontal lines: >=. That opens the console. Now try clicking on the page.
Now type "alert("hello")" into the console. What happens?
So we can use the console to run code immediately. Try some math problems (2 * 555 etc). The console also has a memory. Type in this code:
number = 5
number * 3
What if we want to stop the code in the middle? We can put in what's called a "break point". Try clicking on the line number 7. Now what happens when you click the mouse?
The code stops. The cool thing about this is that you can use the console. Go ahead and try that out.
Let's say we want to manipulate the page in the middle of running our code. Making sure you have a breakpoint set at line 7, click the page and then type this:
hello.parentNode.removeChild(hello)
---
We can also edit the code on our own machine and see what happens. Open a text editor window and call it "debug2.html".
Point your browser here:
http://hcopperm.github.com/coderdojo_debugging/debug2.html
Then copy and paste this *debug2.html* code from your browser. Save that file and then open it with Chrome. Now you can edit the file yourself.
Here we're manipulating something called the "canvas" element. You can think of it like a piece of paper. getContext() is getting a hold of it. beginPath() is like picking up your pencil. moveTo() tells you where to start your line, and lineTo tells you where to finish it. stroke() colors it in.
clickEvent.clientX
Coordinates on a graph. In this case 0, 0 is the top left-hand corner. Down is positive
What if you add this line in: