Javascript is a form of client-side scripting, meaning scripting that runs on the client rather than the server. The client is the computer system (including tablets and mobile devices) which is running the web browser.<\/p>\n\n\n\n
Client-side scripting can be used to make web pages change after they arrive at the browser.<\/p>\n\n\n\n
Client side scripts can also be used to perform validation of data entered into forms.<\/p>\n\n\n\n
Client-side scripts are:<\/p>\n\n\n\n
interpreted by the browser<\/li>
executed on the client system<\/li><\/ul>\n\n\n\n
JavaScript is the main client-side scripting language that can be used to create, delete, and manipulate HTML elements. You can type the Javascript code between script tags.<\/p>\n\n\n\n
Extensive JavaScript code is often contained within its own file and linked to a webpage. This way the same code can be called from multiple webpages. <\/p>\n\n\n\n
Some common tasks that can be performed using JavaScript relate to how the webpage responds to action taken by the user using their mouse or touchscreen.<\/p>\n\n\n\n
These are called mouse events.<\/p>\n\n\n\n
Using JavaScript, functions are created that will change what appears on screen depending upon what the user does with the mouse.<\/p>\n\n\n\n
There are a number of mouse events that are used in HTML code to trigger the execution of JavaScript functions.<\/p>\n\n\n\n
onmouseout<\/li>
onmouseover<\/li>
onmousedown<\/li>
onmouseup<\/li>
onclick<\/li>
onmousemove<\/li><\/ul>\n\n\n\n
onmouseout<\/h2>\n\n\n\n
The onmouseout event occurs when the cursor is moved away from an element such as a button or a heading.<\/p>\n\n\n\n
Example before mouse out<\/figcaption><\/figure><\/div>\n\n\n\n
Move your mouse into the square and then out of it.<\/p>\n\n\n\n
Example after mouse out <\/figcaption><\/figure><\/div>\n\n\n\n
The background colour of the square should change to red.<\/p>\n<\/div>\n<\/div>\n\n\n\n
Here there is an event listener attached to the demo div. <\/p>\n\n\n\n
onmouseout=\"mouseOut()\" <\/code><\/pre>\n\n\n\n
onmouseout <\/strong>is the name of the listener, it triggers an event On the action of the Mouse going Out of the element. The value in the quotes is what happens on this event. In this code it calls the function called mouseOut<\/strong>, just like in Python you can tell it is a function call by the brackets. The brackets are empty so we aren’t passing any values into it.<\/p>\n\n\n\n
In the Javascript mouseOut function we only have one line:<\/p>\n\n\n\n
This is setting a new value to an entry in the Document Object Model (DOM) of the page. When a web page is loaded, the browser creates a Document Object Model of the page. This tree like structure contains all the elements of the page nested within each other, these elements might have attributes like href, height, id, class and so on, and values like the text contained in a link or paragraph.<\/p>\n\n\n\n
Example DOM structure<\/figcaption><\/figure><\/div>\n\n\n\n
Using the getElementById Javascript function you can access the matching element in the DOM structure.<\/p>\n\n\n\n
Using these objects, you can access attributes assigned to them such as style. Then within that view and alter the backgroundColor property of it. Notice the naming is different from CSS; backgroundColor versus background-color.<\/p>\n\n\n\n
If the object is an image, you can alter the image used with the src property. For example, to change the source image to test-image-large.png you could use:<\/p>\n\n\n\n
The onmouseover event occurs when the cursor is hovered over an element such as a button or a heading. Add the following Javascript to either your HTML file or separate script file.<\/p>\n\n\n\n
function mouseOver() {\n document.getElementById(\"demo\").style.backgroundColor = \"blue\";\n}<\/code><\/pre>\n\n\n\n
Then update your demo div to include this new event:<\/p>\n\n\n\n
Reload your page. Now when you mouse goes over the square the background colour should be set to blue, it will still turn red when you move out of the square.<\/p>\n\n\n\n
onmousedown <\/h2>\n\n\n\n
The onmousedown event occurs when the user presses a mouse button over an element. Add the following Javascript to either your HTML file or separate script file. <\/p>\n\n\n\n
function mouseDown() {\n document.getElementsByTagName(\"main\")[0].style.backgroundColor = \"#123456\";\n}<\/code><\/pre>\n\n\n\n
Then update your demo div to include this new event: <\/p>\n\n\n\n
Save your code and reload your page and then click inside the square. The background colour of the main element should change to a dark blue.<\/p>\n<\/div>\n\n\n\n
\n
Example after triggering the onmousedown event<\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n
The getElementsByTagName function allows you to find all the DOM elements that match the tag name provided. This returns an array even if there is only a single match such as in this example where we look for the main tag.<\/p>\n\n\n\n
Because we are only interested in the first element of the array we access it with the 0th<\/sup> index just as we did in Python.<\/p>\n\n\n\n
The onmouseup event occurs when the user releases the mouse button over an element. Add the following Javascript to either your HTML file or separate script file. <\/p>\n\n\n\n
function mouseUp() {\r\n document.getElementsByTagName(\"main\")[0].style.backgroundColor = \"#bc7887\";\r\n}<\/code><\/pre>\n\n\n\n
Then update your demo div to include this new event: <\/p>\n\n\n\n
Save the files and reload the page and then click inside the square. The background colour of the main element should change to a dark blue when you click the mouse button down, but then change to a dark pink when you release it. <\/p>\n<\/div>\n\n\n\n
\n
Example of onmouseup event<\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n
onclick<\/h2>\n\n\n\n
The onclick event occurs when the user clicks on an element such as a button or hyperlink. It is one event triggered after the mouse has been clicked down and then released. Add the following Javascript to either your HTML file or separate script file. <\/p>\n\n\n\n
function mouseClick() {\r\n var menu_matches = document.getElementsByClassName(\"menu1\");\r\n var counter;\r\n for (counter = 0; counter< menu_matches.length; counter++) {\r\n menu_matches[counter].style.backgroundColor = \"red\";\r\n }\r\n}<\/code><\/pre>\n\n\n\n
Then update your demo div to include this new event and a list underneath: <\/p>\n\n\n\n
Save the files and reload the page and then click inside the square. The list elements that had the list1 class now have a background colour.<\/p>\n<\/div>\n\n\n\n
\n
Example after onclick event<\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n
In Javascript you can assign a variable using the var keyword.<\/p>\n\n\n\n
var counter;<\/code><\/pre>\n\n\n\n
The value can be set when the variable is assigned or at a later time.<\/p>\n\n\n\n
A for<\/strong> loop in Javascript has 3 parameters in the brackets that control how many times the code will go through the loop.<\/p>\n\n\n\n
for (counter = 0; counter< menu_matches.length; counter++) {\n \u2026\n}<\/code><\/pre>\n\n\n\n
The first part sets an initial value to a variable.<\/p>\n\n\n\n
counter = 0<\/code><\/pre>\n\n\n\n
The second part compares the variable against another variable or value each time around the loop to see if the loop should continue. This needs to return a Boolean true or false.<\/p>\n\n\n\n
The third part changes the value of the variable at the end of the current pass through the loop.<\/p>\n\n\n\n
counter++<\/code><\/pre>\n\n\n\n
onmousemove<\/h2>\n\n\n\n
The onmousemove event occurs when the cursor is moving over an element such as an image or menu.<\/p>\n\n\n\n
onmousemove happens whenever the mouse moves over the element whereas onmouseover only happens when the mouse enters the element or any child elements. Add the following to you Javascript:<\/p>\n\n\n\n
Save your code and reload the page. Check what happens when you move the mouse around in the square. The square should start changing height as you move the mouse within it.<\/p>\n\n\n\n
Like in Python you can concatenate two or more strings together with a + sign.<\/p>\n\n\n\n
Unlike Python, Javascript is less strict and will automatically convert the integer into a string when it is concatenated with a string.<\/p>\n\n\n\n
Printing<\/h2>\n\n\n\n
Browsers have a set of built-in functions that include the ability to print the screen. You can call that with the window.print() line.<\/p>\n\n\n\n
Javascript is powerful. You can do a lot with Javascript.<\/p>\n\n\n\n
You can validate forms to make sure that all fields have been filled out but no field has had too much data dumped into it which might identify a robot.<\/p>\n\n\n\n
You can collapse and expand various elements on the page based on where the user is looking.<\/p>\n\n\n\n
You can make feature rich interactive galleries that improve the experience for the user far beyond what is capable with just HTML and CSS.<\/p>\n\n\n\n
But…<\/p>\n\n\n\n
Javascript and any other client-side scripting is inherently unreliable.<\/p>\n\n\n\n
You don\u2019t know if a user, their browser, their anti-virus software, their company policies or anything else have disabled or limited client-side features. Because of this you cannot rely on client-side scripting to work.<\/p>\n\n\n\n
Javascript should be used to improve the experience but the experience should not rely on it.<\/strong><\/p>\n\n\n\n
![\"Example](\"https:\/\/blogs.glowscotland.org.uk\/es\/public\/software\/uploads\/sites\/4063\/2023\/03\/23132214\/js1.png\")
![\"Example](\"https:\/\/blogs.glowscotland.org.uk\/es\/public\/software\/uploads\/sites\/4063\/2023\/03\/23132246\/js2.png\")
![\"Example](\"https:\/\/blogs.glowscotland.org.uk\/es\/public\/software\/uploads\/sites\/4063\/2023\/03\/23133115\/HTML34.png\")
![\"Example](\"https:\/\/blogs.glowscotland.org.uk\/es\/public\/software\/uploads\/sites\/4063\/2023\/03\/23154135\/js3.png\")
![\"Example](\"https:\/\/blogs.glowscotland.org.uk\/es\/public\/software\/uploads\/sites\/4063\/2023\/03\/23154643\/js4.png\")
![\"Example](\"https:\/\/blogs.glowscotland.org.uk\/es\/public\/software\/uploads\/sites\/4063\/2023\/03\/23155438\/js5.png\")