PRDV401: Introduction to JavaScript I

JavaScript is a scripting or programming language that allows you to implement complex features on web pages - every time a web page does more than just sit there and display static information for you to look at - displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. - you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies, two of which (HTML and CSS) we have covered in much more detail in other parts of the Learning Area.

• HTML is the markup language that we use to structure and give meaning to our web content, for example defining paragraphs, headings, and data tables, or embedding images and videos in the page.
• CSS is a language of style rules that we use to apply styling to our HTML content, for example setting background colors and fonts, and laying out our content in multiple columns.
• JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code).

The three layers build on top of one another nicely. Let's take a simple text label as an example. We can mark it up using HTML to give it structure and purpose:

<p>Player 1: Chris</p>

Then we can add some CSS into the mix to get it looking nice:

p {
 font-family: 'helvetica neue', helvetica, sans-serif;
 letter-spacing: 1px;
 text-transform: uppercase;
 text-align: center;
 border: 2px solid rgba(0,0,200,0.6);
 background: rgba(0,0,200,0.3);
 color: rgba(0,0,200,0.6);
 box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
 border-radius: 10px;
 padding: 3px 10px;
 display: inline-block;
 cursor: pointer;
}

And finally, we can add some JavaScript to implement dynamic behavior:

const para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
 let name = prompt('Enter a new name');
 para.textContent = 'Player 1: ' + name;
}