Essay Help Services

Week 6 Lab exercises JavaScript Basics | Java

Home Recent Questions Week 6 Lab exercises JavaScript Basics | Java

Task 1: Dynamic User Interaction using JavaScript

Dynamic behaviour can be added to presentation of a Web page using CSS, e.g. with pseudo classes like hover, or through JavaScript. Here we will use JavaScript.

Step 1: Create an HTML file with user interaction

First we will create a simple HTML page that can take some user input. In a new folder lab06, create a Web page called clickme.html with the appropriate metatags, title, heading and paragraph as follows:



Typically to display a button we would use a form with an <input type="submit">, but here we will use a <button> element instead, because we are not sending anything to the server.

Step 2: Create a link to a JavaScript file in the HTML file

To provide separate behavior to a Web page using a JavaScript file, the Web page must have a reference to the JavaScript file (in a similar way it needs references to CSS files). Add the following line in the <head> section to create a link to the (as yet non-existent) JavaScript file called ‘io.js’ in the same folder as the HTML page:
Step 3: Create an external JavaScript file

Create the JavaScript file io.js using NotePad++ or similar text editor

1. Create a JavaScript template

Create a copy of the following JavaScript code template replacing the text in italics as appropriate:
2. Create a function that does something:

The pattern for a function definition is as follows:

/* Short comment on what the function does goes here*/ function myFunction(parameters) {
// ...your JavaScript code to handle the event goes here }

We will now use this pattern to display a prompt box. This box will take an input from the user then assign to a string. We will then display that string in an alert box.

Just above the init() function in your JavaScript file, create a function with no parameters called promptName() and insert the following lines between its braces:
3. Register the function to respond to events in the browser:

The function you have written does not do anything yet because nothing is calling it. We will get our JavaScript to respond to an onclick event when the HTML button element with attribute id="clickme" is clicked.


Similar Posts

Search Here

Order Now

Latest Reviews

Facebook

Payments And Security