Intro to javascript

Intro to javascript • 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: <input type="button" id="hello-world" value="Hello”> 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

onClick="alert  <input type="button" id="hello" value="My favorite color is red" onClick="alert('Sorry, this is the wrong choice.');">

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 Some Action • 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: <input type="button" id="hello-world2" value="Hello" onClick="alert('Hello World!');" /> • 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.

Creating a function <HTML>  <HEAD> <SCRIPT LANGUAGE="JavaScript"> function MsgBox (textstring) { alert ( textstring + " is best person in the world. \n" + textstring + " has the greatest smile. \n" ) } </SCRIPT> </HEAD> <BODY> <form> First name: <input name="text1" TYPE="text"><br> <input name="submit" type="button" value="Woo Customer" onClick="MsgBox(form.text1.value)"> </form></BODY></HTML>

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: <input type="button" name="Button_" value=“____" onclick="changecolor(‘___')"> • 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.).

JavaScript for Changing the Background Color <HTML><HEAD><SCRIPT LANGUAGE="JavaScript"> function changeBGC(color){ document.bgColor = color;} </SCRIPT></HEAD> <BODY><form>  <input name="button1" type="button" value="RED" onClick="changeBGC('red')"> <input name="button1" type="button" value="YELLOW" onClick="changeBGC('yellow')"> </form></BODY></HTML>

Review • 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.

What a loop can do • 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.

<!DOCTYPE html> <html><body> <!– Add some functions that will repeat statements --> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script>function myFunction(){var x="",i;for (i=0;i<15;i++) { x=x + "The number is " + i + "<br>"; } document.getElementById("demo").innerHTML=x;} </script></body></html>

Review • 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 <head> and ends with </head>. The body starts with <body> and ends with </body>. In summary, the html document should start with this: <html> <head> </head> <body>

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. <alt> + <f> + <s> will bring down the file menu and save quickly in notepad and most applications. <f5> will reload the web browser. With practice, a programmer and save and check code in a second.

Rubric and Checklist • 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

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

Intro to javascript