Slides badge

JavaScript

Write the code

  • Write the code to make the following nav bar for a website

 

 

 

 

 

 

 

 

 

 

Write the code

<!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>

Write the code

nav ul {
  list-style-type:none;
}
nav ul li{
  float:left;
  margin:5px;
}
nav ul li a{
  padding:5px;
  background-color:#ddd;
}
  

Learning Intentions

  • Learn how JavaScript is used at Higher level

  • Learn to write a simple JavaScript function

Success Criteria

  • I can add JavaScript to a page
  • I can create and use a 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.

National 5 task

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.

National 5 task

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <p onmouseover='this.style.color="red";' onmouseout='this.style.color="black";'>Simple paragraph</p>
  </body>
</html>

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.

<html>
  <head>
    <script src="script.js"></script>
  </head>
  <body></body>
</html>

How does JavaScript work?

  • 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>

How does JavaScript work?

  • 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>

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.

<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>

Mouse events

  • 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 functions

  • 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.

document.getElementById

  • 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";

document.getElementById

  • Let's now use this by putting it in a function.

function changeColour(){
  var e = document.getElementById("main_content");
  e.style.backgroundColor = "#ddd";
}

Adding JavaScript to a page

  • 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>

Adding JavaScript to a page

  • 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>

Making only one section visible

<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.

Task

Presentation Overview
Close
JB
JavaScript
© 2020 - 2024 J Balfour
19:42 | 16-06-2024
Join Live Session
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Generate Quiz
Generate Lesson Plan
Widget Screen
Canvas Controls
Random Selector
Timer
Volume Meter
Binary Converter
Python Editor
Show Knox 90
Provide Feedback
Help
!
Keywords
    DragonDocs Management
    Random selector
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      ×
      Loading
      All slideshow files