Internet Programming



Internet Programming

Unit 1: HTML

HTML and the Internet

HTML and Hello World

HTML and the Sandwich

HTML tags

Parts of a Tag

P tag

B tag

A tag

How the Internet Works (a BRIEF discussion)

Unit 2:Multimedia, Color, and HTML

Hello World as a Picture

IMG tag

Media Ethics

EMBED tag

BODY tag

Hexadecimal colors

Putting it all Together

Bonus

Unit 3:JavaScript, Operators, and Iterators

Hello World in JavaScript

Variables

Operators

while

if

Unit 4:Hello World as an alert()

Functions

Event Driven Programming

FORM tag

INPUT tag

Gotcha()

More INPUT

Greeting

Generating Random Numbers

Putting it all Together

Appendix 1: Yahoo! Online services

Appendix 2: Tables

Appendix 3: Objects, Functions, and Parameters

Appendix 4: Logical Operators

Appendix 5: switch

Appendix 6: Workshop Projects

Internet Programming

HTML and the Internet

People use language to communicate; so do computers! There are lots of different languages people speak! There are also lots of different languages computers speak! In this class, we will learn 2 computer languages. The first of these languages is HTML (Hyper Text Markup Language). The other language we will learn is JavaScript. We will learn HTML first because it is easier.

HTML and Hello World

In Computer Science, there is a tradition of writing a "Hello World" program when you are first learning a new language. "Hello World" may not be a very interesting program, but if you can write a "Hello World" program then you know you can communicate with the computer in that language. That is the first step to being able to do more interesting things. In HTML, the "Hello World" program looks like this:

Hello World

To create your own "Hello World"

1. Push the start button on the screen using the mouse.

2. Choose Notepad.

3. Type the text above.

4. Choose Save from the File menu.

5. Type "hello.html" in the filename box.

6. Choose "All Files" in the filetype box.

7. Choose the "LOCATION"

8. Push the "Save" button.

9. Close Notepad.

10. Open Internet Explorer

11. Choose Open form the File menu.

12. Choose the LOCATION

13. Double click on "hello.html"

HTML and the Sandwich

Writing HTML is kind of like making a sandwich. When you make a sandwich you put a piece of bread on top and a piece of bread on bottom, but it doesn’t really matter what you put between them. In HTML, you have to put a on top, and a on bottom, but id doesn’t really matter what you put between them. You can put text (like we did when we wrote "Hello World") or you can put other things like pictures, sounds, or links to other pages.

HTML tags

The text between a ‘’ has a special name, a tag. Each tag tells the computer to do something special, like display the text as HTML, display a picture, skip a line, make the text bold, embed a sound, etc. The on top and the on bottom are tags. These tags tell the computer to interpret all the text between them as HTML. The tag without the ‘/’ is the starting tag because it comes first; the tag with the ‘/’ is the ending tag. Not all starting tags have an ending tag. If there is no ending tag, wee will call it a solo tag. If there is both a starting tag and an ending tag, we will call it a pair of tags. If there is a pair of tags, the property of the tag applies to everything inside the pair of tags.

Parts of a Tag

Each tag has a name; the name is the first word in the tag. Many tags also have attributes; an attribute consists of a paired name and value. For example, in the tag , IMG is the tag name, and SRC= "mypic.gif" is the attribute. SRC is the attribute name and mypic.GIF is the attribute value. The name of the tag is not cASe SeNsiTive; that means it doesn’t matter if it is lower case or upper case or both. The name of the attribute is not case sensitive either, but the value of the attribute is case. In order to make code easier to read, we will write HTML in all capital letters except for the attribute values. In HTML, there are many different tags and many of the tags have many attributes. We will learn about many of the more popular tags in class. You can learn about other tags by looking in a book about HTML, going to a site on the Internet that teaches HTML (like ), looking at the source code for web pages you like (choose Source from the View menu in your favorite browser), or asking other people who know HTML.

P tag

The P tag is a solo tag; it doesn’t have any attributes. The P tag skips a line for a new ‘P’aragraph. It looks like this : . To see how the P tag works, we will write "p.html".

The text fro "p.html" is as follows:

This is without skipping a line.

This is without skipping a line.

This is with skipping a line.

This is with skipping a line.

Make p.html using the same steps you used to make hello.html.

B tag

The B tag is a paired tag; it doesn’t have any attributes. The B tag makes all the test between its start tag () and end tag() ‘B’old. It looks like this: Some bold text. To see how the B tag works, we will write "b.html". The text for "b.html" is as follows:

This is plain text.

This is bold text.

Make b.html using the same steps you used to make p.html and hello.html.

A tag

The A tag is a paired tag with attributes. The A tag makes a line you can click on to go to another page. The attribute we will learn about in class is the href attribute. The href attribute specifies a URL (Uniform Resource Locator-like an address for the Internet you will go to when the link is clicked on. There are two kinds of URLs. Local or relative URLs contain just a filename. Universal URLs begin with a prefix like http:// and contain the whole address. Relative URLs are better when you will be moving both the linked to page (the page you are going to) and the linking page (the page you are coming from). Universal URLs are better when you will be moving just the linking page. There are advantages to both, so we will learn to do both. The A tag looks something like this: clickable text . To see how the A tag works, we will write "link.html." The text for "link.html" is as follows:

This is yahoo! This is a Universal URL!

This is hello. This is a local or relative URL!

Create link.html in the usual manner.

How the Internet Works ( a BRIEF discussion)

How does the Internet Work? It is best to think of the Internet like a giant postal system where the post office is always open. Uploading is like sending a copy of something to the post office. When you upload something, the post office takes what you have sent it and keeps it in a safe place. Downloading is like getting a copy of something from the post office. When you download something, you tell the post office you want to see a copy, and the post office sends you a copy, keeping the original in a safe place, so that the next person can download it. The post office in our example is actually called a server. A server is a computer somewhere that is always turned on and at a specific URL or address. When more people are using the Internet, the post office is busier, and it takes longer to process your requests. When people are sending more information over the Internet, it will also take longer to process your requests. When people are sending more information over the Internet, it will also take longer to upload or download.

Hello World as a Picture

In addition to using text on your web page , you can use graphics. For example, you can create a picture using paint that says "Hello World."

To create your own "Hello World" graphic:

1. Push the start button on the screen using the mouse.

2. Choose Paint.

3. Choose Attributes from the Image menu.

4. Set the Width and Height equal to 100 pixels.

5. Type "hello.html" in the filename box.

6. Create a small graphic that says "hello world"

7. Experiment with the utilities in the toolbox at the left side of the screen.

8. Choose Save from the File menu.

9. Type "hello" in the filename box.

10. Choose "Graphics Interchange Format (*.GIF)" in the filetype box.

11. Choose the LOCATION

12. Push the "Save" button.

13. The computer will warn you; choose "yes."

14. Close Paint.

IMG tag

The IMG tag is a solo tag; it has attributes. The attribute we will learn about in class is the source attribute. The IMG tag displays an image(IMaGe). The SRC attribute is the source(SouRCe) of the filename of the picture you want to display. The image tags looks like this . To see how the image tag works, we will write "pic.html." The text for "pic.html" is as follows:

This is my Hello World picture.

Create pic.html in the usual manner.

Media Ethics

Some electronic media is OK to take and distribute. Other electronic media may not be distributed because it is copyrighted and the copyright owners have not given permission for you to distribute their work. If you find a work that you already know is copyrighted and not OK to distribute- like a really popular song in its entirety- you should not take, it distribute it, or post it to your web page. If you are not sure, check the web page for a copyright symbol. Fortunately, even with this limitation, there are still many ways to get music and pictures and stuff. One way is to create your own. You can draw pictures in Paint (it is located in the same place as Notepad), and then same them as .GIF files in the file type. Another possibility is to use a digital camera, scanner, video camera, musical instrument, and/or microphone to create your own. There are also several hobbyists who post their work on the Internet and let you use it free of charge, and it is fine to take their work and distribute it as long as you adhere to their rules. (Some may require you to link back to their site; others may require you to credit them for the work.) You can find work that falls into this category by using a search engine such as Yahoo!, Google, etc. In addition to copyright rules, you should consider privacy rules when posting to the Internet. Generally, it is not wise to put your name, address, telephone number, picture or other personal information on the Internet without discussing it with your parents first.

EMBED tag

The EMBED tag is a solo tag; it has attributes. The attributes we will learn about in class are the source attribute, loop attribute, and autostart attribute. The EMBED tag "EMBEDs" media in your page. The SRC attribute is the source (SourCE) of the filename of the media you want to play. The LOOP attribute can be true or false. If it is false, the media will play once and then stop. If it is true, when the media reaches the end, it will start over and continue as long as the page is active in the browser. The AUTOSTART attribute can also be true or false. If it is true, the media will start playing automatically. The embed tag looks like this To see how the embed tag works, we will write "media.html." The text for "media.html" is as follows:

This is my media.

Create media.html in the usual manner. Before you open media.html in Internet Explorer you will need to find some media and save it to your directory. Also, make sure you save your media with the exact same name and capitalization and extension as the attribute value in the SRC tag.

BODY tag

The BODY tag is a paired tag; it has attributes. The attributes we will learn about in class are the bgcolor attribute and the background attribute. You can use either the bgcolor or the background attribute, but not both! The body tag contains information about the whole web page or BODY of the page. the bgcolor attribute allow you to specify a background color (BackGround COLOR) using hexadecimal colors (see below). The BACKGROUND attribute allows you to specify an image that will be tiled to create a background. The body tags look like this: or this . To see how the body tag works, we will write "color.html" and "tile.html". The text for color.html is as follows:

This is green!

Create color.html in the usual manner.

The text for "tile.html" is as follows:

This is my tiled background.

Before you open tile.html in Internet Explorer you will need to find a picture to tile and save it to your location. Also, make sure you save your picture with the exact same name and capitalization and extension as the attribute value in the BACKGROUND tag.

Hexadecimal Colors

In your computer monitor, there are a bunch of phosphors (chemicals) that are red, green, and blue. (They are these colors because these are the colors that the human eye "sees" best.) When they are hit with an electron gun, they glow and emit light and you see things on your computer screen. All other colors of light can be made from red, green, and blue. Black is made by not turning any light on, and white is made from turning them all on. You can make other colors by turning red, green, and blue on in varying amounts. The computer knows what color to make the screen based on a six digit hexadecimal (16 based) value you tell it. The first two digits represent how much red, the next two digits represent how much green, and the last two represent how much blue. The digits can be anything from 0-9,A-F(A=10, B=11, C=12, D=13,E=14,F=15). The left most digit of each color is multiplied by sixteen and added to the right most digit of each color to yield values from 0-255 for each color. You can find out the hexadecimal value of your favorite color easily by double clicking on a color in Paint- double click a pot of color, click the "define custom colors" option in the popup menu that appears, and over on the right hand side you will see the RGB(red, green, blue) values for the color that is selected. Divide these numbers by 16 to get the leftmost number and the remainder is the rightmost number for each color. Don't forget to map the 2 digit numbers to letters of the alphabet!

Putting it all Together

Make a web page that has a picture, sound, a link, and a background (either a solid color or a tiled picture), some bold text, and some skipped lines.

Bonus

Make a picture link (a picture that you can click on to go to another page).

Hello World in JavaScript

JavaScript is a language that allows you to add interactivity to your web pages. In JavaScript, the Hello World program looks like this:

document.write("Hello World");

Create it in the usual manner and name it jhello.html. You will notice that there is a new tag, the SCRIPT tag with one attribute, the language attribute. You may have guessed (correctly!) that there are other scripting languages that can be used on the internet. VBScript or Visual Basic Script is another popular scripting language, but we won't learn about it in this class. You have probably also noticed that all the information for the script is inside the SCRIPT tags. You will need to embed all of your scripts inside script tags with the correct language attributes. For more commentary on this line of code, please see Appendix 3.

Variables

A variable is a symbol that represents something else. In JavaScripts, before we can use a variable, we must declare it like this:

var v;

If we want several variables, we can declare them all together like this:

var a, b, c;

We can also initialize them (give them initial value) when we declare them, like this:

var a=1, b=2, c=3;

Make sure to separate the variables with commas and end with a semicolon. Also, make sure you have declared and initialized them before you try to use them in an operation. Variables can represent strings, objects, numbers, and other important data types. For now, all our variables with be numbers. A single = is called the assignments operator because it assigns the value on the right side to the variable on the left side.

Arithmetic Operators

We can use several operators on variables, just like we can with numbers. We can do basic arithmetic including addition:

var a=1, b=2, c;

c=a+b;

c=3 now because 1+2=3.

We can do subtraction

var a=1,b=2,c;

c=b-a;

c=1 now because 2-1 is 1.

We can also do multiplication

var a=3,b=2, c;

c=b*a;

c=6 now because 2*3 is 6.

We can also do division. The division operator returns the integer part only, not the remainder or fraction

var a=3, b=7,c;

c=b/a;

c=2 now because 7/3 is 2.

We can also do modulus. The modulus operator finds the remainder when one number is divided by another number.

var a=3, b=7, c;

c=b%a;

c=1 now because the remainder when 7 is divided by 3 is 1.

Additionally, there are two shorthand forms of doing arithmetic.

var a=1;

a++;

The ++ operator is called the increment operator. a++ is the equivalent of a=a+1, so a=2. You can use this same shorthand form for subtraction, (but not the other operators).

var a=5;

a--

The -- operator is called the decrement operator. a-- is the equivalent of a=a-1, so a=4

The other shorthand form of notation that will work with all operators is:

var a=6;

a+=2

This is equivalent to writing a=a+2, so now a=8.

while

In the computer, a while statement says to do something until a condition is met. For example, your parents may say, "While there is food on your plate, eat." In JavaScript, we would write this as

while(foodonplate){

eat();

}

Usually, while statements are used when you want to do something a certain number of times. For example, if you wanted to print out the numbers from 1 to 100, you might say

var x=1;

while(x instead of a ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download