Lab 3 - JavaScript

"JavaScript enables web pages to be dynamic and reactive to user actions and content transitions. Any time you are visiting a web page and content on that page changes by your actions or simply on its own, it is most likely being done via JavaScript" (Morgan, 2018).

These were the first words provided on our Week 3 Module Lecture. Reflecting on these two sentences, it makes sense why JavaScript is extraordinarily important to learn when developing, creating, and building a Web GIS. This week, I learned how JavaScript accesses the HTML DOM, how to declare and use variables within a JavaScript function, and how to debug a JavaScript function in Google Chrome Developer Tools.

Specifically, in our lab assignment, we were provided a basic, non-interactive CSS template in which we were to format it in a way that when users clicked on the hyperlinked cities of “Paris” and “Tokyo” on the left-hand side, pertaining text would appear on the right-hand side (as shown on the workflow below).

From a technical perspective, the way this is achieved is by creating a function that receives a parameter variable within the script tags of the HTML head section. The function checks the value of the parameter using the pre-defined variables with an if statement. Unique IDs are assigned to the appropriate sections in the body of the HTML, and the onclick event is also appropriately incorporated into the body of the HTML where the a href tags are located. Screenshots of my final web page are provided below:

     

References

Morgan, J. D. (2018). GIS6110: Advanced Topics in GIS, module 3 [lecture and notes]. Retrieved from https://elearning.uwf.edu/index.cfm?