JavaScript

Some possible Outcomes for this Activity

Pod Theme (just testing)

When I say outcomes based learning I mean I start with the outcome of the lesson in mind. I needed a way to count fifty words, so that was my outcome. I then started looking for the tools and knowledge to help me achieve my outcome… I Googled! What terms would you search for? I searched for “JavaScript count words.” I looked at what was the first one on the list that day… Counting Words.

“The first thing I wanted to do was to make the scripting easier to follow, so I ‘humanized’ the variable names…”

<script type="text/javascript">
// double-slashes are for making comments...
// this line will not be processed.
// First I say I'm creating a "function,
// then I name the function, "countWords"
// the brackets are required but can be empty;
// here they declare two variables I will pass into the function later


function countWords(mySummary,displayCount)
{ // you have to have a "curly brace" indicating your function begins here
// the word "var" indicates a variable that expires as soon as we
// reach the closing curly brace at the bottom. This is a good thing if
// we end up having several scripts on one page; we can re-use the same
// variable names more freely…
var whatWasTyped=mySummary.value;
var wordCount = 0;
var diff = 0;
var plural = '';
var myMessage = '';
aTemporaryVariable=whatWasTyped.replace(/\s/g,' ');
aTemporaryVariable=aTemporaryVariable.split(' ');
// every programming language has one or more ways to loop through data...
// the following is called a "for" loop.
for (loopCount=0; loopCount<aTemporaryVariable.length; loopCount++) {
if (aTemporaryVariable[loopCount].length > 0) wordCount++;
diff = Math.abs(wordCount - 50);
plural = (diff == 1) ? '.' : 's.';
if (wordCount > 50) {
myMessage = 'You are over by '+ diff +' word'+ plural;

// the following 'function' is pretty important to learn...
// document.getElementById('id')
// (you substitute the actual id of some
// HTML Element that exists anywhere on
// the current document by plugging its id into this function)
// with it you can manipulate any object (or "element") on the page:
document.getElementById('countExtras').innerHTML = myMessage.fontcolor('Red') ; // 'innerHTML' is everything between the '>'
// of an opening tag and the '<' of its closing tag... e.g.,
// <p id="thisParagraphId">I am the innerHTML and
// if you want to change me set
// document.getElementById('thisParagraphId').innerHTML = 'Change me to
// something different.' <p>
} else if (wordCount == 50) {
myMessage = 'You got it!';
document.getElementById('countExtras').innerHTML = myMessage.fontcolor('Green') ;
} else {
myMessage = 'You are under by '+ diff +' word'+ plural ;
document.getElementById('countExtras').innerHTML = myMessage.fontcolor('Red') ;
}
}
displayCount.value=wordCount;
}
</script>

Then, in the body of the page, you need the <textarea> tag to make the area you’ll type the text into, and a <span> named “countExtras” to hold the text you said you’re putting there: so…
document.getElementById('countExtras').innerHTML = myMessage means…
the variable named ‘myMessage’ goes into the element with id ‘countExtras‘ (we’ll use a ‘span‘). We also put it into a <form> to pinpoint displayCount more easily later (document.countToFifty.displayCount).

<form id="frmCountToFifty" name="countToFifty">
<textarea id="txtAreaSummary" name="mySummary" rows="8" cols="72" onkeyup="countWords(this,document.countToFifty.displayCount);">
</textarea><br />
Word count: <input type="text" name="displayCount" size="5" /><br />
<span id="countExtras"></span>
</form>