Begin this exercise by carefully reading and testing the examples on Obdurodon’s introductory JavaScript Overview page. This was written by my mentor and friend, David Birnbaum, and he used it to introduce JavaScript as a very last stage of coding in a text encoding course in which students learned XML, XPath, XSLT and/or XQuery, HTML and CSS. We are going to use this as a starting point for a good understanding of how JavaScript works on the web. Even if you are already somewhat familiar with writing and working with JavaScript, we want you to read the high-level overview and understand some important concepts, such as:
onload
event (waits for all the contents connected with the
HTML page to load). Note: An alternative you will sometimes see in JavaScript is
DOMContentLoaded
, which some developers prefer if the JS is only
responding to HTML elements. If curious, you can read
more about onload
vs. DOMContentLoaded
events. When you reach Obdurodon’s section titled, Okay, Time to Write your First
JavaScript
, we’d like you to do just that: experiment with what you have learned so far
by writing some JavaScript code to work within a project webpage, or a page you designed
for your personal webspace on newtFire. Your page could be an HTML file you have generated
for your project, or just a random page you write on the fly for the purposes of this
assignment, but should not simply be a repetition of the model on the Obdurodon intro page.
(Adapt what you’ve learned there to experiment a little on your own.) For more examples to
tinker with, have a look at the
JavaScript tutorial pages at w3schools. Seriously try to keep this
simple: just aim to write some JavaScript code that works to make changes when
you interact with an HTML page.
Now, go on to write a separate JavaScript file to associate with your
page. (For reference, you may find our GitHub intro example and Obdurodon’s JavaScript
Exercise 1 helpful.) To associate a separate JavaScript file with an HTML page, set
a script
element within the <head>
element. Add the script
line to be a sibling of any CSS link element for your page. Here's what that looks like for
a javascript file that I've named "interact.js":
<script type="text/javascript" src="interact.js">/**/</script>
Adapt the sample code to fit into the page on which you have been experimenting. Since this file is going on your own GitHub Pages webspace, do NOT use our Canvas filenaming conventions for homework, but instead, add your name in JavaScript comment inside the file (along with any comments about what you want your JavaScript to do, questions, etc.) Give your JavaScript file a name that indicates something about its functionality: what does this file do? (If it is showing and hiding something, you could call it showHide.js like I did in my example.)
When writing JavaScript as a separate file, you need to be explicit about exactly when and
how events must happen (more explicit than when you write JavaScript embedded in HTML
display elements). To begin, you need to set up your event listeners
that
listen for events like the webpage loading in the browser window, and the user clicking on
a particular element or group of elements. Begin with a first event listener that observes
when the page is loaded, and triggers a first JavaScript function that sets other event
listeners on the page. We usually call this first triggered function function
init()
. You could set it up like this, just to get started:
window.addEventListener('DOMContentLoaded',init,false); function init() { alert('The page loaded!'); }
Now, test your HTML file and see if you get an alert event (a pop-up window telling you
The page loaded!
. (We like using alert() events to test when functions are
actually being fired, and you can remove this one when you know things are working.) We
usually set more event listeners
inside function init()
, this
time selecting not the whole window but a specific set of elements. For example, if you
want to trigger an event by having people click on an HTML button element on your
webpage, first make sure you have a button element present in your HTML page. Then, you can
create a local variable inside your function init()
that defines the
button element so you can easily refer to it.
var buttons = document.getElementsByTagName("button")
And next, you can write an event listener in your JavaScript function init() to listen for users to click that button. Note that this variable can return a sequence (or array) of multiple buttons if you have more than one, and JavaScript will require that you be specific about identifying just one of these at at time for setting your event listeners. Here is an example of some code we wrote to plant an event listener two different buttons. Each one is intended to trigger a new function to fire that we would write later in the JS.
window.addEventListener('DOMContentLoaded',init,false); function init() { alert ('Hi there! Looks like the page loaded! Yay!'); var buttons = document.getElementsByTagName("button") buttons[0].addEventListener('click', changeColor,false) buttons[1].addEventListener('click', newFunction, false) } function changeColor() { var colorMe1 = document.getElementById("colorToggle") {colorMe1.style.backgroundColor = "skyblue"; } /* here, style is a *property*: the CSS styling of an element: you can add a CSS property after invoking style. */ function newFunction() { /* We haven't written what is supposed to happen here yet. But this is an example of a JavaScript comment. */ }
For these simple (admittedly silly) events, we have a
little sample posted on the web. You can study our intro example HTML code and its linked JavaScript file on the digitProjectDesign-Hub to see how
we isolate the very first button on the page. Remember that JavaScript, unlike XPath,
understands position (or index
) as beginning with 0, not 1.
See if you can write an event listener to trigger a new function on your own HTML file, working with your own HTML elements. Then script out the new function to make the change. You will likely (easily) have typo issues wtih JavaScript syntax, so be careful about its quirky punctuation conventions. Also, if you are copying and adapting JavaScript code from our examples to your own page, remember to change your variables and event listeners and actions to address the specific code on your site.
The goal here is to write a separate JavaScript file that you associate with your HTML
(instead of applying JavaScript inline). If you have experimented with inline JavaScript as
you were learning, see if you can express that JavaScript in functions in the separate file
you are writing for this assignment. You should adapt this assignment as you wish to write
some JavaScript for one of your project pages that makes something dynamic happen. (Note:
For these first assignments, we want you to write your own code independently to understand what
each line of it means, so we don’t permit the use of JavaScript libraries yet. (It will be important
later to learn how to work with those libraries to understand the basics of simple JavaScript first.)
It is okay, though, to learn from JavaScript others have
written and apply what you are learning to your project needs; in which case we want you to
credit your source in comments in your JavaScript file (marked by //
or within
/* comment */
and explain how you are applying it to your
project.)
For JavaScript reading and experimentation, see:
This assignment involves working within your personal webspace. Push your work to a personal GitHub repo of your choice for experimenting with JavaScript.
script
element. Add, commit, and push
your new JS (and/or any new CSS) to your repo.If you like, include some comments in your HTML and JavaScript files on what we should see and on what your JavaScript should be doing.