Skip to content

Instantly share code, notes, and snippets.

@rexfordkelly-at-makersquare
Last active August 16, 2016 02:05
Show Gist options
  • Save rexfordkelly-at-makersquare/86ce4b230db8a0bcd4cb2b38837ffbc4 to your computer and use it in GitHub Desktop.
Save rexfordkelly-at-makersquare/86ce4b230db8a0bcd4cb2b38837ffbc4 to your computer and use it in GitHub Desktop.
/**
Exercises:
Let's get familiar with working with Strings
in JavaScript.
*/
/**
Before we get started let's setup some data to play with.
*/
var yourName = 'YOUR_NAME_HERE'; // <-- Enter your name here.
var yourAge = 'YOUR_AGE_HERE'; // <-- Enter your age in number of years.
var yourFavoriteFood = 'SOMETHING_GOES_HERE'
var wordSet1 = 'The quick brown fox jumped over the lazy dog.';
var wordSet2 = 'Pack my box with five dozen liquor jugs.';
var wordSet3 = 'Jackdaws love my big sphinx of quartz.';
var wordSet4 = 'The five boxing wizards jump quickly.';
var wordSet5 = 'How vexingly quick daft zebras jump!';
var wordSet6 = 'Bright vixens jump; dozy fowl quack.';
/**
EXERCISE One: Concatenation
Concatenation is the process of joining one
or more strings together to form a new string.
PROMPT:
Using the variables yourName and yourAge
compose a sentence. Ensure you are using
the .concat() method.
*/
// A)
var newString = yourName.concat(' enjoyed some tasty ', yourFavoriteFood, ' on their ', yourAge - 1, ' birthday.');
console.log(newString) // We helped you out on this one.
// B)
// Compose your own string, using two or three of your own variables or strings
// C)
// Compose another string, which has numbers which are calculated within your expression
// D)
// Compose another string, which is composed of several smaller strings, which are spread out over 5 lines.
// E)
// the + operator allows us to concatenate strings in a simple manner
var anotherString = 'This string ' + 'was ' + 'created using the + ' + 'operator.';
// Redo A-D using the string's + operator.
// End of Exercise
/**
EXERCISE Two: String Inspection with .endsWith()
endsWith is a String method to test if a
string ends with another string. The value
the method returns is a boolean, true or false.
*/
// Usage:
var str = 'To be, or not to be, that is the question.';
console.log(str.endsWith('question.')); // true
console.log(str.endsWith('to be')); // false
/**
You can provide a third argument, to indicate/specify
your own "ending".
*/
console.log(str.endsWith('to be', 19)); // true
// A) Using endsWith compose an expression that returns a boolean value.
var userName = "John Doe";
var sirName = "Doe";
// Check if this person could be related to John Doe.
var personName = "Sally Doe Sue";
// your code here...
// Check if Dan could be related to John Doe.
var anotherPerson = "Dan Doe";
// your code here...
// Does this string contain the strings, swimming, and 30.
var someString = "Dan can go swimming, 30 min after he eats";
// B) fun with Phone Numbers
var areaCode = '818';
var number1 = '(818) 867 - 5309';
var number2 = '(323) 867 - 5309';
var number4 = '(310) 867 - 5389';
// write an expression that returns a boolean value
var areaCodeMatches1 = '';
var areaCodeMatches2 = '';
var areaCodeMatches3 = '';
// End of Exercise
/**
EXERCISE Three: .includes()
Well endsWith is pretty useful, but sometimes it can
feel a little awkward checking our strings.
Let's take a look at another method, ".includes()"
This handy method will allow you to search an entire
string for a match, and you don't need to know where
you want to start
*/
// Usage:
'Blue Whale'.includes('blue'); // returns false, it's case sensitive.
'Some words with the letter z'.includes('z') // returns true
/* There is a second argument you can provide .includes().
If you want to begin your search at a particular index
location of your string, simply pass that index to .includes()
as the second argument.
*/
'blah blah blah'.includes('blah', 4) // true
'This sentence contains the word, sentence, twice'.includes('sentence') // true
'This sentence contains the word, sentence, twice'.includes('sentence', 14) // true
// A) Complete the following so it works
var words = yourName + ' is learning some basic JavaScript, at the age of';
var hasAge = words.includes(yourAge); // notice, we can call .includes on a variable too.
console.log(hasAge);
// B) // fix this snippet so it console logs true/false based on an expression using includes.
var hasTheWordLearningInIt = false; // Replace this "false" with a string that works.
console.log(hasTheWordLearningInIt)
// C) Make your own examples of using .includes(). Make at least 3 examples.
// End of Exercise
/**
EXERCISE Four: inspecting strings with .indexOf()
Until now we have be manually inspecting our strings, it might be
useful to be able to inspect strings in a more abstract way.
.indexOf() is a method that will return to you the index of the
first match.
Unlike the above methods which return true or false, .indexOf()
will return a number. -1 if there are no matches or if there
was a match, the index of where the first match was found.
*/
'Blue Whale'.indexOf('Blue'); // returns 0
'Blue Whale'.indexOf('Blute'); // returns -1
/*
The .indexOf() method like the methods above, also accepts
an optional second argument. The second argument allows
you to provide an index, from which to start searching.
*/
'Blue Whale'.indexOf('Whale', 0); // returns 5
'Blue Whale'.indexOf('Whale', 7); // returns -1
/*
Tricky Tricky: If you search for an empty string ''
you will get some interesting results
*/
'Blue Whale'.indexOf('', 0); // returns 0
'Blue Whale'.indexOf('', 5); // returns 5
'Blue Whale'.indexOf('', 10); // returns 10
'Blue Whale'.indexOf('', 11); // returns 10
'Blue Whale'.indexOf('', 1000); // returns 10
// Notice how we only got 10 as output for the last two.
// This is because the last index of the string is 10
// A) Working with Indexes, find the index of the first "e" within this words variable using .indexOf(), save it to a variable
var words = "She sells sea shells down by the sea shore";
// B) Using the variable you just made, check and see if there is a second e somewhere in the string
/* C) Playing with Legos:
Keep building up new variables each with the index of the next e in the words string.
Then using those variables, to build a new string, where each letter is the letter 1 before
each variable's index.
Example:
words: 'the quick brown fox jumped over the lazy dog'
- - -
result: 'hpv'
*/
var words = 'the quick brown fox jumped over the lazy dog';
var eOne = words.indexOf('e');
var eTwo = words.indexOf('e', eOne + 1);
var eThree = words.indexOf('e', eTwo + 1);
console.log(words[eOne -1] + words[eTwo -1] + words[eThree-1] )
// Now you try:
var words = "She sells sea shells down by the sea shore";
// And one more
var words = "somewhere over the rainbow bluebirds fly";
/*
Great Job! that was a little more complicated, but you pulled through!
*/
// End of Exercise
/**
EXERCISE Five: Playing Simon Says, with .repeat()
.repeat() is a simple method, it will construct a new string
with the original string repeated n number of times.
*/
var myString = 'abc';
var str = myString.repeat(-1); // RangeError, the number of times should be 0 or more
var str = myString.repeat(0); // ''
var str = myString.repeat(1); // 'abc'
var str = myString.repeat(2); // 'abcabc'
var str = myString.repeat(3.5); // 'abcabcabc' (count will be rounded down)
// a) Complete the lyrics of this song
var start = 'the wheels on the bus go ';
var hook = 'round and round ';
var end = ' all day long.';
// this should read "the wheels on the bus go round and round, round and round, round and round, all day long"
var completed;
// b) 60's batman intro
var hook ="Na, "
var who = "batman"
// should read "NA NA NA NA NA NA NA NA NA NA NA NA NA NA BATMAN!!!"
var batmanIntro;
// End of Exercise
/**
EXERCISE Six: .slice( beginAt, endAt )
.slice() allow you to copy, a section of a string.
Parameters
beginSlice
The zero-based index (indexes start at 0) at which to begin extraction.
If negative, it is treated as totalLength - your negative beginSlice
(for example, if beginSlice is -3 it is treated as totalLength - 3),
*/
var someString = "the quick brown fox jumped over the lazy dog.";
var someSubString = someString.slice(-4); // "dog."
/*
endSlice
Optional. The zero-based index (indexes start at 0) at which to end extraction.
If omitted, slice() extracts to the end of the string. Like beginSlice, if this
"endSlice" is negative, it would be treated as if your wrote totalLength minus
you specified amount.
*/
var anotherSubString = someString.slice(-4, -1); // "dog"
/*
invoking .slice() will return your specified substring or an empty string ''
if nothing was found
slice() extracts up to but not including endSlice. str.slice(1, 4) extracts
the second character through the fourth character (characters indexed 1, 2, and 3).
As an example, str.slice(2, -1) extracts the third character through the
second to last character in the string.
*/
// Using the text in the someString variable above and .slice() re-arrange the text to
// make 3 new sentences.
var sentenceOne;
var sentenceTwo;
var sentenceThree;
// Perfect, now join all three of these sentences into a new paragraph, and make a new sentence
// one with all the "the" words removed.
var noTheWordsInString;
// Ok now make a new sentence, only this time, switch out the word "fox" for "elephant", and
// the word "lazy" to brave. Then go back and add all the "the" words back.
// Good Job!!!
// End of Exercise
/**
EXERCISE Seven: .startsWith(), Inspecting Strings, from the beginning.
.startsWith( searchString, fromWhere )
searchString:
The characters to be searched for at the start of this string.
fromWhere:
Optional. The position in this string at which to begin searching for searchString;
defaults to 0.
*/
var str = 'To be, or not to be, that is the question.';
console.log(str.startsWith('To be')); // true
console.log(str.startsWith('not to be')); // false
console.log(str.startsWith('not to be', 10)); // true
/**
*/
// End of Exercise
/**
Oh boy! that was a whole bunch of keyboard punching. That's pretty much it for todays
exercise plan.
There is more method you should learn about, if you have the time. For this one I
will point you to a resource where you can learn about it on your own.
Once you have a handle on it, review the above exercises and see if you can adopt one
or two exercises to solve using this new method.
Let's learn about the .trim() method. Goto, [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim]
poke around, and see how it's used, there should be example on that page as you scroll down.
Go ahead and make your own exercises, perhaps 2 or 3 examples.
*/
// Your Examples should go here...
/**
The website I gave you above is a super useful reference for almost everything JavaScript. Bookmark
it as we will be going back tomorrow.
// End of Exercise
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment