This week saw us trying out some JavaScript looping
Read through a little intro and try out the exercises I've uploaded here:
http://bathurst-tafe.nsw.edu.au/~pshanks/javascript/loops-exercises/
Image: 'loopy'
http://www.flickr.com/photos/86176561@N00/273326027
Inclement whether prevents my attendance in person, but I'm with you in (e)spirit.
Today we're looking at conditional statements in JavaScript (if/then/else). These are described in the handout, page 14. Unfortunately that's not quite the whole story - you really need to know a bit about multiple if statements (and their clever cousin, the switch statement). See the web cheat sheet for a fine explanation/demonstration.
If you're keen to become a real JavaScript geek you might also want to know about the 'conditional operator' described about half way down this page by the Washington center for environmental visualisation(?).
Fully read up?
Try these interesting exercises (in groups, or as a hard old loner)...
Open http://bathurst-tafe.nsw.edu.au/~pshanksjavascript/conditionals-exercises/conditionals1.html in your favourite editor.
In this exercise, you'll write a function called guessAge() that, oddly enough, lets the user guess your age. The user's guess is in document.ageForm.ageGuess.value. The guessAge() function should pop up an alert box telling the user whether or not s/he guessed correctly.
Open http://bathurst-tafe.nsw.edu.au/~pshanksjavascript/conditionals-exercises/conditionals2.html in your favourite editor. You can copy your completed conditionals1.html to conditionals2.html if you'd like to edit your existing work rather than starting from scratch.
In this exercise, you'll modify your age guesser from exercise #1 to provide some additional feedback to the user. The guessAge() function's alert box should let the user know if s/he guessed correctly, if you're younger than the guess, or if you're older than the guess.
Open http://bathurst-tafe.nsw.edu.au/~pshanksjavascript/conditionals-exercises/conditionals3.html in your favourite editor.
Everyone knows that flowers need water to grow. This HTML page has a watering can and a flower. This particular flower needs to be watered three times before it can grow. When the user clicks on the watering can, it should change to the image shower.jpg. After one second, the watering can should stop watering the flower. (We provide this code for you; read the comments in the program carefully.) The third time the user waters the flower, the flower should bloom. (There's an image of a bloomed flower in flower.jpg.)
suddenly realised that I've been very remiss about posting relevant JavaScript links here. Time to make amends.
First up, we've been working from a document I found on the interweb: a JavaScript tutorial. Thanks to the wonders of modern science this plain web page is now available as an open office document (37k) or a microsoft word doc (180k).
So far we've worked through the following sections:
1. Introduction
2. Embedding JavaScript into your HTML document
3. Variables
3.1. What are Variables?
3.2. Values of Variables
3.3. Data Type Conversion
4. Literals
4.1. Integers
4.2. Floating-point literals
4.3. Boolean literals
4.4. String literals
4.5. Escaping characters
5. Arrays
6. Operators
6.1. Selected assignment operators
6.2. Comparison operators
6.3. Selected Arithmetic Operators
6.4. Logical Operators
7. Using JavaScript Objects
8. Functions
8.1. Defining a Function
8.2. Calling a Function
to celebrate our combined CertIV SQL class I've created a new blog just for our database subject. You can see it and read all about our subject on:
http://certivsql.blogspot.com/
Yahoo. Back for a new season of coding!
This semester we're going to spend a fiar slab of time learning structured query language (SQL to its friends).
To get into this we need to install a local web server, database server and database manager. Luckily someone has already put a package together for us to download and install. Xampp (38 MB from Apache friends) has everything an aspiring SQL guru could want.
After downloading and installing start the xampp control panel (it will be something like: C:\xampp\xampp-control.exe) and start up apache and mySQL by clicking on the start button for each.
Now open your web browser and test the installation by entering http://localhost into the address bar. You should be seeing something like this (you may need to click on the 'English' link first)...
click on the phpMyAdmin link in the tools section of the left hand menu to start up our database manager.
Before we can start entering SQL statements we need to create a new database to work with.
In this screenshot I'm about to create a new database called fred (you can click on the image for a larger version).
Now that we have a database we need a couple of tables and some data to play with. I've put together a little file to make this as panless as possible. Download ICAU4205A.sql and save it on your computer.
Once you've got it, click on the 'Import' tab at the top of the phpMyAdmin screen, browse to the file and click on the 'Go' button on the bottom right of the screen.
phpMyAdmin should do its magic and report back that "Import has been successfully finished, 16 queries executed." You should also see 5 new tables listed in the left hand column.
Time to get down to business.
For the next couple of weeks we're going to work through James Hoffman's Introduction to SQL
This week, everything up to the section on joins. Click on the 'SQL' tab at the top of the phpMyAdmin page and type in each of the examples in the document. Play a bit, have fun, and tune in here next week for another exciting installment...
Image: 'OINK! OINK!'
http://www.flickr.com/photos/49968232@N00/51679641
Spot the fault...
Assessment for the subject: Locating equipment, system and software faults will consist of a document listing various JavaScript faults, how they present themselves, what caused the error and how to fix it.
Run through this list of debugging challenges and choose 2 or 3 from each section: Lexical Errors; Syntactic Errors; Execution Errors; Logic Errors. Write up a short description of the problem (how it presented itself), what you found and how you fixed it. Screenshots would be handy.
We finished automating processes last week, looking at breaking down larger programs into sub-routines and procuedures. Next week we'll put the final nail in with a short quiz.
We followed that up with a look at functions and objects in JavaScript (which wasn't all that interesting), and revisited variables and data types (which was more relevant, if no more gripping)
We finished up with another look at locating equipment, system and software faults specifically, task 2: obtaining fault finding tools. To be honest, I'm not all that happy with these course notes (the readings are fine, but the activities seem too nebulous) - so I'm going to revert back to my original plan for this subject - concentrating mostly on debugging code, with a passing nod at equipment and some discussion of systems.
So, for task 2 I'd prefer that people investigated options for debugging JavaScript - either in the browser or using a stand-alone solution. Write up a blog post that discusses the options available for your platform of choice. Don't forget to include a description of that platform - versions and types of operating system and browser (if applicable).
The report should be about 500 words in length and should be ready for comment by next week.
Speaking of next week - we're going to make a start on 'Run standard diagnostic tests'. I had planned on testing web site performance, but have been told that the Cert III I.T. class will be attending the class too - and they've got no prior experience with web technologies, so we might need to take a different approach. Given that we've only got two weeks to cover the subject this will be a busy lesson - so don't be late :-)
Last week saw us spiraling out of control... exploring loops.
Try these revision questions, and a new, improved cloze test on while loops.
We also learned how to use JavaScript to validate a form on a web page, looking at form fields and loops in the process!
Finally, we started on the first task for Locate equipment, system and software faults... Identifying appropriate information gathering techniques
revising last week's programming lessons...
... also: for those of you keen to start on the module 'Locate equipment, system and software faults' I've uploaded some material for you to play with. See http://bathurst-tafe.nsw.edu.au/~pshanks/ICAT4221A/index.htm (or http://192.168.201.2/~pshanks/ICAT4221A/index.htm if you're trapped inside the firewall)
Today's epic journey started in the plains of if-then-else before ascending the foothills of datatypes. It finished with an attempt on the icy peaks of JavaScript selections. This was a tough climb, but what a view there is from the top!
Believe it or not, this is as high as we're going to ascend. Next week we'll stay at this altitude for a short while, exploring the whacky world of loops before descending back to sea level.
Some calisthenics for your brain...
1. Cut and paste the JavaScript code from the 'she's apples' entry below and then format it so each block of code is correctly indented.
2. Try out the Cloze test for IPO Models
3. Attempt the 'Develop an algorithm' quiz
4. Click randomly on terms and definitions in the JavaScript cloze test
Today we looked at developing algorithms.
This was followed by a quick look at JavaScript in JavaScript Basics, Part 1.
Extending the lesson a little we came up with the following super-apple-eating algorithm...
<script type="text/javascript">
var apples = 5;
alert('there are currently ' apples ' apples');
var eat = prompt('How many apples would you like to eat?', '1');
if (parseInt(eat))
{
if (parseInt(eat)>apples)
{
alert("don't be greedy!");
} else {
apples -= parseInt(eat);
if (apples > 0)
{
if (apples == 1)
{
alert('There is only one apple left!');
} else {
alert('Now there are only ' apples ' apples!');
}
} else {
alert('no more apples for you!');
}
}
} else {
alert('there are still ' apples ' apples');
}
</script>
Time to reinforce those little lessons we learned last week. Try out these questions on trainingo2.net, and then take a few minutes to pit your wits on the cloze test for pseudocode.
This week we continued our exploration of the programming landscape.
After a quick bash at a cloze test on syntax, we created and worked through a new page on algorithms (including the creation of our first bit of javascript).
Wasn't that all fun? \*(^_^)*/
To recap what we covered last week in our first automate processes lesson, jump on over to trainingo2.net and try out this quick quiz
I know you're all very busy, but if you get some time you should check out the resources on Smashing Magazine's Best Of April 2008 page - some of this stuff is gold.
Hope you all had a good break - I certainly did. It was totally unsullied by any menial tasks like marking web development assignments - but don't panic, I'll have some nasty comments for you by next week... I promise :-)
This week we're launching into programming proper, working through Robyn's excellent notes and converting them to web pages, which should give us plenty of html and css practice along the way. So, create a week1a page with some extra scripting and compiled languages on the relevant table, also create a home page linking to your week1a page and upload both new pages to your web space on the bathurst-tafe sever.
Images can be created from screen captures (hoversnap might be handy for this) or you can find creative commons licensed images via flickrcc (don't forget to add the attributions at the bottom of your web page)
Today we're looking at a CSS template: blueprint
and an online grid editor for the same.
^ This is what you want to see. To test a page that's been uploaded to the server you can use the validation options on the firefox web developer toolbar (found under 'tools').
You can also go straight to the W3C validation page. Note the tabs on the page which allow you to enter a URL, upload a file or cut and paste code.
Finally, if you enjoyed yesterday's PMOG mission, there's another one on validation that you could take.
At the end of the day I'd like you to validate one or more pages on your Bathurst TAFE web site and include the little validation link that the W3C give out when you pass their test.
