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.
example:
html
head body
div
p
<body>
<div id="content">
<p>hello!</p>
<p>yeah, you.</p>
</div>
</body>
getElementById()
If you have div id="content"
document.getElementById("content");
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
In the example hello! is the descendant of <p>
This grabs hello! :
var myVarKids = myVar.childNodes;
var myVarText = myVarKids[0].nodeValue;
other ways to grab:
.parentNode
.nextSibling
.previousSibling
Javascript Libraries
Drop Down Menus
We don't have to use the crazy ol' Dom now-a-days.
You can use:
MooTools
prototype + scriptaculous
jQuery
These are "middle-ware" that allow us to talk to the DOM more easily, it figures out all the child node craps.
jQuery
piggybacks on CSS
example:
CSS : #content p
jQuery: $(#content p)
---------------------------
jQuery Selector Test Bed
http://files.sawmac.com/js1e/chapter05/selectors.html
----
Selecting in jQuery
<p id="msg"> A message! </p>
in the DOM: boooo
var msPara = document.getElementById('msg');
in jQuery: yaaaay
var myPara = $('#msg');
We can grab:
ID - $('#stuff')Element/tag - $('p')
Class - $('.p')
Descendant - $('p em') //all em tags that are children of the p tag
Child - $('p >em')
Adjacent - $('h1+p') //grabs only the paragraph next to the h1
Attribute 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 Concepts
inner 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 jQuery
1. 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);
---------------------------------
Content Functions Test Bed
http://files.sawmac.com/js1e/chapter05/content_functions.html
No comments:
Post a Comment