Jan. 25, 2017 | Lesson 8 (HTML Essentials)

For the final lesson of HTML Essential Training, I got a crash course in JavaScript. JavaScript is a scripting language that helps control the behavior of a website, and while it’s a serious programming language that entire applications are built off of, this is just a short introduction and basic look at JavaScript.

In this lesson, I worked on scripting the behavior of an aside text that contained an HTML, CSS and JavaScript tab. Without the scripting, each tab functions as page region links, but with the scripting, each tab were supposed to be clickable.

Much like how you create inline styles, you add scripting elements at the end of the HTML document just below the footer tags using script tags. I’ve also created a “comment” that tells me what the script tag is about: “tabbed panels.”

At the core of writing JavaScript are the functions. Functions are reusable blocks of code that can perform tasks when called upon. They help write efficient applications by grouping commonly performed tasks into a single block of code, which can then be executed if it’s needed.

The first function that I wrote was “window.onload = function() { }”. Below you’ll see it highlighted in the Brackets application.

screen-shot-2017-01-25-at-1-48-51-pm

Now, what this means is “window” is referencing an object, in this case the document window itself, or the page you’re on. “Onload” is referencing an event, or when the window is finished loading. So basically what this is saying, that once the page has loaded I’m going to perform a function, which is whatever is in the curly braces.

Before I move on, I made a couple of comments in the curly braces to remind me of what has to happen within this function.

screen-shot-2017-01-25-at-1-50-38-pm

I created another function giving it the name “displayPanel”, and inside the curly braces there I gave myself reminders that I want the panels to display and respond to clicks, or change the panel display and activate tabs.

screen-shot-2017-01-25-at-1-52-15-pm

Now, once I’ve finished scripting, I could save the document and be done with, but as it is more efficient to externalize CSS code, it is the same with JavaScript. To do that, I simply created a new file (command+n, or control+n), saved the file as (shift+command+s, or shift+control+s) and created a New Folder called “_scripts”, and saved the file as “tabs.js”.

I then selected all the scripting, excluding the “script” tags, cut it from the document (command+x, or control+x) and pasted it into the new “tabs.js” file (command+v, or control+v). I deleted the script tags underneath the footer and added a scripting tag underneath the header at the top of the HTML file.

screen-shot-2017-01-25-at-3-11-41-pm

Unlike the CSS link tag, the JavaScript tag must have a closing tag.

Now, this is post is very condensed compared to what we went over in today’s lesson, but to be honest I didn’t quite understand all that was in the lesson. This is a subject that makes me think HTML and CSS were a breeze, and I’m probably going to have to do further studying on JavaScript before a get a good grasp on what I’m learning.

Advertisements

One thought on “Jan. 25, 2017 | Lesson 8 (HTML Essentials)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s