Introduction to JavaScript

Sample Lesson - Introduction

Lesson 1.05: HTML Me Another

Studies show that HTML files written in French are 15% snootier.
(Source)

You probably started learning language with one word at a time, like "mama" or "popo" (probably your Teddy bear's name). Later you learned to add some verbs that actually made things happen (sometimes), like "Want candy!" and "Watch SpongeBob!"

Eventually you added other parts of language, like adjectives, adverbs, prepositions, and all those other fun grammar terms. The more you learned about your language, the better people could understand you (and, ideally, give you candy). It takes a combination of things like verbs, nouns, and adjectives to make something meaningful that everyone who speaks your language fluently can understand.

Computers don't have a language that people can understand, though, and for a website to become meaningful, it needs three different things, which you can totally think of like the parts of speech.

• HTML tags are like nouns; they tell you what's on the page.
• CSS act like adjectives; these commands control how the page looks.
• JavaScript gives the verb; it says what the page does.

For this course, we're focusing on JavaScript (hence the name), and we don't really care much about how the page looks. So, sadly, CSS isn't on our list of important tools. We do need to have some content, though, on a webpage in order to test JavaScript code. Nothing too fancy. A pinch of content will be plenty.

To get at the content, we're going to need to know a bit of HTML. Makes sense that all we'd need is JavaScript and HTML, since you can make lots of sentences on nouns and verbs alone. We said it at the beginning of the course, but we're expecting you to already know a thing or two about HTML, which is why we're only going to do a little review—just enough to work with the JavaScript.

Sorry adjective-like CSS. We'll get back to you some other time. In another course.

Sample Lesson - Reading

Reading 1.1.05: The Tag Where it Happens

HTML is the language of webpages and it's been around since the early 1990s. It's gone through all kinds of changes as it's grown up—just like you. Could you imagine wearing the same clothes you did when you were even five years younger? Like that orange and green squiggly shirt?

Yeah, no one wants to see that.

HTML has a pretty embarrassing history, too. In fact, before it cleaned itself and started showering every day, its webpages on the internet were written in all kinds of different versions of HTML. Now that it's got its acne under control, though we primarily use HTML5. It's the latest, greatest, sharpest version.

HTML stands for HyperText Markup Language, which just means that you can markup text to link out to other pages. Along the way in its development, it grabbed some other types of mark-ups in the form of tags that surround pieces of text. Here's a typical example of a line of HTML code:

My name is <strong>Fred</strong> and I ≤em>love</em> to eat pizza.

That's how it'll look in the HTML file. When rendered the browser reads it, though, that text will look like this on a webpage:

My name is Fred and I love to eat pizza.

Check out how the text on the page holds all the words from the marked-up snippet. The markup (read: the tags) are used to change how the text looks. The <strong&rt; tag tells the browser to bold any words between the start and end tags.

Tags that have start and end parts are called paired tags and any tag that pairs needs the ending tag to have a slash in it. Check out slash in the ending strong tag if you need an example of it. That final tag is how the browser knew to stop bolding the text. If you forget it, everything after the bold tag is going to get bolded.

The <em> tag tells the browser to italicize any text between the paired tags, just like bold, except…tilted.

Tagging Elements

Sometimes, when you're up late at night reading HTML textbooks (don't pretend like you use them to fall asleep; we know you love every minute) you might notice that some books talk about tags and elements. They kind-of sound like the same thing, but they're not quite.

Tags like strong and em start with a less-than sign and end with a greater-than sign. They've got no actual content; they just tell the browser how to mark up the page. There are tons of tags out there. Some are paired, but others just stand on their own, like br, which tells the browser to throw in a line break.

An element, on the other hand, specifically refers to paired tags and all the content in-between them. Here are a couple of examples:

• <strong>Knock yourself out</strong>
  
• <em></em>
  
• <p>I'm all about eating vegetables as long as there's a hearty slice of pie afterwards.</p>

The reason we call the whole shebang an element instead of paired tags is because we're going to use the paired tags to take content from webpages in JavaScript.

Also: element's just a great word.

The Editor and the Browser: A Story for the Ages

This time around, we'll be writing JavaScript using a simple text editor. There are tons of free editors out there for you to use, whether you're on a Mac or a Windows, and the industry standards as far as web languages go are SublimeText and Brackets. We're going to keep it simple and just ask you to use TextWranger for OSX or Notepad++ for Windows.

Once you're ready to test the code on a computer, fire up the browser you like the best…unless you like Internet Explorer best. Nope, we aren't kidding; IE has a lot of issues with HTML and CSS, so we'd say stick to Firefox, Chrome, Opera, Safari, or even Edge. Just don't use Internet Explorer. #FriendsDontLetFriendsDevelopInIE

As for our examples, we'll be using Notepad++ and Firefox, but the differences should be pretty minor considering the fact that this this class is pretty introductory.

We're also going to try keeping things simple by writing the JavaScript code right inside the HTML file, which makes it embedded or inline JavaScript.

And we've got some good news. We're giving you the HTML code you'll use for the remainder of the course. It's nothing fancy but it gets the job done.

Enough with the talking—let's activity it up.

Sample Lesson - Activity

Activity 1.05a: Saving Private HTML

The moment has finally arrived. We know, we know, you've been waiting a whole two paragraphs since we told you about the HTML you'd use for the entire course and it's finally time to make it. Whenever we talk about the HTML template, that's what we're talking about.

No, we don't mean a temporary plate that you can toss in the garbage after you eat your pizza; that's a paper plate. A template is usually a skeleton file—this time in HTML. All the specifics that you'd need for an actual file aren't there; it's just the basic elements that could show up in any file. It's a great starting point for developing a webpage.

Our HTML template will be super simple. In fact, it'll be just enough to be able to do some JavaScript testing in it. Perfect for a class on JavaScript, no?

Step One

Open up your text editor—whether it's Notepad, TextWrangler, SublimeText, or Brackets—and create a new file. In your new file, type in the following lines of code exactly the way you see them here. As you go, make sure to do a couple of things:

• Don't worry about the colors of the text. That's a thing your editor's going to do in its own way, at its own time so if ours has purple while yours likes to make pink, that's totally fine.
• Indent lines of code so they look like the example below. Readable code (which only happens when you pour in whitespace liberally) makes it easier for you to spot and fix errors.
• Be careful about your spelling and upper- and lower-case letters. That stuff matters to HTML and JavaScript.
• Pay extra special attention to every little punctuation mark. A missing semi-colon can hose up the whole page.

And that's all we've got. Go ahead and copy the text in your image for the rest of the course.

Don't forget to change "KEY YOUR NAME HERE" to your name. That way, you'll automatically sign all your code to the right name every time.

Step Two

When you're done typing in the code, save the file as: html_template.html. We don't really care where you save it; just make sure to save it in a folder where you can easily find it again.

Did we mention you'll be using this template for the rest of the course? Because you will.

Step Three

Open up your fav browser (unless it's Internet Explorer) and change the website address to be the absolute path to that HTML file. For example, if Shmoop was going to point our path to that file, we'd say:

C:\Shmoop\Documents\IntroToJavaScript\html_template.html

Trying to figure out what the absolute path to your file is? Follow the steps listed

• here for OSX.
• here for Windows 10.

Test your HTML file in a browser. If the code's good, you should be able to see the resulting web page. It should look kind-of like this, but with your filename—and your specific browser's look.

If yours didn't display at all, or it looks pretty awful, check the HTML file and compare it to that lovely first image above. Try to find what's missing or what isn't looking right and fix the errors in your file. Sometimes it's best to fix one or two things at a time. Eventually you'll find all of them and your page will look fabulous.

When you've got a nice-looking HTML template, submit it below.

And save it someplace you'll remember. You never know when you need it…after this course. You'll totally need it in the next lesson.

Sample Lesson - Activity

Activity 1.05b: The T Stands for Trial and Error

That's a nice, shiny new HTML template you've got there. Let's test drive it to make sure it runs as smoothly as it looks.

In the future, you'll do about the same thing to test your code—except it'll be JavaScript, of course. But for now, it's all about HTML.

Step One

Open that fancy HTML template in your editor. Before you change any code, be sure to use the "Save As…" button in the File menu to save the template as a new name. Go ahead and save the file as activity5b.html and be sure to put it in a folder that you can find again.

Go ahead and open up your web browser so you can run and test your webpage as you write.

Then you'll be ready to make some changes to the new file. Let's start with some basic HTML to warm up.

Step Two

Change up the file by typing in your name and the activity number where it makes sense (you know…after the words "Name:" and "Activity number:"). The result should look sorta like this, but with your name instead of ours.

Step Three

One last thing: add the code to display a new sentence on your webpage under the Your results display here: header. Check out the style in that sentence and make sure you give it all the tags it needs.

My JavaScript code will be typed into the HTML code. The results will display on my browser, not the code.

You'll have to use your HTML expertise to get the bold "this" and the italicized "results". Sounds like you'll need some tags. Your result should look like this.

And done. Go ahead and pat yourself on the back and submit your activity5b.html file below.