Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

375 lines (306 sloc) 12.211 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"/>
<style>#presentation {background-color: #DBAC0F;}</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: 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 = "Goodbye 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 omitted, 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"> <section class="content"> <h1 style="margin:0;">String Methods</h1>
<dl class="halved">
<dt>charAt</dt>
<dd>Returns the character at the specified index.</dd>
<dt> charCodeAt</dt>
<dd>Returns a number indicating the Unicode value of the character at the given index.</dd>
<dt> concat</dt>
<dd>Combines the text of two strings and returns a new string.</dd>
<dt> indexOf</dt>
<dd>Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found.</dd>
<dt> lastIndexOf</dt>
<dd>Returns the index within the calling String object of the last occurrence of the specified value, or -1 if not found.</dd>
<dt> localeCompare</dt>
<dd>Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.</dd>
<dt> match</dt>
<dd>Used to match a regular expression against a string.</dd>
<dt>replace</dt>
<dd>Used to find a match between a regular expression and a string, and to replace the matched substring with a new substring.</dd>
<dt> search</dt>
<dd>Executes the search for a match between a regular expression and a specified string.</dd>
<dt> slice</dt>
<dd>Extracts a section of a string and returns a new string.</dd>
<dt> split
</dt><dd>Splits a String object into an array of strings by separating the string into substrings.
</dd><dt> substr</dt>
<dd>Returns the characters in a string beginning at the specified location through the specified number of characters.
</dd><dt> substring
</dt><dd>Returns the characters in a string between two indexes into the string.
</dd><dt> toLocaleLowerCase / toLocaleUpperCase
</dt><dd>The characters within a string are converted to lower / upper case while respecting the current locale. For most languages, this will return the same as toLowerCase / toUpperCase.
</dd>
<dt> toLowerCase</dt>
<dd>Returns the calling string value converted to lower case.</dd>
<dt>toString</dt>
<dd>Returns a string representing the specified object. Overrides the Object.prototype.toString method.</dd>
<dt> toUpperCase</dt>
<dd>Returns the calling string value converted to uppercase.
</dd>
<dt> valueOf</dt>
<dd>Returns the primitive value of the specified object. Overrides the Object.prototype.valueOf method.
</dd> </dl>
<p class="explain">While strings are primitive types, and primitive types don't have methods (objects do), strings are wrapped into a String Object wrapper when methods are invoked on them.</p></section>
</div>
<div class="slide normal">
<section class="content">
<h1>Functions</h1>
<p>Function declaration</p>
<pre>function alertName(first, last) {
alert("Your name is " + first + " " + last);
}</pre>
<p>Function Expression</p>
<pre contenteditable>alertName = function(){
alert("Your name is " + first + " " + last);
}</pre>
<p>Function call</p>
<pre contenteditable>alertName('Estelle', 'Weyl');</pre>
<p class="explain">functions are objects that can execute a set of statements</p>
</section>
</div>
<div class="slide normal">
<header><h1>Functions are reusable</h1></header>
<p class="explain" style="margin:0;">Reusable code that does something!</p>
<section class="content">
<p>Function</p>
<pre contenteditable>yummy = function(){
for(var <strong>i = 0</strong>; i < <strong>arguments.length</strong>; i++){
console.log("I love to eat " + <strong>arguments[i]</strong>)
}
}</pre>
<p>Function calls</p>
<pre contenteditable>
yummy("chocolate",
"ice cream",
"raspberries",
"pineapple");
yummy(prompt('name a yummy food'));</pre>
</section>
</div>
<div class="slide normal">
<section class="content"> <p style="font-size: 0.8em">//declare variables</p>
<pre contenteditable>var val1, val2, total;
val1 = prompt('Enter a number');
val2 = prompt('Another number');</pre>
<p style="font-size: 0.8em">// the function</p>
<pre contenteditable>
<strong>var multiplier = function (</strong>num1, num2<strong>)</strong>{
var value = num1 * num2;
console.log(num1 + " X " + num2 + " = " + value);
<strong>return</strong> value; }</pre>
<p style="font-size: 0.8em">//call function and assign the return</p>
<pre contenteditable>total = <strong>multiplier(</strong>val1, val2<strong>)</strong>;
</pre>
<p style="font-size: 0.8em">// but what about scope??? local v global scope?</p>
<pre contenteditable>
//console.log(num1 + " X " + num2 + " = " + value);
console.log(val1 + " X " + val2 + " = " + total);
</pre>
</section>
</div>
<div class="slide normal">
<header><h1>Variable Scope</h1></header>
<section class="content explain">
<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>
</section>
</div>
<div class="slide normal">
<header><h1>Global v Local Scope</h1></header>
<section class="content">
<pre contenteditable>var vDays = 14; <strong>// global variable</strong>
var holiday= function(vDays) { <strong>// local scope</strong>
var name = prompt('Name');
console.log(name+"'s trip lasted "+vDays+" days");
}
// vDays = 7 here is a local variable to the function
holiday(7);
// see, vacationdays is still 14 days
console.log(vDays);
//console.log(name);</pre>
</section>
</div>
<div class="slide normal advanced">
<header><h1>Methods are Functions</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 class="explain">"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>Functions with no explicit return will 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>
<p class="explain">All functions have a return value. If no return is included, the function call returns <code>undefined</code></p></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 caller.</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 you 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>
Jump to Line
Something went wrong with that request. Please try again.