Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

651 lines (532 sloc) 17.43 kb
<!doctype HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Intro to JavaScript: Part 1</title>
<link href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono|Tangerine" rel="stylesheet" type="text/css" />
<link href="css.css" rel="stylesheet"/>
<style>#presentation {background-color: #0B2EA2;}</style>
</head>
<body>
<div id="topinfo">
</div>
<div id="info">
<p>Press <span class="key">&rarr;</span> key to advance.
Zoom in/out: <span class="key">Ctrl or Command</span> + <span class="key">+/-</span>.
</p>
</div>
<div id="presentation">
<div id="presentation-counter"></div>
<div id="slides">
<div class="slide intro">
<header><hgroup>
<h1>Basic JavaScript</h1>
<h2>Estelle Weyl</h2>
</hgroup></header>
</div>
<div class="slide normal">
<header><h1>Including Javascript in your HTML</h1></header>
<section class="content">
<pre contenteditable>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;This is a document&lt;/title&gt;
<span class="imp">&lt;script src=&quot;js/script.js&quot;&gt;&lt;/script&gt;</span>
<span class="imp">&lt;script&gt;</span>
/* code goes here */
<span class="imp">&lt;/script&gt;</span>
&lt;/head&gt;
&lt;body onload=&quot;badPlaceToPutJSButAllowed();&quot;&gt;
<span class="imp">&lt;script&gt;</span>
// also allowed here
<span class="imp">&lt;/script&gt;</span>
<span class="imp">&lt;script src=&quot;js/script2.js&quot;&gt;&lt;/script&gt;</span>
&lt;/body&gt;
&lt;/html&gt;
</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Exercise</h1></header>
<section class="content">
<p>Try it!<br><a href="files/01_includejs.html">Basic HTML5 template</a></p>
<ul>
<li>Add an external script in the head</li>
<li>Add an embedded script in the head</li>
<li>Add an external script in the body</li>
<li>Add an embedded script in the body</li>
</ul>
</section>
</div>
<div class="slide normal">
<header><h1>Warning!!!</h1></header>
<section class="content">
<p class="explain">Now that you know how to include JavaScript in your webpages, realize that you should not include your JS in the &lt;head> in production. When your browser hits a script in a document while loading the page, it ceases all downloads and rendering until it finishes downloading, parsing and executing your script.</p>
<p class="explain">Put your scripts at the *end* of your documents to improve perceived download speed.</p>
<p class="explain">Your browser is single threaded. When downloading, parsing and executing JS, all other features (download, user interactions like button clicking, etc) are paused until your browser is finished with the JavaScript</p>
</section>
</div>
<div class="slide normal">
<header><h1>Syntax</h1></header>
<section class="content">
<p>Statements</p>
<pre contenteditable>alert('this is an alert');</pre>
<pre contenteditable>var addition = 14 * 7;</pre>
<pre contenteditable>var functionName = function(){
alert('an alert');
};</pre>
<p class="explain">Don't worry if this slide doesn't make sense yet</p>
</section>
</div>
<div class="slide normal">
<header><h1>Comments</h1></header>
<section class="content">
<p class="explain">Comments make your code more understandable for those updating your code in the future, including YOU!</p>
<p>Single Line Comments </p>
<pre contenteditable>// this is a single line comment
</pre>
<p>Multi Line Comments</p>
<pre contenteditable>
/*
this is a multi-
line comment
*/</pre>
<p>Exercise: <a href="files/01_includejs.html">Add comments to the last file</a></p>
</section>
</div>
<div class="slide normal">
<header><h1>Data Types</h1></header>
<section class="content">
<h1>Primitive Types</h1>
<ul>
<li>Numbers </li>
<li>Strings</li>
<li>Booleans</li>
<li><code>null</code></li>
<li><code>undefined</code></li>
</ul>
<pre contenteditable> 'Estelle'
"It's JavaScript"
'It\'s JavaScript'
true
27
3.1415</pre>
<h1>Objects</h1>
<p style="margin:0">Everything else in JavaScript is an Object!</p>
</section>
</div>
<div class="slide normal">
<header><h1>Numbers</h1></header>
<section class="content">
<pre contenteditable>3 === 3.0000000</pre>
<ul>
<li>64-bit float</li>
<li>A single number type</li>
</ul>
<pre contenteditable> 5e3 == 5000
0x12 == 18 // base 16
010 == 8 // base 8
</pre>
<p class="explain"><code>typeof NaN // "number"<br/>typeof Infinity // "number"</code></p>
</section>
</div>
<div class="slide normal">
<header><h1>Implicit Type Coercion</h1></header>
<section class="content">
<pre contenteditable>
3 + 3 === 6
"3" + 3 === "33"
3 * 1 === 3
"3" * 1 === 3
</pre>
</section>
</div>
<div class="slide normal">
<header><h1>String Basics</h1></header>
<section class="content">
<pre contenteditable>'Estelle'
"Estelle"
'It\'s JavaScript'
'\'\\\' is called a \'back slash\''
"Don't need to escape with mixed quotes"</pre>
<pre contenteditable>var goodString = "Really long strings" +
" can be concatenated across lines";
var goodString = "This may work but is a \
bad idea. Space at end?"
var badString = &quot;This will
fail&quot;
</pre>
<p>Exercise: Copy &amp; Paste above strings in console</p>
</section>
</div>
<div class="slide normal">
<header><h1>Booleans</h1></header>
<section class="content">
<pre contenteditable>true
false</pre>
<pre contenteditable>var truthy = true,
falsey = false;</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Variables &amp; Assignment</h1></header>
<section class="content">
<h1>Variable</h1>
<pre contenteditable>var firstName;</pre>
<p class="explain">Variables that are declared but not assigned return <code>undefined</code></p>
<h1>Assignment</h1>
<pre contenteditable>firstName = "Estelle";</pre>
<h1>Variable and Assignment</h1>
<pre contenteditable>var firstName = "Estelle";</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Several Variables</h1></header>
<section class="content">
<h1>Variables</h1>
<pre contenteditable>var firstName, lastname, age;</pre>
<h1>With Assignment</h1>
<pre contenteditable>var firstName = "Estelle",
lastname = "Weyl",
age = 29;</pre>
<p class="explain">You can declare (and assign) several variables in a single statement, with multi-line statements being way easier to read</p>
</section>
</div>
<div class="slide normal">
<header><h1>Declaring Variables</h1></header>
<section class="content">
<pre contenteditable>
var firstName, age, isAwesome;
firstName = "Estelle";
age = 29;
isAwesome = true;</pre>
<pre contenteditable>
var firstName = "Estelle";
var age = 29;
var isAwesome = true;</pre>
<pre contenteditable>
var firstName = "Estelle",
age = 29,
isAwesome = true; </pre>
<pre contenteditable>var firstName="Estelle",age=29,isAwesome=true;</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Variables</h1></header>
<section class="content">
<ul>
<li>Begin with letters, numbers, $ or _</li>
<li>Only contain letters, numbers, $ and _</li>
<li>Case sensitive</li>
<li>Avoid reserved words <i class="explain">see next slide &rarr;</i></li>
<li>Choose clarity and meaning</li>
<li>Pick a naming convention and stick with it</li>
</ul>
</section>
</div>
<div class="slide normal">
<section class="content" style="-webkit-column-count:4">
<ul>
<li>break</li>
<li>case</li>
<li>catch</li>
<li>continue</li>
<li>debugger</li>
<li>default</li>
<li>delete</li>
<li>do</li>
<li>else</li>
<li>finally</li>
<li>for</li>
<li>function</li>
<li>if</li>
<li>in</li>
<li>instanceof</li>
<li>new</li>
<li>return</li>
<li>switch</li>
<li>this</li>
<li>throw</li>
<li>try</li>
<li>typeof</li>
<li>var</li>
<li>void</li>
<li>while</li>
<li style="border-bottom:1px solid">with</li>
<li>class</li>
<li>enum</li>
<li>export</li>
<li>extends</li>
<li>import</li>
<li>super</li>
<li>implements</li>
<li>interface</li>
<li>let</li>
<li>package</li>
<li>private</li>
<li>protected</li>
<li>public</li>
<li>static</li>
<li style="border-bottom:1px solid">yield</li>
<li>abstract</li>
<li>boolean</li>
<li>byte</li>
<li>char</li>
<li>const</li>
<li>double</li>
<li>final</li>
<li>float</li>
<li>goto</li>
<li>import</li>
<li>int</li>
<li>long</li>
<li>native</li>
<li>short</li>
<li>synchronized</li>
<li>throws</li>
<li>transient</li>
<li style="border-bottom:1px solid">volatile</li>
<li>true</li>
<li>false</li>
<li>null</li>
<li>undefined</li>
</ul>
</section>
</div>
<div class="slide normal">
<header><h1>Reserved for Browser</h1></header>
<section class="content" style="-webkit-column-count: 2">
<ul>
<li>alert</li>
<li>blur</li>
<li>closed</li>
<li>document</li>
<li>focus</li>
<li>frames</li>
<li>history</li>
<li>innerHeight</li>
<li>innerWidth</li>
<li>length</li>
<li>location</li>
<li>navigator</li>
<li>open</li>
<li>outerHeight</li>
<li>outerWidth</li>
<li>parent</li>
<li>screen</li>
<li>screenX</li>
<li>screenY</li>
<li>statusbar</li>
<li>window</li>
</ul>
</section>
</div>
<div class="slide normal">
<header><h1>Loosely typed language</h1></header>
<section class="content">
<pre contenteditable>
var anyValue = 'red ribbon'; // string
anyValue = 24; // number
anyValue = true; // boolean
anyValue = [3, 'hello', true]; // array</pre>
<p class="explain">Unlike many other programming languages, JS is loosely typed. Variable types are not declared. Variable will be reassigned to a different type with assignment to a different type.</p>
</section>
</div>
<div class="slide intro">
<header><h1 style="text-decoration:line-through; ">Global Scope</h1></header>
<section class="content"> <p class="explain" style="font-size: 2rem; text-align: left">Any variable declared outside of a function will have global scope. In the browser this means that all global variables and functions are methods and properties of the <code>window</code> object.<br/><br/> To avoid polluting the <code>window</code> object, namespace your code.</p>
</section>
</div>
<div class="slide normal advanced">
<header><h1>Object Notation</h1></header>
<section class="content">
<pre contenteditable>
var person = {
firstName: "Estelle",
age: 29,
isAwesome: true
}; </pre>
<pre contenteditable>var person = new Object();
person['firstName'] = "Estelle",
person['age'] = 29,
person['isAwesome'] = true; </pre>
<pre contenteditable>var person = {};
person.firstName = "Estelle",
person.age = 29,
person.isAwesome = true;</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Basic Math</h1></header>
<section class="content">
<p>Operators</p>
<ul><li>+</li>
<li>-</li>
<li>*</li>
<li>/</li>
<li>%</li>
</ul>
<pre contenteditable>var cost = 2.5;
var quantity = 10;
var total = cost * quantity;</pre>
<ul><li>Order of operations is same as math. (Use parentheses.)</li>
<li>modulo &rarr; remainder</li>
</ul>
</section>
</div>
<div class="slide normal">
<header><h1>Addition &amp; Subtraction</h1></header>
<section class="content">
<pre contenteditable style="font-size: larger">var easy = 2 + 2;
var hard = 6298 + 3817;
var sum = easy + hard;</pre>
<pre contenteditable style="font-size:larger">var easy = 10 - 5;
var hard = 6298 - 3817;
var difference = hard - easy;</pre>
<p><b>Exercise:</b> Get the values for easy, hard, sum and difference</p>
</section>
</div>
<div class="slide normal">
<header><h1>Multiplication &amp; Division</h1></header>
<section class="content">
<pre contenteditable style="font-size: larger">var easy = 5 * 5;
var hard = 11 * 7;
var product = easy * hard;</pre>
<pre contenteditable style="font-size: larger">var easy = 5 / 5;
var hard = 51 / 17;
var quotient = hard / easy;</pre>
<p><b>Exercise:</b> Get the values for easy, hard, product and quotient</p>
<p class="explain">Note: dividing any number by <code>0</code> returns <code>infinity</code></p>
</section>
</div>
<div class="slide normal">
<header><h1>Modulus</h1></header>
<section class="content">
<pre contenteditable style="font-size: larger">var easy = 10 % 7;
var hard = 41 % 7;
var modulus = hard % easy;</pre>
</section>
<p><b>Exercise:</b> Get the values for easy, hard and modulus.</p>
<p>Here are a few more equations to put in the console:</p>
<pre contenteditable>
4 + 7 10 % 3
5 - 2 12 % 4
9 * 9 30 % 28
27 / 3 44 % 7
9 + 2 * 3 - 8
(9 + 2) * (3 - 8)
</pre>
</div>
<div class="slide normal">
<header><h1>Concatenation</h1></header>
<section class="content">
<pre contenteditable>var firstName = "Estelle";
var lastName = "Weyl";
var age = 29;
var fullName = firstName + " " + lastName;</pre>
<p>Joining Numbers and String</p>
<pre contenteditable>var sentence = firstName +
" is not really " + age + " years old";</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Type conversion to enable math</h1></header>
<section class="content">
<pre>var notMath = '2' + 4; // 24
var yupMath = <span class="imp">+</span>'2' + 4; // 6
var yupMath = <span class="imp">Number(</span>'2'<span class="imp">)</span> + 4; // 6
var notMath = Number('2foo') + 4 // <span class="imp">NaN</span>
var yupMath = <span class="imp">parseInt(</span>'2foo'<span class="imp">)</span> + 4; // 6</pre>
<p><strong>Exercise:</strong>
<br/>Try the expressions above, and try your own</p>
</section>
</div>
<div class="slide normal">
<header><h1>Loosely Typed Language</h1></header>
<section class="content">
<p>Type casting</p>
<pre contenteditable>
var yupMath = '2' * 1 + 4; // 6
var yupMath = '2' * 4; // 8
</pre>
<p>&nbsp;</p>
<pre contenteditable>
if("1" == 1) {
// true
}
if("1" === 1) {
//false
}</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Operator Shortcuts</h1></header>
<section class="content">
<ul style="float:left; margin-right:40px;">
<li>+=</li>
<li>-=</li>
<li>*=</li>
<li>/=</li>
<li>++</li>
<li>--</li>
</ul>
<pre contenteditable style="float:left;">var increment += 1;
++increment;
increment++;
var decrement -= 1;
--decrement;
decrement--;
errorMessage += " " + newError;</pre>
<pre contenteditable style="clear: both">var iteration = 0;
console.log('value of iteration is: ' + iteration++);
console.log('value of iteration is: ' + ++iteration);
</pre>
</section>
</div>
<div class="slide normal advanced">
<header>
<h1>MadLibs with Window Methods</h1>
</header>
<section class="content">
<pre contenteditable>var color = window.prompt('Your favorite color');
var tool = window.prompt('What do you draw with?');
var count = window.prompt('Favorite Number?');
window.alert(count + ' ' + color + ' ' + tool + 's');</pre>
<pre contenteditable>var answers = {
color: window.prompt('Favorite Color'),
tool: window.prompt('What do you draw with?'),
count: window.prompt('Favorite Number?'),
message: function(){
return answers.count + ' ' + answers.color + ' ' + answers.tool + 's';
},
annoy: function(){
alert('You told us: ' + answers.message());
}
};
answers.annoy();</pre>
</section>
</div>
<div class="slide intor">
<header><h1>Exercise</h1></header>
<section class="content">
<p>Get the answers to these math problems:</p>
<ul>
<li>27 * 6 - 18</li>
<li>The value of 28 ÷ 2</li>
<li>the remainder of 29 ÷ 3</li>
</ul>
<p>Get the browser to alert your name</p>
<p>Get the browser to approximate your age with current year and birth year</p>
</section>
</div>
<div class="slide intro">
<header><h1>Next</h1></header>
<section class="content">
<a href="part_02.html">Go</a>
</section>
</div>
</div>
<iframe src="console/index.html" id="console" frameborder="0"></iframe>
</div>
<script src="slides.js"></script>
</body> </html>
Jump to Line
Something went wrong with that request. Please try again.