Tech School

User Tools

Site Tools

Trace: • javascript
en:web_development:text:javascript

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
en:web_development:text:javascript [2021/11/22 11:57]
mag [Editing the document text] 		en:web_development:text:javascript [2023/08/16 09:33] (current)
Line 1: Line 1:
 ====== 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]].
Line 40: Line 42:
   * 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? 
Line 69: Line 71:
   * 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.
Line 78: Line 80:
   * 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">
en/web_development/text/javascript.1637611041.txt.gz · Last modified: 2023/08/16 09:33 (external edit)

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki