In this lesson we will write some simple, one row JavaScript codes, included in our HTML tags, to get used how JavaScript works. JavaScript is a programming language, HTML and CSS are not. We will see the differences as we go along.
What is a program?
A program is a list of instructions to be executed by the computer.
A programming language uses:
- variables – to reference, store and change data;
- statements – the actual instructions – to change data, execute calculations/operations;
- decisions – to choose between instructions based on well-defined conditions;
- loops – to repeat instructions as many times as needed.
JavaScript is event oriented: the program code is linked to events that happen in the browser.
New events in this lesson:
onclick – this event is triggered if the user clicks on the HTML element, to which it is paired.
onmouseover – this event is triggered if the user places the cursor over the HTML element, to which it is paired.
onmouseout – this event is triggered if the user removes the cursor off the HTML element, to which it is paired.
JavaScript is object oriented: the data are properties of an object and the instructions methods of an object.
New object in this lesson:
document – this object means the actual document opened. Through this element we can reach out to every object in the document.
this – this is not actually an object, but a reference to the current object. You will see examples of its usage.
New method in this lesson:
document.getElementById(the id comes here) – with this method of the document object we can ask for a reference to an element in the document using its id. The ids, we used so far to reference them from CSS files, should be unique so if we ask for them, the reference should be unique.
New properties of the document:
innerHTML – this property targets the content of the elements.
style – this property is used to change the element’s CSS. We can’t reach the settings from the CSS files, so we set new values, like writing in the HTML tags’ style property (inline styling).
Guidance:
- Objects can be retrieved by tag name or class, but then we get more objects with the same tag name or class. As result, we will have a list of them. We will learn later how to handle a list of elements.
- Every HTML attribute can be referenced as property from JavaScript. (for example: src from an image etc.) If the original CSS property name has more than one word, the JavaScript property is written without a dash (ex. background-color is written backgroundColor). This is called camel case writing (you can read more about it, here: https://en.wikipedia.org/wiki/Camel_case).
- JavaScript is case sensitive, so if a code does not work, check the spelling and case of the letters first.
Example on using the innerHtml property:
In this example we added an event to the button, inside the HTML tag. So the event is triggered when the button is clicked.
The instruction completed is a change to the HTML content of the button. This reference means that we want to change the content of the same HTML tag we are inside of/to which we apply the event.
The text to be written on the clicked button is put in double quotation marks, but at the same time, the whole code is in simple quotation marks too, which is why we used different type of quotation marks, otherwise the code would break and would not work.
Example on getElementById:
In this example we used the document object’s getElementById method to search for the HTML element with the id pic, to get a reference to it. We know it is a picture, so we can use its src property and change the picture showing on the page. Refreshing the page the original picture comes back. We will learn to set it back from code in another lesson.
Example on the events onmouseover and onmouseout:
In this example, we can use the this reference, because the event and the change is related to the same HTML element.
We can reference the HTML property src as the JavaScript objects property in the program code.
If we use only onmouseover, then the picture will not change back. So, if the cursor is over the picture we see the picture with the book, removing the cursor we will have the boot.
Example on changing CSS settings:
In this example there are two events related to a section. On clicking the text gets red, by setting the color property. This property is originally not set.
When moving the cursor over the box the background color changes. The property is slightly written differently, but the effect is the same.
<button onclick= " this.color='red' ">Click!</button>
<img onmouseover="this.src='02.jpg' " src="01.jpg">
https://www.w3schools.com/js/js_intro.asp;
https://www.w3schools.com/js/js_events.asp;
https://www.w3schools.com/js/js_htmldom_html.asp.
