Constants: Beyond Stubborn

Think back to 8th or 9th grade Algebra I, and you'll remember that in addition to "variables" there are "constants." The constants always bored me, they made it impossible to be creative in math class. But in programming (and heck, in normal math too) they're important. Some things don't change, and it's easier to set a constant and reuse it over and over again.

If you ever want to change the value of that constant, you can do it in one place, instead of all throughout your code. The textbook example, which seems like a good one to use and remember, is a constant tax rate in the equation of figuring out how much tax is owed on a purchase. The tax rate doesn't change, so it's a constant, not a variable.

Constant's JavaScript keyword is longer than the one for variable (var)...

const: the JS keyword for constant

const CONSTANTNAME = CONSTANTVALUE;

Formatting Note:
Constants are written in ALL CAPS and Variables are written in MixedCase.

If your constant changes at some point down the road, you can always go back and change it in your script. It just can't change while the script is running.

***like variables, constants can be named just about anything, but their name must start with a letter, $, or _

Variables are Fun!

So the book finally got around explaining variables and "var" on page 44.

variable: a storage location in memory with a unique name.
var: the JavaScript keyword used to create a variable.

It looks like the way to create a variable is to write

var variablename ;

* every variable must be unique and meaningful, says the book. Unique, obviously, because if you have two different variables named the same thing that will cause an error. Meaningful, because, let's face it, you're not going to remember what xijoije means. Programming is very organized - you don't have the luxury of letting your code get messy before taking a day to clean it up. Practically any programming book will beat you over the head about formatting and naming standards, and for good reason.

... so you want your variable to have an initial value? Yea, me too. Good thing the next page tells me how to do this. Apparently that's called initializing a variable. (Creative lingo here, huh?) The good news is that the code to do this is fairly obvious. You just add a = initial value and viola, you're set.

var variableName = Initial value;

JavaScript makes some things easy for us programming noobs. I just found out that it will assign a value for your variable automatically based on what initial value you give it. So if you say it's initial value is 300, for instance, it will know that it's a number. Sometimes JavaScript can't guess or guesses wrong and you have to go in and tweak it... but they don't want to tell me how to do that yet.

data types

Reminder to self:

Basic Data Types in Javascript...

text: a sequence of characters (also known as a "string" in various programming languages)
number: in JavaScript, numbers can be integers or decimals.
boolean: true or false data. Anything that has two scenarios (on/off, yes/no, left/right, etc)

Chapter 1 Summary

In chapter one of Head First JavaScript I learned about alerts, events, and functions. I also learned some basic ingredients of interactivity - onclick and onload. I am unclear what "var" means (though I know it's important in the code) and am looking forward to learning this later in the text.

The next chapter is entitled "storing data" so it seems a little more important than how to annoy users with an automatic greeting on page load. I'll let you all know how it goes.

(edited to add: variable is explained on page 44)

It's a slow start

I'm on page 26 in the Head First Javascript book, and trying to get a function to "get the user's name" to work. After trying to figure out their fill in the blank exercise (with what they call "magnets") I transferred the page to my server and it's not working. So now I have to figure out what I'm doing wrong.

I'm obviously doing something wrong...



Fixed it!

What was wrong...

("rockImg".src was missing the ) after Img"

and

the last ) should have been }

See it in action.

Javascript: Trial and Error Bug

Apparently alert's don't like when you're grammatically correct. My apostrophe was breaking the code. I changed the alert text from what the book told me, which led to my bug.

So now it says "I am the best pet rock youll ever have." The "youll" is killing the copywriter in me, but I'll leave it for now. At least it works.

ie:

< onload="alert('I am the best pet rock youll ever have');"> works, but,
< onload="alert('I am the best pet rock you'll ever have');"> doesn't.

[Maybe there's a way to add quotation marks in there to keep the string whole?]

Luckily, that was an easy bug to figure out. Though there must be a way around apostrophe's breaking alerts, right?

(follow up: you know that "there are no dumb questions" section of the book? Well, on the next page it explains that you can use apostrophes OR quotes in your string, you just have to use the other on the outside. So I guess you can't use both at the same time.)

(follow up 2: a coworker who's a Javascript expert, I'll call him DevGuy1, just informed me that you can get around this another way...using \' (which, apparently, is called "escaping a character.")

alert('I am the best pet rock you\'ll ever have');

[Sweet.]

Meet the iRock, Virtual Pet Superstar

Isn't he cute?
Head First JavaScript uses this, uh, "rock" to lead us through a series of exercises. This is the "iRock." He doesn't look happy, and it's not because he's a poorly-drawn version of a rock. It's because he's not able to interact with anyone. Aw, poor rock.

In this exercise of pages 18 - 20 in the book, I will learn a little bit about events, functions and greetings.

Here are some starter learnings that seem important...

"Events are notifications that you can respond to with JavaScript code." You can respond to an event like a click, or a page finishing loading. I bet you can even respond to when a user clicks on more than one object in a row, but they're not going to teach me that stuff yet. We're starting simple.

"Functions are reusable pieces of code that perform common tasks." In other words, I wish that I could write a function to do my laundry and make my bed. Unfortunately, I don't think that's going to be taught in this book.

(onload) = when a page loads
< onload="alert('I Am the Best Pet Rock You'll Ever Have!');">
(This is an evil event/alert that I will never use again, unless a tutorial makes me.)

(onclick) = when a user clicks

See how this exercise pans out at iRock: The Virtual Pet

Javascript: Your Browser Isn't Psychic

To start, the book says get used to putting JavaScript directly into an HTML page.

Let your browser know you're using JavaScript by putting the...

< script type="text/javascript" >

after < /title > in the head. Close it with a < /script >

One thing I really like about the Head Start book is that it has a section called "There are no dumb questions." Basically, they try to guess all of your questions and answer them after reading through a page/section. One interesting learning from this section on page 11 is that the < script > tag doesn't tell the browser you're going to input in JavaScript, it just says "hey there's script coming." You have to include the type="text/javascript" so your browser goes - "here comes JavaScript!"

Javascript: Why Bother?

This is pretty much the first part of any Javascript tutorial / book out there, so while it's obvious, I thought I'd include a quick post to say...

HTML is for structure, CSS is for style, and Javascript is for interactivity (or at least basic interactivity.)

Javascript can do cool things like perform calculations, dynamically swap images on a page, and validate data. (Yea, that's why it's worth learning. It's important in making a web page that isn't totally 10 years ago.)

You should know some HTML and CSS before jumping into Javascript.

If you don't know CSS yet, I recommend checking out the free tutorials over at w3schools.

Javascript, Part 1: Buying a Book

After reading through a few internet tutorials, I decided it would be best for me to buy a beginners book to at least get a few of the basic concepts of programming down. I looked at quite a few books and settled on Head First Javascript.

I chose this book for a variety of reasons. At first, I was put off but how picture-heavy it was. It looked like it was designed for a kindergartner, practically. But then I realized that being such a right-brained thinker, a tutorial like this could be extremely helpful... at least to get started. Most programming books are impossible to grok. This one seemed like a good place to start, at least. And reviews on Amazon say pretty much just that... "If you are taking a class in javascript or want to know how to make your web pages more interactive, this is a great introduction to javascript."

After reading through the intro, I now understand that all those silly pictures have a purpose in the Head First series. The book style is supposedly designed for "learning" based on education theory. They encourage all sorts of tricks that helps you understand and *remember* what you learn. One of those tricks is reading your work out loud, and doing the examples. So, I'm adding in my own twist and sharing what I learn with the interwebs. I'll start with chapter one.

Ready. Set. Hack.

This is the blog of one non-programmer girl attempting to learn how to program. My friend who DOES know how to program suggested I start a blog on my process so others can learn with me along the way, and if I ever actually know what I'm talking about I can provide help here as well.

(I am not going to be able to provide help on programming anytime soon.)

My plan is to start learning Javascript and move on from there. I have yet to decide if I want to take on Python or PHP next. Eventually, if all goes as planned, I'll move on to an advanced programming language like C++ or Java.

I am a slow learner and an ADD one at that, but hopefully my narcissistic motivation will aid in my progression on this subject.