Today, you’ll present your portfolio websites and we’ll learn a little Javascript.
If you need forms for your Studio assignments, here’s a great source: W3Schools tutorial for forms
Javascript!
Javascript is the object-oriented, scripting language of the web. It can add zest, animation, and functionality to your web pages. Like CSS, Javascript can live in many different parts of your page and in external files that end in .js . Unlike CSS, they are enclosed in the tag <script></script>
Here is the basic structure of javascript:
<script type="text/javascript">
document.write("This is my first JavaScript!");
</script>This will run wherever it is placed in the body, printing the text “This is my first JavaScript!” in that spot. It can also be place in the <head>, where it will print when the page loads.
Javascript is used more effectively to store information in the head of a document that can be accessed later in the document. In this example, we store a function in the head and access it in the body:
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>
<body onload="message()">
<script type="text/javascript">
document.write("This message is written by JavaScript");
</script>
</body>
</html>
Javascript can also be located externally to the html document and accessed by a script tag in the head of the document:
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
We will work through this slideshow example in which we will make a slide show and swap out images.
Unfortunately, we do not have time in this class to cover much Javascript. So, you should go through the W3Schools tutorial to learn more.
JQuery is a library of Javascript programs that is easily implemented with designers with little javascript experience. Take a look through these great JQuery tutorials and try one for yourself. Follow the instructions very carefully, and make sure to download the .js file before beginning. If you have no idea what I am talking about, read through the tutorial again.
Assignment:
- Go through all of the W3Schools Javascript Tutorials. Get 3 working examples going and upload them to your public_html space. Link from your blog.
- Don’t forget your xhtml/css over break! make a page with 5 thumbnail images (100px x 100px) about your spring break. We will use these when you return!
- Extra credit for a working JQuery example, posted online and linked from your blog!
http://mysite.pratt.edu/~kmcconne/AShomepage.html
my portfolio website for class presentation
I finished an earlier project and made a few tweaks on my website-
* basically I restyled the links and edited line heights here and there as well as adding some more blogness.
Have a nice break!
http://prattkid.wordpress.com/2010/03/12/por-fin/
here is my website
http://mysite.pratt.edu/~jsoto3/website/index.html
website link
website
here are my thumbnail images
http://mysite.pratt.edu/~jsoto3/homework/springbreak/soto-break-gallery.html
here’s my new update
http://mysite.pratt.edu/~wboo/mypage.html
RSS feed for comments on this post. / TrackBack URI