I’m going to take some time off from CSS, I feel at this point I have at least a good foundation. My South Ataria Island website has been very helpful in building a knowledge base, but right now I feel it is more of a design project than a conduit that is helping learn more CSS skills. I still have more to learn and improve on in CSS (e.g. navigation, grid framework, etc.) so I’ll be back to it soon. However at this time I need to take a break from it and get on with something new.
I’ll be using the W3Schools JavaScript tutorial for my basis. Unlike CSS and HTML, I have no prior knowledge of JavaScript so I will start with the barest of essentials! OK, so let’s go!
Example 1:
The first code W3Schools start you with is a code to press a button to display the time:
JavaScript:
<button type=”button” onclick=”document.getElementById(‘test’).innerHTML=date()”>Click to Display Date and Time</button>
HTML:
<p id=”test”>I wonder what time it is?</p>
So what do I think I understand about this code?
- <button> is HTML code for standard gray button
- ‘onclick’ is for a click of the button to initiate an action
- “test” is the name and it links the JavaScript to the HTML
- innerHTML appears to indicated within the webpage
- ‘date’ appears to be some native JavaScript code for date/time display
Next I realized the <p> was just a normal element, so I went ahead and added some style to it to see how it would all behave.
<p id=”test” style=”width: 100px; border: 1px solid yellow; padding: 10px; margin-left: 20px;”>I wonder what time it is?</p>
It worked just as I expected, a yellow box around the text. As I identified in an earlier post, there is no issue with having a div and an id together in a tag. You can see the result here.
Example 2:
The next example was using JavaScript to change the font size:
JavaScript
<button type=”button” onclick=”document.getElementById(‘test-2’).style.fontSize = ’30px'”>Change Font Size</button>
HTML
<p id=”test-2″>Jason Learns to Code.</p>
What is different here is that instead of ‘innerHTML=’ we have ‘.style.fontSize=’. This code is easy and simple to understand. I wanted to again run a test and add some style to the example:
HTML
<p id=”test-2″ style=”color: purple; size: 16px;”>Jason Learns Code.</p>
Again, no problem here! I set a baseline size in the CSS of 16px and then use JavaScript to increase the font size to 30px via a button. Now with ‘style’ and/or CSS you can alter more than just font size so I wondered if I could change background color, border, font color, etc.
Example 3
JavaScript
<button type=”button” onclick=”document.getElementById(‘test-3’).style.backgroundColor=’red'”>Change Background to Red</button>
<button type=”button” onclick=”document.getElementById(‘test-4’).style.color=’orange'”>Change text to Orange.</button>
<button type=”button” onclick=”document.getElementById(‘test-5’).style.textDecoration=’none'”>Remove Text Decoration.</button>
HTML
<p id=”test-3″ style=”background-color:blue;”>Change background to Red Color.</p>
<p id=”test-4″ style=”color:blue;”>Change text to Orange Color.</p>
<p id=”test-5″ style=”text-decoration:underline;”>Remove the underline.</p>
Style worked for all the above examples just like it worked for font size. You can view the results here.
Example 4
The next W3Schools example was to use JavaScript to make something disappear:
Javascript:
<button type=”button” onclick=”document.getElementById(‘test-6’).style.display=’none'”>Hide the text!</button>
HTML
<p id=”test-6″>This text should go away!</p>
This was pretty easy, it is basically just using ‘style’ again just as a above (see results here). At this point I was pretty tired of using ‘button’ – I wonder…would this code work in a div? Let’s test:
JavaScript
<div style=”width:100px; color:#fff; background-color:#000; padding:10px; cursor:pointer;” onclick=”document.getElementById(‘test-7’).style.display=’none'”>Hide the text!</div>
Yes! It works with a div, you can view it here. I starting to begin to see how these small examples work. I could create another button for example to make text appear, or to hide or show an image, or a div, etc. I’ve also noticed some very important caveats about how to write this code:
- Case sensitivity: ‘.style.display’ works while ‘.style.Display’ doesn’t. Same for ‘.textDecoration’ vs. ‘textdecoration’ – the later doesn’t work. It appears to me the first letter after the period must be lowercase and if it is two words the second must by capitalized. Another example: ‘.getElementById’ works but ‘.getelementbyid’ does not.
- Quotation Marks: ‘fontSize=35px’ won’t work but ‘fontSize=’35px” will work.
The one common part of the code is ‘document.getElementById(‘sample’).’ so that is the one bit of code I definitely need to memorize. Hopefully I’m off to a good start.