The previous post demonstrated a simple web page that displayed the heading “Hello”, and it would log the same to the console each time a user clicked on the heading.
This next bit of code is rather simple, but it takes a huge leap forward in terms of capability. It introduces the concept of page interactivity. In other words, a page can have dynamics based on how the user interacts.
<h1 id =”title” onclick=”$(‘#title’).html(‘Goodbye’);”>
In the above example, look at the code after the onclick attribute. It can broken down as follows:
- The dollar sign $, calls on the jQuery library.
- The argument ‘#title’, is a CSS selector that indicates selection of an HTML element by its id. In this case, the id is “title”. While elements can be selected by tag or class, id is normally used to select exactly one element.
- The .html is calling a function to change the text of the element.
- Finally, the ‘Goodbye’ is what the heading changes to. Click on “Hello”, and it will change to “Goodbye”.
In summary, this post demonstrated a simple interactive web page. This concept can quickly be expanded to create rich, interactive web experiences.
Download the jQuery library for free.