/
notes-from-javascript-n00b.html
280 lines (175 loc) · 14.1 KB
/
notes-from-javascript-n00b.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
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Notes from a JavaScript n00b | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="So, apparently I have been sleeping while all designers worth their salt have been diving into JavaScript like it is 2012. While I have been a very …">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://nimbupani.github.com/notes-from-javascript-n00b.html">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
</head>
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="https://twitter.com/divya">twitter</a> <a class="rss" href="http://feeds.feedburner.com/nimbupani">RSS Feed</a> <a class="youtube" href="http://youtube.com/nimbupani">Youtube Channel</a> <a class="github" href="https://github.com/nimbupani">Github</a></h2>
</header>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
</nav>
<article>
<nav class="article">
<a class="previous" href="/spacing-out-on-css-namespaces.html" title="Spacing Out on CSS Namespaces">❬</a>
<a class="next" href="/belief.html" title="Belief">❭</a>
</nav>
<header>
<time datetime="2010-05-10T00:00:00-07:00" pubdate><span class='month'>May</span> <span class='day'>10</span> <span class='year'>2010</span></time>
<h1 class="entry-title"><a href="/notes-from-javascript-n00b.html">Notes from a JavaScript n00b</a></h1>
</header>
<div class="entry-content"><p>So, apparently I have been sleeping while all designers worth their salt have been diving into JavaScript like it is <a href="http://en.wikipedia.org/wiki/2012_phenomenon">2012</a>. While I have been a very early evangelist of jQuery, I knew only enough to get me a solution but nothing in depth of whats, ifs, and whys of JavsScript. So, a month ago, I decided to spend a Saturday watching the <a href="http://video.yahoo.com/watch/111593/1710507">JavaScript, the programming language lectures by Douglas Crockford</a>. If you are in the same boat as I am and want to be able to write JavaScript (or even if you are using jQuery or other frameworks), this will be the best 6 hours you will spend.</p>
<p></p>
<h3>Caveats</h3>
<p>You need to know the jargon of a programming language (not HTML), e.g. type, objects, arrays, etc. I think you might have a hard time understanding JavaScript if you are used to Java, or PHP. Thankfully, I don’t remember my life as a programmer, so it made understanding the lectures easy.</p>
<p>The lectures are actually only 1.5 hours long. I mentioned 6 hours because, I (thanks to prodding from <a href="http://deepak.jois.name">Deepak</a>) paused the video every minute to try out what Douglas was talking about on Firebug Console, and trying out other “what-if” cases that he did not mention.</p>
<p></p>
<h3>Are you ready?</h3>
<p>These notes might sound a lot like the <a href="http://neverseenlost.wordpress.com/">description of Lost by someone who has never seen it</a>, which means, it might at least be entertaining. From what I have learnt, it seems <a href="http://nimbupani.com/dom-ecmascript-and-other-puzzles.html">JavaScript</a> is an irrational language much like you and me, which causes much grief to programmers.</p>
<p></p>
<p>Without further ado, here are my notes on JavaScript:</p>
<ol>
<li>There is only one type for a number, and that is a double.</li>
<li>There is only one String type, and does not have a type of Char like some other languages (Java)</li>
<li><code>Math.floor()</code> and <code>parseInt()</code> do almost the same thing, which is to return an integer value based on what gets passed into them, but <code>Math.floor("10f")</code> returns <code>NaN</code> (“Not a Number”) but <code>parseInt("10f")</code> will return <code>10</code>.</li>
<li>JavaScript Strings are UCS-2 encoded which is almost all of UTF-8 (but excludes some new characters, and something called <a href="http://msdn.microsoft.com/en-us/library/ew7hbz7k(VS.71).aspx">surrogate pairs</a>).
</li>
<li>JavaScript has many “unknown” values: <code>NaN</code>, <code>null</code>, <code>undefined</code>. </li>
<li><code>NaN</code> cannot be compared with or equated to. E.g. the comparison <code>NaN === NaN</code> evaluatesto <code>false</code>. </li>
<li><code>null</code> is an object (one of the schizophrenic aspects of JavaScript).
</li>
<li><code>undefined</code> is the default value of any variable that has not yet been assigned a value (as you would have realised when you bang your keyboard in frustration at “Object undefined” errors).
</li>
<li>Setting any variable to <code>undefined</code> is equivalent to deleting it.</li>
<li>JavaScript statements can be “truthy” or “falsy”</li>
<li>“falsy” statements are those that evaluate to <code>null</code>/<code>undefined</code>/<code>NaN</code>/<code>""</code>/<code>false</code> (bool)/<code>0</code> (int)
</li>
<li>Rest of the statements are true including those that evaluate to <code>"0"</code> (string)/ <code>"false"</code> (string).
</li>
<li><p>The easiest way to convert a string to number is to put a “+” (unary operator) before it. E.g.</p>
<pre><code>a = +"42"
b = a + 5 // b = 47
a = "42"
b = a + 5 // b = 425
</code></pre>
</li>
<li><p>The comparison operators <code>==</code> and <code>===</code> are different. <code>==</code> can do type coercion which means if the two values being compared are of different types (e.g. String and Int), it can convert one to the other (I am not clear on what gets converted to what), and compare the values. <code>===</code> does not do that. E.g.</p>
<pre><code>43 == "43" // evaluates to true
43 === "43" // evaluates to false</code></pre>
</li>
<li><p><code>!</code> returns boolean true, if the associated expression is falsy. e.g.</p> <pre><code>(!(43 === "43")) // true</code></pre>
</li>
<li><p><code>!!</code> returns the boolean equivalent of the truthy/falsy nature of the expression associated with it. e.g.</p> <pre><code>!!(43 === "43") // false</code></pre>
<p>So, in this way, even if your expression evaluates to <code>null</code>, <code>undefined</code> or <code>NaN</code>, you can use this operator to only use the boolean equivalent than these unknown values.</p>
</li>
<li>
Switch statements use “===” comparison
</li>
<li>Declare a variable with <code>var</code> before it (e.g. <code>var variablename</code>), so that its scope is local to where it was declared. Otherwise the variable will be available globally (and susceptible to accidental modifications)</li>
<li>A variable declared in a function is available throughout the function and not just within blocks (e.g. a variable declared in if/switch statements of a function is also available for other operations in the same function).
</li>
<li><p>You can define a function in two ways:</p>
<pre><code>1. var a = function() {}
2. var a = new function() {}
</code></pre>
<p>#1 implies the function returns undefined value unless there is a return statement.</p>
<p>#2 implies the function returns an object if there is no return statement (so it acts as a <a href="http://en.wikipedia.org/wiki/Constructor_(object-oriented_programming)">constructor</a>).</p>
</li>
<li>An object contains “name: value” pairs, the value can be another object. The value is referred using <code>object.name</code> or <code>object[name]</code>. The name can contain any character but, if you use a name like <code>sd#</code> you cannot refer to its value in this manner <code>a.sd#</code> you can only use <code>a["sd#"]</code> </li>
<li><p>Objects are passed by reference, so they cannot be compared to check if they contain same name/value pairs. E.g. </p>
<pre><code>a = {b:1, c:2};
p = {b:1, c:2};
a == p; // false
p = a; // name: value pairs of p lost, p points to a
a == p; // true</code>
</pre>
<p>So, when you compare two objects, you really are comparing if they are both pointing to the same location.</p>
</li>
<li>Arrays inherit from Objects but have additional properties and functions.</li>
<li>Array length property returns the largest integer index + 1 e.g:
<pre><code>a[0] = "bobo";
a[5] = "dada";
console.log(a.length); // results in 6 not 2
</code></pre>
</li>
<li><p>Arrays can have functions too: </p>
<pre><code>var a = [0, 1, 2];
a.functioname = function() {}
</code>
</pre>
</li>
<li>
<p>If you delete an item from an array, it does not alter the length of the array.</p>
</li>
<li>
<code>typeOf(variableName)</code> returns Object as the type for an array (so you cannot confirm if that variable points to an array), use <code>variableName.constructor === Array</code> to check if the variable is an array.
</li>
</ol>
<p></p>
<p>I am pretty sure I must have passed out at this stage after all this knowledge gain. Nevertheless, I am very curious about JavaScript and hoping to learn more from the <a href="http://video.yahoo.com/watch/111585/1027823">messiah</a>. </p>
<p>P.S. I am sorry if it was not as entertaining as the Never Seen Lost blog posts.</p>
</div>
<footer>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
on
<time datetime="2010-05-10T00:00:00-07:00" pubdate><span class='month'>May</span> <span class='day'>10</span> <span class='year'>2010</span></time> in
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
</span>
. If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2010-05-10-notes-from-javascript-n00b.md">please send a pull request</a>.
</p>
</footer>
</article>
<section>
<h1>Comments</h1>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
</div>
</div>
<aside id="articles">
<p><img class="avatar"
src="http://a2.twimg.com/profile_images/1696865113/me_normal"
height=48> <a href="http://twitter.com/divya">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/css-object-model.html">CSS Object Model</a></li><li><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></li><li><a href="/html5please-api.html">Html5please API</a></li><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
</aside>
<footer role="contentinfo"><p>
Copy to your heart’s content 2012 - Divya Manian -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = 'http://nimbupani.com/notes-from-javascript-n00b.html';
var disqus_identifier = 'http://nimbupani.com/notes-from-javascript-n00b.html';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script src="/javascripts/octopress.js"></script>
<script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>