Jenn's JavaLab: November 2010

Saturday, November 20, 2010

Lesson 7: Translating Javanese, Advanced

Functions are a building block of Javascript. A function is a group of commands and statements that can be called by an event or script.

The template for defining a function:

function myFunctionName( [param1, param2...] ) {

/ / Function code goes here

}

And then to call it:

myFunctionName( x, y... );

Some examples of functions I've used are alert() and checkRequired().

Javascript is definitely more complicated than I anticipated. A How-To book and the Internet are your best friends in this matter. If you want to do something with Javascript, chances are someone out there has already figured out how to do it. Instead of reinventing the wheel, look it up.

Of course, it helps to know what you're looking at, which is where the How-To book earns its money. It can give you a quick and dirty crash course so that you know what you're doing when you add someone else's Javascript coding to your site - or may even help you customize it!

Good luck with your Java-ing!

Lesson 6: Translating Javanese, Intermediate

Use the if statement when you want to run a script when a condition is true:

if ( condition ) {

/ / code to execute if condition is true

}

For example, if you asked people to enter their favorite Harry Potter character, and their favorite matched yours, an alert box could pop up saying "Me too! Hermione is wicked awesome!"

The if...else statement is similar, but you can also add script to run if a condition is false:

if ( condition ) {

/ / code to execute if condition is true

}

else {

/ / code to execute if condition is false

}

So in my example, maybe if they enter someone other than Hermione, the alert box says "Meh. Hermione's way cooler."

The switch statement is for when you want to check for multiple values:

switch ( expression ) {

case label1:

/ / code to be executed if expression equals label1

break;

case label2:

/ / code to be executed if expression equals label2

break;

default:

/ / code to be executed if expression is different

/ / from both label1 and label2

}

Note: the break statement stops the flow of the switch statement from continuing its evaluation.

Lesson 5: Translating Javanese, Beginner

Since Blogger has been so uncooperative with coding, and because there's more you can do with javascript than I can possibly show here on my blog, I'm switching tactics. Now I'm just going to explain the different parts of javascript code.

Some Formatting Basics:

Most javascript goes in the document head (which is why I've been having trouble), but sometimes it can go in the body (like the alerts in Lessons 1 and 2).
Javascript is case sensitive, so don't get lazy with the shift key. The convention is to uppercase the beginning of words in a line, like this: var paraCollection = document.getElementByTagName( 'p' );
Semicolons mark the end of statements.
Curly braces enclose sections of a script.
When counting, start at 0, not 1.
White space doesn't matter, so use as much as you want.
Like HTML can have comments with , Javascript can have comments with // at the beginning of one line, or /* */ enclosing a multi-line comment.
You can use ' or ", but make sure you're consistent when pairing them up.

Saturday, November 6, 2010

Lesson 4: Is That Really Java?

I've encountered the same problem with Blogger for this lesson. I did the same thing as the email scrambler, by creating a dummy web page and adapting a file from my Dummies book.

I'm going to build my dad's travel agency website, so I thought form validation would be a super nifty thing to learn. Again, purple text identifies javascript elements. Here's my first attempt at it (minus the validation part, of course - but I can assure you it works on my dummy page!):

<style>

.msg_container { color: #FF0000 }

</style>

<title>Jenn's JavaLab</title>

</head>

<body>

<p>Please provide the following information:</p>

</label><span class=".msg_container" id="customer_name_msg"> </span><br/>

<label>Email: <input type="text" name="email" id="email" onblur="checkEmail( this, 'email_msg' )"/></label><span class=".msg_container" id="email_msg"> </span><br/>

<label>Where you want to go: <select multiple="multiple" id="travel" onblur="checkRequired( this, 'travel_msg' )">

<option value="uk">United Kingdom</option>

<option value="ir">Ireland</option>

<option value="we">Western Europe</option>

<option value="rc">River Cruise</option>

</select></label><span class=".msg_container" id="travel_msg"> </span><br/>

</form>

Lesson 3: E(gg)mail Scramble

Unfortunately, Blogger won't let me add the code I need to show you that I can now scramble emails. So I'll have to tell you how I did it:

I used two files. I took and modified the escrambler.js file from my Creating Web Pages for Dummies book. It was supposed to accommodate emails that don't end in .com, but it wasn't working so I edited it. Now it can only scramble .com addresses, but that's fine for me. I created javalab.html as a dummy web page, which is what you should have been able to see in this post space. Instead, I'll paste it below so you can see. (For all you non-HTML people, I've color-coded the javascript elements as purple.)

<title>Jenn's JavaLab</title>

</head>

<body>

Below I have scrambled my email address with standard and maximum protection, respectively. The real scramble is in the links, but I've shown you what they look like too (spaces added for clarity).

<a href="mailto:Horsemorpher_at_aol.com">Horsemorpher _at_ aol.com</a>

<a href="mailto:Horsemorpher!a!aol!d!!ds!">Horsemorpher !a! aol !d! !ds!</a>

unscramble( 0 );

unscramble( 1 );

</script>

</body>

I tested the links out, and they really work! Cool java beans! Spammers got nothing on me now!

Monday, November 1, 2010

Lesson 2: Link Happy

Here's my second bit of javascript.

Lesson 1: The Coffee Alert System

Click on the picture to see my first bit of javascript!