Skip to content

Commit bb85712

Browse files
author
Rebecca Murphey
committed
new code from september class
1 parent 9aa8e0d commit bb85712

File tree

9 files changed

+485
-42
lines changed

9 files changed

+485
-42
lines changed

‎index.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,8 @@ <h2>Specials</h2>
9999
</form>
100100
</div>
101101
</div>
102-
<script src="js/jquery-1.3.2.min.js"></script>
102+
103+
<script src="js/jquery-1.3.2.min.js"></script>
104+
<!-- <script src="js/solutions/specials.js"></script> -->
103105
</body>
104-
</html>
106+
</html>

‎js/solutions/js101.js‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ var bim = foo && bar; // logical AND operator && returns the value of the last t
1010

1111
if (foo) {
1212
// do something if foo is true
13-
} else if (bar) {
13+
} else if (
14+
bar && baz && bim
15+
) {
1416
// do something if bar is true AND foo was false
1517
} else {
1618
// do something if both foo and bar were false
@@ -36,13 +38,16 @@ foo.push('pear'); // add to an array when last index is not known
3638
foo.length; // 4 -- that's better
3739
foo; // ['apple', 'orange', 'banana', 'pear']
3840

41+
var foo = {
42+
bar : 'baz'
43+
};
3944

4045
/* objects */
41-
4246
var myObject = {
4347
'property' : 'value',
4448
'method' : function() {
4549
alert('hello');
50+
return 'hello';
4651
}
4752
};
4853

@@ -57,13 +62,36 @@ function myFunction() {
5762
// do stuff
5863
};
5964

60-
var myFunction = function() {
65+
var myFunction = function(a, b) {
6166
// do stuff
67+
return (a + b);
6268
};
6369

70+
myFunction();
71+
72+
var foo = 'hello';
73+
74+
var myThing = (function() {
75+
var myFn = function() {
76+
alert(foo);
77+
};
78+
var foo = 'world';
79+
return myFn;
80+
})();
81+
82+
myThing();
83+
84+
6485
// functions can be created and run without ever naming them
6586
(function(arg) { alert(arg); })('hello'); // alerts 'hello'
6687

88+
89+
(function($) {
90+
$('p').text('hello');
91+
})(jQuery);
92+
93+
$('p').text('hello');
94+
6795
// functions can receive 0 or more arguments;
6896
// these arguments can be anything, including other functions!
6997
var myFunction = function(a, b) {

‎js/solutions/menus.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
$(document).ready(function() {
2+
var cache = {};
3+
4+
$('<div class="container"/>')
5+
.css({
6+
border : '1px solid #ccc',
7+
padding : '5px'
8+
})
9+
.appendTo('#menus > li')
10+
.hide();
11+
12+
$('#menus a').click(function(e) {
13+
e.preventDefault();
14+
15+
var $a = $(this);
16+
var $container = $a.closest('ul')
17+
.siblings('div.container');
18+
19+
var href = $a.attr('href');
20+
var hash = href.split('#')[1];
21+
var url = 'html/' + hash + '.html';
22+
23+
var callback = function(html) {
24+
if (!cache[hash]) {
25+
cache[hash] = html;
26+
}
27+
$container.html(cache[hash]).show();
28+
};
29+
30+
if (cache[hash]) {
31+
callback(cache[hash]);
32+
} else {
33+
$.ajax({
34+
type : 'get',
35+
dataType : 'html',
36+
url : url,
37+
success : function(html) {
38+
callback(html);
39+
}
40+
});
41+
}
42+
43+
});
44+
});

‎js/solutions/sandbox.js‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
/*
2+
- get the third list item (hint: eq())
3+
- change its color to red
4+
- change the color of the rest of the list items to blue
5+
- *without doing another selection*, find the div.module and remove the class "module"
6+
*/
7+
8+
$(document).ready(function() {
9+
var $li = $('li').eq(2);
10+
11+
$li.css('color', 'red')
12+
.siblings()
13+
.css('color', 'blue');
14+
15+
$li.parent().prev() // div.module
16+
.removeClass('module');
17+
});
18+
19+
/*
20+
- get the h1
21+
- store its text in a variable
22+
- use the stored text as the text for the first list item
23+
*/
24+
$(document).ready(function() {
25+
$('li:first').text( $('h1').text() );
26+
});
27+
28+
/*
29+
bonus points:
30+
- change the background color of *every other* table row (hint: use :odd or :even)
31+
*/
32+
$(document).ready(function() {
33+
$('tr:odd').css({ 'backgroundColor' : '#ccc' });
34+
});
35+
36+
/*
37+
example showing find() and not()
38+
*/
39+
$(document).ready(function() {
40+
$('ul')
41+
.addClass('rounded')
42+
.find('li').not('.foo')
43+
.css('color', 'blue');
44+
});
45+
46+
/*
47+
playing with list items
48+
*/
49+
$(document).ready(function() {
50+
var $firstListItem = $('li:first');
51+
52+
$firstListItem
53+
.addClass('current')
54+
.siblings()
55+
.removeClass('current');
56+
57+
var liColor = $('ul')
58+
.css('border', '1px solid red')
59+
.children()
60+
.css('color', 'blue')
61+
.css('color');
62+
63+
console.log(liColor); // 'blue'
64+
});
65+
66+
$(document).ready(function() {
67+
/* appending */
68+
$('li')
69+
.each(function(i) {
70+
var $li = $(this);
71+
$('<span/>')
72+
.text(' number: ' + i)
73+
.appendTo($li);
74+
})
75+
.append('<span> hello</span>');
76+
77+
/* cloning and inserting */
78+
$('li').each(function() {
79+
var $li = $(this);
80+
var $newLi = $li.clone();
81+
82+
$newLi.text('new ' + $newLi.text());
83+
84+
$newLi.insertAfter($li);
85+
});
86+
87+
var $newUl = $('ul').clone();
88+
89+
$('<div/>')
90+
.insertAfter('h1')
91+
.append($newUl);
92+
93+
});
94+
95+
96+
/*
97+
manipulation exercises
98+
99+
- add five new list items to the end of the unordered list (hint: for (i=0; i<5; i++) { ... } )
100+
*/
101+
102+
$(document).ready(function() {
103+
var $ul = $('ul');
104+
var myListItems = [];
105+
106+
for (var i=0; i<5; i++) {
107+
// $ul.append('<li>this is my list item</li>');
108+
var text = 'this is my list item #' + i;
109+
myListItems.push('<li>' + text + '</li>');
110+
}
111+
112+
var myNewHtml = myListItems.join('');
113+
$ul.append(myNewHtml);
114+
});
115+
116+
117+
/*
118+
- remove the odd list items (hint: .remove())
119+
*/
120+
$(document).ready(function() {
121+
var $li = $('li:odd').remove();
122+
});
123+
124+
/*
125+
- add another h2 and another paragraph to div.module
126+
*/
127+
$(document).ready(function() {
128+
var $module = $('div.module');
129+
130+
$module.append('<h2>new headline</h2>');
131+
$module.append('<p>new paragraph</p>');
132+
});
133+
134+
135+
$(document).ready(function() {
136+
/*
137+
- add a new div.module to the page after the existing one; put a copy of the existing unordered list inside it.
138+
*/
139+
var $module = $('div.module');
140+
var $newUl = $('ul').clone();
141+
142+
var $newModule = $('<div/>')
143+
.addClass('module')
144+
.append($newUl)
145+
.insertAfter($module);
146+
147+
/* make list items clickable; mark the current one */
148+
$('li').click(function() {
149+
var $this = $(this);
150+
151+
$this.siblings().removeClass('current');
152+
153+
if ($this.hasClass('current')) {
154+
$this.removeClass('current');
155+
} else {
156+
$this.addClass('current');
157+
}
158+
});
159+
});
160+
161+
$(document).ready(function() {
162+
/* toggle (event) */
163+
$('td').toggle(
164+
function() {
165+
var $td = $(this);
166+
$td.addClass('current');
167+
},
168+
function() {
169+
var $td = $(this);
170+
$td.removeClass('current');
171+
}
172+
);
173+
174+
/* mark a clicked <a>; log the href */
175+
$('a').click(function(e) {
176+
e.preventDefault();
177+
178+
var $a = $(this);
179+
$a.addClass('clicked');
180+
181+
console.log($a.attr('href'));
182+
});
183+
184+
/* hover */
185+
$('li').hover(
186+
function() {
187+
$(this).addClass('current');
188+
},
189+
function() {
190+
$(this).removeClass('current');
191+
}
192+
);
193+
194+
/* click on p, simulate click on <a> */
195+
$('p:first').click(function(e) {
196+
var href = $(this).find('a').attr('href');
197+
window.location.href = href;
198+
});
199+
200+
/* timeouts and intervals */
201+
var myTimeout = setTimeout(function() {
202+
alert('hi');
203+
}, 5000);
204+
205+
var myInterval = setInterval(function() {
206+
console.log('hello');
207+
}, 1000);
208+
209+
$('p').click(function() {
210+
clearTimeout(myTimeout);
211+
clearInterval(myInterval);
212+
});
213+
214+
/* animation */
215+
$('h1').next('p').hide();
216+
217+
$('h1').click(function() {
218+
$(this).next('p').slideToggle();
219+
});
220+
221+
$('div.module h2').toggle(
222+
function() {
223+
$(this).next().slideUp();
224+
},
225+
function() {
226+
$(this).next().slideDown();
227+
}
228+
);
229+
230+
$('div.module h2').click(function() {
231+
$(this).next().slideToggle();
232+
});
233+
234+
$('ul li')
235+
.css('position', 'relative')
236+
.toggle(
237+
function() {
238+
$(this).animate({
239+
left : '20px'
240+
}, 500);
241+
},
242+
function() {
243+
$(this).animate({
244+
left : '0px'
245+
}, 500);
246+
}
247+
);
248+
249+
});

0 commit comments

Comments
 (0)