Last modified:
Monday, 09-Oct-2023 19:17:27 UTC. Maintained by: Elisa E. Beshero-Bondar
(eeb4 at psu.edu). Powered by firebellies. Last modified:
Monday, 09-Oct-2023 19:17:27 UTC. Maintained by: Elisa E. Beshero-Bondar
(eeb4 at psu.edu). Powered by firebellies.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: we don’t permit the use of JavaScript libraries—just using
someone else’s JavaScript and force-fitting it to your HTML—because we want you to write your own code independently
and know what each line of it means. 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 be able to 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.