| Both sides previous revision
Previous revision
Next revision
|
Previous revision
|
en:web_development:text:javascript [2021/12/10 15:31]
mag [Javascript] |
en:web_development:text:javascript [2023/08/16 09:33] (current)
|
| * 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. |
| * 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 statement 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"> |
