Now that example may look very complex to you, and in fact it does demonstrate LOTS of important aspects of programming. But do not worry, we’ll dissect this example carefully so that you fully understand what is going on.
Here are some questions that we should answer about the example above:
Button? We haven’t talked about a
buttontag before, whats the deal with that?
What is the
script tag? Again this is a new one why a
What in the world does all of that stuff inside the script tag mean?
What happened to my button!?!
Those are all very good questions, I’m glad you asked. Let’s take them one at a time right now, and then we’ll expand upon the ideas in the next few sections.
The button tag is part of HTML that is going to allow us to make interactive websites. In addition to buttons there are other things like check boxes, and text input, that we will talk about in the next section. For now we will use the button as a simple example, of something we are all used to using every day.
onclick attribute is the way we answer the question, “what should this button do when someone clicks on it.” The answer in this case is may lead to confusion, but hopefully you at least get the idea that when the button is clicked we want to “change this page”. The way we are going to do this is through a function call. You have used functions in math class many times, and these are not all that different. The important thing to remember is that functions are abstractions of things that need doing. We all use abstractions all the time in our everyday life.
For example, you may tell your friend, “I’m going to Computer Science now.” this is an abstraction of the following hypothetical steps:
Get out of bed.
Walk out of your room, down the hall and wait for the elevator.
Take the elevator to the fourth floor.
Walk out of the elevator, out of the door, and across campus to Olin hall.
Go in the door, and up the stairs to second floor, enter room 202 and find your favorite place to sit.
That would be a long boring conversation if you responded with all 6 of those steps every time a friend asked you what you were doing. But your friend understands those steps are necessary when you say you are going to class. Further more even step 1 is an abstraction of several smaller steps: Sit up, remove the covers, slide my legs over the side of the bed, stand up (or climb down the ladder).
This brings us to the next question, the
Make the background light green
Experiment with different style elements we have learned about through CSS. See if you can add a line that makes the text red.
Can you change the fontSize to 48pt?
What does that tell you about
Change the wording inside the
What happens if you add
<button>Click Me</button>after the closing