At this point, the goal is for you to grasp the concepts behind how JS accesses different parts of a web document. <\/strong>Keep in mind: if JS can access a specific property of a web document, then JS can change that property. The change in the property can have a visual effect on the screen. <\/p>\n\n\n\nMy recommendation is that you read through this section, try the examples in a console on your own laptop, and then later come back to this section as reference material when needed.<\/p>\n\n\n\n
In the console box is a prompt, as indicated by the greater than (>) sign. You type commands into the console box at the prompt and then hit enter\/return to run the command.<\/p>\n\n\n\n
Type the word “document” and hit return. You should get something like the following:<\/p>\n\n\n\n <\/figure>\n\n\n\nThe document command has returned the document object. You can reveal the contents of the document object by clicking on the triangle next to #document. When you do that, you will see the HTML document:<\/p>\n\n\n\n <\/figure>\n\n\n\nNow you know that every time you see one of those little triangles, then you can click to reveal further details. Click on the triangles next to head and body to reveal the full HTML document.<\/p>\n\n\n\n <\/figure>\n\n\n\nMost often, you will only be accessing a specific part of a document. JS has many valuable ways of doing that. We’re just going to start touching on a couple of methods here. Let’s get just the body element. In that case, simply type document.body in the console and press return:<\/p>\n\n\n\n <\/figure>\n\n\n\nRemember that the body element contains the visible parts of the web page. But, more often, you will want to get a very specific part of the body. Notice how the HTML elements are structured in a hierarchy. That tree-like hierarchy allows you to drill down and retrieve specific elements. Let’s say that we just wanted to get the section with the ID bottom. Take a look at the following screenshot of the console, and see if you can understand what’s happening:<\/p>\n\n\n\n <\/figure>\n\n\n\nThe command to get the bottom section is document.getElementByID(“bottom”); remember, we are only using the word “bottom” in the command because that is the actual ID name. If the ID was named something else (like “panel”), then we would use the word “panel” instead of “bottom” in the command. Make sure you understand that. For practice, in the console try, getting various elements by ID from the web page.<\/p>\n\n\n\n
In addition to document.getElementByID, there are several other handy methods for retrieving parts of an HTML document object, such as<\/p>\n\n\n\n
getElementsByTagName<\/li> getElementsByClassName<\/li><\/ul>\n\n\n\nStoring values in variables<\/h3>\n\n\n\n Every programming language has the concept of a variable<\/strong>, which allows you to store a value. Storing values in variables makes it easier to do things with those values. For instance, we can store the section “bottom” from our previous example in a variable named bottom. (There are several ways of declaring variables as well as best practices and rules for naming variables. We’ll talk about those later.) Here, we are just introducing the concept. And you can try this in the console:<\/p>\n\n\n\n <\/figure>\n\n\n\n(When you press enter, you will get back “undefined” but don’t worry about that, for now.)<\/p>\n\n\n\n
The variable makes it easier for writing code. All HTML elements have many properties, and those properties can be accessed via JS. For instance, all the CSS settings of an element can be accessed through JS. You access the CSS styles of an element through the adding .style to the end of an element variable in JS. For instance, to see the property styles for the variable we named “bottom”, simply type in the console: bottom.style<\/p>\n\n\n\n <\/figure>\n\n\n\nThe screenshot only shows a partial list of the dozens of style properties accessible via JS. Note that you are only seeing the style property names. You are not seeing the values of the style properties because the JS is not actually reading the CSS stylesheet. (We’ll come back to that in a later lesson.) Meanwhile, you can experiment with changing the background color for the bottom section by typing:<\/p>\n\n\n\n
bottom.style.backgroundColor = \"red\"<\/code><\/pre>\n\n\n\nYou also can use a hex code in place of “red”. For simplicity, I simply used a common color value. As you can see in the screenshot below, the background color for the bottom section has changed to red.<\/p>\n\n\n\n <\/figure>\n\n\n\nIt’s important to note that any changes you make via the console are not permanently applied to the document. Console changes only take place on the computer’s display. When you refresh the page, the change will disappear unless you add it to the actual code.<\/p>\n\n\n\n
The takeaway so far is that we have learned that the console can be used for debugging and quick testing. Now, let’s look at how we make an actual change to the code using JS that will transition the background color to red when a user hovers a mouse over the bottom section of that page.<\/p>\n\n\n\n
User Interface Events<\/h3>\n\n\n\n The concept of events<\/strong> happening in the user interface is another very important aspect of JS. We’ll go over this in more detail but, for now, here’s a brief introduction.<\/p>\n\n\n\nAn event is when something happens inside the user interface of a web page. For our example, the event we’re listening for is when the mouse hovers over the bottom section. When that event occurs, then we are going to code an action to take place. That action will be to change the background color of the section.<\/p>\n\n\n\n
Linking HTML to a JS file<\/h3>\n\n\n\n Just as with CSS, we want to put our JS code into an external file. JS code files have the extension .js<\/strong>. Also, there should be no spaces in the filenames. Additionally, I prefer to group all my .js files for a site into a subfolder named “js” for JavaScript. The links to JS files are placed inside the body element of an HTML document and just before the closing body tag:<\/p>\n\n\n\n <\/figure>\n\n\n\nPay attention to the structure and format of the script tag and the link to the JS file. Your JS file may have any name. In this example, I used “main”. <\/p>\n\n\n\n
What’s in a JS file?<\/h3>\n\n\n\n A JavaScript file is just a regular file, just like HTML and CSS are regular text files. To start, just create a new file in your code editor and give it a filename with a .js extension. Then we add the code:<\/p>\n\n\n\n
var bottom = document.getElementById('bottom');\nbottom.onmouseover = changeBackgroundColor;\n\nfunction changeBackgroundColor() {\n bottom.style.backgroundColor = \"red\";\n}<\/code><\/pre>\n\n\n\nThat’s it. That’s our complete JS file for changing the background color of the bottom section to red when the mouse moves over that section. Of course, this is a very simplistic example. We will be breaking down more complex examples in further detail.<\/p>\n","protected":false},"excerpt":{"rendered":"
That voice in your head Is this for me?Can I do this?I\u2019m not good at this. It\u2019s natural to have doubts. But what are doubts? Do doubts really exist? Or, are doubts simply beliefs you have developed about yourself? Perhaps, these beliefs are based on a past experience with a similar topic with which you […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[33,7,38],"tags":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/endlesshybrids.com\/wp-json\/wp\/v2\/posts\/2412"}],"collection":[{"href":"https:\/\/endlesshybrids.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/endlesshybrids.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/endlesshybrids.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/endlesshybrids.com\/wp-json\/wp\/v2\/comments?post=2412"}],"version-history":[{"count":52,"href":"https:\/\/endlesshybrids.com\/wp-json\/wp\/v2\/posts\/2412\/revisions"}],"predecessor-version":[{"id":2476,"href":"https:\/\/endlesshybrids.com\/wp-json\/wp\/v2\/posts\/2412\/revisions\/2476"}],"wp:attachment":[{"href":"https:\/\/endlesshybrids.com\/wp-json\/wp\/v2\/media?parent=2412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/endlesshybrids.com\/wp-json\/wp\/v2\/categories?post=2412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/endlesshybrids.com\/wp-json\/wp\/v2\/tags?post=2412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}