Wednesday, February 9, 2011

To be continued...jQuery Accordian

http://docs.jquery.com/UI/Accordion

Rules for Naming:

-An identifier must be at least one character in length
-The first character must be a letter, underscore ( _ ), or a dollar sign ($).
-Each character after the first can be a letter, underscore, dollar sign or a number.
-Spaces and special characters other than a _ and $ are not allowed in any part of an identifier.

*Variable names often use CamelCase
A good way to name variables with multiple words is with lowerCamelCase.

Constants

To store a piece of data that can never change, you need a constant.
Constants are created just like initialized variables, but you use the const keyword instead of var.
And the "initial" value becomes the permanent value.

Example:

const + constant name + = + constant value + ;

The syntax is the same but constants are usually named in all capital letters to make them STANDOUT in your code.

These are handy for storing information that you might directly code into a script, like a sales tax rate. Instead of using a number, your code is easier to understand if you use a constant with a descriptive name like TAXRATE.
And if you need to make changes to the value, you can do it in one place...where the constant is defined instead of locating it and having to change it throughout the document.

Data Types

JavaScript uses three basic data types.
1. text
2. number
3. boolean

Text
Text is usually words or sentences, but it doesn't have to be.
Also known as strings, JavaScript text always appears within quotes(" ") or apostrophes(' ').

Number
Numbers are used to store numeric data like the weights and quantities of things. JavaScript numbers can be either integer/whole numbers or decimals.

Boolean
Boolean data is always in one of two possible states--true or false.
You can use this to represent anything that has two possible settings.

Variables

A variable is a storage locaion in memory with a unique name, like a label on a box that is used to store things.
You create a variable using a js keyword var, and the name of the new variable.

Example:

var + variable name + ;

The var keyword indicates that you're creating a new variable.
The variable name can be just about anything as long as its unique within your script.
The semicolon ends the line of javascript code.

A newly created variable has reserved storage space set aside and it is ready to store data
The key to accessing and manipulating its data is in its name.
That is why its important for the name of every variable to be unique and meaningful!!!


Initialize a variable with "="

Example:

var + variable name + = + initial value + ;

The equals sign connects the variable name to its initial value
The initial value is stored in the variable

var population=300;

This line of script also assigns the data type of the variable as a number because it was given a numeric value, 300. If the variable changes to some other type, then the type of the variable changes to reflect the new data. Most of the time js handles this automatically.

Constants and Variables: Overview

Storing data in JavaScript isn't just about type, it's also about purpose. What do you want to do with the data? Or more specifically, will the data change throughout the course of your script? The answers determine whether you code your data type in JavaScript as a variable or a constant.
A variable changes throughout the course of a script, while a constant never changes its value.

Posting Code

Remember this site if you ever want to post code....and you actually want to see the code you post.

http://www.simplebits.com/cgi-bin/simplecode.pl?mode=process

Vocabulary for beginnings. The pet rock...

function-a reusable piece of javascript code that performs a common task.

onclick-to respond to a mouse click, just set some JavaScript code to the onclick attribute of an html element.

onload-lets you know that a web page has finished loading.

alert-can be used to display text to the user.

These are made clear in Lets get started. The pet rock.

Lets Get Started! The Pet Rock

The Pet Rock exercise is great to introduce some key features as to how javascript works, it also adds a little humor. Who doesn't love a pet rock????!!!!!


1. We will add a JavaScript alert to make the rock greet users when the iRock web page is loaded.(an alert is js popping up a message box)

2. We will write code to ask for the user's name, print out a personalized greeting, and make the rock smile.

3. We will also add an event handler so that when users click on the rock, the code you wrote, will run. (an event handler is connecting something the user does, like clicking a rock, with the activity that you design)


Its starts with VERY SIMPLE html code as shown below.


<html>

<head>

<title>iRock - The Virtual Pet Rock</title>

</head>




<body>

<div style="margin-top:100px; text-align:center">

<img id="rockImg" src="rock.png" alt="iRock" />

</div>

</body>

</html>











Be sure to have the images below for your rock site!!!!
rock.png and rock_happy.png
















Next, you will add the greeting.
***even though the onload event applies to the entire page, you set it as an attribute of the tag because the body of a page is the part that is visible in a browser***



<html>

  <head>

    <title>iRock - The Virtual Pet Rock</title>

  </head>



  <body onload="alert('Hello, I am your pet rock.');">

    <div style="margin-top:100px; text-align:center">

      <img id="rockImg" src="rock.png" alt="iRock" />

    </div>

  </body>

</html>



  







BREAK IT DOWN
onload-------------indicates that the web page is finished loading
( )------------------enclose the information passed into a function
alert---------------display a text message in a pop up window
; -------------------terminate a line of js code


Now it might get a little more complicated, but do not fear :)

<html>

  <head>

    <title>iRock - The Virtual Pet Rock</title>



    <script type="text/javascript">

      function touchRock() {

        var userName = prompt("What is your name?", "Enter your name here.");

        if (userName) {

          alert("It is good to meet you, " + userName + ".");

          document.getElementById("rockImg").src = "rock_happy.png";

        }

      }

    </script>

  </head>



  <body onload="alert('Hello, I am your pet rock.');">

    <div style="margin-top:100px; text-align:center">

      <img id="rockImg" src="rock.png" alt="iRock" style="cursor:pointer" onclick="touchRock();" />

    </div>

  </body>

</html>





  







Javascript functions are placed in a special script tag that goes in the head of the page.

The type Attribute is used to identify the type of the script language in this case javascript.

Just like alert, every function in js has a name. This function's name is toughRock.

Prompt is a function to pop up a box and get a value from the user.

Once we have a name we greet the user personally.
and change the rock into a smiling rock

The onclick event attribute of the rock image causes the touchRock function to get called when the rock is clicked.


All information from this tutorial was from headfirstlabs.com

Tuesday, February 8, 2011

Welcome

I got an Object
I was sure it was a Point
ClassCastException