You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Today, we learned the basic syntax for <strong>Javascript</strong>, the language used to <strong>animate</strong> the web. There are slides available, but most of what we did isn't on them. I'll do a brief summary here.
15
15
</p>
16
16
<p><strong>It's very important that you type all the lines of code, not copy paste!</strong> You learn best by doing, not by reading. The more you type, the more you'll retain, I promise.
@@ -24,12 +24,12 @@ <h1> Day 5: Learning Javascript </h1>
24
24
<h1>Basic syntax</h1>
25
25
<p>A <strong>variable</strong> is exactly what it was in algebra: something in which to store data. In javascript, we declare and store variables like this:</p>
26
26
<code>
27
-
var a = 7; <spanclass="comment">// anything after 2 /'s is a <strong> comment </strong>and won't be executed.</span><br/>
27
+
var a = 7; <spanclass="comment">// anything after 2 /'s (on the same line) is a <strong> comment </strong>and won't be executed.</span><br/>
28
28
<spanclass="comment">// so you can literally type anything!! a;lk ajd!</span>
29
29
30
30
</code>
31
31
<p>
32
-
The keyword <codeclass="inline">var</code> tells the browser to make a new variable called <codeclass="inline"> a</code>. The <codeclass="inline"> =</code> then tells the browser to set it to the value 7. Finally, the <codeclass="inline">;</code> tells the browser that the line of code is over -- <strong>All lines should end in semicolons!!</strong>
32
+
The keyword <codeclass="inline">var</code> tells the browser to make a new variable called <codeclass="inline"> a</code>. The <codeclass="inline"> =</code> then tells the browser to set it to the value 7. Finally, the <codeclass="inline">;</code> tells the browser that the line of code is over -- <strong>All statements should end in semicolons!!</strong>
33
33
</p>
34
34
<p>
35
35
Then how come it returns <codeclass="inline"> undefined</code>? We'll get to that later. You can check what any variable is just by typing it:
@@ -75,7 +75,7 @@ <h1>Functions</h1>
75
75
}<br/>
76
76
</code>
77
77
<p>
78
-
This is correct syntax, but won't work in the console (something about an unexpected '('). We'll fix it in a minute, but first let's analyze what we typed. <codeclass="inline"> function</code> tells the browser that we're declaring a function. Everything enclosed in <codeclass="inline"> {}</code> is a part of the function: they tell the engine where the function starts and ends. <codeclass="inline"> (a, b)</code> defines the <strong>input</strong> -- in this function, we're taking two pieces of input, called <codeclass="inline"> a</code> and <codeclass="inline"> b</code>. Finally, the <codeclass="inline"> return</code> tells the function what to <strong> output</strong>, in this case, the sum of a and b.
78
+
This is correct syntax, but won't work in the console (something about an unexpected '('). This is just because the console doesn't like multiple line statements, and we'll fix it in a minute, but first let's analyze what we typed. <codeclass="inline"> function</code> tells the browser that we're declaring a function. Everything enclosed in <codeclass="inline"> {}</code> is a part of the function: they tell the engine where the function starts and ends. <codeclass="inline"> (a, b)</code> defines the <strong>input</strong> -- in this function, we're taking two pieces of input, called <codeclass="inline"> a</code> and <codeclass="inline"> b</code>. Finally, the <codeclass="inline"> return</code> tells the function what to <strong> output</strong>, in this case, the sum of a and b.
79
79
</p>
80
80
</div>
81
81
<divid="5" class="page">
@@ -98,7 +98,7 @@ <h1>Making it work</h1>
98
98
Notice the difference between checking what the function is (the second line) and using it. Now, what do you think you'd get by typing:
99
99
</p>
100
100
<code>
101
-
typeof func;<spanclass="comment">// ?</span><br/>
101
+
typeof func;<spanclass="comment">// ?</span><br/>
102
102
<spanclass="comment">// How about this one:</span><br/>
103
103
alert("howdy soldier!");
104
104
</code>
@@ -161,7 +161,7 @@ <h1>I wanna do it myself!</h1>
161
161
<p>I'd hope so. Unfortunately, jQuery doesn't come built-in with the browser like javascript does. If you look at this page's source, you'll notice this in the head:
All you need to do is copy that into your own pages, and you have jQuery! To write javascript files (you don't want to be typing into the console all the time), make that <codeclass="inline"> scripts</code> folder in your project that we always talk about and never use, and create a main.js file in there.
@@ -177,7 +177,7 @@ <h1>A working example</h1>
177
177
<html><br/>
178
178
<head><br/>
179
179
<spanclass="comment"><!-- include jQuery -- ></span><Br/>
And that's it! Open up index.html in a browser and watch that text grow (the <codeclass="inline">1000</code> is the number of <strong>milliseconds</strong> the animation will take)!
202
+
And that's it! Open up index.html in a browser and watch that text grow (the <codeclass="inline">1000</code> is the number of <strong>milliseconds</strong> the animation will take). In JavaScript, time is always in milleseconds.
203
203
</p>
204
204
<p>
205
205
Now you can use jQuery, CSS and HTML -- you <strong>know</strong> everything this class has to teach. All that's left is review, learning more functions and practice!
0 commit comments