Change HTML and CSS and Fall in Love with JavaScript :)

30.05.2016 |

Episode #8 of the course A quick introduction to JavaScript by Rich Armstrong

 

So we’ve covered some basics, but it’s mostly data, and this will most likely get boring fairly quickly once you’ve got the hang of it. So let’s start working with HTML and CSS! Yay!

To change HTML, we need to get the particular node and ask it to change something by changing one of its properties or calling one of its methods. To explain this best, we should create a new file and save it as js-html-css.html, populate it with the code below, save it, and then drag the file into Chrome.

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>JS, HTML, and CSS</title>
 <style>
  .change-me{
    color: red;
  }
  .big{
    font-size: 40px;
  }
 </style>
</head>
<body>
 <h2 class="change-me">JS, HTML, and CSS</h2>
 <p id="some-id">This is the first paragraph</p>
 <p class="change-me">This is the second paragraph</p>
 <p>And this is the third</p>
 <a href="#">Click me!</a>

 <script>
  var nodeById = document.getElementById('some-id');
  var nodesByTagNameArray = document.getElementsByTagName('p');
  var nodesByClassNameArray = document.getElementsByClassName('change-me');

  console.log('nodeById: ' + nodeById);
  console.log('nodeById',nodeById);
  console.log('nodesByTagNameArray: ', nodesByTagNameArray);
  console.log('nodesByClassNameArray: ', nodesByClassNameArray);
 </script>
</body>
</html>

Open the console and see what’s there. You’ll see a different way of logging information to the console here. You’ll see that we’ve got commas between data. This is so the console can show us exactly what node we’re talking about (hover over it and see the node in the document get highlighted) and give us a lot of details about it, which we can then access! There are a few other ways to get nodes, but we’ll use these for now. Once you have a node, you can get and set its information. Storing nodes in variables makes working with them easier, as the syntax for selecting them is quite long. Try and see what info you can get—or set—with a node. Remember that if you’ve selected by tag name or class name, you’ll have an array to deal with. So either loop through them or access a particular node with nodesByTagNameArray[1]. Add this to your js-html-css.html file, save, and refresh the page in Chrome:

nodeById.innerHTML = 'Hello there <em>good</em> sir!';
nodesByTagNameArray[1].innerText = 'How are you today??';
nodesByTagNameArray[1].classList.add('big');
nodesByClassNameArray[0].style.textTransform = 'uppercase';
document.getElementById('link').href = 'http://mrra.co';
document.getElementById('link').target = '_blank';
document.getElementById('link').setAttribute('data-clicked', true);

Aha! This is fun, right? We can change inline CSS attributes, add and remove CSS classes, change HTML and text, and add attributes! Right click on the Click me! link and choose to Inspect. Have a look at the node’s attributes, and then have a look at the rest of the document tree in the elements panel. Compare it to the source. JavaScript is making live changes to our document, which is just amazing! If you combine classes with animations and transitions, things can get really interesting!

Remember: Download Google Chrome for Desktop and Sublime Text 3 to make the most of these lessons. And remember to open up your JavaScript Console: Alt+Cmd+J (OS X) or Alt+Ctrl+J (Windows).

 

Recommended book

“Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript” by David Herman

 

Share with friends