JavaScript introduction / PDF

JavaScript introduction  / PDF 

Sample of the PDF document 

Creating our first JavaScript (jumping in feet first!)

Create a basic HTML page (Use your template). Add an image to the web page (I added an image called kittenasleep.jpg), making sure that the image has a unique id (I gave the id of “kitpic1”).

NOTE: JavaScript identifies different elements on your web page by their id. It is tempting to use the src or the href, but it is the id that is significant in identifying which element you’re modifying.
Now that you have a basic web page, let’s add Javascript.


Now that you have a basic web page, let’s add Javascript.

Step 1: The Script Tag

The script tag tells the browser that the code between the two

id = "kitpic1"/>




Step 2: Add a function.

A function is a name we give a certain section of JavaScript. We give small pieces of code names so that we can “call” that code.

In English, let’s say you had a bunch of plants to pot. You might have a list of steps for planting the pot.

1. Empty a container
2. Fill the container half-way with soil
3. Put a plant in the pot
4. Fill around the plant in the pot with soil until the pot has soil to ½inch from the top of the pot
5. Add ½ cup of water to the pot.

If you had 80 plants to pot, you wouldn’t want to have to tell someone 80 times to do those 5 steps – both you and the person would go nuts. So you might choose to give that list of steps a name, sort of like this:
Pot_Planting_Steps:

1. Empty a container
2. Fill the container half-way with soil
3. Put a plant in the pot
4. Fill around the plant in the pot with soil until the pot has soil to ½inch from the top of the pot
5. Add water to the pot.


Now every time you want someone to pot a plant, you can just say, “Do the Pot_Planting_Steps” and they’ll know to go look at the steps associated with the name “Pot_Planting_Steps” . (Granted, this is a pretty lame example. Most people can remember the steps to potting a plant and thus wouldn’t need to have the steps written down and named. But you get the idea of writing out a list of steps to execute, and then giving those steps a name, so you just have to refer to the name when you want those steps to be executed).
In JavaScript we specify that a certain section of code has a name by using the word function followed by the name we want to give the code. We specify where the code belonging to the name starts using { and we specify where the code belonging to the name stops using }. So, since we don’t know any JavaScript yet, we’ll use our English example above and start to JavaScript it. With our English example, we’d get:
function Pot_Planting_Steps()

{
Empty a container
Fill the container half-way with soil
Put a plant in the pot
Fill around the plant in the pot with soil until the pot has soil to ½inch from the top of the pot
Add water to the pot.
}
NOTE: In a function, you do the steps in order unless otherwise specified. So you’d always do “Empty a Container” before “Fill the container…”, etc......

 JavaScript introduction  / PDF