Wednesday, April 27, 2011

Functions
1. Way to reuse code
2. Set up series of steps @ start of page
3. "call" the steps later

There are tons of built in functions:
calculateTax();
alert();
Number();

There is a difference between parameters and arguments, although the book doesn't say this.

The simplest way to call a function: call its name
functionName();

If you make a function that is called printMessage, you need to get the information it is to use inside the parenthesis. This is called passing the argument.
printMessage('Hello!'); // Hello! is the argument

TO MAKE A FUNCTION
1. Define/Declare Function
2. Call Function (to run it)

function myFunction() { //defining//do this }

myFunction(); //calling the function

A better way:
When we define a function it is called a parameter.function printMessage(myMessage) {document.write(myMessage + "<br/>"); } var myMessage = "Greetings!"; printMessage(myMessage);

var myOtherMessage ="Boo hoo.";printMessage(myOtherMessage);//it doesn't have to match what is in the function above

Global vs. Local Scope
Variables created inside the function are different, they are local.
Variables born outside can go anywhere.

Local variables are visible only inside the function
Global scope are created outside, and can be seen everywhere.

If you want the variable to only be accessible to the code inside the function then you use var keyword inside the function.Local:
var message = 'Outside the function';
function warning() { var message = 'Inside the function';
alert(message); //'Inside the function'
}
warning();
alert(message); //'Outside the function'

Objects:Properties - parts like nouns or adjectiveMethods - things it does like verbs

Methods are functions that are specific to an object, they use a dot syntaxLike document.writedocument is an object and it has a thing that it can do, write.

Each object has its own list or properties and methods.An array has a length property.

Instance - you can have multiple version of a same kind of object.

-------------------

Math

to generate a random number - this is useful for giving you a number to use for an array

It generates a random number between 0 and whatever you set (num).But it doesn't give you a new number unless you use: Math.floor - gives you the number below (4.898 will be 4)Math.ceil - gives you the number up (4.898 will be 5)Math.round - rounds like regular

The correct answer to a quiz is LeCuyer, but the person types Lecuyer so they get it wrong.
To correct you can covert both the response and the correct answer to uppercase
if (response.toUpperCase() == correctAnswer.toUpperCase()) {
//correct
} else {
//incorrect
}

Tuesday, April 26, 2011

Read “Chapter 4 – Working With Words, Numbers and Dates” from “Javascript: The Missing Manual”.

Tutorial – Page 146 (name your file “yourlastname_ch4_tutorial.html” and any associated files) o It would be a great idea to try out some of the other code that the author talks about in this chapter.
EXTRA CREDIT if you turn in a file that shows how you used some of the examples (or created some of your own). Name this file “yourlastname_ch4_extracredit.html”.

4. Work on your project website: o Create a sitemap/flow chart of the entire site. o Select your color palette. Be sure to include the RGB and Hex values of the colors. (You should turn this in
in JPG or PDF format. No Illustrator or Photoshop files!) o Select the basic fonts you will use for each element/level of information hierarchy on your site. (Turn this in
in JPG or PDF format. No Illustrator or Photoshop files!) o Create a comp for the homepage of the site. (JPG or PDF format only. No Illustrator or Photoshop files!) o Start gathering content – both text and images. Be sure to have at least the content complete for one page
by next week, since you will use it in the labs.

Wednesday, April 13, 2011

Read “Chapter 3 – Adding Logic and Control to Your Programs” from “Javascript: The Missing
Manual”. A PDF of this chapter is located on the class website (listed above).
• Take notes on the reading.
• Do the following tutorials from Chapter 3. For each tutorial, create a separate file , named
as indicated below. (You may create your own file, or you can use the UNFINISHED versions
of the files that you can download from the book website.)
NOTE: Please type out the code yourself. You need the practice! DO NOT simply cut and
paste the code from the download site into your files. You will learn nothing, not understand
the concepts, and will probably fail the class. DO THE WORK, and you’ll learn it!
o Using Conditional Statements – pg 86 (lastname_conditional.html + js files as
needed)
o Do/While – revise earlier tutorial – pg 96 (lastname_do.html + js files as needed))
o Mini‐Tutorial (on Functions) – pg 99 (lastname_minitut.html + js files as needed))
o A Simple Quiz – pg 106 (lastname_quiz.html + js files as needed))

-----------

Finish the LAB

var input = prompt('How much money do you have to spend on lunch at Disneyland?');

Conditional StatementsUsed for:Form Validation : make sure they input information correctly, make sure the field is not emptyDrag and Drop: if the user drags and image somewhere, you can make something happenEvaluating Input: if you have a popup that asks a question you will want to react accordingly

How to Make a Conditional Statement
There are 3 parts:

1. if
2. ( a true or false question)
3. { if true what should happen}

Comparison Operators
== this is for Equality
<=
<
>= greater than equal to
> greater than
!= not equal

example:
This shows that you can have multiple lines inside the curly brackets.

This is like Bizarro Superman, it completely reverses the results of a condition.

if (! valid) {

//print errors and don't submit form

}

! valid can be translated as “if not valid”

if valid is false, then the condition is true

Nesting Conditional Statements

if (pets == 'youHaveCats') {var cats == prompt('How many cats do you own?'); if (cats <=3 && cats >=1) {alert('You are good person');}else (cats >=4) {alert('You have too many cats, your house must smell');}}

Conditionals Tutorial parseInt( variable,10) This command takes a value and tries to convert it to an integer.It is different from Number(), because it will convert a string with numbers as well. 20 years >> 20If it cannot it returns NaN.

var age = '08 years'; age = parseInt(age,10);(you have to add the 10 so that it gives you 8, instead of 0. Octal vs Decimal Numbers.)

var animals = ['dogs', 'cats', 'chupacabras', 'bees', 'narnicorns'};var counter = 0;//sets up a variable counter that will store index numberwhile (counter < animals.length) {// whileloop. when the index number is less than the total number of items in the array. (animals.length give the total number of items in the array, in this case 5)document.write(animals[counter] + ', ');//writes that animalcounter++;//adds 1 to the counter}

For LoopsAn easy way to repeat a series of steps

This is a way to re-write the whileLoops example (writing the numbers 1-100), using a forLoop.for (var num=1; num<=100; num++) {//counter variable; test the condition; add 1 to the numberdocument.write('Number ' + num + '<br>');}

num<= 100; this part is applied at the beginning of the statement and before each time through the loop

I'm not really sure of the scope of the assignment so I am submitting two final project ideas.

Project 1MikannoCon

A group of friends of mine are seeking to create a Orange County Anime Convention and have approached me to create a simple website that would outline the scope of the convention and supply information for potential sponsors and affiliates. At present the website does not exist, so this is not a redo but a from scratch website. I have been given a Word document with several pages of content that is to be divided into main and sub categories.

The purpose of this site would be to present information to potential attendees and affiliates. Parts of the site such as Registration will have information but will not be fully interactive.

Project 2Shaffer Sealinghttp://www.shaffersealing.com/index.html

This site would be a redo. I would use the current content and reorganize it in a way that is better, specifically easier to read and superior in design. In addition I might include some more images that I would supplied to me by the client.

About the website:Shaffer Sealing is an asphalt sealing company located in Truckee, California. The website is for potential and current customers to understand more about the company, what they do and how. The site will be divided into 4 sections:Welcome (basic pitch)How (what happens when you hire Shaffer Sealin)Questions/FAQContact

In addition a portion of the website explains another aspect of the business which is snow removal. I will also be incorporating this information into the Shaffer Sealing website.

Stringcan be in double or single quotes"This isn’t fair" (us double quotes to enclose a string with a single quote inside it) 'He said, "Hello."' is a valid string (how to include quotes in a string)"He said, "Hello.\ "" (use the \ - an escape character - to tell it to include that quote in the string)'He said, "This isn\'t fair."' (you have to use the escape character to make that phrase work)Booleanyou can use boolean value to check if a user did something or not, such as did they supply an email address - true or false

You can create multiple variables at once like this: var playerScore, gameRound, playerName;And you can declare and store multiple pieces of information inside like this:var playerScore=52, gameRound=1, playerName='Bob';

Wednesday, April 6, 2011

1. Get the book
2. The topic for final project website (an informational site)
the content needs to lend itself to being chopped up into subtopics
needs to have pictures because it will have image galleries
3. turn in a half page description of your site: that addresses the kinds of content, how you might organize the information, and the image gallery
4. read the chapter and take notes on the reading (you can use these notes on tests)
5. Do the following tutorials from Chapter 2. For each tutorial, create a separate file with a
filename as indicated below.
NOTE: Please type out the code yourself. You need the practice! DO NOT simply cut and
paste the code from the download site into your files. You will learn nothing, not understand
the concepts, and will probably fail the class. DO THE WORK, and you’ll learn it!
o Using Variables to Create Messages – pg 53 (name your file:
yourlastname_messages.html)
o Asking for Information – pg 54 (name your file: yourlastname_information.html)
o Writing to a Web Page Using Arrays – pg 67 (name your file:
yourlastname_arrays.html)

Walk to the driver's side of the car.
Get the key into our hand.
Locate the keyhole on the driver-side door.
Placing the end that is not ridged between your thumb and index finger, insert the ridged part into the key hole on the driver-side door.
Turn the key clock-wise until you hear clicking/unlocking sound.
Remove the key.
Lift the door handle and open the driver-side door.
Swing the door all the open so that you can enter the car with your body.
Sit in the seat, to do this you place your butt into the seat.

What we learn from this exercise:
Before we start writing code we should start with psuedo-code and write in plain English the steps we plan to take.

-------------------------------

Getting Started:
Create a new "site" in Dreamweaver (specify the folder where all the files will be).
Into the head:<script type="text/javascript">
alert("hello world");</script>

F12 (runs the page)
alert - is just giving you one of those alert boxes

It makes a difference where you put the code. Generally we put the code into the head of the page.

Script in the head =
If you add some text to the body and then view the page, the alert will pop up before you are able to see whatever you typed into the body.

Script in the body =
So if you put the alert into the body after the paragraph text in the body, you will see the body text before the alert.

Commenting:
There are multiple ways in javascript to comment-out code.

//single line
/* multi-line comment */

In the body
document.write("hello world, but this time it's better.");

var message; //declared a variable
message = "hello world, but this time it's better." //assign it a value

document.write(message); //write the message out to the page

</script></body>

Naming variables:
In JS it can only begin with a letter, $, or and _
var name, var $name, var _name
They can contain letters, numbers, $, _, camelCase BUT NO SPACES
The variables are case sensitive

Variable Data Types
every variable you make has a specific data type, it tells you what kinda stuff is in that container
Also it informs you what you can do with it.
For example if you have a number you know you can do math on it, as opposed to a string.

We will be dealing 3 common data types:Number- 5, 5.3, -5.3String - any series of alphanumeric characters that are enclosed in quotes (you can use single or double quotes)Boolean - true or false

var myVar ="5" this is a string
var myVar=5 this is a number
var hasCrap=true

---------------
Javascript is like html in that it doesn't care about white space.
But you can't put a carriage return in the middle of a string