Posts filed under ‘JavaScript’

Computer Literacy Program – Class 3 – Programming

Ryan will do more thorough posts about the curriculum, the activities, and the effectiveness of the program when all the classes are complete on ideonexus.com. These are just my own personal recaps and memories.

The third Computer Literacy class was on a topic near and dear to my heart– programming! Since we are doing the Computer Literacy Program out of our home, both dogs have been auditing the classes. But this is the first time a dog has helped with a lecture. Our first stab at explaining Logic Gates produced some pretty confused looks, so we elaborated using examples of people in the room. When the kids got a hang of the concept, we used Henry, who managed to squish himself between the students on the couch, as a quiz.

In case you want to administer a self-test in the privacy of your own home, here’s a reminder of what Henry looks like:

Doggie Bath Time - Henry in Wool Sticks Out Tongue
Henry

“HENRY IS A DOG AND HENRY IS ORANGE” I said.
“FALSE!” All the kids yelled.
“HENRY IS A DOG OR HENRY IS ORANGE”
“TRUE!”

I was quite proud. Henry, on the other hand, was confused. He couldn’t figure out why I was yelling his name. 🙂

To help demonstrate if statements, loops, variables and algorithms, Ryan had five kids each pick from a deck of cards. With a sixth kid acting as an index variable and another as a boolean flag, we walked through a live-action bubble sort in the living room. In the end all five card-carrying kids were lined up in order.

Neither of those activities were my favorite part of the class though! Each child copied a directory of sample HTM pages containing JavaScript onto their computers. We used those examples to explain some key concepts. However, we also wanted to give the kids the opportunity to tweak code for themselves. Lately, two of the boys have been arguing about which NFL star is better– Larry Fitzgerald or Steve Smith. Their banter inspired a very simple JavaScript example:

Computer Literacy - Original Page

Having seen Larry Fitzgerald play when he was at Pitt, I set the page up to use JavaScript popups to compliment a selection of Larry Fitzgerald (‘BOOYAH! You are smart!’) and berate a selection of Steve Smith (‘WRONG! Larry Fitzgerald RULES!!!!’).

As soon as we started working through the examples in the directory, the kids noticed there was a file named “02SteveSmithVsLarryFitzgerald.htm”, so it built up a bit of a buzz with the boys. Before long, we got to that example. The kids opened it up in their web browser and started selecting.

The boy who liked Larry Fitzgerald was one of the first to click. A popup box declared that he was smart. He got a smug smile on his face, sat back on the couch and waited for his nemesis to react. The boy who favored Steve Smith clicked and was not pleased when a popup announced that he was wrong.

Instantly he looked up at me, “Did you do this?!?”

I nodded and he was even more appalled.

“Did you even LOOK at the stats?!?!”

In a heated tone, he started to detail why Steve Smith was superior to Larry Fitzgerald.

The moment could not have been scripted better! Right then, Ryan swooped in and said, “Well, if you don’t like it– let’s change it!”

Everyone opened the source code into WordPad and [with some hints] found the code that was responsible for the taunts. Then each child typed in what he/she wanted to see (One girl who didn’t like football at all changed both of her prompts to read “Who Cares?!?”). They saved their changes, reopened up the page in Internet Explorer and [with some minor debugging here and there thanks to single quotes or inadvertently erased semi-colons….] each child got to see popups that matched his/her views.

Now the boy who liked Steve Smith was much happier.

Computer Literacy - Khalif's First Program
AAAAAAYYYYYY YOU’RE A TRUE NFL FAN!!!!!

ORIGINAL CODE


<SCRIPT Language="JavaScript">
<!--
function respondToAnswer(answer)
{
if (answer=='Smith')
alert('WRONG!  Larry Fitzgerald RULES!!!!');
else
alert('BOOYAH!  You are smart!');
}
-->
</SCRIPT>

CODE REVISED BY A STEVE SMITH FAN


<SCRIPT Language="JavaScript">
<!--
function respondToAnswer(answer)
{
if (answer=='Smith')
alert('AAAAAAYYYYYY YOU\'RE A TRUE NFL FAN!!!!!');
else
alert('BOOYAH, YOU ARE OFFICIALLY A DUMBASS!');
}
 -->
 </SCRIPT>

When I was in college and first dabbling in HTML, I remember how exciting it was to refresh a page in Netscape and see a change that I had made. Even if it was something simple like a background color, it was thrilling. I told the browser to do that. That was my doing!

Being able to watch the kids refresh their pages and see their handiwork come to life…

That was my favorite moment of the night.

November 13, 2009 at 1:44 am 17 comments

JavaScript: Referring to a Button With Spaces in the Name

Dang.  This afternoon, on a short timeframe, I had to override the behavior of an HTML form button.  I couldn’t change the button itself (it was generated by compiled code that I did not have access to), but luckily, I already knew how to programmatically change the onClick event via JavaScript

I pulled up the HTML code and discovered the button name had spaces in it.  How am I supposed to refer to THAT?!?

<input type=”Button” name=”Click On Me” value=”Click On Me” onClick=”window.open(‘https://tgaw.wordpress.com&#8217;, ‘Bottom’);”>

Ordinarily, I would have some harsh criticism for the fool who named that button…  but I think I am said fool.  I think this might be my handiwork from 2001.  🙂

I knew it was destined for failure but, proving I am still a fool in 2007, I did try:

document.MyForm.Click On Me.onclick = function () {alert(‘Hi’);};

Yeah, did not work.  Did a quick Google search, found nothing of value the first two pages, so I went with the elements object which proved to be much more space-friendly.

var btn = document.MyForm.elements[‘Click On Me’];
btn.onclick = function() {alert(‘hi’);};

This may not be the only solution.  It may not be the best solution (discussion welcome).  And I did not test it in anything other than the specific version of Internet Explorer I needed.  But it did the trick.  Also, I did not get heckled by JavaScript, so that’s a positive sign.

Anyway, that’s how I managed to refer to a button that had spaces in the name. 

September 14, 2007 at 11:52 pm 4 comments

JavaScript Duh Moment of the Day – 8/1/2007

When, oh when, will I remember that other form fields don’t enforce the readOnly attribute like text fields do in JavaScript?  I’ve done this before with a list field.  I’ve done it before with checkboxes.  I think I’ve even fallen victim with radio buttons.  And yet, everytime I want to dynamically lock down a field, I forge straight down that path:

document.FormName.DropDownList1.readOnly = true;

Grr.  As soon as I pull up the form and see the editable fields, I know exactly what the issue is.  Nonetheless, each time I do it, my frustration with this particular forgetfulness compounds.  By golly, one day I will get this right the first time!

P.S. In case you are wondering, you can disable the field (at least for IE 6, IE 7 and FireFox 2.0.0.6):

document.FormName.DropDownList1.disabled=true;

August 1, 2007 at 6:12 pm Leave a comment

JavaScript: Regular Expression for Military Time

This post is more for my future reference than you.  Sorry to be so selfish!  🙂

I had a need to use a regular expression via JavaScript to confirm if data entered into a text field was in military time format (e.g. 03:30, 23:59, etc).   With regular expressions, I’m still very much a scavenger.  I do a quick search and “borrow” something similiar to my needs and tweak it as necessary. 

Well most of the examples I found for military time regular expressions were a little suboptimal.  They would do something like this:

/\d{1,2}:\d{2}/

Where they are saying before the colon you can have 1-2 digits and then after the colon, you’d have 2 digits.  But that would permit stuff like 98:86.  So they would have subsequent JavaScript code to parse out the data and make sure the first number doesn’t exceed 23 and then make sure the second number doesn’t exceed 59.  Lame.  I wanted to do it all in one quick regular expression.  This is what I ended up with:

/(00|01|02|03|04|05|06|07|08|09|10|11|12|13|14|15|16|17|18|19|20|21|22|23)[:](0|1|2|3|4|5)\d{1}/

I would not be surprised if Clint can optimize this further (I have solicited his help on regular expressions before)– but for now, it’s sufficient for my needs.  It makes sure the hour ranges between 00 and 23, it ensures a colon is entered, it makes sure the minutes don’t go over 59.

A quick sample of the verification in use:

<HTML>
<BODY>
<SCRIPT LANGUAGE=”JavaScript”>
function CheckMe(myvalue)
{
   var re = /(00|01|02|03|04|05|06|07|08|09|10|11|12|13|14|15|16|17|18|19|20|21|22|23)[:](0|1|2|3|4|5)\d{1}/;
   if (!re.test(myvalue))
    {
       alert(‘false’);
        }
      else
        {
           alert(‘true’);
       }
    return;
}
</SCRIPT>
<FORM Name=”Form1″>
<INPUT TYPE=”Text” Name=”TestMe” SIZE=6>
<INPUT TYPE=”Button” onClick=”CheckMe(document.Form1.TestMe.value);” value=”Click Me”>
</FORM>
</BODY>
</HTML>

March 15, 2007 at 10:06 pm 16 comments

JavaScript: Changing a Button’s onClick Programmatically Client-Side

Today we had a QualTrax customer who wanted to override the onClick call of one of our form buttons and add in a quick popup reminder.  Since this was a standard HTML button in a standard HTML form, it seemed like it would be fairly easy via JavaScript in the screen's flexible footer.  It seemed like we could just do:

document.FormName.ButtonName.onclick="alert('Here is a pop up message');"

However, when I tested that change, the results were a little boring.  The page just sat there idle.  No pop message, no errors, nothing.  So I did some research.

It turns out the onclick property of the button is expecting not a string like I was passing in, but an actual function reference.  A quick revisement produced the desired behavior:

document.FormName.ButtonName.onclick= function() {alert('Here is a pop up message');};

And actually– wrapping it in an impromptu function turned out to be quite handy.  There were already other activities going on with the button's out-of-the-box onClick event that we wanted to preserve.  We were able to just include them into the function:

document.FormName.ButtonName.onclick= function() {alert('Here is a pop up message');OriginalJavaScriptCall1();OriginalJavaScriptCall2();};

Now when they click on the button– they get the pop message and then it moves on to finish the rest of its usual tasks.

We tested this script call successfully in Internet Explorer 6.0 SP2, Netscape 7.2 and FireFox 1.0.4.

June 2, 2006 at 2:10 pm 14 comments


Flickr Photos

3D Printed Products

Tweets