-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathactivity-logging.html
102 lines (83 loc) · 4.78 KB
/
activity-logging.html
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<head>
<title>AC Workshop - Activity: Logging to Console</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div class="container">
<div class="container-inner">
<div class="left-sidebar">
<div class="home-anchor">
<h3><a href="index.html">Intro to Programming with JavaScript</a></h3>
</div>
<div class="navigation-links">
<div class="navigation-link-item"><strong><em><a href="activity-logging.html">Activity: Logging</a></em></strong></div>
<div class="navigation-link-item"><a href="lecture-variables.html">Lecture: Variables</a></div>
<div class="navigation-link-item"><a href="activity-variables.html">Activity: Variables</a></div>
<div class="navigation-link-item"><a href="lecture-arrays.html">Lecture: Arrays</a></div>
<div class="navigation-link-item"><a href="activity-arrays.html">Activity: Arrays</a></div>
<div class="navigation-link-item"><a href="lecture-conditionals.html">Lecture: Conditionals</a></div>
<div class="navigation-link-item"><a href="activity-conditionals.html">Activity: Conditionals</a></div>
<div class="navigation-link-item"><a href="assignment-webproposal.html">Assignment: Web App Proposal</a></div>
<div class="navigation-link-item"><a href="lecture-loops.html">Lecture: Loops</a></div>
<div class="navigation-link-item"><a href="activity-arraysadvanced.html">Activity: Arrays (Advanced)</a></div>
<div class="navigation-link-item"><a href="lecture-functions.html">Lecture: Functions</a></div>
<div class="navigation-link-item"><a href="activity-functions.html">Activity: Functions</a></div>
<div class="navigation-link-item"><a href="activity-fizzbuzz.html">Activity: Fizz Buzz</a></div>
<div class="navigation-link-item"><a href="teamchallenge.html">Team Challenge</a></div>
</div>
</div>
<div class="content">
<h1>Activity: Logging to the Console</h1>
<p> Welcome to software development! Over the course of the next two days we are going to go through a rigorous course teaching some of the basics of javascript development.</p>
<p>You will learn how to write programs that:
<ul>
<li>Write out messages</li>
<li>Determine if numbers are even or odd</li>
<li>Convert Farenheit to Celcius</li>
<li>Add up lists of numbers</li>
<li>And many more!</li>
</ul>
</p>
<p>
One of the most important things in development is to be able to see what happens when you execute a piece of code. We can have the computer log messages that tell us important information. As developers, we can use this information to fix problems or "bugs".
</p>
<p><b>Question: What's an example of a bug you've seen in software?</b></p>
<p>
Let's get right into it! During the lessons, you will be writing and running code. Go to <a href="https://repl.it/languages/javascript_web">repl.it</a>. In the left box put your JavaScript code, press "run" and view the output in the right box.
</p>
<p>
Let's start by <b>loging</b> (another word for <b>"write"</b>) our name to the console:
</p>
<pre><code>console.log("Ben")
console.log('Ben Sussman')
console.log('Sussman')
console.log("What's your name?")</code></pre>
<p>
Some important things to note:
<ul>
<li>My name is wrapped in <b>quotes</b>. That's to tell JavaScript that this is a <b>String</b> and not a variable name</li>
<li>You can use either <code>"</code> or <code>'</code> in your JavaScript to create a String. <a href="http://www.w3schools.com/jsref/jsref_obj_string.asp">Here is a great resource on JS Strings</a>.
<li><b>Challenge Question:</b> In what situations would you prefer to use a <code>"</code> or <code>'</code>?</li></li>
</ul>
</p>
<h2>Saving your work in Repl.it</h2>
<p>
In order prevent losing work, we recommend logging in to repl.it to save your work. Another smart strategy is to copy code into well named files in your <code>~/code/</code> folder for future reference. Do what works for you, but make an effort to keep your code organized and you won't regret it!
</p>
<pre><code>console.clear()
// code code code code
// all your code goes here
console.log("Made it to the end of our program")</code></pre>
<p>
Great! Now we can have the computer tell tell us what it knows about what's going on in our program. We'll use this to fix problems and see if our code is doing what we think it is.
</p>
</div>
</div>
</div>
</body>
</html>