-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
163 lines (145 loc) · 8.8 KB
/
index.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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!doctype html>
<html>
<head>
<title>Classes & Objects</title>
<link rel="stylesheet" href="./css/normalize.css" />
<link rel="stylesheet" href="./css/foundation.min.css">
<link rel="stylesheet" href="./css/style.css">
<meta name="viewport" content="initial-scale=1">
<script src="./js/vendor/modernizr.js"></script>
</head>
<body>
<div class="height-100">
<div class="large-9 columns height-100 no-padding">
<div id="editor" class="row">
<div class="large-11 columns">
<div class="js-class">
<span class="keyword">class</span> Dog
<div class="indent js-defining-method js-constructor">
<span class="keyword">def</span> <span class="method-name">initialize</span>(<span class="parameters js-parameter">name</span>, <span class="parameters js-parameter">breed</span>, <span class="parameters js-parameter">age</span>)
<div class="indent"><span class="instance-variable js-instance-variable">@name</span> <span class="operator">=</span> name</div>
<div class="indent"><span class="instance-variable js-instance-variable">@breed</span> <span class="operator">=</span> breed</div>
<div class="indent"><span class="instance-variable js-instance-variable">@age</span> <span class="operator">=</span> age</div>
<div class="keyword">end</div>
</div>
<div class="indent js-defining-method js-getter-method">
<span class="keyword">def</span> <span class="method-name">age</span>
<div class="indent"><span class="instance-variable js-instance-variable">@age</span></div>
<div class="keyword">end</div>
</div>
<div class="indent js-defining-method js-setter-method">
<span class="keyword">def</span> <span class="method-name">age=</span>(<span class="parameters js-parameter">age</span>)
<div class="indent"><span class="instance-variable js-instance-variable">@age</span> <span class="operator">=</span> age</div>
<div class="keyword">end</div>
</div>
<div class="indent js-defining-method">
<span class="keyword">def</span> <span class="method-name">bark</span>
<div class="indent"><span class="string">"RUFF RUFF"</span></div>
<div class="keyword">end</div>
</div>
<div class="keyword">end</div>
</div>
<div>
<span class="js-instance">spot</span> = Dog<span class="keyword">.new</span>(<span class="string js-argument">"Spot"</span>, <span class="string js-argument">"Corgi"</span>, <span class="string js-argument">"3"</span>)
</div>
<div>
puts <span class="js-instance">spot</span><span class="js-invoking-method invoking method">.bark</span>
</div>
<div class="comment">
=> "RUFF RUFF"
</div>
<div>
<span class="js-instance">spot</span>.age <span class="operator">=</span> 4
</div>
<div>
puts <span class="js-instance">spot</span>.age
</div>
<div class="comment">
=> 4
</div>
</div>
</div>
</div>
<div id="navigator" class="large-3 columns no-padding">
<ul>
<li class="term" data-term="class">
<h6 class="term-name">Classes</h6>
<p class="description hidden">A <strong>class</strong> is a set of instructions (a blueprint) for building an object. As a class, I can inherit abilities from another class. A class is just an Object.</p>
<ul>
<li class="term" data-term="constructor">
<h6 class="term-name">Constructor</h6>
<p class="description hidden">Each class may have a <strong>constructor</strong>. That constructor's method name is a reserved word in Ruby called <code>initialize</code>. This constructor can expect arguments passed into the <code>.new()</code> method. Upon initialization of the Class, the constructor is immediately invoked and any code inside of this method is ran.</p>
</li>
<li class="term" data-term="instance-variable">
<h6 class="term-name">Instance Variables</h6>
<p class="description hidden">An <strong>instance variable</strong> is just a variable assigned to whatever new object created based on each new class. Instance variables are preceded with <code>@</code>.</p>
</li>
</ul>
</li>
<li class="term" data-term="instance">
<h6 class="term-name">Instances</h6>
<p class="description hidden"><strong>Instances</strong> are individual objects created from the <em>blueprint</em> that our Class definition lays out. There are many dogs, but every dog comes from a similar genetic blueprint. In this example, each new dog is a new instance of the Dog class.</p>
</li>
<li class="term">
<h6 class="term-name">Methods</h6>
<p class="description hidden">Methods are functions that are owned by an object. Since everything in Ruby is an object, all functions are methods.</p>
<ul>
<li class="term" data-term="defining-method">
<h6 class="term-name">Defining a Method</h6>
<p class="description hidden">We define methods starting with <code>def</code> plus the assigned name and then end with with <code>end</code></p>
<ul>
<li class="term" data-term="parameter">
<h6 class="term-name">Parameters</h6>
<div class="description hidden">
<p>A <strong>parameter</strong> is a variable input that can be used within a <strong>method</strong>. When we define a method, we also define any parameters that the method will accept - however, we have to use placeholder values to refer to these inputs, since we don't yet know their literal values.</p>
<p>Later, when we <strong>invoke</strong> the method, we will pass in <strong>arguments</strong>, which hold actual data, to replace the placeholder parameters.</p>
</div>
</li>
</ul>
</li>
<li class="term" data-term="invoking-method">
<h6 class="term-name">Invoking Method</h6>
<p class="description hidden">We invoke a method using dot notation.</p>
<ul>
<li class="term" data-term="argument">
<h6 class="term-name">Arguments</h6>
<div class="description hidden">
<p>A <strong>parameter/argument</strong> is a variable input that can be used within a <strong>method</strong>. When we define a method, we also define any parameters that the method will accept - however, we have to use placeholder values to refer to these inputs, since we don't yet know their literal values.</p>
<p>Later, when we <strong>invoke</strong> the method, we will pass in <strong>arguments</strong>, which hold actual data, to replace the placeholder parameters.</p>
</div>
</li>
</ul>
</li>
<li class="term" data-term="getter-method">
<h6 class="term-name">Getter Methods</h6>
<p class="description hidden">To get data in our classes' variables, we need to create <strong>getter</strong>. This allows us to directly access the data contained in a variable inside of our Class.</p>
</li>
<li class="term" data-term="setter-method">
<h6 class="term-name">Setter Methods</h6>
<p class="description hidden">Set data in our instance variables, we need to create <strong>setter method</strong>. This allows us to set a value to a variable owned by a class. <em>Mutator</em> is another word for setter.</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="popup" class="hidden">
</div>
<script src="./js/vendor/jquery.js"></script>
<script src="./js/foundation.min.js"></script>
<script>
$(document).ready(function() {
$(document).foundation();
$("#navigator .term-name").hover(function() {
var term = $(this).parent().data("term");
$(".js-"+term).addClass("highlight");
$("#popup").html( $(this).siblings(".description").html() ).removeClass("hidden");
}, function() {
var term = $(this).parent().data("term");
$(".js-"+term).removeClass("highlight");
$("#popup").addClass("hidden");
});
});
</script>
</body>
</html>