1 / 59

JavaScript Storyteller Project 2B

JavaScript Storyteller Project 2B. Putting a big project together. D.A. Clements. Objectives. Understand how a larger project is built from the basic programming concepts Understand how to declare multiple functions Understand how to call functions from Event handlers Other functions.

jamil
Download Presentation

JavaScript Storyteller Project 2B

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. JavaScript Storyteller Project 2B Putting a big project together D.A. Clements D.A. Clements, MLIS, UW iSchool

  2. Objectives • Understand how a larger project is built from the basic programming concepts • Understand how to declare multiple functions • Understand how to call functions from • Event handlers • Other functions D.A. Clements, MLIS, UW iSchool

  3. Small programming modules that can be called as needed Functions D.A. Clements, MLIS, UW iSchool

  4. Passing Values to Functions • Definition syntax function name(parameter) { //statement body x = x * parameter; } • Call syntax onclick="name(argument)" D.A. Clements, MLIS, UW iSchool

  5. Caps Function Declaration function caps(word) { } D.A. Clements, MLIS, UW iSchool

  6. Caps function—change to LC function caps(word) { var word = word.toLowerCase(); } User entered: A N N ? A n n ? a n n ? Change to: a n n D.A. Clements, MLIS, UW iSchool

  7. Caps function—change to LC function caps(word) { var word = word.toLowerCase(); var firstLetter = word.charAt(0); } word: a n n D.A. Clements, MLIS, UW iSchool

  8. Caps function—grab first letter function caps(word) { var word = word.toLowerCase(); var firstLetter = word.charAt(0); } word: 0 1 2 a n n String methods treat words like arrays! D.A. Clements, MLIS, UW iSchool

  9. Caps function—save first letter function caps(word) { var word = word.toLowerCase(); var firstLetter = word.charAt(0); } word: 0 1 2 an n firstLetter: a D.A. Clements, MLIS, UW iSchool

  10. Caps function—firstLetterUC function caps(word) { var word = word.toLowerCase(); var firstLetter = word.charAt(0); firstLetter = firstLetter.toUpperCase(); } word: 0 1 2 a n n firstLetter: a D.A. Clements, MLIS, UW iSchool

  11. Caps function—firstLetter UC function caps(word) { var word = word.toLowerCase(); var firstLetter = word.charAt(0); firstLetter = firstLetter.toUpperCase(); } word: 0 1 2 a n n firstLetter: A D.A. Clements, MLIS, UW iSchool

  12. Caps function—rest of word function caps(word) { var word = word.toLowerCase(); var firstLetter = word.charAt(0); firstLetter = firstLetter.toUpperCase(); var restOfWord = word.substr(1); } word: 0 1 2 a n n firstLetter: A lastIndex: 2 D.A. Clements, MLIS, UW iSchool

  13. Caps function—restOfWord function caps(word) { var word = word.toLowerCase(); var firstLetter = word.charAt(0); firstLetter = firstLetter.toUpperCase(); var lastIndex = word.length -1; var restOfWord = word.substr(1,lastIndex); } word: 0 1 2 a n n firstLetter: A restOfWord: n n D.A. Clements, MLIS, UW iSchool

  14. Caps function—return function caps(word) { var word = word.toLowerCase(); var firstLetter = word.charAt(0); firstLetter = firstLetter.toUpperCase(); var lastIndex = word.length -1; var restOfWord = word.substr(1, lastIndex); var cappedWord = firstLetter+restOfWord; } word: 0 1 2 a n n firstLetter: A restOfWord: n n D.A. Clements, MLIS, UW iSchool

  15. Caps function—return function caps(word) { var word = word.toLowerCase(); var firstLetter = word.charAt(0); firstLetter = firstLetter.toUpperCase(); var lastIndex = word.length -1; var restOfWord = word.substr(1, lastIndex); var cappedWord = firstLetter + restOfWord; } word: 0 1 2 a n n firstLetter: A restOfWord: n n cappedWord A n n D.A. Clements, MLIS, UW iSchool

  16. Caps function—return function caps(word) { var word = word.toLowerCase(); var firstLetter = word.charAt(0); firstLetter = firstLetter.toUpperCase(); var lastIndex = word.length -1; var restOfWord = word.substr(1, lastIndex); var cappedWord = firstLetter + restOfWord; returncappedWord; } word: 0 1 2 a n n firstLetter: A restOfWord: n n cappedWord A n n D.A. Clements, MLIS, UW iSchool

  17. How do you call caps()? • That’s all well and good • But how and where do you call a function? D.A. Clements, MLIS, UW iSchool

  18. Functions—the call • Call the function where you need to run it: • Event handlers • In the input field or button or image tag: onclick=“tellStory()”; • Inside functions or scripts • Like tellStory() D.A. Clements, UW Information School

  19. Story story += ‘<p>Once upon a time, there lived a <span class="replace">' + person + '</span> named ' + firstName + '.</p>‘; D.A. Clements, UW Information School

  20. Calling caps() in the story story += <p>Once upon a time, there lived a <span class="replace">' + person + '</span> named ' + caps(firstName)+ '.</p>'; D.A. Clements, UW Information School

  21. Declaring the first function <head> <title>D.A.'s JavaScript Storyteller</title> <script type=“JavaScript”> function tellStory() { //statements } </script> </head> D.A. Clements, UW Information School

  22. Declaring a second function <script type=“JavaScript”> function tellStory() { //statements } function caps(word) { //statements } </script> D.A. Clements, UW Information School

  23. Declaring a third function <script type=“JavaScript”> function tellStory() { //statements } function capitalize(word) { //statements } function a_or_an(word) { //statements } </script> D.A. Clements, UW Information School

  24. Declaring variables <script type=“JavaScript”> var variables; //declare variables //also bring user data over from form function tellStory() { //statements } function capitalize(word) { //statements } function a_or_an(word) { //statements } </script> D.A. Clements, UW Information School

  25. a_or_an function function a_or_an(word) { } D.A. Clements, UW Information School

  26. a_or_an function strategy function a_or_an(word) { // basic strategy: make character lower case, // then see if it's in a string that contains all // of the vowels } D.A. Clements, UW Information School

  27. a_or_an function—vowels array function a_or_an(word) { /* basic strategy: make character lower case, then see if it's in a string that contains all of the vowels */ var vowels = "aeiou"; } vowels: 0 1 2 3 4 a e i o u D.A. Clements, UW Information School

  28. a_or_an function—pass value function a_or_an(word) { var vowels = "aeiou"; var c = word.charAt(0); } vowels: 0 1 2 3 4 a e i o u word: 0 1 2 3 P E a r D.A. Clements, UW Information School

  29. a_or_an function—first letter function a_or_an(word) { var vowels = "aeiou"; var c = word.charAt(0); } vowels: 0 1 2 3 4 a e i o u word: 0 1 2 3 P E a r D.A. Clements, UW Information School

  30. a_or_an function—first letter function a_or_an(word) { var vowels = "aeiou"; var firstLetter = word.charAt(0); } vowels: 0 1 2 3 4 a e i o u word: 0 1 2 3 P E a r firstLetter: P D.A. Clements, UW Information School

  31. a_or_an function—lower case function a_or_an(word) { var vowels = "aeiou"; var firstLetter = word.charAt(0); firstLetter = firstLetter.toLowerCase(); } vowels: 0 1 2 3 4 a e i o u word: 0 1 2 3 P E a r firstLetter: p D.A. Clements, UW Information School

  32. a_or_an function—vowel? function a_or_an(word) { var vowels = "aeiou"; var firstLetter = word.charAt(0); firstLetter = firstLetter.toLowerCase(); var test = vowels.indexOf(firstLetter); } vowels: 0 1 2 3 4 a e i o u word: 0 1 2 3 P E a r firstLetter: p D.A. Clements, UW Information School

  33. a_or_an function function a_or_an(word) { var vowels = "aeiou"; var firstLetter = word.charAt(0); firstLetter = firstLetter.toLowerCase(); var test = vowels.indexOf(firstLetter); if (test < 0) { //something goes here } else { //something goes here } } vowels: 0 1 2 3 4 a e i o u word: 0 1 2 3 P E a r firstLetter: p D.A. Clements, UW Information School

  34. a_or_an function function a_or_an(word) { var vowels = "aeiou"; var firstLetter = word.charAt(0); firstLetter = firstLetter.toLowerCase(); var test = vowels.indexOf(firstLetter); if (test < 0) { return "a " + word; } else { //something goes here } } vowels: 0 1 2 3 4 a e i o u word: 0 1 2 3 P E a r firstLetter: p D.A. Clements, UW Information School

  35. a_or_an function function a_or_an(word) { var vowels = "aeiou"; var firstLetter = word.charAt(0); firstLetter = firstLetter.toLowerCase(); var test = vowels.indexOf(firstLetter); if (test < 0) { return "a " + word; } else { return "an " + word; } } vowels: 0 1 2 3 4 a e i o u word: 0 1 2 3 P E a r firstLetter: p D.A. Clements, UW Information School

  36. a_or_an function function a_or_an(word) { var vowels = "aeiou"; var firstLetter = word.charAt(0); firstLetter = firstLetter.toLowerCase(); var test = vowels.indexOf(firstLetter); if (test < 0) { return "a " + word; } else { return "an " + word; } } vowels: 0 1 2 3 4 a e i o u word: 0 1 2 3 P E a r firstLetter: p D.A. Clements, UW Information School

  37. a_or_an function function a_or_an(word) { var vowels = "aeiou"; var firstLetter = word.charAt(0); if (vowels.indexOf(firstLetter.toLowerCase())< 0) { return "a " + word; } else { return "an " + word; } } vowels: 0 1 2 3 4 a e i o u word: 0 1 2 3 P E a r firstLetter: p D.A. Clements, UW Information School

  38. setupStoryWindow() • Sometimes, this code won't work: var header = '<head><link href="story.css" rel="stylesheet" type="text/css"><title>' +name+ "\'s " + 'Story</title></head>'; • Try this code instead: var header = '<head>'; header += '<link href="story.css" rel="stylesheet" type="text/css"><title>' +name+ "\'s " + 'Story</title></head>'; D.A. Clements, UW Information School

  39. Stitching together strings and variables Concatenating the story D.A. Clements, UW Information School

  40. Adding to story • story = story + a_or_an(fruit); • story += a_or_an(fruit); D.A. Clements, UW Information School

  41. White Space Beware! • One problem with white space • If it's in a string • It can stop your program dead D.A. Clements, UW Information School

  42. A stop-it dead story killer…. HTML JavaScript Fumbles it • Handles white space var story = ""; story = '<p>Once upon a time, there lived a wizened old wizard who lived in the heart of an oak tree.</p> <p>He lived for vast eons in the tree, dreaming, until one day....' D.A. Clements, UW Information School

  43. A stop-it dead story killer…. HTML JavaScript Fumbles it • Handles white space var story = ""; story = '<p>Once upon a time, there lived a wizened old wizard who lived in the heart of an oak tree.</p> <p>He lived for vast eons in the tree, dreaming, until one day....' GAP D.A. Clements, UW Information School

  44. Solution… HTML JavaScript Fumbles it • Handles white space var story = ""; story = '<p>Once upon a time, there lived a wizened old wizard who lived in the heart of an oak tree.</p> <p>He lived for vast eons in the tree, dreaming, until one day....' Close it up! D.A. Clements, UW Information School

  45. Another solution… HTML JavaScript Fumbles it • Handles white space var story = ""; story = '<p>Once upon a time, there lived a wizened old wizard who lived in the heart of an oak tree.</p>'; story += <p>He lived for vast eons in the tree, dreaming, until one day....' D.A. Clements, UW Information School

  46. Relax! No worries! • When you print your new story to the screen with document.write() • The css won't show • Wait for css to show on the last page of the instructions when you build the setupStoryWindow() function. D.A. Clements, UW Information School

  47. Setting those gender pronouns based on user input…. Arrays and conditionals D.A. Clements, UW Information School

  48. Overview • Gender changes based on what the user chose in the dropdown menu • Arrays set up the series of pronouns for each gender • Use conditionals to choose which array to use D.A. Clements, UW Information School

  49. The gender arrays var MalePronouns = new Array ("he","his","him","man","men"); var FemalePronouns = new Array ("she","her","her","woman","women"); var PersonPronouns = new Array ("one","one's","one","person","persons"); var PeoplePronouns = new Array ("they","their","them","people","people"); var gender; D.A. Clements, UW Information School

  50. Gender in your story • Each gender has its own pronoun array • Edit the array to include the words needed by your story • Replace Man with King, Prince, Boy, or Uncle • Replace Woman with Queen, Princess, Girl, or Aunt, etc. D.A. Clements, UW Information School

More Related