Embedded Files
DB section has been updated to add some SQL code.
What is JavaScript
What is JavaScript
JavaScript is a scripting language is a language that supports scripts. Scripting languages are written for a particular environment and JavaScript is a scripting language used on the web. It was originally created by a company called Netscape in the 80’s
JavaScript is called a client-side scripting language because the program is run by the ‘client’ – your Browser. It is NOT Java.
When is JavaScript used?
When is JavaScript used?
JavaScript is used to add interactivity to a webpage, HTML can only define the content of an HTML page.
The video to the right will show that when the different colours of the jackets were clicked on the relevant image was displayed, also when the mouse was hovered over the jacket a zoomed image of the jacket was created.
HTML and CSS provide the content and appearance
JavaScript provides the interactivity.
The video to the right will show that when the different colours of the jackets were clicked on the relevant image was displayed.
When the mouse was hovered over the jacket a zoomed image of the jacket was created.
JavaScript Mouse Example.mp4JavaScript Events
JavaScript Events
An event is when a particular action occurs such as:
The user pressing a key or mouse button
The page has loaded
A form has been submitted
A document has been resized
When one of these actions (events) have occurred then a particular piece of code can be executed.
Process behind a JavaScript event
JavaScript Mouse events
JavaScript Mouse events
We will focus particularly on JavaScript mouse events.
These are events that only happen when the user is using a mouse.
Some of these are described in the table below
More can be found at: http://www.w3schools.com/jsref/dom_obj_event.asp
Some JavaScript Mouse Events
Example of JavaScript Click Event
Example of JavaScript Click Event
JavaScript Code Explanation
JavaScript Code Explanation
When a click event happens on the button with an ID of Click1 the code onclick = "changefirstButton()" calls the JavaScript function called changefirstButton(). This then changes the text on the button to “I changed!!” using the .innerHTML property.
When a click event happens on the image with an ID of Click2 the code onclick = "changeimage1()" calls the JavaScript function called changeimage1(). This then changes the image source from lightoff.svg to lighton.svg using the .src property.
Example of JavaScript mouseover Event
Example of JavaScript mouseover Event
JavaScript Code Explanation
JavaScript Code Explanation
When a mouseover event happens on the text with an ID of mouseover1 the code onmouseover = "mouseovertext()" calls the JavaScript function called mouseovertext(). This then changes the text of the element to “It changed…” using the .innerHTML property.
When a mouseover event happens on the image with an ID of mouseover2 the code onmouseover = "changethebutton()" calls the JavaScript function called changethebutton(). This then changes the text on the button to “And so did the button…” using the .innerHTML property.
Example of JavaScript mouseover and mouseout Event
Example of JavaScript mouseover and mouseout Event
JavaScript Code Explanation
JavaScript Code Explanation
When a mouseover event happens on the image with an ID of togglelight the code onmouseover = "toggleswitchon()" calls the JavaScript function called toggleswitchon(). This then changes the source of the element to lighoff.svg using the .src property. When a mouseout event happens on the image with an ID of togglelight the code onmouseout = "toggleswitchoff()" calls the JavaScript function called toggleswitchoff(). This then changes the source of the element to lighton.svg using the .src property.
When a mouseover event happens on the button with an ID of hoverbutton the code onmouseover = "hoveroverbutton()" calls the JavaScript function called hoveroverbutton(). This then changes the text of the element to “Buy Something” using the .innerHTML property and the .backgroundColor property to red. When an onmouseout event happens on the button with an ID of hoverbutton the code onmouseout = "returnbutton()" calls the JavaScript function called returnbutton(). This then changes text of the element to “Hover Over Me” using the .innerHTML property and the .backgroundColor property back to white.
Page updated
Report abuse