!
Describe and identify JavaScript coding and related mouse events
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
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.
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.
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.
<html>
<head>
<script src="script.js"></script>
</head>
<body></body>
</html>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.
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.
At National 5 you would write something like this:
<div onmouseover='this.style.backgroundColor="red";'>
This div will change colour when hovered.
</div><script src="scripts.js"></script> to link to
the scripts page
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.
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.
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.
DragonSlides and jamiebalfour.scot are copyright © Jamie B Balfour 2017 - 2024, 2010 - 2024. Content is copyright © Jamie B Balfour