1 / 26

CMPT 100 : introduction to computing tutorial #4 : javascript

CMPT 100 : introduction to computing tutorial #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

luigi
Download Presentation

CMPT 100 : introduction to computing tutorial #4 : javascript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

  2. 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++

  3. 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

  4. The old mac algorithm

  5. 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?

  6. 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

  7. 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

  8. JavaScript variables

  9. 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

  10. document prompt() function

  11. 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");

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

  13. document write() function

  14. 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

  15. string concatenation using document.write();

  16. 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

  17. changing the background colour . . . or color

  18. 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

  19. Debugging JavaScript

  20. 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

  21. finishing the tutorial exercise

  22. 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.

  23. point to ponder for next week’s tutorial

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

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

  26. questions?

More Related