1. Enhancing Websites with JavaScript

2. How Do You Give Directions? Lots of details? Specific steps? Just the gist? What language?

3. Giving Directions With JavaScript Just one way of talking to a computer. Not related to Java Useful for games and widgets Useful for websites

4. Just the Basics Format Output Variables Functions Input Conditionals

5. Format Goes in head or body or another tag or another file Uses tags Need to specify the language in the tag

6. Output Statements that tell the computer to print something somewhere. document.write(WhateverYouWantToPrint)

7. Output Example First JavaScript page document.write(" Hello World ");

8. Resulting Webpage

9. Hello Part 2 First JavaScript page document.write(" Hello World "); document.write(" Or Whoever Is Listening ");

10. And the Webpage

11. Why Use JavaScript? What if we wanted to calculate 2*3? 2*3=2*3

12. And the Resulting Webpage

13. JavaScript Solution First JavaScript page answer = 2*3; document.write("2*3="+ answer);

14. Resulting JavaScript Webpage

15. Another Calculating Example First JavaScript page timesanswer = 2*3; plusanswer = 2+3; document.write("2*3="+ timesanswer + " and 2+3=" + plusanswer);

16. Along With the Webpage

17. What if We Want Three Calculations? First JavaScript page answer = 2*3; document.write("2*3="+ answer + " "); answer = 10*5; document.write("10*5="+ answer + " "); answer = 1024*4; document.write("1024*4="+ answer + " ");

18. What if 100’s of Calculations? Or lots of something else beside calculations? Functions are an answer! Functions can go in the head and be called from the body.

19. Example Using a Function to Calculate First JavaScript page function calculateAnswers(number1,number2){ timesanswer = number1*number2; document.write(number1 + "*" + number2 + "=" + timesanswer); document.write(" "); } calculateAnswers(2,3); calculateAnswers(10,5); calculateAnswers(1024,4);

20. First Function Webpage

21. Not Much Fun Without User Input Can use tags Inside the form tags use tag Some types of input  Text  Button  Checkbox Types have attributes such as size and name Can respond back to the user with an Alert (tiny popup window)

22. Sample User Input Page First JavaScript page function calculateAnswers(number1,number2){ timesanswer = number1*number2; alert("The answer is: " + timesanswer); } Enter two numbers to be multiplied: Number1: Number2:

23. Resulting Webpage Check it out at http://www.cs.mtsu.edu/~pettey/1150/form. html http://www.cs.mtsu.edu/~pettey/1150/form. html

24. What About Conditions? If something happens, do something, otherwise do something else... That is the computer can do different things based on some decision.

25. Try Out and Example Without Decision Making The following website does division of two numbers. Try it out. Be sure to try and divide by 0. http://www.cs.mtsu.edu/~pettey/1150/form 2.html http://www.cs.mtsu.edu/~pettey/1150/form 2.html

26. How to do a JavaScript Decision If (something happens){ take some action } else{ take a different action }

27. Something Happens? Symbolmeaning ==Equal to, and yes that is two = signs right next to each other !=Not equal to >Greater than <Less than >=Greate than or equal to <=Less than or equal to

28. Example With Decision Making Check out http://www.cs.mtsu.edu/~pettey/1150/form 3.html http://www.cs.mtsu.edu/~pettey/1150/form 3.html Be sure to view the page source to see the condition.

29. More Examples Calculate the average of three test scores http://www.cs.mtsu.edu/~pettey/1150/form4.html http://www.cs.mtsu.edu/~pettey/1150/form4.html Read info and send email if over 18 http://www.cs.mtsu.edu/~pettey/1150/email.html http://www.cs.mtsu.edu/~pettey/1150/email.html Vote with alert after each button click http://www.cs.mtsu.edu/~pettey/1150/vote.html http://www.cs.mtsu.edu/~pettey/1150/vote.html Vote with alert only after announce the winner button is clicked http://www.cs.mtsu.edu/~pettey/1150/vote2.html http://www.cs.mtsu.edu/~pettey/1150/vote2.html