Permalink
Browse files

add anchor tags

  • Loading branch information...
1 parent fd0a06e commit 49bec3695fba35c2781d455f02584973d16095bd @maxogden committed Aug 20, 2012
Showing with 49 additions and 42 deletions.
  1. BIN cover_jsforcats.psd
  2. +24 −21 dynamic.html
  3. +25 −21 index.html
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -41,7 +41,7 @@
So don't be a scaredy cat! The absolute worst thing that will happen is that you might have the refresh this page in your web browser if you get stuck. Don't worry though, this will happen very rarely — and we're talkin' 13-toed cat rare.
- ## The basics
+ ## <a id="basics" href="#basics">#</a> The basics
There is JavaScript running on this page right now! Let's play around with it a little. For the sake of simplicity I'll assume you are using Google Chrome to read this page (if you aren't its probably easier on both of us if you follow along with Chrome).
@@ -55,7 +55,7 @@
Using the console is a very important part of learning JavaScript. If you don't know if something works or what the command is for something, go to the console and figure it out! Here's an example:
- ### Strings
+ ### <a id="strings" href="#strings">#</a> Strings
Since I am a cat I want to replace every instance of the word `dog` on the internet with `those blasted dogs`. First go into your console and type in a few sentences that contain the word `dog` at least once. In JavaScript a bunch of letters, numbers, words or anything else is known as a **String** (as in a *string* of characters). Strings have to begin AND end with a quotation mark. Single `'` or double `"` is fine, just make sure you use the same at the beginning as you do at the end.
@@ -65,31 +65,33 @@
Ok, to fix up one of these sentences (by replacing `dog` with our enhanced version) we have to first save the original sentence so that we can call it up later when we do our replacing magic. Notice how the string gets repeated in red when we type it into the console? This is because we haven't told it to save the sentence anywhere so it just gives it right back (or it gives us an Error back if we messed something up).
- ### Variables
+ ### <a id="values" href="#values">#</a> Values and variables
- To store things we use things called **variables**. The word 'variable' means 'can change' and is used because variables can store many different types of values and can change its value many times. They are pretty much like mailboxes. We put something in a variable, like our sentence, and then give the variable an address that we can use to look up the sentence later. In real life mailboxes have to have PO Box numbers but in JavaScript you usually just use lowercase letters or numbers without any spaces.
+ **Values** are the simplest components in JavaScript. `1` is a value, `true` is a value, `"hello"` is a value, `function() {}` is a value, the list goes on! There are a handful of different **types** of values in JavaScript but we don't need to go over them all right away -- you will learn them naturally the more you code!
+
+ To store values we use things called **variables**. The word 'variable' means 'can change' and is used because variables can store many different types of values and can change their value many times. They are pretty much like mailboxes. We put something in a variable, like our sentence, and then give the variable an address that we can use to look up the sentence later. In real life mailboxes have to have PO Box numbers but in JavaScript you usually just use lowercase letters or numbers without any spaces.
![console](images/console-variables.png)
`var` is shorthand for variable and the `=` means *store the thing on the right hand side in the thing on the left hand side*. Also as you can see, now that we are storing our sentence in a variable the console doesn't just return our sentence right away, but instead gives us `undefined` which means *there was nothing to return*.
- If you simply type variable names into the console it will return the value stored in those variables. A note about variables is that by default they go away when you switch to a different page. If I were to hit the Refresh button in Chrome, for example, my `dogSentence` variable would get wiped and it would be like it never existed. But don't worry about this too much for now -- you can just hit the up or down arrows on your keyboard while in the console to go through everything you've entered in recently.
+ If you simply type a variable name into the console it will print out the value stored in that variable. A note about variables is that by default they go away when you switch to a different page. If I were to hit the Refresh button in Chrome, for example, my `dogSentence` variable would get wiped and it would be like it never existed. But don't worry about this too much for now -- you can just hit the up or down arrows on your keyboard while in the console to go through everything you've entered in recently.
- ### Functions
+ ### <a id="functions" href="#functions">#</a> Functions
Now that we have our sentence stored in a variable lets give that variable to something that will replace words! We call things that perform actions like this **functions** because, well, they serve a specific *function* (AKA purpose or action) for us. Calling them "actions" sounded weird I guess so they went with the word "function" instead.
- JavaScript has a function called `replace` that does exactly what we want! Functions take in any number of variables (zero, one or many) and return either nothing (`undefined`) or exactly one variable (functions can't return two or more variables at a time). The `replace` function is available to use on any strings and takes in two variables: the characters to take out and the characters to swap in. It gets confusing to describe these things so here is a visual example:
+ JavaScript has a function called `replace` that does exactly what we want! Functions take in any number of values (zero, one or many) and return either nothing (`undefined`) or exactly one value (functions can't return two or more values at a time -- only a single value). The `replace` function is available to use on any strings and takes in two values: the characters to take out and the characters to swap in. It gets confusing to describe these things so here is a visual example:
![console](images/console-replace.png)
- Notice how the value of `dogSentence` is the same even after we run `replace` on it? This is because `replace` (and most JavaScript functions for that matter) take in an existing variable and return a **new variable** instead of modifying the existing variable. Since we didn't store the new variable (there is no `=` on the left side of the replace function) it just printed out in our console.
+ Notice how the value of `dogSentence` is the same even after we run `replace` on it? This is because `replace` (and most JavaScript functions for that matter) takes the variable or value that we give it and returns a **new value** instead of modifying the thing we passed in. Since we didn't store the new variable (there is no `=` on the left side of the replace function) it just printed out the return value in our console.
- ### The "standard library"
+ ### <a id="standard-library" href="#standard-library">#</a> The "standard library"
You might be wondering what other functions are available in JavaScript. The answer: A TON. There are lots **built in, standard libraries** that you can learn about at MDN (A site run by Mozilla that has lotsa nifty information about web technologies). For example [here is the MDN page on JavaScript's Math object](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Math).
- ### Third-party JavaScript
+ ### <a id="third-party-javascript" href="#third-party-javascript">#</a> Third-party JavaScript
There is also a lot of JavaScript code available that is **not built in**. JavaScript from third parties is usually referred to as a "library" or "plugin". One of my favorites is called **Underscore.js**. Let's go and grab it and load it into our page! First go to the Underscore site, [http://underscorejs.org/](http://underscorejs.org/), click on the download link (I usually use development versions because they are easier to read but both will give you the same basic functionality), and then copy all the code onto your clipboard (you can use Select All from the Edit menu to select everything).
@@ -99,7 +101,7 @@
![console](images/underscore-first.png)
- ### Making new functions
+ ### <a id="writing-functions" href="#writing-functions">#</a> Making new functions
You aren't limited to using other peoples functions -- you can also write them yourself. It's pretty easy! Lets make a function called `makeMoreExciting` that adds a bunch of exclamation points to the end of a string.
@@ -117,11 +119,11 @@
![console](images/custom-function-call.png)
- You could also call the same function by passing in a variable that points to a string (in the above example we just typed the string straight in there instead of saving it to a variable first):
+ You could also call the same function by passing in a variable that points to a string (in the above example we just typed the string straight in there as a value instead of saving it to a variable first):
![console](images/custom-function-call-variable.png)
- The line `makeMoreExciting(sentence)` is equivalent to saying `sentence + '!!!!'`. What if we wanted to **modify in-place** (aka update) the value of sentence? Simply save the return variable of the function back into our `sentence` variable:
+ The line `makeMoreExciting(sentence)` is equivalent to saying `sentence + '!!!!'`. What if we wanted to **modify in-place** (aka update) the value of sentence? Simply save the return value of the function back into our `sentence` variable:
var sentence = "time for a nap"
sentence = makeMoreExciting(sentence)
@@ -132,7 +134,7 @@
![console](images/custom-function-no-return.png)
- Why is `sentence` empty? Because functions return `undefined` by default! You can choose to return a variable by `return`ing a variable. Functions should take in a variable and, if they change the variable or create a new variable that is supposed to be used later, `return` a variable (fun fact: a fancy term for this style is *functional programming*). Here is another function that doesn't return anything but instead uses a different method to show us the output:
+ Why is `sentence` empty? Because functions return `undefined` by default! You can choose to return a value by `return`ing something. Functions should take in a value and, if they change the value or create a new value that is supposed to be used later, `return` a value (fun fact: a fancy term for this style is *functional programming*). Here is another function that doesn't return anything but instead uses a different method to show us the output:
function yellIt(string) {
string = string.toUpperCase()
@@ -142,16 +144,16 @@
This function, `yellIt`, uses our previous function `makeMoreExciting` as well as the built-in String method [toUpperCase](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/toUpperCase). Methods are just a name for a function when it belongs to something -- in this case `toUpperCase` is a function that belongs to `String` so we can refer to it as either a method *or* a function. `makeMoreExciting` on the other hand doesn't belong to anyone so it would be technically incorrect to refer to it as a method (confusing, I know).
- The last line of the function is another built-in that simply takes in any variables that you give it and prints them out into the console.
+ The last line of the function is another built-in that simply takes in any values that you give it and prints them out into the console.
![console](images/custom-function-console-log.png)
So is there something wrong with the above `yellIt` function? It depends! Here are the two major types of functions:
- - functions that modify or create variables and return them
- - functions take in variables and perform some action that cannot be returned
+ - functions that modify or create values and return them
+ - functions take in values and perform some action that cannot be returned
- `console.log` is an example of the second type of function: it prints things out to your console -- an action that you can see with your eyes but that cannot be represented as a JavaScript variable. My own rule of thumb is to try to keep the two types of functions separate from each other, so here's how I would rewrite the `yellIt` function:
+ `console.log` is an example of the second type of function: it prints things out to your console -- an action that you can see with your eyes but that cannot be represented as a JavaScript value. My own rule of thumb is to try to keep the two types of functions separate from each other, so here's how I would rewrite the `yellIt` function:
function yellIt(string) {
string = string.toUpperCase()
@@ -162,7 +164,7 @@
This way `yellIt` becomes more **generic**, meaning it only does one or two simple little things and doesn't know anything about printing itself to a console -- that part can always be programmed later, outside the function definition.
- ### Loops
+ ### <a id="loops" href="#loops">#</a> Loops
Now that we have some basic skills under our belt (*Author note: do cats even wear belts?*) we can start being lazy. What?! Yes, that's right: programming is about being lazy. Larry Wall, inventor of the Perl programming language, called laziness the [most important virtue](http://c2.com/cgi/wiki?LazinessImpatienceHubris) of a good programmer. If computers didn't exist you would have to do all sorts of tedious tasks by hand, but if you learn to program you can lay in the sun all day while a computer somewhere runs your programs for you. It is a glorious lifestyle filled with relaxation!
@@ -198,7 +200,7 @@
What `times` really does is visit each number and repeat a task: in the example above the task was to call the `logANumber` function with the current number. Repeating tasks in this way is referred to as *looping over* the Array.
- ### Arrays
+ ### <a id="arrays" href="#arrays">#</a> Arrays
I've mentioned these a few times but let's spend a minute learning about them. Imagine you need to keep track of all your buddies. Well, an Array will do just fine. Think of an Array like a sorted list that you can keep *tons* of stuff in.
@@ -236,12 +238,13 @@
I'd recommend coming back again tomorrow and going through the entire thing again from the beginning! It might take a few times through before you get everything (programming is hard). Just try to avoid reading this page in any rooms that contain shiny objects... they can be incredibly distracting.
- ### Recommended reading
+ ### <a id="recommended-reading" href="#recommended-reading">#</a> Recommended reading
JavaScript For Cats skips over lots of details that aren't important for getting started (cats are not known for their attention spans), but if you feel like you need to dive in deeper then check these out:
- [Eloquent Javascript](http://eloquentjavascript.net/) is a free book that teaches you JavaScript! It's pretty good! Especially the chapter on [values, variables, and control flow](http://eloquentjavascript.net/chapter2.html)
- [Mozilla's JavaScript Guide](https://developer.mozilla.org/en-US/docs/JavaScript/Guide) also has a pretty sweet intro chapter called [values, variables and literals](https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals)
+ - [Felix's Node.js Style Guide](http://nodeguide.com/style.html) was written about programming JavaScript on the server-side using Node.js but there are lots of tips in here that are useful for anyone programming with JavaScript.
<!-- function isItPastDinner() { if (new Date().getHours()) } -->
Oops, something went wrong.

0 comments on commit 49bec36

Please sign in to comment.