Print bookPrint book

Submodule 7.1: The model of event-driven programming

Site: ΕΛ/ΛΑΚ Moodle
Course: Web Design and Digital Content Production
Book: Submodule 7.1: The model of event-driven programming
Printed by: Guest user
Date: Thursday, 21 November 2024, 10:27 PM

Description

  • Function
  • Event
  • External Javascript file
  • JavaScript - HTML methods to execute events

Table of contents

The idea!

The idea is to combine three different files, one HTML, one CSS and a javascript file to create the user-browser interaction shown in the video.

The HTML file

As you can see below, the HTML file has a link to the CSS file on the <head> and a link to the JavaScript file at the end of the <body>.

By referencing the CSS and JavaScript in the HTML we are able to combine these files together!

Moreover, we have use id attributes to the areas that we will need in our JavaScript. With the id we are able to get each of these elements in the JavaScript and tell them what we want them to do. 

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>My first HTML-CSS and JavsScript combination</title>
 
     <link rel="stylesheet" type="text/css" href="css/mystyle.css">
   </head>
   <body>
     <h3>My first HTML-CSS and JavsScript combination!</h3>
     <p><input size="20" id="yourName"> is my name. </p>
     <button id="helloButton" >Tell me Hello!</button>
     <p>Hello <span id="viewName"></span>!</p>
 
     <script type="text/javascript" src="js/myscript.js"></script>
   </body>
</html>

The JavaScript file

In the below code you can see that we have the expression "onclick".

.onclick is an example of a JavaScript event which will be run when the user clicks on something. 

There are a number of JavaScript events. Some examples are:

  • onmouseover ( when the user moves the mouse over an area)
  • onkeydown ( when the user press a key on the keyboard)
  • onload ( when the browser has complete page loading)

Moreover, our code includes a function. Functions are groups of code folded together. The general syntax of a function is :

function name_of_function () {
    your code here
}
name_of_function ();

The last sentence, name_of_function (); is mandatory in order for our code to run. With this expression, we actually "call" our function.

/*This is the myscript.js file in the folder js*/
var theButton = document.getElementById("helloButton");
   theButton.onclick = function (){
   var theName = document.getElementById("yourName").value;
  document.getElementById("viewName").innerHTML = theName;
}

For more information about functions:  https://www.w3schools.com/js/js_functions.asp

For more information about events: https://www.w3schools.com/js/js_events.asp

The CSS file

The below CSS is referred to the HTML element with id "viewName". 

/*This is the mystyle.css file in the folder css*/
#viewName{
  color: red;
}

Exercise

Exercise

  1. Create two new folders in the folder "Exercises". The first one is the "css" folder and the second is the "js" folder.
  2. Open your editor, create a new file and save it as exersice07.1.html in the folder "Exercises". Copy the HTML code and paste it in this file.
  3. Create a new file and save it as mystyle.css in the folder "css". Copy the CSS code and paste it in this file.
  4. Create a new file and save it as myscript.jsin the folder "js". Copy the JavaScript code and paste it in this file.
  5. Save all these files and preview the HTML file in your editor or your browser. Does everything appear right? 
  6. You could add some CSS rules for more attractive appearance.