1 / 29

Enhancing Websites with JavaScript

Enhancing Websites with JavaScript. How Do You Give Directions?. Lots of details? Specific steps? Just the gist? What language?. Giving Directions With JavaScript. Just one way of talking to a computer. Not related to Java Useful for games and widgets Useful for websites.

msalyer
Download Presentation

Enhancing Websites with JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 <script> </script> tags • Need to specify the language in the <script> tag • <script type=“text/javascript”> </script>

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

  7. Output Example <html> <head> <title>First JavaScript page</title> </head> <body> <script type="text/javascript"> document.write("<h1>Hello World</h1>"); </script> </body> </html>

  8. Resulting Webpage

  9. Hello Part 2 <html> <head> <title>First JavaScript page</title> </head> <body> <script type="text/javascript"> document.write("<h1>Hello World</h1>"); document.write("<h2>Or Whoever Is Listening</h2>"); </script> </body> </html>

  10. And the Webpage

  11. Why Use JavaScript? What if we wanted to calculate 2*3? <html> <body> 2*3=2*3 </body> </html>

  12. And the Resulting Webpage

  13. JavaScript Solution <html> <head> <title>First JavaScript page</title> </head> <body> <script type="text/javascript"> answer = 2*3; document.write("2*3="+ answer); </script> </body> </html>

  14. Resulting JavaScript Webpage

  15. Another Calculating Example <html> <head> <title>First JavaScript page</title> </head> <body> <script type="text/javascript"> timesanswer = 2*3; plusanswer = 2+3; document.write("2*3="+ timesanswer + " and 2+3=" + plusanswer); </script> </body> </html>

  16. Along With the Webpage

  17. What if We Want Three Calculations? <html> <head> <title>First JavaScript page</title> </head> <body> <script type="text/javascript"> answer = 2*3; document.write("2*3="+ answer + "<br><br>"); answer = 10*5; document.write("10*5="+ answer + "<br><br>"); answer = 1024*4; document.write("1024*4="+ answer + "<br><br>"); </script> </body> </html>

  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 <html> <head> <title>First JavaScript page</title> <script type="text/javascript"> function calculateAnswers(number1,number2){ timesanswer = number1*number2; document.write(number1 + "*" + number2 + "=" + timesanswer); document.write("<br><br>"); } </script> </head> <body> <script type="text/javascript"> calculateAnswers(2,3); calculateAnswers(10,5); calculateAnswers(1024,4); </script> </body> </html>

  20. First Function Webpage

  21. Not Much Fun Without User Input • Can use <form> </form> tags • Inside the form tags use <input> 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 <html> <head> <title>First JavaScript page</title> <script type="text/javascript"> function calculateAnswers(number1,number2){ timesanswer = number1*number2; alert("The answer is: " + timesanswer); } </script> </head> <body> Enter two numbers to be multiplied: <form> <p><b>Number1:</b> <input type="TEXT" size="10" name="num1"> <p><b>Number2:</b> <input type="TEXT" size="10" name="num2"> <p><input type="BUTTON" value="Calculate Answer" onClick="calculateAnswers(num1.value, num2.value);"</p> </form> </body> </html>

  23. Resulting Webpage • Check it out at 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/form2.html

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

  27. Something Happens?

  28. Example With Decision Making • Check out http://www.cs.mtsu.edu/~pettey/1150/form3.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 • Read info and send email if over 18 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 • Vote with alert only after announce the winner button is clicked http://www.cs.mtsu.edu/~pettey/1150/vote2.html

More Related