| Both sides previous revision
Previous revision
Next revision
|
Previous revision
|
en:web_development:text:javascript [2021/11/22 11:56]
mag [Prompt] |
en:web_development:text:javascript [2023/08/16 09:33] (current)
|
| ====== Web Development Lesson 2 - Text ====== | ====== Web Development Lesson 2 - Text ====== |
| ===== Javascript ===== | ===== Javascript ===== |
| | ==== Objectives ==== |
| | In this exercise you'll get your first taste of Javascript and use it to create a simple game, where you get a user to change key words in your story to make it funny. |
| ==== Setup ==== | ==== Setup ==== |
| We'll build on the work you've done so far so if you need to, copy the code below into [[https://jsfiddle.net|jsfiddle]]. | We'll build on the work you've done so far so if you need to, copy the code below into [[https://jsfiddle.net|jsfiddle]]. |
| * Javascript reads the HTML code as an object called 'document'. | * Javascript reads the HTML code as an object called 'document'. |
| * In object-oriented programming, a <html>.</html> is often used to denote a sub-element of the parent object. Javascript uses this convention so 'document.body' refers to the <html><body></html> tag (and everything within it) of the html code. | * In object-oriented programming, a <html>.</html> is often used to denote a sub-element of the parent object. Javascript uses this convention so 'document.body' refers to the <html><body></html> tag (and everything within it) of the html code. |
| * <html>.style</html> works on every element to change something in the element's style attribute. | * <html>.style</html> represents the element's <html>style</html> attribute. |
| * Since we're modifying the 'background-color' element, we add that to the end of the object so the property we want to modify is <html>document.body.style.backgroundColor</html>. | * Since we're modifying the 'background-color' element, we add that to the end of the object so the property we want to modify is <html>document.body.style.backgroundColor</html>. |
| * Notice that the Javascript naming convention is different from HTML. HTML uses all lower case names and joins words with a <html>-</html>. Javascript runs all the words together but capitalises the first letter after a join. | * Notice that the Javascript naming convention is different from HTML. HTML uses all lower case names and joins words with a <html>-</html>. Javascript runs all the words together but capitalises the first letter after a join. |
| * Finally, we want to assign the value 'black' to that style property so we use <html>="black"</html> in the same way in algebra we assign a value to a variable like <html>x = 6</html> | * Finally, we want to assign the value 'black' to that style property so we use <html>="black"</html> in the same way in algebra we assign a value to a variable like <html>x = 6</html> |
| * The word 'black' is surrounded by <html>"</html> to tell Javascript that it's text. | * The word 'black' is surrounded by <html>"</html> to tell Javascript that it's text. |
| * Also notice that the line ends with a <html>;</html>. This tells the browser that the command is complete and the next text it finds will be a separate command. | * Also notice that the line ends with a <html>;</html>. This tells the browser that the statement is complete and the next text it finds will be a separate statement. |
| * Run this to see that it works. | * Run this to see that it works. |
| * When satisfied, let's also add the code to restore the background to white at the end of the code. Can you do that for yourself? | * When satisfied, let's also add the code to restore the background to white at the end of the code. Can you do that for yourself? |
| * Now we need to add the words provided by the user to text itself. | * Now we need to add the words provided by the user to text itself. |
| * The order doesn't matter, so let's start with the noun, which will replace 'ball' in the text. | * The order doesn't matter, so let's start with the noun, which will replace 'ball' in the text. |
| * Add the following code below the third comment. | * Add the following statement below the third comment. |
| <code>document.getElementsByTagName('span')[1].innerHTML = noun;</code> | <code>document.getElementsByTagName('em')[1].innerHTML = noun;</code> |
| * Again, we start with <html>document</html> to indicate we're referring to the HTML code (rather than a variable or object we've created). | * Again, we start with <html>document</html> to indicate we're referring to the HTML code (rather than a variable or object we've created). |
| * We need a way of referring to the word 'ball'. Notice that it's already got its own tag <html><em>ball</em></html>. We can use that. | * We need a way of referring to the word 'ball'. Notice that it's already got its own tag <html><em>ball</em></html>. We can use that. |
| * Finally, we give it the value we obtained from the user in the second step. <html> = noun </html> Notice that <html>noun</html> isn't wrapped in inverted commas because <html>noun</html> isn't text itself. It is the name of a variable that represents text. | * Finally, we give it the value we obtained from the user in the second step. <html> = noun </html> Notice that <html>noun</html> isn't wrapped in inverted commas because <html>noun</html> isn't text itself. It is the name of a variable that represents text. |
| * Run the code as is to check that it replaces 'ball' properly. | * Run the code as is to check that it replaces 'ball' properly. |
| * Not every word we want to replace has its own tag, so lets add <html><span></html> for <html>Sam</html>, <html>tummy</html> and <html>smelling</html>. | * Not every word we want to replace has its own tag, so lets add <html><span></html> for <html>dog</html>, <html>Sam</html>, <html>tummy</html> and <html>smelling</html>. |
| <code><p style="text-align:right"> | <code><p style="text-align:right"> |
| My friend Pablo has a <em style="color:red; font-weight:700">pet dog</em> called <span>Sam</span> who likes to have his <span>tummy</span> scratched. When they go to the park, <strong>he likes to chase a <em>ball</em>.</strong> He rolls in the dirt so Pablo has to wash him when they get home. | My friend Pablo has a <em style="color:red; font-weight:700">pet <span>dog</span></em> called <span>Sam</span> who likes to have his <span>tummy</span> scratched. When they go to the park, <strong>he likes to chase a <em>ball</em>.</strong> He rolls in the dirt so Pablo has to wash him when they get home. |
| </p> | </p> |
| <p style="text-indent:50px"> | <p style="text-indent:50px"> |
| On Sundays they drive to the <sup>mountains</sup> where he runs around <span>smelling</span> the grass and <span style="color:blue;">wagging his tail</span>. He gets so tired that he sleeps all the way home. | On Sundays they drive to the <sup>mountains</sup> where he runs around <span>smelling</span> the grass and <span style="color:blue;">wagging his tail</span>. He gets so tired that he sleeps all the way home. |
| </p></code> | </p></code> |
| * Now let's change all the words. The order doesn't matter, but I'm choosing to do them in order of the tags rather than the order of appearance in the text. | * Now let's change all the words. The order of these statements doesn't matter, but I'm choosing to do them in order of the tags rather than the order of appearance in the text. |
| <code>document.getElementsByTagName('span')[0].innerHTML = animal; | <code>document.getElementsByTagName('span')[0].innerHTML = animal; |
| document.getElementsByTagName('span')[1].innerHTML = name; | document.getElementsByTagName('span')[1].innerHTML = name; |
