Skip to content

Commit 0db9923

Browse files
zackrwzackrw
committed
Merge branch 'master' of github.com:xaq2892/javascript-tutorial
2 parents 84b6527 + d06709c commit 0db9923

5 files changed

Lines changed: 56 additions & 31 deletions

File tree

‎README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
##HackYale JavaScript Tutorial
2+
3+
[The HackYale JavaScript Tutorial](http://hackyale.staticloud.com/) is a small website outlining some basic information about JavaScript.
4+
The site could be useful for very basic instruction and experimenting and has been used by HackYale.
5+
6+
[![Site Image](https://github.com/xaq2892/javascript-tutorial/blob/master/images/site_image.png?raw=true "Javascript Tutorial")](http://hackyale.staticloud.com/)
7+

‎images/site_image.png‎

85.9 KB
Loading

‎index.html‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
<div class="container">
1010
<div id="content">
1111
<div id="1" class="page">
12-
<h1> Day 5: Learning Javascript </h1>
13-
<p>
12+
<h1>Learning Javascript</h1>
13+
<p>
1414
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.
1515
</p>
1616
<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>
2424
<h1>Basic syntax</h1>
2525
<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>
2626
<code>
27-
var a = 7; <span class="comment">// anything after 2 /'s is a <strong> comment </strong>and won't be executed.</span><br/>
27+
var a = 7; <span class="comment">// anything after 2 /'s (on the same line) is a <strong> comment </strong>and won't be executed.</span><br/>
2828
<span class="comment">// so you can literally type anything!! a;lk ajd!</span>
2929

3030
</code>
3131
<p>
32-
The keyword <code class="inline">var</code> tells the browser to make a new variable called <code class="inline"> a</code>. The <code class="inline"> =</code> then tells the browser to set it to the value 7. Finally, the <code class="inline">;</code> tells the browser that the line of code is over -- <strong>All lines should end in semicolons!!</strong>
32+
The keyword <code class="inline">var</code> tells the browser to make a new variable called <code class="inline"> a</code>. The <code class="inline"> =</code> then tells the browser to set it to the value 7. Finally, the <code class="inline">;</code> tells the browser that the line of code is over -- <strong>All statements should end in semicolons!!</strong>
3333
</p>
3434
<p>
3535
Then how come it returns <code class="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>
7575
}<br/>
7676
</code>
7777
<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. <code class="inline"> function</code> tells the browser that we're declaring a function. Everything enclosed in <code class="inline"> {}</code> is a part of the function: they tell the engine where the function starts and ends. <code class="inline"> (a, b)</code> defines the <strong>input</strong> -- in this function, we're taking two pieces of input, called <code class="inline"> a</code> and <code class="inline"> b</code>. Finally, the <code class="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. <code class="inline"> function</code> tells the browser that we're declaring a function. Everything enclosed in <code class="inline"> {}</code> is a part of the function: they tell the engine where the function starts and ends. <code class="inline"> (a, b)</code> defines the <strong>input</strong> -- in this function, we're taking two pieces of input, called <code class="inline"> a</code> and <code class="inline"> b</code>. Finally, the <code class="inline"> return</code> tells the function what to <strong> output</strong>, in this case, the sum of a and b.
7979
</p>
8080
</div>
8181
<div id="5" class="page">
@@ -98,7 +98,7 @@ <h1>Making it work</h1>
9898
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:
9999
</p>
100100
<code>
101-
typeof func ;<span class="comment">// ?</span><br/>
101+
typeof func;<span class="comment">// ?</span><br/>
102102
<span class="comment">// How about this one:</span><br/>
103103
alert("howdy soldier!");
104104
</code>
@@ -199,7 +199,7 @@ <h1>A working example</h1>
199199

200200
</code>
201201
<p>
202-
And that's it! Open up index.html in a browser and watch that text grow (the <code class="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 <code class="inline">1000</code> is the number of <strong>milliseconds</strong> the animation will take). In JavaScript, time is always in milleseconds.
203203
</p>
204204
<p>
205205
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!
@@ -213,24 +213,24 @@ <h1>A working example</h1>
213213

214214

215215
</div>
216+
</div>
216217

217-
<div id="nav">
218-
<div id="prev" class="nav"><- Previous</div>
219-
<div id="info">
220-
<div class="page-nav" target="1">1</div>
221-
<div class="page-nav" target="2">2</div>
222-
<div class="page-nav" target="3">3</div>
223-
<div class="page-nav" target="4">4</div>
224-
<div class="page-nav" target="5">5</div>
225-
<div class="page-nav" target="6">6</div>
226-
<div class="page-nav" target="7">7</div>
227-
<div class="page-nav" target="8">8</div>
228-
</div>
229-
<div id="next" class="nav">Next -></div>
218+
<div id="nav">
219+
<div id="prev" class="nav"><- Previous</div>
220+
<div id="fake_prev" style="width:20%;" ></div>
221+
<div id="info">
222+
<div class="page-nav" target="1">1</div>
223+
<div class="page-nav" target="2">2</div>
224+
<div class="page-nav" target="3">3</div>
225+
<div class="page-nav" target="4">4</div>
226+
<div class="page-nav" target="5">5</div>
227+
<div class="page-nav" target="6">6</div>
228+
<div class="page-nav" target="7">7</div>
229+
<div class="page-nav" target="8">8</div>
230230
</div>
231+
<div id="next" class="nav">Next -></div>
231232
</div>
232233

233234

234-
235235
</body>
236236
</html>

‎scripts/main.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ $(document).ready(function() {
1313

1414
// This next line means 'run this function when the #next element is clicked'
1515
$("#next").click(function() {
16-
console.log(curr_page);
1716
// If on the last page, do nothing
1817
if(curr_page === 8)
1918
return;
@@ -37,17 +36,23 @@ $(document).ready(function() {
3736

3837
change_page = function(curr_page, new_page) {
3938
// If going to the first page, hide the "prev" button
40-
if(new_page === 1)
39+
if(new_page === 1) {
4140
$("#prev").hide();
41+
$("#fake_prev").show();
42+
}
4243
// Otherwise show it
43-
else
44+
else {
45+
$("#fake_prev").hide();
4446
$("#prev").show();
47+
}
4548
// If going to page 8 (the last page), hide the "next" button
46-
if(new_page === 8)
49+
if(new_page === 8) {
4750
$("#next").hide();
51+
}
4852
// Otherwise show it
49-
else
53+
else {
5054
$("#next").show();
55+
}
5156

5257
$(".page-nav.selected").removeClass("selected");
5358
// Fade out current page

‎stylesheets/style.css‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ body {
1010
width: 880px;
1111
border: 1pt solid #DDD;
1212
padding: 30px;
13+
padding-bottom:100px;
1314
background-color: white;
1415
}
1516
/* The green notes */
@@ -45,12 +46,18 @@ code.inline {
4546
color: #777;
4647
}
4748

49+
4850
/* The navigation bar at the bottom */
4951
#nav {
5052
font-size: 0; /* Fix for inline-block */
5153
margin-top: 20px;
5254
padding-top: 20px;
53-
border-top: 1pt solid #ddd;
55+
border-top: 1pt solid #CCC;
56+
position:fixed;
57+
bottom: 0;
58+
width: 100%;
59+
min-width: 750px;
60+
background-color:#FFF5F5;
5461
}
5562

5663
#nav > div {
@@ -62,12 +69,13 @@ code.inline {
6269
}
6370
/* The prev and next buttons' containers */
6471
.nav {
65-
width: 25%;
72+
width: 20%;
6673
font-size: 14px;
6774
}
6875
/* The middle's container */
6976
#info {
70-
width: 50%;
77+
width: 40%;
78+
min-width: 275px;
7179
font-size: 0;
7280
}
7381
/* Each of the page nav blocks */
@@ -79,8 +87,8 @@ code.inline {
7987
height: 10px;
8088
padding: 10px;
8189
text-align: center;
82-
color: #ccc;
83-
border: 1pt solid #ddd;
90+
color: #666;
91+
border: 1pt solid #AAA;
8492
}
8593
.page-nav.selected {
8694
border: 1pt solid red;
@@ -93,8 +101,13 @@ code.inline {
93101

94102
/* Prev, next buttons */
95103
#prev {
104+
margin-left:10%;
96105
background-color: #F85A48;
97106
}
107+
#fake_prev {
108+
margin-left:10%;
109+
}
110+
98111
#next {
99112
background-color: #5CEC00;
100113
}

0 commit comments

Comments
 (0)