![Page 1: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/1.jpg)
* Introduction to JavaScript
![Page 2: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/2.jpg)
How Do You Give Directions?
*Just the gist?
*Lots of details?
*Specific steps?
*What language?
![Page 3: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/3.jpg)
Programs
* Program – the set of instructions that:* Provide the detailed steps to take in carrying out a task* When repeatedly used result in the same actions under
the same conditions* Sufficiently describes the actions to be taken under
normal and abnormal conditions
* Computers carry out their work by following the instructions given in stored Programs
* Programs are developed by people:* Using special languages* Built from scratch; Using building blocks; By cloning
and modifying existing programs
![Page 4: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/4.jpg)
JavaScript
*Just one of the Programming Languages for talking to a computer.
*Not related to Java
*Useful in developing: *Games*Widgets*Websites
![Page 5: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/5.jpg)
Just the Basics
Javascript is a rich language; here are the basics:
*Format and positioning Javascript within a web page
*Constants and Variables
*Calculations
*Output
*Input
*Functions
*Conditionals
![Page 6: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/6.jpg)
Format
*Javascript program code can be placed within a web page<head> or <body> or within another tag, or in a separate file
*Identified by <script> Your Statements Here </script> tags
*Need to specify the language in the <script> tag
*<script type=“text/javascript”> Your Statements Here </script>
<html><head><title>First JavaScript Program</title></head><body><script type="text/javascript">
alert("Another Annoying Pop-up");</script></body></html>
![Page 7: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/7.jpg)
Output
•Statements that tell the computer to print/display something somewhere.
document.write(“WhateverYouWant”);
Note that Javascript statements end with a semicolon
![Page 8: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/8.jpg)
Output Example
<html><head><title>First JavaScript page</title></head><body>
<script type="text/javascript">document.write("<h1>Hello World</h1>");
</script>
</body></html>
document.write presents it’s contents to the browser for its interpretation.
![Page 9: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/9.jpg)
Resulting Webpage
![Page 10: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/10.jpg)
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>
![Page 11: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/11.jpg)
And the Webpage
![Page 12: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/12.jpg)
Why Use JavaScript?
What if we wanted to calculate 2*3?
What would the results look like?
<html><body>2*3=2*3</body></html>
![Page 13: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/13.jpg)
And the Resulting Webpage
![Page 14: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/14.jpg)
Constants and Simple Variables
•Constants maintain a fixed value2 3 Joe
•Variables are buckets that hold values, and can change
Answer = 2; the variable Answer now contains the value 2Answer = 2+1; the variable Answer now contains value 3
![Page 15: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/15.jpg)
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>
“+” sign concatenates the character strings
![Page 16: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/16.jpg)
Resulting JavaScript Webpage
![Page 17: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/17.jpg)
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>
![Page 18: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/18.jpg)
Along With the Webpage
![Page 19: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/19.jpg)
What if We Want Three of the Same 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>
![Page 20: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/20.jpg)
What if 100’s of Calculations?
*Or lots of something else that requires the same instructions beside calculations?
*Recoding the same statements is time consuming, error prone, and no fun.
*Functions are an answer!
*Functions are reusable snippets of code that accept input and produce results/actions.
*Function definitions go in the <head> section and are called from within the <body> section.
![Page 21: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/21.jpg)
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>
Parameters communicate values
![Page 22: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/22.jpg)
First Function Webpage
![Page 23: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/23.jpg)
How About Some User Input
*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)
![Page 24: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/24.jpg)
Sample User Input Page
Live example: www.cs.mtsu.edu/~hcarroll/1150/inputExample.html
<!DOCTYPE html><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> <p><b>Number2:</b> <input type="TEXT" size="10" name="num2"></p> <p><input type="BUTTON" value="Calculate Answer" onClick="calculateAnswers(num1.value, num2.value);"/></p> </form> </body></html>
![Page 25: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/25.jpg)
Try Out and Example Without Decision Making
*How would we change the previous example to divide instead of multiple?
*Try it out. Be sure to try dividing by 0.
*www.cs.mtsu.edu/~hcarroll/1150/division.html
![Page 26: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/26.jpg)
How to do a JavaScript Decision
If something happens, do something, otherwise do something else...
That is the computer can do different things based on some decision.
In JavaScript language:
If (something happens){take some action;
}else{take a different action;
}
![Page 27: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/27.jpg)
* Example If Statement
if( answer == "yes") {
document.write("I agree");
}
![Page 28: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/28.jpg)
* Example If-else Statement
if( answer == "yes") {
document.write("I agree");
} else {
document.write("I disagree");
}
![Page 29: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/29.jpg)
* Example If-else if-else Statement
if( answer == "yes") {
document.write("I agree");
} else if( answer == "no") {
document.write("I disagree");
} else {
document.write("Make up your mind");
}
www.cs.mtsu.edu/~hcarroll/1150/webDevelopment/ifExample.html
![Page 30: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/30.jpg)
Conditionals
Symbol meaning
== 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
![Page 31: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/31.jpg)
Revisit Division Exercise
*How can we improve our division function to not report infinity when dividing by 0?
![Page 32: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/32.jpg)
JavaScript Decision Making Exercise
*Given a variable grade, that has values 0-100, write JavaScript to print out the corresponding letter grade:
90-100 A
80-89 B
70-79 C
60-69 D
0-59 F
![Page 33: * Just the gist? * Lots of details? * Specific steps? * What language ?](https://reader036.vdocument.in/reader036/viewer/2022062715/56649d9c5503460f94a85cdf/html5/thumbnails/33.jpg)
More Examples
*You’ll find a collection of them including those detailed below at:
http://www.cs.mtsu.edu/~djoaquin
*Calculate the average of three test scores http://www.cs.mtsu.edu/~pettey/1150/form4.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
*Read info and send email if over 18 http://www.cs.mtsu.edu/~pettey/1150/email.html