JavaScript Methods

Posted on by tchastkavich

Shape of the Day:

  • JavaScript Methods
  • Create your own page and play with JavaScript

Website of the Day:

http://cant-not-tweet-this.com/ – How NOT to use JavaScript….

1. JavaScript Methods

  • Click here to download the code and open it in a brackets file. Work through the examples by reading the comments and changing the code so that the buttons manipulate the HTML elements and CSS properties.

2. Create your own page and play with JavaScript

  • Now that you are more familiar with the getElementById() method, you can use it for some new events.
  • Open and set up a new file in Brackets and ensure you have two different headlines and an image. You will be manipulating these three elements.
  • Ensure that you pay attention to your quotation marks as single and double quotations will be used here.
  • For the first headline, make it say Hello Terry Fox! and change it to Happy Wednesday! when the mouse is pointed over it.
  • Give the <h> tag an id of intro
  • Add 
    • onmouseover='getElementById("intro").innerHTML= "Happy Wednesday!"'
  • For the second headline, make it say Copy me! as you are going to make it change from black to red when it is copied.
  • Give the second <h> tag an id of copy
  • Use the oncopy event with the getElementById() method and the style property to change the colour.
  • Lastly, try switching your image with this image:
  • Start by giving your image the id of switch.
  • After the first src attribute [your image], add 
    • onclick='getElementById("switch").src="https://www.sd43.bc.ca/school/terryfox/Style%20Library/Images/LogoHeader.png"'
  • If you ever get stuck, ensure you refer to the first brackets file you worked on today.

3. Tomorrow we will be working on the HTML canvas tag

  • This allows you to add animations and dynamic graphics to a webpage using HTML5 and JavaScript.
  • Get ready to use the canvas tag by adding it to your webpage with an id of myCanvas. Use this ID in the style tag and use CSS to give it a width of 400px,  a height of 300px and a solid black 1px border.