Javascript is the best stuff ever!

A simple primer, Prepared by Zoe F

Embedded Javascript, inline javascript, and external javascript

Create an html page called hellojavascript.html, with all the standard syntax of html, head, and body. Now let's add some built-in javascript. In the body of your page, add the following, and test it by loading your html page in your browser. This javascript uses a built-in function called "alert" - we'll talk about built in functions later. For now, let's get that javascript working!
```
<button onClick='javascript:alert("Hello World, Im embedded!");' >Click Me!</button>
```
Look up what the built-in "alert" function does in the reference at the right.
We want an alert to run any time the page loads. So let's add some inline code to the header. In the header, add the following, and test it:
```
<script> 
   alert( "Hello World! I'm some inline code!" );
</script>
            
```
Let's move the alert to an external file. Create a new text file, but give it the new extension .js. Call it woohoo.js, and make sure its saved in the same folder as hellojavascript.html. Delete the code you just put in your header from your hellojavascript file, and paste just the part between the "<script>" tags, the line starting with alert, into your new woohoo.js file. Change the words to "Hello World, now I'm some external code!"
Before we test, we need to tell your html page where to look for it. In your header, use this to tell the browser where the js file can be found.
```
<script src="woohoo.js"></script>
            
```
Test your final html page to make sure everything is working correctly

Alert

Variables and operators

Dealing with alerts to find out what's going on in our webpage is a pain. Let's open the Console in Chrome. This is a secret space that lets us test our page without relying on pop-up boxes or outputting to the actual HTML before we're ready. You can get there through the view menu, or by right clicking anywhere in the page and selecting "inspect element" - the console will be one of the options offered.
Let's add together some Strings. Delete the code you currently have in woohoo.js, and add this instead:
```
var foo = "hello";
var bar = "world";
console.log( foo + " to the " + bar ); //this will output "hello world" to the console!    
```
Notice the "//" lines that let us add a comment to ourselves in the code. Look up what var means using the reference. We're using the built-in function console.log to print directly to the console. Now, run the html page, paying attention to the console log to see what's going on under the hood.
Javascript has a shorthand for incrementing a number by one. Instead of saying var i =i+1; Try this:
```
var i = 1;
i = ++i;
console.log( i );   //Should be 2
```
Now let's do some math. Delete everything else in the .js file and try this. These are numbers, so they DON'T get quotations around them like Strings do.
```
var foo = 5;
var bar = 6;
console.log( foo + bar );
```

var
Strings
Numbers

Comparisons and Booleans

Let's delete the above and make some Boolean variables, and then analyze them. Create two boolean variables
```
var foo = true;
var bar = false;
            
```

Now let's create some!

if ( bar ) {
    console.log( "If bar was true, this would print! But its not!" );
} 

else {
    console.log( "bar isn't true!" );
}

That's great, but what about foo? Let's test if foo is true, but only if bar is false. We're going to use an Else If statement, that allows us to test more than one thing at once. Let's edit what we've got so it says the following, and test it:

if ( bar ) {
    console.log( "If bar was true, this would print! But its not!" );
} 

else if ( foo ) {
       console.log( "Bar is false, but foo is true!" );// This code will run.

} else {
     console.log( "Neither of them is true!");
}

Change foo to false and see what happens.
Now, change foo and bar to the numbers 4 and 5 respectively. Change the if/then statement so that the if statement is evaluating if foo is bigger than bar. if it is, make the console read "foo is bigger". If it isn't, make the console read "bar is bigger". If they're equal, make it read "They're the same" and test out all the options!

if/else
Booleans

Functions

We've talked about a couple built-in functions, like alert and console.log, but we can define our own functions too! In the .js file, let's create a function called greet. It takes two arguments - the name of the person you want to greet, and how you want to greet them. Then output the greeting to the console.
```
greet = function( person, greeting ) {
    var text = greeting + ", " + person + " whats up!";
    console.log( text );
}
      
```
Now let's call the function...from our html. We will used a little inline javascript to call it from there. In the body of our .html page, below our current code, try this.

<script>greet( "Zoe", "Hello" );</script>

Functions

The Jquery library

Rather than download and link to the .js document that has all the jquery functions, let's link to it where it's hosted on the google servers! First, in your browser, find the most recent version of jquery. Go to the google developers page below, or google "google jquery library". This is where all the javascript libraries are that they support.

https://developers.google.com/speed/libraries/devguide
Once you're there, take a look at all the various libraries of functions google offers. Find JQUERY. We want the most recent version. Note that there are a couple different JQuery libraries - The regular one, the JQuery.UI one, and a Mobile version. We just want the regular old JQuery.

Copy the snippet fo code you'll need to include in your html head to have access to all the jquery functions. Just like including your own .js file, it will start with <script.... Paste it into the head of your HTML document. Then to prove to yourself that this is just another .js file, just like you have been using this whole time, go to the url you just pasted in your browser. See if you can pick out the various functions you now have access to.
We're going to use JQuery's show function and hide function to make a paragraph appear and disappear on the page. First, in your html, in your body, below your current code, using <p></p> tags, create a paragraph that says "Hello there folks".
Now let's create some buttons to call the functions in jquery. In the body, create two buttons - one with the id of ShowMe, and one with the id HideMe. We will use that id to figure out which button was pressed.
```
<button id="HideMe">Hide this thing!</button>
<button id="ShowMe">Show this thing!</button> 
```
Now, let's create some of our own functions that will figure out which button was pressed, and call on the appropriate JQUERY function to do the job! Make sure to place the inline scripting in the header, but after we call Jquery. We're going to use another of Javascript's built-in functions called ready. This function just holds off on running whatever is within it with until your page is fully loaded. We'll put all our other funtions here inside of this one. That way, your javascript won't try to execute until the rest of the page has downloaded completely (which could be messy).

Jquery uses it's own formatting, which can be a little complicated. For now, don't worry about all that punctuation, just work on getting something to run. We'll go over Jquery in depth soon!
```
<script>
     $(document).ready(function(){  //First we create a function, as soon as the document is ready, to handle this
     
     $("#HideMe").click(function(){   //was HideMe clicked?  Then call jquery's hide function on all the P's
           $("p").hide();
      });

     $("#ShowMe").click(function(){   //was ShowMe clicked?  Then call jquery's show function on all the P's
           $("p").show();
      });
});
</script>
```
Go to the Jquery reference and see if you can another JQuery effect to work.

http://www.w3schools.com/jquery/default.asp

document.ready
click()
hide()
show()

JQuery library, as hosted by google