!
Write the code to make the following nav bar for a website
<!doctype html>
<html>
<head>
<title>Navbar</title>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="page1.html">Page1</a></li>
</ul>
</nav>
</body>
</html>nav ul {
list-style-type:none;
}
nav ul li{
float:left;
margin:5px;
}
nav ul li a{
padding:5px;
background-color:#ddd;
}
Learn how JavaScript is used at Higher level
Learn to write a simple JavaScript function
Write the HTML for a simple page with a paragraph in it. Put some text into the paragraph.
Write the JavaScript so that when the mouse enters the paragraph the text colour becomes red and when the mouse leaves it again it becomes black.
Write the HTML for a simple page with a paragraph in it. Put some text into the paragraph.
Write the JavaScript so that when the mouse enters the paragraph the text colour becomes red and when the mouse leaves it again it becomes black.
<!doctype html>
<html>
<head>
</head>
<body>
<p onmouseover='this.style.color="red";' onmouseout='this.style.color="black";'>Simple paragraph</p>
</body>
</html>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>At National 5 you would write something like this:
<div onmouseover='this.style.backgroundColor="red";' onmouseout='this.style.backgroundColor="#ddd";'>
This div will change colour when hovered.
</div>This can also be written like this:
<div onmouseover='mouseOver(this);' onmouseout='mouseOut(this);'>
This div will change colour when hovered.
</div>
<script>
function mouseOver(e){
e.style.backgroundColor="red";
}
function mouseOut(e){
e.style.backgroundColor="#ddd";
}
</script><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.
<div onmouseover='mouseOver(this);' onmouseout='mouseOut(this);'>
This div will change colour when hovered.
</div>
<script>
function mouseOver(e){
e.style.backgroundColor="red";
}
function mouseOut(e){
e.style.backgroundColor="#ddd";
}
</script>For Higher, you need to know of a few more 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.
onmousedown - occurs when the user presses a mouse button over an element.
onmouseup - occurs when the user releases the mouse button over an element.
onclick - occurs when the user clicks on an element such as a button or hyperlink.
onmousemove - occurs when the cursor is moving over an element such as an image or menu.
JavaScript is quite a descriptive syntax.
This means that the language features an easy to read syntax where function names often do exactly what they say.
For example, document.getElementById gets an element using it's ID.
Compare that to Python where you have functions like ord.
For Higher, you need to be able to use the document.getElementById function - and it's easy to use too!
var e = document.getElementById("main_content");
e.style.backgroundColor = "#ddd";Let's now use this by putting it in a function.
function changeColour(){
var e = document.getElementById("main_content");
e.style.backgroundColor = "#ddd";
}
Let's now add this to a page:
<!doctype html>
<html>
<head>
<title>JavaScript example</title>
<script>
function changeColour(){
var e = document.getElementById("main_content");
e.style.backgroundColor = "#ddd";
}
</script>
</head>
<body>
<div id="main_content">
</div>
</body>
</html>Now let's call the JavaScript function:
<!doctype html>
<html>
<head>
<title>JavaScript example</title>
<script>
function changeColour(){
var e = document.getElementById("main_content");
e.style.backgroundColor = "#ddd";
}
</script>
</head>
<body>
<div id="main_content">
<button onclick='changeColour();'>Click me</button>
</div>
</body>
</html><button onclick='showSection('section1');'>Show part 1</button>
<section id="section1">This is section 1</section>
<button onclick='showSection('section2');'>Show part 2</button>
<section id="section1">This is section 2</section><script>
function showSection(sectionId){
//Hide them all first
document.getElementById("section1").style.display = "none";
document.getElementById("section2").style.display = "none";
//Now just display the one you wanted
document.getElementById(sectionId).style.display = "block";
}
</script>This is a common coursework task!
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. Use a JavaScript function to perform the action.
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