Assignment2
advertisement
Devan Soltau
TEC 319
October 7, 2012
Assignment 2
1. Link: http://minijs.com/
-MiniJS is a plugin JavaScript library that offers interactive jQuery plugins written in CoffeeScript.
CoffeeScript is a programing language that compiles into JavaScript. These plugins range from
being a word counter, tooltip, slider, notification, feed, alert, dropdown, collapse, and tab. All of
these plugins are fairly interactive and refined.
Link: http://eightmedia.github.com/hammer.js/
-HammerJS is a JavaScript library that mainly focuses around touch gestures; for phone’s and
tablets. It is a fairly light weight JavaScript library, and it has some very interesting multi-touch
gestures. It can also be plugged into JQuery, which is always a plus.
2.
A JQuery JavaScript library can be linked to your website through a CDN server. Basically
you would have a <script> tag and then direct that script with and “src=.” You would then have
the src equal the location of your JS file on the CDN server.
The other way of you can link a Jquery JavaScript library to your website is just by
downloading the initial file. Then you would just add it to the other web page files so it could be
utilized.
Aside from that a JavaScript Library issued the power of the admin to manipulate
his/her website in almost anyway imaginable. You could place a slider to view deals on your
home page, you could have an interactive dragging option for your mobile application, the
prospects are endless.
3.
a.
$(function(){
});
-This is a basic shortcut method to initiate the same thing a
$(document).ready(function(){} would do. JQuery just gives you the option of
choosing which one you’d prefer to use.
b.
$(document).ready(function(){
{});
-This is a function built in to JQuery that waits until the HTML for a page loads
before it runs the script.
4.
.bind() – This basically allows for the attachment of a handler to an event for needed elements.
.delegate() – This allows for the attachment of a handler to one or more events for all elements
that match the selector; initially or later on, based on a specific set of root elements.
.live() – This allows for the attachment of a handler for all elements which match the current
selector; initially or later.
.on() – This allows for the attachment of a handler function for one or more events to the
selected elements.
5.
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Table</title>
<style>
table { margin: 1em; border-collapse: collapse; }
th {padding: .3em; border: 1px #ccc solid; text-align:center; color: white; }
td { padding: .3em; border: 1px #ccc solid; text-align:center; }
thead { background: #114EC5; }
#Table tr:hover { background-color:yellow; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.deleteRowButton').click(DeleteRow);
});
function DeleteRow()
{
$(this).parents('tr').first().remove();
}
$(document).ready(function() {
$('.addRowButton').click(AddRow);
});
Couldn’t get my prompt to work for appending to the table.
$('#waypointsTable tr').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
</script>
</head>
<body>
<table id="Table">
<thead>
<tr><th>First Name</th><th>Last Name</th><th>Student
ID</th><th>Email</th><th>Action</th></tr>
</thead>
<tbody>
<tr><td>John</td><td>Doe </td><td>1234</td><td>john.doe@gmail.com </td><td><a href=""
class="deleteRowButton">Delete</a></td></tr>
<tr><td>Amy</td><td>Adams</td><td>234234</td><td>amy.adams@hotmail.com</td>
<td><a href="" class="deleteRowButton">Delete</a></td></tr>
<tr><td>Meagan</td><td>Huffman</td><td>12255</td><td>john.doe@gmail.com</td>
<td><a href="" class="deleteRowButton">Delete</a></td></tr>
</tbody>
</table>
<a href="" class=”addRowButton”>Add Record</a>
</body>
</html>
6.
<html>
<head>
<title>Browsers</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$('#Ask').click(function()
{ window.location.href = 'http://www.ask.com'; });
$('#Bing').click(function()
{ window.location.href = 'http://www.bing.com'; });
$('#Google').click(function()
{ window.location.href = 'http://www.google.com'; });
$('#Yahoo').click(function()
{ window.location.href = 'http://www.yahoo.com'; });
</script>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi"
method="POST">
<div align="center">
<select name="mydropdown">
<option id="Ask">Ask</option>
<option id="Bing">Bing</option>
<option id="Google">Google</option>
<option id="Yahoo">Yahoo</option>
</select>
</div>
</form>
</body>
</html>
7.
{ “movies”:[
{“action”:
{ “movie”: “The Bourne Identity”,
{“actor”: “Matt Damon”,} } }
{“thriller”:
{ “movie”: “Seven”,
{“actor”: “Morgan Freeman”,} } }
{“comdey”:
{ “movie”: “Office Space”,} } ] }
