JavaScript

Spot the mistakes

Spot the mistakes in the HTML

<!doctype html>
<hmtl>
  <head>
    <h1>Sample webpage</h1>
  </head>
  <body style="colour:green;">
    <title>My website</title>
    <para>This is a paragraph of text. <a href=page1.html>This is a link</a>.</para>
  </body>
</hmtl>

Spot the mistakes

Spot the mistakes in the HTML

<!doctype html>
<hmtl>
  <head>
    <h1>Sample webpage</h1>
  </head>
  <body style="colour:green;">
    <title>My website</title>
    <para>This is a paragraph of text. <a href=page1.html>This is a link</a>.</para>
  </body>
</hmtl>

Learning Intentions

  • Understand how web development is broken down into different areas: content, design and interaction

  • Be able to use JavaScript to perform basic interaction

Success Criteria

  • I can use JavaScript to add interaction to a website

What is JavaScript?

  • JavaScript adds interaction to a webpage
  • We spoke about interaction in a previous lesson and how it is important to ensure that a website both serves its original purpose and to ensure that the website is usable.
  • For example, webpages without interaction, for example some of the bad example websites that we looked at, suffer from a lack of interaction and therefore do not often entice users into using the website.
  • Since this slideshow is built with HTML, CSS and JavaScript, the button below will respond when clicked on.

Click here

What is JavaScript?

  • JavaScript is the final step to building the ‘front-end’ of a website. We have so far looked at HTML and CSS.
  • JavaScript is a programming language much like Python or Visual Basic and differs a huge amount from HTML and CSS which are mark-up languages.
  • JavaScript is all about adding interactions to webpages. Interaction allows webpages to respond to events and allow pages to update dynamically.

What does JavaScript look like?

...
<p onmouseover="this.style.colour='red';" onmouseout="this.style.colour='black';">
...

What does JavaScript look like?

<!doctype html>
<html>
  <head>
    <title>Page with JS</title>
  </head>
  <body>
    <h1 onclick="this.style.color='red';"></h1>
  </body>

</html>

What does JavaScript look like?

<!doctype html>
<html>
  <head>
    <title>Page with JS</title>
  </head>
  <body>
    <h1 id="main_heading"></h1>
    <script>
      var heading = document.getElementById('main_heading');
      heading.addEventListener('click', function(e){
        alert("Hello world!");
      });
    </script>
  </body>
</html>

JavaScript

  • JavaScript is one of the world’s most popular languages due to the fact that every website out there supports and will often include it.
  • To include JavaScript in our HTML page, we just use the <script></script> tags. Anything with in there is JavaScript code.
  • What you have seen so far is just a scratch on the surface of JavaScript, there is a ton more out there to learn and every day JavaScript gets more and more features.

JavaScript functionalities

A lot of plugins out there use JavaScript, HTML and CSS. For example:

Problems with JavaScript

  • JavaScript is great but in web development it also comes with several issues.
  • When JavaScript is loaded, it forces the computer to perform all the calculations before the HTML is finished loading and can slow the loading of a webpage
  • Not all browsers are equal, Chromium-based browsers such as Brave, Opera, Vivaldi and Microsoft Edge all feature more JavaScript than browsers such as Internet Explorer and then Firefox supports somethings that Chromium-based browsers do not support (the same goes with CSS as well).

Problems with JavaScript

  • JavaScript is an additional file to download when the page is loaded.
  • Too much JavaScript running on a page can also drain the battery life of a mobile device such as a smartphone or notebook computer.

How much is too much?

  • On my website there is around 120KB of JavaScript and that is after minification (compressing the code so that it removes things such as unnecessary space and comments that help make our code more readable) and yet my website loads in < 1 second. 120KB of JavaScript equates to about 40,000 lines of code (not all written by me!)
  • Further to that, power consumption is very low on my website.
  • So too much? Well, one site suggest that 500KB (or around about 130,000 lines of code is too much and starts to have an effect).

 

JavaScript as a backup

  • JavaScript can also add features to a webpage that are available in CSS in some browsers but not others.
  • For example, back in early 2009, there was absolutely no support in CSS for making two columns side by side (although nowadays this is very easy to do) but with JavaScript this was possible and also very easy to do. 

 

Today we are going to learn how to use JavaScript to a very good standard. The amount of JavaScript we are going to learn will put us in a good place for the future and will make us start to think in a computational way.

In this lesson, we are all going to work through the W3 Schools tutorial to help us achieve this.

Task

Task

JB
Web Design and Development : 8.1 JavaScript
© J Balfour
Tools