Submodule 7.1: The model of event-driven programming

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