Summer Web Design Class Day 4

Today: experiment with JavaScript to make our web pages more interactive

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.

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!

1.  Fun with JavaScript- what the heck is going on?

Want to try it on your own?

Open Notepad++

Begin a simple webpage:

<html>

<head>

<title>My annoying webpage</title>

<script src="http://code.onion.com/fartscroll.js"></script>

</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);

</script>

</body>

</html>

Save this as fart.html on your computer.

Try adding more content and also changing the number of pixels a user needs to scroll before hearing the annoying sound.

2.  Surprise guest

You’re going to use JavaScript to have a surprise guest pop up on your webpage and make some noise.  The JavaScript controls how much time passes before the guest arrives and what noise the guest will make.

Your mission:

a. Copy and paste this code into a new Notepad++ file

b.  Find a new guest character (bing.com image search) or try http://www.pexels.com/

c.  Find a new sound (try here)

d.  Add the new guest character and new sound to your page (we will do this together)

This tutorial is courtesy of Thinkful.com.

3.  If we have time- your choice:

a.  jQuery tutorial to create an animated character

b.  Use JavaScript to make a game (half hour)