 JavaScript is a programming language that web browsers understand. You can use it to make your web pages interactive by: Responding to user actions and changes on the page Manipulating the web page’s contents and behavior Communicating with the user directly

How Are HTML and Javascript Different? JavaScript commands are case sensitive, regular HTML commands are not. JavaScript can be embedded into HTML code JavaScript is more focused in the user’s interaction with the website, HTML is more focused on the view. JavaScript is a programming code, HTML is not.

Create A Button In order to create a button you need to write: This is a standard HTML code and when you click the button, nothing should take place The button is just there for show and you cannot interact with it

Review Intro to Javascript. How HTML and JS are different. Create A Button ONCLICK=“Alert”

Create A Button: Breaking It Down The ‘input type’ command lets the browser know what to show, in this case a button. The ‘id’ is for the commander, in this case you, to know what the intention of the button is (you can change it to whatever you want and nothing will change). The ‘value’ is the actual name that will show on the button. Try changing it to your name and see what happens when you open it.

 Adding JavScript commands will allow you to interact with the webpage and see some action.  The easiest way is to write what we want to happen into the button tag itself is:  When you click the button, a small window should appear showing the text in parenthesis.

Adding Some Action: Breaking It Down The ‘onClick=’ is an event handler It tells the browser to run whatever’s in the quotes when the event “click” happens to the button. The ‘alert’ lets the browser know that an alert window will pop up. The parenthesis with quotations (“”) let the browser know what the alert window will say. You can change this to whatever you want.

function MsgBox (textstring) { alert ( textstring + " is best person in the world. \n" + textstring + " has the greatest smile. \n" ) } First name:

Review Create A Button: Breaking It Down Adding Some Action Adding Some Action: Breaking It Down Creating A Function

Changing the Background Color This JavaScript will add special buttons on the browser. These buttons will change the background color of the web page. You can change the script to add in what ever colors you desire. During this activity, you will be able to add as many buttons as you like.

Background Code 1 Let’s look specifically at this repetition of code that represents the buttons: The ‘name’ command serves the same purpose as the ‘id’ command The changecolor command lets the browser know that the page will change color when the event ‘click’ happens to the button.

Background Code 2 The Parenthesis that appear next to the change color command tells the browser what color to change the background to. In the model JavaScript code, the name of the button corresponded to the value, but this is not mandatory. The value can be what ever name you choose. The changecolor can be any color and is not restricted to just the seven in the rainbow (biege, tan, peach etc.).

J AVA S CRIPT FOR C HANGING THE B ACKGROUND C OLOR function changeBGC(color){ document.bgColor = color;}

 Changing the Background Color  Background Code 1  Background Code 2  Javascript for Changing the Background Code

Using a Programming Loop Some times it can be helpful to have the computer do a task over and over again. Computers never get bored so they are good at monotonous tasks. In computer science, this is called a loop because the program will go around in circles. The computer gets to an end of a section of code and then starts over at the beginning of the code. It is important to understand how to create loops.

The for loop One way to make a loop is to use a for loop. In this kind of loop, you have to tell the computer a few important variables. You have to tell it what number to start on. You have to tell it what number to increment or count by. You have to tell it when to stop. By carefully specifying the variables, a programmer can create a successful loop.

 A loop can repeat many things. A loop can ask several questions using the same code. A loop can spit out huge amounts of text. A loop can input lines from a file. Anything that a programmer wants to do over and over again can be done with a loop.

Try it function myFunction(){var x="",i;for (i=0;i "; } document.getElementById("demo").innerHTML=x;}

 Using Programming Loop  The For Loop  What a Loop Can Do  Code  Parts of the Web Page

Parts of the Web Page Each.html document should have two main parts. The first part is the heading section. This heading section starts with and ends with. The body starts with and ends with. In summary, the html document should start with this:

Merging With Proper Placement Start with your largest program code. Then, implement the body and head section of each page at a time. Be sure to test each part of the puzzle to make sure it fits right before moving on to the next piece. Try to do the whole puzzle at once makes it harder than necessary.

Step by Step Programming Each time a student adds a part to their web page or JavaScript they should test it out in their web page. Place the code and the browser side by side. You can use shortcuts to make it go faster. + + will bring down the file menu and save quickly in notepad and most applications. will reload the web browser. With practice, a programmer and save and check code in a second.

 Slide 4: Does the page contain 5 questions about the student? 20pts  Slide 9: Does the page woo with 5 or more lines of poetry? 20pts  Slide 14: Does the page give options with 5 more color buttons? 20pts  Slide 19: Does the page examples of loops that enhance the page? 20pts  Overall aesthetics: Does the page look professional? 20pts

 Using Programming Loop  Merging With Proper Placement  Step by Step Programming  Rubric and Checklist