HTML can be very static, which means that it can be limiting, as it will be identical each time it loads. The solution is
dynamic processing. This means the use of processes such as javascript, to allow things to change within the webpage.
For javascript to work, there will need to be some specific information within the body of the HTML. There will need to be an 'input id', which will be referred to within the script, a type so that the computer can understand what you are making, a value, which will be the text/information that will be shown to the user, and a list of functions that will be used, which in the example we were shown was "onclick="btnRed_OnClick()".
Then, you need to insert a <script> element outside of the <html> area within the code of the web page. This will be to create the interaction functionality to the code, where the
Input ID,
function and
value will be very important.
This is what is known as an event handler procedure, which means an event that the input ID it refers to will do, when something is done, which in this case is when the mouse is placed over it.
function btnRed_OnMouseOver(){
btnRed.value = "RED";
}
Within this event handle procedure there is a set order that it must be written;
Object.
Property=
Literal
Which just means..
Input ID .
Outcome will be? =
Answer
So its like saying; I want the red button, to change to.. red. It's just the same, but displayed in code, so that the computer can understand it when viewing the web page.
The order is very important with code, unlike in mathematics where you can say x2+b =23+c3 and can switch them around to get the same result, in coding if you were to put something in the wrong place within the form of code it is being put into, it will just not work.
The Object and Property (as described above), act as the destination, and the Literal acts as the source. So it's like saying Put Red into the Value of btnRed (referring to the piece of code above). Thinking about it this way could easily confuse you and think you need to re-order the code to say "Red"= btnRed.Value, but this would not work, so the order of the arrangement of code is
VERY important for success.
The wavy bracket tags which look like this:
{ } are very important for functions to work within code, you will need to make sure that they start and finish the code otherwise it will not work.
SO, some new key words learnt during week 12's lesson for Soft131;
Property - It's the format for the informatio nthat will be shown, such as "title" or "src"
Keyword - A fixed part of the code, such as "function"
Object - The type of information that is being used, such as "document"
Event - What needs to be done for it to happen, such as "OnMouseOver"
Event handler - The event and outcome from it, "btnRed_OnmouseOver"
