Slides badge


Learning Intentions

  • Describe and identify JavaScript coding and related mouse events

Success Criteria

  • I can add JavaScript to a page
  • I can create and use a JavaScript function

What is JavaScript?

  • JavaScript or JS adds interaction to a webpage

  • Interactions such as clicking, mouse over, even when the page loads are done with JavaScript. 

  • Unlike CSS and HTML, JavaScript is a programming language.

  • JavaScript is run in the browser and is therefore a client-side scripting language

Click me

What is JavaScript?

  • JavaScript can also be used for form validation to ensure that data entered into forms is validated

  • Since JavaScript is a scripting language, it is downloaded from the web server then interpreted by the browser before being executed by the browser.

We spoke about client-side scripting languages, but there are also server-side scripting languages that are used to process data on the server rather the client. Server-side scripting can be used to access databases securely and ensure that a user is logged in. It can also validate data, and process data.

more about JavaScript

  • JavaScript is a weakly typed language (like Python)

  • JavaScript is also dynamically typed (like Python)

  • It is not compiled to object-code (or machine code) but is interpreted

  • JavaScript can be used as a server-side language with the node.js framework

  • The most popular JavaScript interpreter is called V8. It is open source and was originally started by Google.

What is JavaScript?

  • JavaScript is one of the three component languages that make up the front end of a webpage, with the other two being HTML and CSS.

  • JavaScript can manipulate elements on the page, including removing them and adding new elements.

  • JavaScript is normally contained in an external file and linked to the page.

<script src="script.js"></script>

Advantages of JS

  • It may be included in the HTML code of a webpage - it doesn't need to run in a separate frame or using a plugin

  • The code can run without an internet connection and doesn't need to communicate with a server

  • It can be used to load portions of the webpage in live time, meaning a part of the page can be loaded without reloading the entire page (think of bidding on eBay)

  • It's a fully featured programming language.

Disadvantages of JS

  • Hackers can use JavaScript to run malicious code on a users computer. Chrome Extensions for example can access everything about a webpage using JavaScript. Users can, however, disable JavaScript for security reasons like this.

  • JavaScript can be used to create annoying popups and adverts on the user's screen

  • JavaScript implementations are different on different platforms and browsers. E.g. Chromium (V8) vs Firefox (SpiderMonkey)

  • JavaScript can be used to create tracking cookies and can be used to track a user's online use.

How does JavaScript work?

  • At National 5 you would write something like this:

<div onmouseover='"red";'>
This div will change colour when hovered.

Types of JavaScript

  • As with CSS, our JavaScript can be:
    • Inline: Beside our HTML for the page content
    • Internal: In a section of the page we reserve for our scripts (between <script> and </script> tags
    • External: In a separate JavaScript document. Save the document with a .js file extension. For example, script.js.  Use <script src="scripts.js"></script> to link to the scripts page

Mouse events

  • Mouse events such as onmouseover and onmouseout are used to trigger an event.

  • These are triggered when the mouse interacts with the element in a specific way.

Mouse events

  • For National 5, you need to know of a few mouse events:

    • onmouseout - occurs when the cursor is moved away from an element such as a button or a heading.

    • onmouseover - occurs when the cursor is hovered over an element such as a button or a heading.

    • onclick - occurs when the user clicks on an element such as a button or hyperlink.

Create an element on a webpage.


Using an internal script tag:


Make the element change the colour of an other element when it is clicked. 


Presentation Overview
© 2020 - 2024 J Balfour
05:15 | 22-07-2024
Join Live Session
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Generate Quiz
Generate Lesson Plan
Widget Screen
Canvas Controls
Random Selector
Volume Meter
Binary Converter
Python Editor
Show Knox 90
Provide Feedback
    DragonDocs Management
    Random selector
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍

      Apply a filter:

      All slideshow files