-
Notifications
You must be signed in to change notification settings - Fork 7
/
activity-variables.html
126 lines (103 loc) · 5.09 KB
/
activity-variables.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
<title>AC Workshop - Activity: Variables</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"><a href="activity-logging.html">Activity: Logging</a></div>
<div class="navigation-link-item"><a href="lecture-variables.html">Lecture: Variables</a></div>
<div class="navigation-link-item"><strong><em><a href="activity-variables.html">Activity: Variables</a></em></strong></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: Variables</h1>
<p>
Let's create:
</p>
<ul>
<li>A variable called `helloWorld` <i>(this is called "camel cased")</i></li>
<li>A variable called `hiMyNameIs`</li>
<li>A variable called `this_is_snake_cased`</li>
<li>A variable called `thisVarHasNumbers111`</li>
<li>A variable called `$this$var$has$dollarsigns`</li>
<li>A variable containing letters, numbers, and underscores</li>
<li>Let's try to <b>break</b> JavaScript: make some variables that error out! Do you see the error message in repl.it, what does it say?</li>
</ul>
<p>
Use <code>console.log(myVariable)</code> to print out each variable to the console. You can also prepend it with a string and use the <code>+</code> operator to squish them together (the fancy name for that is to <b>concatenate</b> or <b>join</b> them together).
</p>
<pre><code>console.log("The value of [something] is " + someVariable)</code></pre>
<p>
<b>NOTE:</b> If the value of the variable is NOT a String and you try and concatenate it with a string, JavaScript will do a nice thing and convert it to a String for you. <i>However this can be dangerous</i>, JavaScript is not very smart and might convert it incorrectly. This might not be an issue for simple examples, but consider yourself warned!
</p>
<p>
Now create a variable containing for each of the following:
</p>
<ul>
<li>Your name</li>
<li>Your age</li>
<li>Your favorite food</li>
<li>Your favorite film, book, or tv show (or one for each!)</li>
</ul>
<h2>Pair with your neighbor: Which of these variables are correct, and which are incorrect?</h2>
<pre><code>const myVariableName
let biggestPartyEver!
const even bigger party
let smallest-party-ever
const medium$sized$party
let iLoveLearning@C4Q
let javascript_is_the_best
const tweet#C4Q
let _tweetC4Q
const ThreeTimesThree
const 3Times3
let ThreeTimes3
const 3TimesThree
</code></pre>
<h2>Math (Expressions)</h2>
<p>
You can do math on variables too as long as they are numbers! Let's find out your birth year by subtracting your age (let's use the variable you defined earlier) from the current year:
</p>
<pre><code>const currentYear = <script> document.write((new Date()).getFullYear())</script>
const myBirthYear = currentYear - myAge
console.log("My birth year is " + myBirthYear)</code></pre>
<p>
It can get quite a bit more complicated:
</p>
<pre><code>const companyRevenue = 1000000;
const officeRent = 250000;
const employeeSalary = 75000;
const numberOfEmployees = 4;
const taxRate = 0.4;
const profit = (companyRevenue - officeRent - employeeSalary * numberOfEmployees) * taxRate;
console.log("Profit this year was " + profit);</code></pre>
<p>
Try changing the values like the rent, or the number of employees, and see how profit changes. This is why programming is so powerful!
</p>
</div>
</div>
</div>
</body>
</html>