CS 100 (Learn) — CS 100 (Web) — Module 09
With server-side dynamic pages, the page is modified by the web-server.
With client-side dynamic web pages, the page is modified by the web browser.
In addition to HTML, a web page can contain code written in a programming language. The most popular programming language used within HTML today is known as JavaScript. The client (e.g., the web browser) interprets and then executes the code. JavaScript can be used for a wide variety of applications, but it is especially well suited for manipulating web pages.
Before we see some examples of JavaScript, it is important to highlight that in this course you are not expected to write your own programs in JavaScript.
Consider the following dynamic elements. Try clicking the button a few times.
The button has been pushed 0 times.
To implement these dynamic elements, we need to add three components.
First, we add the HTML that we will be manipulating:
The button has been pushed <span id="counter">0</span> times.
The only special element is a <span> tag with a special ID (counter).
Next, we add the HTML for the button itself:
<button type="button" onclick="increment()"> Click Me! </button>
We haven't seen the <button> element, but it is mostly straightforward.
The only special attribute is a special onclick attribute that specifies that when the button is clicked, the web browser should execute a function named increment.
Finally, we add the JavaScript.
To insert code within an HTML document, the code is put inside of a <script> tag:
<script>
var numclicks = 0
function increment() {
numclicks = numclicks + 1
document.getElementById('counter').innerHTML = numclicks
}
</script>
This code is where most of the work is done. First, we set up a variable named numclicks that will store the number of times that the button has been clicked.
When the page is first loaded, the value of numclicks will be set to zero.
Next, we define the increment function that will be executed when the button is clicked.
This code does two things.
First, it changes the numclicks variable to be one larger.
Then, it instructs the browser to find (get) the HTML element with the ID counter, and then to change its display value to be the same as the variable numclicks.
Remember, we added a <span> with the ID counter; this is the element that will be changed.
The intent of this section is to not make you an expert in JavaScript, but rather to illustrate how web pages can be changed dynamically.
We will provide one additional JavaScript example that uses graphics. Try clicking the button a few times.
For this example, we use a <canvas> element, which is designed for adding graphics in HTML.
We add a 200x200 pixel canvas element with the ID draw_area.
<canvas id="draw_area" width="200" height="200"></canvas>
Next, we add another button that will execute a function named draw_rectangle when the button is clicked.
<button type="button" onclick="draw_rectangle()"> Click Me! </button>
We want our draw_rectangle function to draw a random rectangle inside of our canvas.
To draw a rectangle, Javascript requires a position within the canvas and a width and a height of the rectangle.
In the following code, we first generate random values for the position (x,y), the width, height and colour.
Then, we find the canvas element we named draw_area and draw the rectangle inside of that canvas.
<script>
function draw_rectangle() {
var rand_x = Math.random() * 200
var rand_y = Math.random() * 200
var rand_w = Math.random() * 20 + 2
var rand_h = Math.random() * 20 + 2
var rand_color = '#' + (Math.random() * 0xFFFFFF | 0).toString(16);
var canvas = document.getElementById("draw_area").getContext("2d")
canvas.fillStyle = rand_color
canvas.fillRect(rand_x, rand_y, rand_w, rand_h)
}
</script>
While this code is a bit more complicated, hopefully you can get the gist of what is being done.
You might be surprised at some of the amazing effects that can be made by just drawing some rectangles and circles. This example uses just a few lines of JavaScript.