Skip to content

Commit

Permalink
Commit for class 3 up to exercise 3. Events, clicks, mouseovers, etc.
Browse files Browse the repository at this point in the history
  • Loading branch information
@izzyjohnston
izzyjohnston committed Nov 23, 2012
1 parent c67bf6f commit f0451bc
Show file tree
Hide file tree
Showing 4 changed files with 215 additions and 0 deletions.
111 changes: 111 additions & 0 deletions class3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,11 +250,122 @@ <h3>Creating new element</h3>
</div>
</section>

<!-- Exercise-->
<section>
<h3>Let's Develop It!</h3>
<p>Try to convert last week's DOM interaction into jQuery.</p>
<p>Don't forget to include jQuery in your html head!</p>
</section>

<!-- Document Ready-->
<section>
<h3>Document Ready</h3>
<div class = "left-align">
<p>Webpages take time to load</p>
<p class = "fragment">Almost always, you don't want the JavaScript to be called until the page is loaded</p>
</div>
<div class = "fragment">
Document ready is a method called when the page is loaded
<pre><code contenteditable class = "javascript">
$(document).ready(function(){

});
</code></pre>
</div>
<div class = "fragment left-align">
<span class = "yellow">Note:</span> The function() inside is an "anonymous function". It has no name, but still performs like a function.
</div>
</section>

<!-- HTML Events-->
<section>
<h3>HTML events</h3>
<p>Events occur on a webpage via user interaction</p>
<p class = "fragment">Common Events:</p>
<ul>
<li class = "fragment">mouseenter -- mouse goes inside an element</li>
<li class = "fragment">mouseleave -- mouse leaves an element</li>
<li class = "fragment">click -- mouse clicks an element</li>
<li class = "fragment"><a href = "http://api.jquery.com/category/events/" target = "_blank">Other events</a></li>
</ul>
</section>

<section>
<h3>Handling events</h3>
<pre><code contenteditable class = "javascript">
$(selector).mouseenter(function(){
//code when the mouse enters
})
</code></pre>
<div class = "fragment">
<pre><code contenteditable class = "javascript">
$('.box').mouseenter(function(){
$(this).css('background-color', 'purple')
})
</code></pre>
</div>
<div class = "fragment left-align">
<div>The <span class = "green">$(this)</span> selector in jQuery refers to the element on whom the action was called.</div>
<div>Here <span class = "green">$(this)</span> is the <span class = "blue">$('.box')</span> that the mouse entered.
</div>
</section>

<section>
<h3>Handling event examples</h3>
<div class = "fragment">
<pre><code contenteditable class = "javascript">
$('.box').mouseenter(function(){
$(this).css('background-color', 'purple')
})
</code></pre>
</div>
<div class = "fragment">
<pre><code contenteditable class = "javascript">
$('.box').mouseleave(function(){
$(this).css('background-color', 'orange')
})
</code></pre>
</div>
<div class = "fragment">
<pre><code contenteditable class = "javascript">
$('.box').click(function(){
$(this).css('background-color', 'green')
})
</code></pre>
</div>
</section>

<section>
<h3>Combining events</h3>
<p>If you want multiple events to happen on the same element, you should use the bind method</p>
<div class = "fragment">
<pre><code contenteditable class = "javascript">
$('.box').bind({
click: function() {
$(this).css('background-color', 'green')
},
mouseenter: function() {
$(this).css('background-color', 'purple')
},
mouseleave: function(){
$(this).css('background-color', 'orange')
}
});
</code></pre>
</div>
</section>

<!-- Exercise-->
<section>
<h3>Let's Develop It</h3>
<ul>
<li>Add a div to your html that is 100px by 200px</li>
<li>Bind events to the div in your javascript file</li>
<li>Don't forget to surround your events with document ready</li>
<li>Try to change size, color, or event the html inside the div</li>
<li>Bonus: change all the onclick events to jQuery click events</li>
</ul>
</section>
<!-- -->
<section>
<h2>Questions?</h2>
Expand Down
24 changes: 24 additions & 0 deletions class3/exercise2/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<html>
<head>
<title>My Site!</title>
<link rel="stylesheet" href="style.css">
<script src = "http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src = "javascript.js"></script>
</head>
<body>
My Site!</br>
<a href = "#" id = "calculate">Calculate life time supply</a><br/>
<div id = "lifetime-supply">

</div>
<a href = "#" id = "favorites">See my favorite things</a>
<div id = "favorite-things">

</div>
<a href = "#" id = "friends">My friends</a>
<div class = "box">
</div>
<div class = "box">
</div>
</body>
</html>
75 changes: 75 additions & 0 deletions class3/exercise2/javascript.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
$(document).ready(function(){
$('.box').bind({
click: function() {
$(this).css('background-color', 'green')
$(this).html('Clicked!')
},
mouseenter: function() {
$(this).css('background-color', 'purple')
$(this).html('Hi!')
},
mouseleave: function(){
$(this).css('background-color', 'orange')
$(this).html('Bye!')
}
});
$('#calculate').click(calculate);
$('#favorites').click(favoriteThings);
$('#friends').click(myFriends);
})

function calculate(){
var age = 26;
var oldAge = 96;
var perDay = 2;

var days = (oldAge - age) * 356;
var total = perDay * days;
var resultDiv = $('#lifetime-supply')
if(total > 40000){
resultDiv.html("You will need " + total + " to last you until the ripe old age of " + oldAge + ". Wow! That's a lot!");
}else{
resultDiv.html("You will need " + total + " to last you until the ripe old age of " + oldAge + ". You seem pretty reasonable");
}
}

function favoriteThings(){
var favoriteThings = ['Rabbits', 'Orange', 'Yogurt', 'Brussel Sprouts', 'Otters'];
var resultDiv = $('#favorite-things');

var resultParagraph = $('<p></p>');
var result = 'My favorite things are: ';

for (var i = 0; i<favoriteThings.length; i++){
if (i < favoriteThings.length - 1){
result += favoriteThings[i] + ', ';
}else{
result += "and " + favoriteThings[i] + '.';
}
}
resultParagraph.append(result);
resultDiv.append(resultParagraph);
}
function myFriends(){
var friends = [
{name: 'Santa Claus',
hair: 'red'},
{name: 'Easter Bunny',
hair: 'brown'},
{name: 'Tooth Fairy',
hair: 'blue'}
];
var resultDiv = $('<div></div>')

var introParagraph = $('<p>My friends are:</p>');
resultDiv.append(introParagraph)

for(var i = 0; i < friends.length; i++){
var resultParagraph = $('<p>' + describeFriend(friends[i]) + '</p>');
resultDiv.append(resultParagraph);
}
$('body').append(resultDiv);
}
function describeFriend(friend){
return "My friend " + friend.name + " has " + friend.hair + " hair. ";
}
5 changes: 5 additions & 0 deletions class3/exercise2/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.box{
width: 100px;
height: 200px;
border: 1px solid #ccc;
}

0 comments on commit f0451bc

Please sign in to comment.