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.
This is called a polyfill.
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.

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

When you have done that, you should begin to work through the JavaScript workbook.

Task

Presentation Overview

JavaScript

13:46 | 29-04-2024

Join Live Session

Start Remote

Save Progress

Slideshow Outline

Presenter Mode

Widget Screen

Canvas Controls

Random Selector

Timer

Volume Meter

Binary Converter

Python Editor

Show Knox 90

Provide Feedback

Help

Keywords

DragonDocs Management

Random selector

Remove after pick

Sections

Binary conversion

Denary to binary conversion

Binary to denary conversion

Use two's complement

Slideshow Outline

Help

The following are key shortcuts for using DragonSlides and reveal.js.

Key combination	Action
→, PAGE DOWN, SPACE	Next slide
←, PAGE UP	Previous slide
SHIFT + →	Last Slide
SHIFT + ←	First slide
B	Whiteboard
W	Widget Board/White Screen
C	Toggle Notes Canvas
DEL	Clears Whiteboard/Notes Canvas
S	Show Presenter Mode
SHIFT + D	Toggle Dark Mode
H	Goes to the Home Slide
META + P	Show Print options window

In order to use the 'Start Remote' feature, you'll need to download JB Slide Controls from the Apple App Store. Once you have this you'll be able to control the slides using the app from you Apple Watch.

Feedback 👍

Accessibility

Apply a filter:

Dark Mode

Bold Text

All slideshow files