1 / 34

Javascript and Basic Programming Concepts

Javascript and Basic Programming Concepts. What is a Program?. A program is a specific set of instructions written in a computer language to perform a specified task. Usually comes in an Application file or “.exe”. What are some programming Languages?.

yoshikoj
Download Presentation

Javascript and Basic Programming Concepts

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. Javascript and Basic Programming Concepts

  2. What is a Program? • A program is a specific set of instructions written in a computer language to perform a specified task. • Usually comes in an Application file or “.exe”

  3. What are some programming Languages? • Python, Java, C, C++, Fortran- General Programming • HTML, XML, LaTeX, XHTML- Markup languages • CSS – style sheet language • SQL, Oracle, MySQL – Database • Mathematical, Matlab, Maple – Math • Machine Language

  4. How do we program? • Have to use a programming language • Programming Language: an artificial language designed to communicate instructions to a machine (computer)

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

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

  7. Just the Basics • Format • Output • Variables • Functions • Input • Conditionals

  8. 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>

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

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

  11. Resulting Webpage

  12. 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>

  13. And the Webpage

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

  15. And the Resulting Webpage

  16. 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>

  17. Resulting JavaScript Webpage

  18. Variables • A variable is a letter, word, or phrase that contains information • Example: x = 5

  19. Variable Data types • Integers – whole numbers (1, -8, 563) • Floating Point (float, double) – decimal (3.14, -5.555) • Complex – imaginary numbers (3 + 2i) • String – words, sentences, phrases (“Hello there.”) • Char – one character or letter (‘a’, ‘b’, ‘c’) • Boolean – True or False

  20. 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>

  21. Along With the Webpage

  22. 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>

  23. 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.

  24. 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>

  25. First Function Webpage

  26. 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)

  27. 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>

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

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

  30. 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

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

  32. Something Happens?

  33. 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.

  34. 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