If you do not know what the file protocol is it is a way to load an html document, or other assets into a web browser that is stored locally on your computer. In other worlds loading a file in a web browser by way of file:\/\/ rather than https:\/\/. This might not be the best way to go about doing things as in some situations you will run into problems that have to do with the use of the file protocol, but it can still be thought of as a stepping stone to using https that will result those problems.
1.1 - The source code in this post is on github
The source code example here can be found in by test vjs github repository.
1.2 - Very basic hello world
1.3 - query selector and query selector all methods
So in the hello world example I was using an older method that is used to get one or more elements in a page by way of the tag name. A more modern way of getting references that a lot of developers like to use actually is the query selector, and query selector all methods.
1.4 - Learning a thing or two about expressions
1.5 - Functions
1.6 - Arrays
1.7 - Basic loop function with setTimeout
2 - Starting out with some events
Now that we have a hello world out of the way lets move on to something else such as event attachment, and starting to work with event objects in the event hander functions. The reason why I am getting into this is because event attachment if a very important step forward when it comes to making a project interactive. There is a number of ways to attach a wide range of various types of events to elements in html. However for this getting started post I thought I would stick to just a basic example that has to do with just the click event and the add event listener method.
2.1 - Getting started with events
To use this add event listener method I will first want an element reference to attach an event hander to. So then I have added an input element to the html of this example, on top of having a paragraph element that will serve as a crude yet functional display. For this button I am setting an id attribute that I will use as a means to get a reference to it, set the tpe of the input to button rather than the default text type, and set a value of step to it which in this case will be the display name of the button.
So now that I have my html together I will want to create some variables to store a count, and hold a reference to elements of interest in the page such as what I am using to display output. I just get a reference to the input element, and then call the add event listener method off of that reference. While doing so I pass the string click for the first argument to indicate that I want to attach an event listener for the click event, and then pass the event hander function that I want to fire each time that event happens.
2.2 - Event Objects and the click event
Now that I have a basic example of event attachment out of the way it might be a good idea to at least touch base on event objects that there are to work with in these event handers. For example lets take a moment to think about this click event, what is something else of interest that comes to mind when a client event happens other than just simply knowing that an element in the page was clicked? Well one thing would be the position at which the element was clicked right? So then in these event objects that are passed to an event hander there is a clientX, and clientY property that is the position at which a client event has happened. When it comes to touch events there are also arrays that are attached to these event objects that are an array of points for each finger that is on the surface of the touch device also, but for now lets just stick with this simple click event.
In this example I have a parent div element, and a child div element. When the parent div is clicked the child element will be repositioned to that location in the parent div. Inside the body of the event hander I am using the target property to get a reference to the element that was clicked. The reason why I am dong this is because I am attaching to the parent div, and because of something called event bubbling this handler can fire for the parent or child div. So then in the event that the div that was clicked is the parent div I am using the parent div relative position as a way to set a new position for the child div.
3 - style api example
4 - Conclusion