Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
312 lines (248 sloc) 8.5 KB
<!doctype HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Intro to JavaScript: Part 4</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"/>
</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: IV</h1>
<h2>Estelle Weyl</h2>
<h3>Functions / Methods</h3>
</hgroup></header>
</div>
<div class="slide normal">
<header><h1>String Methods</h1></header>
<section class="content">
<p>Substrings</p>
<pre contenteditable>var word = "etcetera";
var abbr = word.substring(0,3);</pre><small>substring(startPos, endPos)</small>
<p>Replace content</p>
<pre contenteditable>var pinkFloyd = "Good bye cruel world";
var terryJacks = pinkFloyd.<strong>replace</strong>('cruel world', 'to you my trusted friend');</pre><small>replace(origSub, newSub); first occurence</small>
<pre contenteditable>var colors = "Grey, lightgrey, darkgrey, slateGrey";
var colours = colors.<strong>replace</strong>(<strong>/</strong>grey<strong>/gi</strong>, "gray");</pre><small>g = global, i = case-insensitive</small>
</section>
</div>
<div class="slide normal">
<header><h1>String Methods (cont.)</h1></header>
<section class="content">
<p>searching</p>
<pre contenteditable>var willS="To be or not to be, that is the question."
var first = willS.<strong>indexOf</strong>('be'); // 3
var last = willS.<strong>lastIndexOf</strong>('be'); //16
</pre>
<small>returns index of first letter found, or -1</small>
<p>Slice or section of text</p>
<pre contenteditable>
var section = willS.<strong>slice</strong>(9, 18); // "not to be"
// returns "that is the question."
var section = willS.<strong>slice</strong>(20);
var section =
willS.<strong>slice</strong>(willS.<strong>lastIndexOf</strong>(',') + 2);</pre>
<small>slice(start, end) where end is not included. <br>&nbsp; &nbsp; If end is ommitted, will return from firstChar on</small>
</section>
</div>
<div class="slide normal">
<header><h1>Case Change</h1></header>
<section class="content">
<p>UPPERCASE/lowercase</p>
<pre contenteditable>var speak = prompt('Write Something:');
var shout = speak.<strong>toUpperCase</strong>();
var whisper = speak.<strong>toLowerCase</strong>();</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Methods</h1><h2>We've already used these</h2></header>
<section class="content">
<pre contenteditable>
console.log(arg);
window.prompt(arg);
window.alert(arg);
string.replace(old, new);
string.substring(start, end);
string.toUpperCase();
string.toLowerCase();
parseInt(string, radix);
array.push(val);
array.unshift(val);
array.pop();
array.unshift();
array.splice();</pre>
</section>
</div>
<div class="slide normal">
<header>
<h1>Functions</h1>
<h2>reusable code that does something!</h2>
</header>
<section class="content">
<pre contenteditable>function functionName(param1, param2) {
// javascript you want to run
}</pre>
<pre>alertName('Estelle', 'Weyl');
function alertName(first, last) {
var fullName = first + " " + last;
alert("Your name is " + fullName);
}
</pre></section>
</div>
<div class="slide normal">
<header>
<h1>Functions</h1>
<h2>reusable code that does something!</h2>
</header>
<section class="content">
<pre contenteditable>//declare variables
var val1, val2, total;
val1 = prompt('Enter a number');
val2 = prompt('Another number');
//call function and assign the return
total = <strong>multiplier(</strong>val1, val2<strong>)</strong>;
// the function
<strong>function multiplier(</strong>num1, num2<strong>)</strong>{
var value = num1 * num2;
console.log(num1 + " X " + num2 + " = " + value);
<strong>return</strong> value;
}
// local v global scope?
//console.log(num1 + " X " + num2 + " = " + value);
console.log(val1 + " X " + val2 + " = " + total);
</section>
</div>
<div class="slide normal">
<header><h1>Variable Scope</h1></header>
<section class="content">
<p>Variables defined outside a function are global variables. They are accessible anywhere in your program once declared.</p>
<p>Variables declared with var inside a function are local to that function</p>
<p>Variables defined in a function without being locally declared are global. Arguments are always local whether implicit or explicit.</p>
<pre contenteditable>function kiss(){
for(<strong>i = 0</strong>; i < <strong>arguments.length</strong>; i++){
console.log("I want to kiss " + <strong>arguments[i]</strong>)
}
}
kiss("Bill", "Barack", "Johnny", "Angelina");</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Global Scope</h1></header>
<section class="content">
<pre contenteditable>var vacationDays = 14;
var holiday= function(vacationDays) {
var name = prompt('Name');
console.log(name + "'s trip lasted " + vacationDays + " days")
}
holiday(7);
console.log(vacationDays);
//console.log(name);</pre>
</section>
</div>
<div class="slide normal advanced">
<header><h1>Functions are methods</h1></header>
<section class="content">
<pre contenteditable>var functionName = function () {
// do something
};
functionName();
window.functionName();</pre>
<pre contenteditable>var answers = {
color: window.prompt('Favorite Color'),
tool: window.prompt('Analog Printer?'),
count: window.prompt('Favorite Number?'),
message: answers.count + ' ' + answers.color + ' ' + answers.tool + 's',
annoy: function(){
alert('You told us: ' + answers.message);
}
};
answers.annoy();</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Return Values</h1></header>
<section class="content">
<p>"return" is used inside a function to send back the return value when a function is called.</p>
<pre contenteditable>var squared = function(x){
<strong>return x * x;</strong>
}
// the prompt method returns what was entered
var num = +prompt('Enter a number');
// the value written is the return value of function
console.log(num + " squared is " + <strong>squared(num)</strong>);
</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Return rules</h1></header>
<section class="content">
<p>Function with no return, return undefined</p>
<pre contenteditable>var squared = function(x){
<strong>console.log( x * x)</strong>
}
var num = +prompt('Enter a number');
console.log(num + " squared is " + <strong>squared(num)</strong>);
</pre></section>
</div>
<div class="slide normal">
<section class="content">
<p>When a function hits a return, it exits the function and goes back to the callee</p>
<pre contenteditable>var ageLimit = function(age) {
if(isNaN(age)) {
<strong>return</strong> "Ummmm.... hello!"; }
if(age >=65) {
<strong>return</strong> "You're old enough to retire";}
if(age > 30) {
<strong>return</strong> "Aren't your 29 for the " +
(age-28) + "th time"; }
if(age >= 25) {
<strong>return</strong> "you can finally rent a car"; }
if(age < 18) {
<strong>return</strong> "you're too young to vote!"; }
<strong>return</strong> "I'm speechless";
}
var message = ageLimit(+prompt("How old are you?"));
</pre><small>could have also used else if</small>
</section>
</div>
<div class="slide normal">
<header><h1>Exercises</h1></header>
<section class="content">
<ul>
<li>Define a function that writes your name to the console.</li>
<li>Call that function</li>
<li>Change your function so it accepts a name as a parameter</li>
<li>Call that function</li>
</ul>
<p>Putting it all together</p>
<ul>
<li>Define a function that takes a first name and last name and write the initials to the console.</li>
<li>Create another function that asks the user for their first and last names.</li>
<li>Make the second function call the first function, passing the names.</li>
<li>Make it run by calling the 2nd function</li>
<li>Extra: make it so the first function only takes 1 value and returns only 1 initial. Call it 2x.</li>
</ul>
</section>
</div>
<div class="slide intro">
<header><h1>Next</h1></header>
<section class="content">
<a href="part_05.html">Go</a>
</section>
</div>
</div>
<iframe src="console/index.html" id="console" frameborder="0"></iframe>
</div>
<script src="slides.js"></script>
</body> </html>