CMPT 100 : introduction to computing tutorial #4 : javascript

CMPT 100 : introduction to computingtutorial #4 : javascript By Wendy Sharpe

before we get started . . . • If you have not been to a tutorial at all then you must catch up on your own time • Log onto the lab computer (in Windows) • Create a folder for this tutorial on H:// drive • Log onto Moodle and open tutorial 4 notes • Click on oldmac.html link and save as to your newly created folder • Open Notepad++ • Start – All Programs – Course Specific Applications – Notepad++ • We won’t be using Kompozer but you can use it in conjunction with Notepad++

tutorial 4 overview • Start with an algorithm • JavaScript variables • Using the document.prompt() function • Using the document.write() function • String concatenation • Background colour • Debugging JavaScript

The old mac algorithm

what changes in the song? • Write the title • Write the first line • Write second line • Write “animal” • Write second line pt 2 • Repeat 3 with “sound” x 2 • Write last line • But where do the animals and sounds come from?

refining our algorithm • Write the title • Prompt for animal • Get animal • Prompt for sound • Get sound • Prompt for colour • Get colour • Write the first line • Write second line • Write “animal” • Write second line pt 2 • Repeat 3 with “sound” x 2 • Write last line

where do you put the script? • If you want the JavaScript to load before the rest of the page is needs to be in the <head></head> section • But a script will work in either head or body section of your page • Try both to see how they work • If you want the JavaScript to load before the rest of the page is needs to be in the <head></head> section • We’re going to move our Old MacDonald script template from the body section to the head section

JavaScript variables

naming javascript variables • JavaScript variables are used to hold values or expressions • var animal • Rules for variable names: • Case sensitive • Variables must begin with a letter or the underscore _ character • Our variables in this script will be initialized to an empty string “” • You will get an error if you don’t initialize the variable to the empty string, and then attempt to concatenate another string

document prompt() function

document prompt() function • A command that’s already been programmed into JavaScript • You need to tell the computer that you want to use it General structure: prompt(“this is your physical prompt text”, “default”); • Good programming practice is to always leave a default value in your prompt • Use = to assign the value of the prompt to the variable that you are prompting the user for • E.g., animal = prompt("Enter a kind of animal","duck");

now update your oldmac script • Create the three variables • Write the three prompts for the variables

document write() function

document write() function • Most basic JavaScript function • Prints specified text to the screen • If you want to combine commands, use the . • E.g., document.write(“The stuff in here is called an argument or arguments”); • Arguments can be html tags • Now, put a header of size one inside a write() function • For additional reading: http://www.mediacollege.com/internet/javascript/basic/document-write.html

string concatenation using document.write();

using variables, concatenating strings, and writing to the screen • use + to put two strings together, or a string and a variable • do not put “” around a variable • Watch where you put spaces between strings and variables • E.g., var adjective = “fantastical”; document.write(“My string is ”+adjective+“ and formatted beautifully <br />”); • Now, update the rest of the Old MacDonald song • If you think you’ve got this, open your html document in a web browser

changing the background colour . . . or color

using bgcolor() function • Use with the . • E.g., document.bgColor() = color; • Note the American English spelling of colour, and it will not work if you spell its name incorrectly • Now, change the bgColor = myVariable in your Old Mac script

Debugging JavaScript

script not working? • Common places to look for errors • Did you spell variables correctly? • American English spelling of words like color • Are all semi-colons where they need to be? • Use syntax highlighting to find errors • Did you concatenate your strings properly? • + in the right places • Proper use of double quotation marks • Using the error console in Firefox to find problems with your script • Tools – Error Console • Tip: clear the error console, then force refresh • Errors option will give you information about what line of code has the problem

finishing the tutorial exercise

tutorial exercise • Add a second verse to the song, with a new set of animals from the user. Create new prompts for the second set of animals and use document.write to display the second verse. • Create a new document. Create three prompts to request some information from the user: • Their name • Their favorite color • A number between 1 and 10 • Use the information from the user to create a story. Use document.write to display the story.

point to ponder for next week’s tutorial

A question to ponder for next week’s tutorial . . . • What happens to the Old Mac song if there’s an elephant? Or an aardvark?

an algorithm for an elephant or an aardvark If first character of variable name is = “a” || “e” || “i” || “u” Write “an” else write “a”

questions?

CMPT 100 : introduction to computing tutorial #4 : javascript