0. Today’s featured website:
Today’s goals:
– Use JavaScript & jQuery
– Use the code console in Chrome so we can code right in the browser and see the changes immediately!
What is JavaScript?
JavaScript is an extremely useful and functional programming language that is used with HTML and CSS to make websites more interactive. It is also often used to create games, as you have seen or experimented with this year in some of our tutorials.
JavaScript is a programming language that is used on both the client and server sides (browser and web server). It is a powerful language that is worth knowing and that will take you far in creating web applications. There are loads of libraries written by others to use in your own projects, which makes life easier as long as you know how/why to include them!
We will also use jQuery, an extremely useful JavaScript library (JavaScript has many libraries that are used in web development; you can also write your own).
We will:
1. Make a farting webpage
2. Make an animated game character shoot fireballs right in the browser!
1. Fun with JavaScript- what the heck is going on?
Want to try it on your own?
Click here and see if you can figure out how to add the code to your simple webpage to make it work.
Open Notepad++
Begin a simple webpage:
<html>
<head>
<title>My annoying webpage</title>
</head>
<body>
<p>This is funny but it gets old fast!</p>
<p>This is funny but it gets old fast!</p>
<p>This is funny but it gets old fast!</p>
<script>
fartscroll(50);
$(document).ready(function() {
if((document.height – 51) < window.innerHeight) {
// Ensure scrolling
$(‘#container’).css(‘height’, window.innerHeight + 51);
}
});
</script>
</body>
</html>
Save this as fart.html on your computer.
Hint– you must add more content to your page so that it is long enough to have a scroll bar. Copy and paste is your friend!
Hint– the script source from #1 must go in the head section
Hint– Modify the code by changing the amount of pixels needed for scrolling from 50 to something else; make sure to change the other numbers based upon what you use
2. Fun with jQuery
We are going to do the following tutorial together. Please make sure you’re in Chrome!
http://www.thinkful.com/learn/intro-to-jquery
Click on the tutorial and then hit Ctrl Shift J at the same time to bring up Chrome’s console
Going further:
– Check out jQuery’s other API’s (basically things you can do with jQuery)
– Want to add all of the jQuery you just created to a separate webpage in Notepad? How could you do this? What would you need to include? What could you do to help figure this out? Hint- how can you see the code of the tutorial page?
– What if you wanted to change the image and use a new character in place of Ryu? How could you do this?