More buttons, animation, and color (pt. 1)

Style, color, and animation are pertinent regarding the composition of an interactive and brilliant HTML page. while the markup and script that we talk about today is far from elegant it certainly is interactive.

We will continue to explore the document object model and how it can change items and actions of an HTML page like making a heading change and animating a cube to move from the top left of a container to the bottom right.

We start initially with the linking of both the style sheet and the script to the HTML

We then move on to setting up the heading to change background color and font by linking the ID of an h2 tag.

Then we add a button to change the style.color which will change the color of the font, we change the font type by using style.fontFamily, we change the size of the font via style.fontSize, and lastly we change the background color of the h2 tag with style.backgroundColor to cyan. This is what the button looks like when we are done:

with this button and the h2 tag we set up prior, along with the css style we setup, which looks like this:

The h2 heading goes from this:

to this:

Now we move on to the animation.

We first start like how we did previously, by making an h2 tag. we then make a button that activates the function myMove() which moves the the div tag we create later by pressing the button.

we now create two div tags one as a container and one as the object we will animate. These two divs, the button, and the h2 were coded as such:

we then program the function myMove().

Animation is not quite as simple and to be quite honest I am still very poor at it currently as I myself need to practice more. Essentially it boils down to taking frame intervals and iterating on those frames to change the position of an object, hence the document “object” model.

with this we will have a cube move from top left to bottom right like so:

And that is how we learned to animate within HTML and JavaScript through the document object model or DOM.

DOM changes Script content

The document object model or “DOM” can do many things within markup and script, chiefly It sends values to the javascript when called and returns it after the script has run.

The basics of the DOM are already talked about in a previous post so lets show another field the DOM method operates in.

For our Week 11 lectures in Programming I, at Kansas State University we used the DOM method to demostrate how the DOM makes changes to content, like turning a upset “sad” face image that is linked through wikimedia to a smiling “happy” face by clicking a button.

The button is programmed with an ID that links “data01” from the HTML to the Javascript and is programmed to execute the function “changeContent()” when the button is pressed through an onclick event. The function “changeContent()” does exactly how it reads by taking the linked picture and changing the data of that link to the link of a different picture. The code of how this is done is shown here:

In the first picture you can see the button whose “onclick” event calls the function that changes the faces. Located in the second picture you can see the HTML that calls the first picture.

You can see within this function that “//lesson three…” changes the source of img01, which is the frowning face, to a source of a smiling face. The function changes other aspects of the HTML as well, however, the images changes was the most influential part of this lesson and the easiest to digest therefore I thought it would be more interesting to read. Here is the end result:

then the button is pressed,
and you receive a different header and a smiley face.

Control Flow

Control flow is defined by Wikipedia as “In computer science, control flow (or flow of control) is the order in which individual statements, instructions or function calls of an imperative program are executed or evaluated.”

This is important in programming, without it code will not execute properly.

In week 10 of programming class we went over the DOM and demonstrated how the Document Object Model works within coding via what is called a “while” loop. While loops are fundamental in programming as they offer the ability to process data and and run loops with the data via arrays and strings.

Above is an example of the code used to demonstrate a while loop, the code starts with a function, then an array of cars (Honda, Toyota, Bmw, Volvo, Saab, Ford) then initiates i, then starts the While loop to iterate one word after another until all are shown.

You are able to see the document object model in work by way of the last bit of text before the final curly bracket. The “document.getElementById(‘DataTwo’).innerHTML = text;” is the code one would use to properly link script values back to the HTML and vise versa. That is exactly why the DOM is so important, without it there would be no communication.

Beneficial Resources for students of programming

For those who seek to expand upon their growing knowledge of programming there lies several options. For instance if one seeks to learn more mark-up language like HTML there is several websites dedicated to the fundamentals extending into the intricacies of the language. One such site is run by the essential governing body of the Web, the organization is known as the World Wide Web Consortium. The World Wide Web Consortium’s website www.w3.org offers news and information about the consortium as well as noting that they are “an international community that develops open standards to ensure the long-term growth of the Web.”

Linked with the same moniker but no official affiliation is W3schools.com which offers more instructive resources on anything from HTML, CSS, and programming languages such as Python, and Java Script. The site has built in tools to test code, references to spot check code and a extremely dense list of examples for all coding purposes. W3schools focuses on teaching and is a valuable online resource to use while coding.

Example of w3school homepage

These are just two resources that can be utilized in reference to coding and programming to help coders get an idea or feel for what programming is about, as well as the standards and practices for the vocation.

The virus

Branching a little bit from the regular, today I would like to discuss the current pandemic and how It could effect programmers. For most programmers a pandemic such as COVID-19 will not effect most as programming very simply translates to being able to complete at home. If you happen to not be in the mood to possibly work from home while coding during a pandemic you might want to just take a few weeks off and hope it blows over.

There are many tools and resources programmers can use to communicate with teams, share code, and work one-on-one with teammate on the exact same code.

You can share code and branches with GitHub, A website that offers users the ability to post their code, applications, and other information online and open for other users to make a copy, edit and then commit to the main branch for acceptance.

Zoom, Skype, and other video chat websites and applications off the ability to talk face-to-face with members of your team. These applications are crucial when you need to communicate clearly within your team and your team is not working from the office.

Code editors like repl.it offer team editors that allow multiple programmers to work on the same source code at the same exact time, even allowing for a text, or chat box to communicate between members who could not otherwise be found on Zoom or Skype. Repl also features a message pinning ability as to communicate even more specifically about certain parts of the code.

While working from home may not be the favored or most efficient way of working, it is overwhelmingly easy in the 21st century with all the applications that work for the users who cannot be face-to-face.

Code Editors & IDEs: P5.js

When I first began learning code in my “computing basics” course I used a web application known as the P5.JS web editor to write script. P5.js is described on its homepage as a software sketchbook which is a great descriptor as it offers a small sandbox for code development.

P5.JS is a great introduction to code editors, and integrated development environments, referred to simply as IDEs. Online Web editors like P5.JS offer pros and cons depending on what the end user is looking to achieve. P5.JS does offer the ability to auto save code via the cloud and export code over the internet to a users profile, giving the coder a backup to their script alleviating any worry of data loss due to hardware failure.

A snapshot of what the default canvas setup for P5.JS looks like:

P5.JS has the benefit of being much simpler to use and understand than non-internet based IDEs like Atom (which is an offline code editor). I recommend using a web editor like P5.JS to begin with as it is a friendly environment that offers a pre-constructed canvas to edit, create and learn javascript at a fundamental level. P5.JS is strictly a Javascript library which is more limiting than web editors like Repl.it, which I will discuss in the next post.

THE BUTTON

A fundamental part of scripting in JavaScript is “events”. Events are described as “reactions” the script has to actions happening within the HTML. Events encompass a world of attributes, however, the breadth of my knowledge on the subject to this point lies squarely within the “onclick” attribute and the “date” function (displays date, time, and time zone of the system) within buttons. The “onclick” attribute is used in tandem with “button” elements, which are clicked, submitted, and then return some sort of result. If submitting a form and returning results sounds familiar, that’s because we talked about it last week with the DOM. Understandably the DOM is used with events. Here is an example:

before the top button is pressed
after button is pressed, the DOM calls the information and the onclick displays it.

As you can see within the example there are many ways to achieve the same effect with the DOM either inside the button, using strictly a known function and having result display within the button or using the DOM inside of the function in the script. It seems that the DOM with be an integral part of the scripting I will do going forward. Learning the different ways to use buttons with the “onclick” attribute to get the date to display when the button is clicked was very interesting and engaging, I look forward to seeing how I can integrate these principles within my code at a later date.

The DOM

Today I learned and experimented with the “DOM” or The Document Object Model. The DOM, through the power of the “getElementById” method, gives the coder the ability to send and receive data or text information between forms in the script. The script is then identified within the HTML or webpage. Put simply, if there were a form that prompted a user to input their name or date of birth, the form would send that information to the DOM which would then be expressed in the script. The “getElement” was used within our HTML by identifying a paragraph tag to the class or function that needs to send or relay that information.

A screenshot of the demonstration that was completed using the getElement.

For instance, we created a “car” class and described the “car” within the class brackets. We labeled the car as a 2020 Ford with a V20 engine. All three descriptors were tagged, then we used the “getElement” in the manner of “getElementById.innerHTML” and captioning the tag we wanted displayed in the HTML file. Once we completed this and used the caption “…Id.innerHTML.car_class.year” the characters “2020” displayed within the html and that perfectly demonstrated the desired outcome. I was very pleased to learn such a fundamental step in coding, I imagine using the DOM and having a cohesive script to run information between the script and HTML will benefit me greatly going forward.

Hello, and welcome

“The form does not matter. Content is everything.” 
― Ray Bradbury, The Illustrated Man

Welcome to my web page DPWII, my name is Andrew “Drew” Paul Wallace the second. This page will be a hub for any Lab report or piece of content i create whether it be design or something more technical, here is where you will be able to find it. everything for “Hardware and Networking” can be found in the “CMST 250 SA” Tab, as well as, everything from “Social media” can be located in the “DIGME 406 TA”. there is nothing on this site yet, but you will find links to my twitter and linkedIn and some of my favorite music at the bottom but in the coming weeks i expect there to be a miscellany of posts, thank you for your time.

—DREW P. WALLACE II