Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Master #18

Open
wants to merge 13 commits into
base: gh-pages
Choose a base branch
from
Open

Master #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
0b066dc
Flattened slides and removed excess images
Roenok Feb 13, 2015
877020b
Cleaned up stray tags
Roenok Feb 13, 2015
f16e8f5
Merge pull request #1 from Roenok/lowpictures
Roenok Feb 13, 2015
421b716
Added additional spacing
Roenok Feb 13, 2015
9a1a0ea
fix font paths
cfarm Feb 27, 2015
be32800
Merge pull request #2 from cfarm/font-fix
Roenok Feb 27, 2015
1eff457
changed 3 typos in class 1 slides and adjusted spacing between equal …
Elishala Jul 25, 2015
829e02b
fixed Code Academy to read Codecademy
Elishala Jul 25, 2015
23fb4b7
fixed some typos and spacing issues
Elishala Jul 25, 2015
6be3577
made uniform changes and fixed spacing and typo issues.
Elishala Jul 25, 2015
1f18655
Merge pull request #5 from Elishala/master
Roenok Jul 25, 2015
5120850
new variables are undefined, not null
jannypie Nov 8, 2015
c904d78
Merge pull request #6 from jannypie/master
Roenok Nov 19, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ Introduces the Document Object Model (DOM) and how to use JavaScript to interact
### Class 4

Events and Animations

Introduces events, listening functions, user inputs, and basic animations.


Expand All @@ -49,4 +50,4 @@ You can change transition by changing the reveal transition property in Reveal.i
Reveal.initialize({
transition: 'default', // default/cube/page/concave/zoom/linear/none
});
```
```
151 changes: 46 additions & 105 deletions class1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<!-- dark editor--><link rel="stylesheet" href="reveal/lib/css/dark.css">

<!-- If use the PDF print sheet so students can print slides-->

<link rel="stylesheet" href="reveal/css/print/pdf.css" type="text/css" media="print">

<!--[if lt IE 9]>
Expand All @@ -38,13 +38,12 @@
<div class="slides">
<!-- Opening slide -->
<section>
<img src = "images/gdi_logo_badge.png">
<img src="images/gdi_logo_badge.png" alt="GDI logo">
<h3>JavaScript for Beginners</h3>
<h4>Class 1</h4>
</section>

<!-- Welcome-->
<section id="welcome">


<section>
<h3>Welcome!</h3>
<div class = "left-align">
Expand All @@ -58,7 +57,7 @@ <h3>Welcome!</h3>
</ul>
</div>
</section>

<section>
<h3>Welcome!</h3>
<div class = "left-align">
Expand All @@ -70,29 +69,7 @@ <h3>Welcome!</h3>
</ul>
</div>
</section>
</section>

<!-- What is JavaScript-->
<section id="whatis">
<section>
<h3>JavaScript is NOT Java</h3>
<img src="images/not-java.png" alt="Java logo with a no symbol"/>
</section>
<section>
<h3>JavaScript is a client-side language</h3>
<img src="images/client-server.jpg" alt="Laptop and server connected via the internet"/>
<p class="credit">Photo credits: <a href="http://www.flickr.com/photos/papalars/5210226441/" target="_blank">Andrew E. Larson</a> and <a href="http://www.flickr.com/photos/johnseb/3425464/" target="_blank">John Seb Barber</a> <a href="http://creativecommons.org/licenses/by-nc/2.0/" target="_blank">cc</a></p>
</section>
<section>
<h3>JavaScript works with HTML and CSS</h3>
<img src="images/triangle.jpg" alt="Triangle"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/ggunson/44539990/">Gillicious</a> <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">cc</a>
</section>
<section>
<h3>JavaScript lets you reuse code</h3>
<img src="images/desert-landscape.jpg" alt="Desert landscape"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/philsnyder/4216356826/" target="_blank">Phil Synder</a> <a href="http://creativecommons.org/licenses/by-nc/2.0/" target="_blank">cc</a></p>
</section>

<section>
<h3>What is JavaScript?</h3>
<ul>
Expand All @@ -103,6 +80,11 @@ <h3>What is JavaScript?</h3>
<li>JavaScript lets you build dynamic webpages that respond to input from users.</li>
</ul>
</section>
<section>
<h3>JavaScript is a client-side language</h3>
<img src="images/client-server.jpg" alt="Laptop and server connected via the internet"/>
<p class="credit">Photo credits: <a href="http://www.flickr.com/photos/papalars/5210226441/" target="_blank">Andrew E. Larson</a> and <a href="http://www.flickr.com/photos/johnseb/3425464/" target="_blank">John Seb Barber</a> <a href="http://creativecommons.org/licenses/by-nc/2.0/" target="_blank">cc</a></p>
</section>
<section>
<h3>Let's Develop It</h3>
<p>Let's write your first JavaScript program. Make a folder called gdi. Inside, make a new page called index.html. Place this code inside.</p>
Expand All @@ -121,15 +103,7 @@ <h3>Let's Develop It</h3>
&lt;/html&gt;
</code></pre>
</section>
</section>

<!-- Basics -->
<section id="basics">
<section>
<h3>Computers need simple, clear instructions</h3>
<img src="images/confusedrobot.jpg" alt="Confused robot"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/baboon/3946055/" target="_blank">baboon</a> <a href="http://creativecommons.org/licenses/by-nc/2.0/" target="_blank">cc</a></p>
</section>

<section>
<h3>Script Tags</h3>
<p>You can mix JavaScript and HTML. The script tag tells your browser the stuff inside is code, not content.</p>
Expand Down Expand Up @@ -162,8 +136,8 @@ <h3>Comments</h3>
<p>You can leave comments in your code&mdash;notes that people can read and computers will ignore.</p>
<pre><code>
&lt;script&gt;
/*I can wrap long comments
with multiple lines
/*I can wrap long comments
with multiple lines
like this*/
console.log('Hello World!'); //Or mark short comments like this
&lt;/script&gt;
Expand Down Expand Up @@ -192,19 +166,15 @@ <h3>Let's Develop It</h3>
<li>Create a new file called mycode.js. Move your code to this file and link it to your page.</li>
</ul>
</section>
</section>
<!-- Variables -->
<section>

<section>
<h3>Variables</h3>
<p>A variable is a place to store values</p>
<img src="images/empty-glass.jpg" alt="Empty glass"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/giuliag/3570562404/" target="_blank">giulia gasparro</a> <a href="http://creativecommons.org/licenses/by-nc/2.0/" target="_blank">cc</a></p>
</section>
<section>
<h3>Variable Values</h3>
<ul>
<li>When you first create a variable, it does not have a value (it is null).</li>
<li>When you first create a variable, it does not have a value (it is <em>undefined</em>).</li>
<li>You can set a value for a variable.</li>
<li>Variables can hold different types of information, like words, numbers, and collections of data.</li>
<li>The value of a variable can change over time.</li>
Expand Down Expand Up @@ -232,7 +202,7 @@ <h3>Declaring a Variable</h3>
&lt;script&gt;
var numberOfKittens = 5;
&lt;/script&gt;
</code></pre>
</code></pre>
</section>
<section>
<h3>Using a Variable</h3>
Expand All @@ -246,20 +216,13 @@ <h3>Using a Variable</h3>
</section>
<section>
<h3>Let's Develop It</h3>
<p>In your JS file, create a variable and give it a valid name and a value. Then, display the value.</p>
</section>
</section>
<!-- Variable Types and Operators-->
<!-- Numbers-->
<section>
<section>
<h3>Numbers!</h3>
<img src="images/kitten-basket.jpg" alt="Cats in a basket"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/tom-poes/2159348460/" target="_blank">WJ van den Eijkhof</a> <a href="http://creativecommons.org/licenses/by-nc/2.0/" target="_blank">cc</a></p>
<p>In your JS file, create a variable and give it a valid name and a value. Then, display the value.</p>
</section>


<section>
<h3>Numbers</h3>
<p>Variable can be numbers, either integers or floats (decimals).</p>
<p>Variables can be numbers, either integers or floats (decimals).</p>
<pre><code>
&lt;script&gt;
var numberOfKittens = 5;
Expand All @@ -268,7 +231,7 @@ <h3>Numbers</h3>
</code></pre>
<p>The browser will automatically convert integers to floats if needed</p>
</section>

<section>
<h3>Arithmetic Operators</h3>
<p>Once you have numbers, you can do math with them!</p>
Expand All @@ -282,7 +245,7 @@ <h3>Arithmetic Operators</h3>
</section>
<section>
<h3>Arithmetic Operators</h3>
<table>
<table>
<thead>
<tr>
<th>Example</th>
Expand Down Expand Up @@ -321,19 +284,17 @@ <h3>Arithmetic Operators</h3>
<td>Modulus</td>
<td>Remainder of a divided by b.</td>
</tr>
</tbody>
</tbody>
</table>
</section>
<section>
<h3>Let's Develop It</h3>
<p>Create two variables and try some arithmetic operators. Don't forget to display your results!</p>
<p>Create two variables and try some arithmetic operators. Don't forget to display your results!</p>
</section>
</section>
<!-- Strings -->
<section>

<section>
<h3>Strings</h3>
<p>Variable can be strings, groups of characters. You put your string in quotes.</p>
<p>Variables can be strings, groups of characters. You put your string in quotes.</p>
<pre><code>
&lt;script&gt;
var kittensName = 'Fluffy';
Expand All @@ -344,13 +305,9 @@ <h3>Strings</h3>
&lt;script&gt;
console.log('I\'d like to use an apostrophe');
&lt;/script&gt;
</code></pre>
</code></pre>
</section>
<section>
<h3>Playing with Strings</h3>
<img src="images/kitten-string.jpg" alt="Cat playing with string"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/dirtbikedba/5796961878/" target="_blank">Mike Lawson</a> <a href="http://creativecommons.org/licenses/by-nc/2.0/" target="_blank">cc</a></p>
</section>

<section>
<h3>String Operators</h3>
<p>You can put strings together with a +, the concatenation operator.</p>
Expand All @@ -373,23 +330,16 @@ <h3>String Operators</h3>
&lt;/script&gt;
</code></pre>
</section>
<section>
<h3>Concatenate!</h3>
<img src="images/concatenate.jpg" alt="Cat jumping on another cat."/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/furlined/8191032061/" target="_blank">Matt</a> <a href="http://creativecommons.org/licenses/by-nc/2.0/" target="_blank">cc</a></p>
</section>

<section>
<h3>Let's Develop It</h3>
<p>Create two variables, a first name and a last name, and then put them together to make a full name. Don't forget to display your results!</p>
<p>Create two variables, a first name and a last name, and then put them together to make a full name. Don't forget to display your results!</p>
</section>
</section>
<!-- Functions -->
<section id="functions">

<section>
<h3>Functions</h3>
<p>Functions are separable, reusable pieces of code.
<img src="images/legos.jpg" alt="Pile of legos"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/catzrule/9940388305/">Rick Payette</a> <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">cc</a>
<p>Functions are separable, reusable pieces of code.

</section>
<section>
<h3>Using Functions</h3>
Expand All @@ -406,7 +356,7 @@ <h3>Using Functions</h3>
&lt;script&gt;
turtleFact();
&lt;/script&gt;
</code></pre>
</code></pre>
</section>
<section>
<h3>Arguments</h3>
Expand All @@ -417,14 +367,14 @@ <h3>Arguments</h3>
console.log('Come here, ' + kittenName + '!');
}
callKitten ('Fluffy'); //outputs 'Come here, Fluffy!'

function addNumbers(a, b) {
console.log(a + b);
}
addNumbers(5,7); //outputs 12
addNumbers(9,12); //outputs 21
&lt;/script&gt;
</code></pre>
</code></pre>
</section>
<section>
<h3>Arguments</h3>
Expand All @@ -433,20 +383,20 @@ <h3>Arguments</h3>
&lt;script&gt;
function addOne(inputNumber){
var newNumber = inputNumber + 1;
console.log('&lt;p&gtYou now have ' + newNumber);
console.log('&lt;p&gt;You now have ' + newNumber);
}
//Declare variables
var numberOfKittens = 5;
var numberOfPuppies = 4;
//Use them in functions
addOne(numberOfKittens);
addOne(numberOfPuppies);
addOne(numberOfPuppies);
&lt;/script&gt;
</code></pre>
</code></pre>
</section>
<section>
<h3>Let's Develop It</h3>
<p>Turn the code you wrote to output someone's full name into a function, then use it.</p>
<p>Turn the code you wrote to output someone's full name into a function, then use it.</p>
</section>
<section>
<h3>Returning Values</h3>
Expand All @@ -464,27 +414,18 @@ <h3>Returning Values</h3>
</section>
<section>
<h3>Let's Develop It</h3>
<p>Add a return statement to your name function. Use that function to set the value of a variable.</p>
</section>
</section>

<!-- Final slides-->
<section id="final">
<section>
<h3>You did it!</h3>
<img src="images/celebration.jpg" alt="People celebrating"/>
<p class="credit">Photo credit: <a href="http://www.flickr.com/photos/morphomir/2407451929/" target="_blank">Mircea</a> <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">cc</a></p>
<p>Add a return statement to your name function. Use that function to set the value of a variable.</p>
</section>

<section>
<h3>Resources</h3>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank">JavaScript Guide</a>, from the Mozilla Developers Network.</li>
<li><a href="http://www.codecademy.com/tracks/javascript" target="_blank">Code Academy</a>, with interactive JavaScript lessons to help you review.</li>
<li><a href="http://www.codecademy.com/tracks/javascript" target="_blank">Codecademy</a>, with interactive JavaScript lessons to help you review.</li>
</ul>
</section>
</section>


</div><!-- Close .slides -->
<footer>
<div class="copyright">
Expand Down
Loading