JavaScript

Lesson starter - JavaScript quiz

Learning Intentions

Understand the term client-side framework
Be able to identify key code in JavaScript
Understand why people disable JavaScript and the risks of it

Success Criteria

I can explain what a framework is
I can explain what certain parts of JavaScript can do
I can identify how to debug JavaScript
I can explain why people disable JavaScript and what developers can do to mitigate this

JavaScript libraries and frameworks

A framework is a means of simplifying code.
It makes it easier and quicker to write code that would otherwise have taken a long time to write.
However, they also often include code that will never be used as they try to tailor the code for everyone. This slows down the loading of the page.
We've already spoken about libraries in the same way, including jQuery and MooTools.

Where do we put JavaScript on our webpage?

The footer

The head

The body

The middle

For this course and National 5 Computing Science, you'll always need to answer this question with "the head" even though as you've seen throughout this course, the general concensus across web developers is to put this at the end of the body!

Where do I put JavaScript? 🤔

<!DOCTYPE html>
<html>
  <head>
    <title>Webpage with JS</title>
    <script>
      var e = document.getElementById("clickme");
      e.addEventListener(function(){
        alert("You've clicked me!");
      })
    </script>
  </head>
  <body>
    <p>
      This webpage has JavaScript. Click the button to say something.
    </p>
    <button id="clickme">
      Click me
    </button>
  </body>
</html>

Where do I put JavaScript? 🤔

<!DOCTYPE html>
<html>
  <head>
    <title>Webpage with JS</title>
    <script>
      var e = document.getElementById("clickme");
      e.addEventListener(function(){
        alert("You've clicked me!");
      })
    </script>
  </head>
  <body>
    <p>
      This webpage has JavaScript. Click the button to say something.
    </p>
    <button id="clickme">
      Click me
    </button>
  </body>
</html>

Where do I put JavaScript? 🤔

<!DOCTYPE html>
<html>
  <head>
    <title>Webpage with JS</title>
  </head>
  <body>
    <p>
      This webpage has JavaScript. Click the button to say something.
    </p>
    <button id="clickme">
      Click me
    </button>
    <script>
      var e = document.getElementById("clickme");
      e.addEventListener(function(){
        alert("You've clicked me!");
      })
    </script>
  </body>
</html>

Quick reminder: linking to an external JavaScript file

<!DOCTYPE html>
<html>
  <head>
    <title>Webpage with JS</title>
  </head>
  <body>
    <p>
      This webpage has JavaScript. Click the button to say something.
    </p>
    <button id="clickme">
      Click me
    </button>
    <script src="myscript.js">/script>
  </body>
</html>

What is the main benefit of linking an external JavaScript file?

Uses less space

It increases loading speed by including all the JavaScript in the HTML

It's always optimised automatically

Browsers can cache the JavaScript file

Some JavaScript code - document.getelementbyid

document.getElementById is one of the oldest and simplest ways of selecting an element in JavaScript.
In the code above you'll notice there div element has the ID tag of img1.
You'll also notice that we're using document.getElementById with the img1 ID.

<div id="img1">
  <img src="me.png" alt="Me">
</div>

<script>
	var element = document.getElementById("img1");
</script>

Some JavaScript code - conditional statements (if)

If statements, as shown on line 2, allow us to check things such as if the element's display property is set to block.
If it's not, it sets it to block.
If it is, it sets it to none.

var element = document.getElementById("photo");
if(element.style.display != "block"){
  element.style.display = "block";
} else{
  element.style.display = "none";
}

Switch

Some JavaScript code - conditional statements (loops)

A conditional loop allow us to loop whilst a condition is true.
In JavaScript, we use a while loop.
This could be waiting until the user clicks a button or it could be looping while a number is less than another.

var i = 0;

while (i < 5){
  alert(i);
}

Run

Some JavaScript code - Fixed loops

A fixed loop allow us to loop a set number of times. These can be useful if you want to make something do something so many times.
In JavaScript, we use a for loop.
In the example below we display all items from a list of products we have for sale.

var items = ["Apple", "Banana", "Cherry", "Date"];
for (i = 0; i < 4; i++){
  alert(items[i]);
}

Run

Finding and fixing errors

Debugging is the process of finding and fixing errors. Whilst the process of debugging is out with the course content, you do need to know how to find errors:

$("#loginButton").on("click", function(){
  var password = prompt("Please enter your password");
  var correct = "password125";
  if(password == correct){
    alert("Password correct. Welcome!");
  } else{
    console.log(password + " " + correct);
  }
})

Which of the following allows us to debug JavaScript code?

document.write

console.write

console.log

document.log

Use console.log to see the result of something that will not appear on the page to the end user and use the inspect tool to see the result.

Dangers of client-side code

JavaScript allows us to add interactivity to our website, so why do people disable it? Well, there are dangers to when using JavaScript or other client-side code:
- Cross-Site Scripting (XSS) - scripts or data from another website are injected into the current website.
- Data theft - it's very easy to write a simple keylogger that can be used to steal passwords or other data. Cookies can also be used even if the user doesn't want them storing data about them.
- Data manipulation - changing words or data on page to annoy the user
- Ad injection - throwing annoying adverts into a webpage is common (even plugins can do this)

<style>
  .dropdown:hover{
    display:block;
  }
</style>
...
<script>
  $(".dropdown").on("mouseover", function(){
    $(this).fadeIn();
  });
  $(".dropdown").on("mouseout", function(){
    $(this).fadeOut();
  });
</script>

Getting round JavaScript being disabled on a page

If JavaScript is disabled, we should still aim to provide the same, or at least a similar, experience for all users:
- One way of doing this is using CSS backups.

<style>
  .dropdown:hover{
    display:block;
  }
</style>
...
<script>
  $(".dropdown").on("mouseover", function(){
    $(this).fadeIn();
  });
  $(".dropdown").on("mouseout", function(){
    $(this).fadeOut();
  });
</script>

Getting round JavaScript being disabled on a page

Another option is to add the <noscript> tag.

<noscript>
  Sorry, you have JavaScript disabled. Therefore this
  part of the page will not be displayed.
</noscript>

Which of the following is a danger of JavaScript?

it can store preferences

it can inject code

it can be used to create animations

it can slow down the computer

Code injection is one of the biggest dangers of JavaScript since you don't know what the code contains.

Processing power and JavaScript

It's very important to consider the end-user's computer.
For instance, someone with an iPad from 2010 will not be able to run the latest version of JavaScript because their browser will not have been updated to do this.
The main reason browsers aren't updated like this is because the older devices haven't got the processing power to cope with the new features.

Processing power and JavaScript

It's very important to consider the end-user's computer.
For instance, someone with an iPad from 2010 will not be able to run the latest version of JavaScript because their browser will not have been updated to do this.
The main reason browsers aren't updated like this is because the older devices haven't got the processing power to cope with the new features.

But that's not all!
Even with modern computers you need to think about how much processing power is available.
A desktop computer has much more processing power available to it than a smartphone.
Not only that, running lots of JavaScript will drain the battery of the device.

So whenever we are using JavaScript, keep it limited to what you need and use tools like minifiers to make it more efficient. Think about your users and their devices.

Visit NPAWEBINTERACTIVEMULTIMEDIAASSESSMENTLINK

Answer the questions in this on your own and consider it to be like a test

If you finish that, continue to work on your personal website

Task

Plenary

Pick one of the following and write some JavaScript that shows it in use.

Conditional loop

Fixed loop

If statement

(open a new JavaScript file in Visual Studio Code or WebStorm and enter your code in there)

Presentation Overview

JavaScript

20:43 | 18-03-2025

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:

Apply theme

Blue theme

White theme

More effects:

Dark Mode

Bold Text

Slide Zoom

All slideshow files