-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
250 lines (212 loc) · 15.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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"><title>JavaScript Objects 101 - hakaselogs</title><link rel="icon" type="image/png" href=/images/favicon.png /><meta name="viewport" content="width=device-width, initial-scale=1">
<meta itemprop="name" content="JavaScript Objects 101">
<meta itemprop="description" content="A gentle guide to getting started with JavaScript Objects">
<meta itemprop="dateModified" content="2017-05-25T00:00:00+00:00" />
<meta itemprop="wordCount" content="862">
<meta itemprop="keywords" content="javascript,objects," />
<meta property="og:title" content="JavaScript Objects 101" />
<meta property="og:description" content="A gentle guide to getting started with JavaScript Objects" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://hakaselogs.me/2017-05-25/javascript-objects-101/" />
<meta property="article:published_time" content="2017-05-25T00:00:00+00:00" />
<meta property="article:modified_time" content="2017-05-25T00:00:00+00:00" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="JavaScript Objects 101"/>
<meta name="twitter:description" content="A gentle guide to getting started with JavaScript Objects"/>
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="screen" href="https://hakaselogs.me/css/normalize.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://hakaselogs.me/css/main.css" />
<link id="dark-scheme" rel="stylesheet" type="text/css" href="https://hakaselogs.me/css/dark.css" />
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://hakaselogs.me/js/main.js"></script>
</head>
<body>
<div class="container wrapper">
<div class="header">
<div class="avatar">
<a href="https://hakaselogs.me/">
<img src="https://storage.googleapis.com/gopherizeme.appspot.com/gophers/0f1736136b4fcbea61798f9d4d04a6b01f4a05ad.png" alt="hakaselogs" />
</a>
</div>
<h1 class="site-title"><a href="https://hakaselogs.me/">hakaselogs</a></h1>
<div class="site-description"><p>Notes mostly about software engineering and what I’m working on.</p><nav class="nav social">
<ul class="flat"><li><a href="https://twitter.com/codehakase" title="Twitter"><i data-feather="twitter"></i></a></li><li><a href="https://github.com/codehakase" title="Github"><i data-feather="github"></i></a></li></ul>
</nav>
</div>
<nav class="nav">
<ul class="flat">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/posts">Archive</a>
</li>
<li>
<a href="/projects">Projects</a>
</li>
<li>
<a href="/tags">Tags</a>
</li>
</ul>
</nav>
</div>
<div class="post">
<div class="post-header">
<div class="meta">
<div class="date">
<span class="day">25</span>
<span class="rest">May 2017</span>
</div>
</div>
<div class="matter">
<h1 class="title">JavaScript Objects 101</h1>
</div>
</div>
<div class="markdown">
<p>In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages, and act as handy data containers.</p>
<h3 id="what-is-an-object">What Is An Object?</h3>
<p>In JavaScript terms, An Object is a collection of data, which consits of several variables and functions - which are called properties and methods.</p>
<p>Creating an object is as easy as eating candy (lol!). Taking our Vehicle instance, we can create a Car Object like so:</p>
<div class="highlight"><pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#00f">let</span> car = {
type: <span style="color:#a31515">"salon"</span>,
colour: <span style="color:#a31515">"black"</span>,
}
</code></pre></div><p>In the code above, we created a variable <code>car</code> which is now an object, and has some <code>key-value</code> pairs inside. The <code>type</code> and <code>colour</code> items inside our car object are referred to as properties, and they hold their various values.
If we log to our console the type of our car variable, we’d get an object <code>console.log(typeof car); //object</code> .</p>
<blockquote>
<p>Note: We separate each key-value pairs with a comma (,)</p>
</blockquote>
<h4 id="accessing-object-properties">Accessing Object Properties</h4>
<p>Now we’ve created our object, how do we access the items inside? Its easy. We use the <code>dot</code> notation to access properties of an object. Say we want to log to our console, the value of the <code>colour</code> property in our <code>car</code> object, we’ll write as so:</p>
<div class="highlight"><pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript">console.log( car.colour ); <span style="color:#008000">// black
</span></code></pre></div><h4 id="what-data-types-are-allowed-as-property-values-in-objects">What Data Types are allowed as Property values in Objects?</h4>
<p>An Object’s property can have all data type as its value (<code>strings, number, float, array, function, ...</code>).</p>
<div class="highlight"><pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#00f">let</span> me = {
name: <span style="color:#a31515">"Francis Sunday"</span>,
gender: <span style="color:#a31515">"male"</span>,
interests: [<span style="color:#a31515">'God'</span>, <span style="color:#a31515">'programming'</span>, <span style="color:#a31515">'music'</span>, <span style="color:#a31515">'writing'</span>],
bio: <span style="color:#00f">function</span>() {
console.log( <span style="color:#a31515">"Hi! I'm "</span> + <span style="color:#00f">this</span>.name + <span style="color:#a31515">", and I'm interested in "</span> + <span style="color:#00f">this</span>.showInterests() )
},
showInterests: <span style="color:#00f">function</span>() {
<span style="color:#00f">return</span> <span style="color:#00f">this</span>.interests.join(<span style="color:#a31515">", "</span>);
}
}
</code></pre></div><p>Quite a lot going on up there, nothing to worry, I’ll walk you through it.
First I created a variable <code>me</code> to hold an object holding the properties <code>name, interests, gender</code>, and methods <code>bio(), showInterests()</code>. The <code>this</code> keyword here, refers to the current object. So <code>this.name</code> also means the value of the <code>name</code> property in this particular object I’m in.</p>
<p>Let’s use the object.</p>
<div class="highlight"><pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript">console.log ( me.name ); <span style="color:#008000">// "Francis Sunday"
</span><span style="color:#008000"></span>console.log ( me.gender ); <span style="color:#008000">// male
</span><span style="color:#008000"></span>console.log ( me.interests ) <span style="color:#008000">// ['God', 'programming' ...]
</span><span style="color:#008000"></span>me.bio(); <span style="color:#008000">// Hi! I'm Francis Sunday, and I'm interested in God, programming, music, writing
</span></code></pre></div><p>Now you get the feel of objects :+1:</p>
<h3 id="objects-are-everywhere">Objects Are Everywhere</h3>
<p>You need to grab an element in a DIV with html, you’d do something like this:</p>
<div class="highlight"><pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#00f">let</span> myDiv = document.getElementById(<span style="color:#a31515">'thatDiv'</span>);
</code></pre></div><p><code>document</code> is an object and <code>getElementById</code> is a method of it. You get the idea now right?</p>
<p>Here are some other examples of objects:</p>
<div class="highlight"><pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript">someVar.split(<span style="color:#a31515">''</span>);
someVar.join(<span style="color:#a31515">','</span>);
someVar.style
...
</code></pre></div><h4 id="sub-namespaces">Sub-Namespaces</h4>
<p>Values of objects, can also become objects. And they are still accessed via the dot notation.
If i change the name property in the <code>me</code> object as so:</p>
<div class="highlight"><pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript">name: {
firstname: <span style="color:#a31515">"Francis"</span>,
lastname: <span style="color:#a31515">"Sunday"</span>
}
</code></pre></div><p>To access those inner objects, we just extend with another <code>dot</code>.</p>
<div class="highlight"><pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript">me.name.firstname <span style="color:#008000">// Francis
</span><span style="color:#008000"></span>me.name.lastname <span style="color:#008000">// Sunday
</span><span style="color:#008000"></span>
</code></pre></div><h4 id="updating-objects-properties">Updating Objects Properties</h4>
<p>After an Object has been created with its properties, we can still update the values of its properties.</p>
<div class="highlight"><pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#00f">let</span> person = {
name: <span style="color:#a31515">"John Doe"</span>,
age: 19
}
<span style="color:#008000">// changing the value of the name property
</span><span style="color:#008000"></span>console.log ( person.name ); <span style="color:#008000">// John Doe
</span><span style="color:#008000"></span>person.name = <span style="color:#a31515">"Brian"</span>;
console.log( person.name ); <span style="color:#008000">// Brian
</span></code></pre></div><p>Also, we can create new properties outside the creation block.</p>
<div class="highlight"><pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#00f">let</span> car = {
model: <span style="color:#a31515">"MV400"</span>,
colour: <span style="color:#a31515">"blue"</span>
}
car.name = <span style="color:#a31515">"benz"</span>;
console.log( car );
<span style="color:#008000">// Output
</span><span style="color:#008000">// { model: 'MV400', colour: 'blue', name: 'benz' }
</span></code></pre></div><h3 id="try-it">Try It</h3>
<p>We’ve covered a lot of ground so far, to make sure everything we learned so far sinks in, open up your favourite editor (mine is VSCode), and try a quick example.</p>
<p>Create a basic <code>HTML</code> markup with two text fields <code>name</code>, <code>age</code> and a <code>submit</code> button. Make sure all the form fields has an ID.
In your JavaScript file, grab the items from the text fields when the submit button is clicked and add the values of the form fields to a <code>userInfo</code> object.
Display the inputs from the text fields to the browser in a <code>div</code>.</p>
<p>I’ll wait here for you. No peeking.</p>
<hr>
<p>Okay, if you didn’t peek, you should have something like this:</p>
<div class="highlight"><pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html"><span style="color:#008000"><!--the HTML markup--></span>
<input type=<span style="color:#a31515">"text"</span> id=<span style="color:#a31515">"name"</span> placeholder=<span style="color:#a31515">"Enter Your Name"</span> >
<input type=<span style="color:#a31515">"text"</span> id=<span style="color:#a31515">"age"</span> placeholder=<span style="color:#a31515">"Enter Your Age"</span> >
<button id=<span style="color:#a31515">"submitBtn"</span>>Submit</button>
<span style="color:#008000"><!--for the output--></span>
<div id=<span style="color:#a31515">"info"</span>></div>
</code></pre></div><div class="highlight"><pre style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#008000">// The JavaScript code
</span><span style="color:#008000"></span><span style="color:#00f">let</span> _name = document.getElementById(<span style="color:#a31515">'name'</span>);
<span style="color:#00f">let</span> _age = document.getElementById(<span style="color:#a31515">'age'</span>);
<span style="color:#00f">let</span> btn = document.getElementById(<span style="color:#a31515">'submitBtn'</span>);
<span style="color:#008000">// when the send button is clicked
</span><span style="color:#008000"></span>btn.addEventListener(<span style="color:#a31515">'click'</span>, <span style="color:#00f">function</span>() {
<span style="color:#008000">// The userInfo object, holding the values from the text fields
</span><span style="color:#008000"></span><span style="color:#00f">let</span> userInfo = {
name: _name.value,
age: _age.value,
display: <span style="color:#00f">function</span>() {
<span style="color:#00f">return</span> <span style="color:#a31515">"Name: "</span> + <span style="color:#00f">this</span>.name + <span style="color:#a31515">", "</span> + <span style="color:#a31515">"Age: "</span> + <span style="color:#00f">this</span>.age;
}
}
<span style="color:#008000">// displays the data in the HTML markup
</span><span style="color:#008000"></span>document.getElementById(<span style="color:#a31515">'info'</span>).innerHTML = userInfo.display();
});
</code></pre></div><p>Preview</p>
<p><img src="/images/Objects-demo.gif" alt="Objects-demo" title="Objects Demo"></p>
<p><!-- raw HTML omitted --><!-- raw HTML omitted -->
<!-- raw HTML omitted --><!-- raw HTML omitted --></p>
<h3 id="summary">Summary</h3>
<p>In this title, we walked through the basics of Objects in JavaScript. In the next part (<em>JavaScript Objects 102</em>), I’ll be writing on Object Oriented programming in JavaScript, with highlights on Prototypes, Inheritance, and Constructors.
Have any questions? Drop them in the comment box below.</p>
</div>
<div>
<br>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DTK7L&placement=hakaselogsme" id="_carbonads_js"></script>
</div>
<div class="tags">
<ul class="flat">
<li><a href="/tags/javascript">javascript</a></li>
<li><a href="/tags/objects">objects</a></li>
</ul>
</div></div>
</div>
<div class="footer wrapper">
<nav class="nav">
<div>2021 © hakaselogs | <a href="https://github.com/knadh/hugo-ink">Ink</a> theme on <a href="https://gohugo.io">Hugo</a></div>
</nav>
</div>
<script type="application/javascript">
var doNotTrack = false;
if (!doNotTrack) {
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-90124514-1', 'auto');
ga('send', 'pageview');
}
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<script>feather.replace()</script>
</body>
</html>