If I wanted to select all the paragraph tags in a document that had the class of special:
$('p.special')

All the header tags:
$('h1, h2, h3, h4, h5, h6') // this is called a group selector

$('h1 h2 h3') // this is a descendant selector

Filters (chap 5)
:hidden
:visible

Look this stuff up:
remove
replace
clone
append

Automatic Loops
$('p').hide();
In jQuery it has automatic looping, the jQuery Selectors have automatic loops built in. So you don't to loop through all the p tags to hide each one. It does that automatically.

We can chain functions:
$('p').width(300).height(300);
Instead of:
$('p').width(300);
$('p').height(300);
--------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------Selectors: addClass() / removeClass() / toggleClass()
great for in response of a mouse over, you might want to add or subtract something

$('a[href^=http://]')
selects every link that points to an outside page
this grabs all hrefs that start with http://

$('a[href^=http://]').toggleClass('extLink');
---------------------------------------------------------------------css()
(this is a function)
1. We can find out what a particular css property is for an element.
Then maybe we might want to add some conditionals.
2. Set CSS property on element
3. Set multiple CSS properties at once

We have to pass in some arguments to make it do something.

To do this:

var bgColor = $('#header').css('background-color');

For 1. When you trying to find out something you will have to be very specific, like if you want to know the border you will have to say border top instead of border. (when setting the property you can use the short hand of just border)

For 2. This is how you set 1 property. (you don't use the colon, it only looks for 2 arguments cause you don't have the curly brackets)

$('#header').css('background-color', 'red');

For3. We have to use curly braces, to indicate that you are sending in a list.

$('#header').css({

'background-color': '#FF0000',

'border': '2 px solid #000000'

});

You could use the above for rollovers.
-------------------------------------------------------------------Read, Set, Removeattr()
HTML Attributes

You could check all the img for alt tags and if there are none you could add alt tags.

1. Getting the attribute:

var imageFile=$('#header img').attr('src');

2. Replacing:

var imageFile=$('#header img').attr('src', 'newImage.jpg');

for example: You set the above to a mouse event
<img src="lolcat.jpg" />
becomes <img src="newImage.jpg" />

---------------------------------------------------------- each()$('img').fadeOut();
If we something custom that looks for only certain images:

each()
is a special kind of argument
anonymous function (it doesn't have a name)
because they don't have a name you can't call them

Attaching Events to Elements
1. Select one or more elements (selectors)
2. Assign an event
3. Pass a function to the event
4. Add necessary action to the function (our code)

Example of toggle:

//first have to select the thing that you want to toggle

//add the event to the thing

//pass in an anonymous function inside the click parenthesis
$('#idname').click( function () {//now add the thing that you want to have effected
$("p").toggle("fast") //you can set the speed at which it toggles
});

//now have another type of toggle

$("$toggle02").click (function () {
$("#02 p").toggle("slow");
});

---------------------Document Ready
Javascript runs as it is loaded into the page. The problem is that say for example you add jQuery that effects images and that script is in the head of the page, but the images are down below in the body and they have not loaded yet. So you get an error because the it is trying to apply the script to images that aren't there yet.

$(document).ready(function () {

// all of your code

//99% of the time you are going to use this document ready

});

This says wait for the html to load before you load all the javascript

Wednesday, May 11, 2011

Regular Expressions
For picking out the days of the week.
For picking out the weekend we can look for the days that start with S, because the only days that start with S are weekend days. /\b[S]/i
/ = open
\b = boundary character
[S] = what to look for
i = ignore the case (Sunday, sunday)

/^[S]/i;
this also works

function dayMessage(){

var days = ['Sunday','Monday','Tuesday','Wednesday',
'Thursday','Friday','Saturday'];
var now = new Date ();
var dayOfWeek = days[now.getDay()]; //on the now object we created we assign the string to dayOfWeek
document.write(dayOfWeek);

//everything abov eis just to get the day, we had to convert the number to a string

var dayMatch = /^[S]/i;

if (dayOfWeek == dayMatch) {
document.write('Yay it is a weekend');
}else {
document.write('Boo hoo it is a weekday');
}

}

dayMessage();

------------------------------------Document Object Model"the DOM"
The browser has a idea/model of how all the pieces relate and fit to each other
This is important for CSS in terms of descendants and inheritance.
Can be thought of in terms of family tree.
The DOM is a W3C standard, it is separate from Javascript.
Each browser interprets the DOM differently.

Each tag or piece is called a "NODE"
In order for Javascript to manipulate the page it has to communicate with the nodes.

To select the paragraph tag: (this is not selecting the string/text inside the paragraph) getElementsByTagName('p');var myParas=document.getElementsByTagName('p');//in this example myParas will be an array cause it will hold multiple pieces of info

Descendant - $('p em') //all em tags that are children of the p tagChild - $('p >em')Adjacent - $('h1+p') //grabs only the paragraph next to the h1Attribute Selectors //the stuff in quotes in html like height width src alt - $('img[alt]'), $('a[href]'), $('img[height=42]') //this grabs images that have height="42" in the html attribute

^ = value starts
$ = value ends
* = value contains

$('img[alt*=happy]') // selects alt tags that contains the value happy
---------------------------------------2 Big Conceptsinner HTML
a way to scoop up all the stuff inside the html (not as simple as jQuery)

When we are writing jQuery you are not writing javascript and vice versa, in other words you can intermix.
You have to use the jQuery versions of ceil and floor, not the javascript versions.

The differences between DOM based and jQuery1. Automatic Loops: in jQuery your selector automatically loops for you.
$('p').hide(); //goes through all the p puts them into an array then hides all the pieces of the array
in jQ it automatically loops through everything and does what you want it to do

2. Chaining Functions: with jQ we can chain functions together and have it all in one line.
$('#popup').width(300).height(500).text("howdy!").fadeIn(1000);

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';