intro to programming and javascript. what is programming? programming is the activity of creating a...
TRANSCRIPT
![Page 1: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/1.jpg)
Intro to Programming and JavaScript
![Page 2: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/2.jpg)
What is Programming?
• Programming is the activity of creating a set of detailed instructions (Program) that when carried out on a consistent set of inputs will result in a consistent set of results.
• Programming has been around for several hundred years
![Page 3: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/3.jpg)
History of Programming
• 1206 AD – Kurdish medieval scientist built a programmable automata– Used pegs and cams in different places that would
trigger levers to produce a small drummer playing different rhythms and drum patterns. (Music Box)
• 1801 - Jacquard Loom, pasteboard cards with holes punched in them which told the loom the pattern to weave the cloth
![Page 4: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/4.jpg)
History of Programming
• 1830 – Charles Babbage adopted punch cards to control his Analytical Engine
• 1954 – FORTRAN is invented. Allowed user to enter in calculations by a formula directly (Y = X*2 + 5*X + 9)– Used a compiler to translate the text into machine
language
![Page 5: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/5.jpg)
History of Programming
• Late 1960’s – data storage and computer terminals were cheap enough that programs could be made directly on computers– Text editors could be used to program (Komodo)
• Popular programming languages: ActionScript, C++, C#, Haskell, HTML with PHP, Java, JavaScript, Objective-C, Perl, Python, Ruby, Smalltalk, SQL, Visual Basic, and dozens more.
![Page 6: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/6.jpg)
Programming Lifecycle• Requirements – Documenting the specifications of the problem
• Design – Creating the Algorithm to solve the problem
• Coding – Translating the Algorithm into instructions the computer can understand – Program
• Testing – Exercising the Program to ensure the expected results are achieved
• Debugging – If the expected results are not achieved; correcting the Algorithm or Program to address the “bugs”
• Retesting – Repeating all the testing to ensure the changes solved the problem(s) and didn’t create new problems
• Publishing – Making the Program available to the users
![Page 7: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/7.jpg)
STOP
• Show programs
![Page 8: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/8.jpg)
Algorithms and Pseudocode
• Algorithm – Detailed instructions for solving a problem
• Pseudocode – English like statements mixed with code statements for describing an algorithm
![Page 9: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/9.jpg)
JavaScript
• Used mostly in web browsers• Interaction with the user• Control• Alter content
![Page 10: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/10.jpg)
Some JavaScript Examples
• http://maroslaw.github.io/rainyday.js/demo1.html
• http://www.javascriptfreecode.com/• https://cs.mtsu.edu/~mw3n/csci1150.html
![Page 11: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/11.jpg)
First JavaScript Command
• document.write(“Stuff goes in here.”);
• Needs to go in between <script type=“text/javascript”>document.write(“Stuff goes in here”);
</script>• The above needs to go in the body.
![Page 12: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/12.jpg)
First JavaScript Command cont.
• All JavaScript commands end with a semicolon• You can put HTML into the JavaScript
command:document.write(“<h1> HTML from JavaScript </h1>”);
![Page 13: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/13.jpg)
Finding the Length of Words
• document.write(“This sentence has five e’s”.length);
• document.write(“Short word”.length);• document.write(“Four”.length)
![Page 14: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/14.jpg)
JavaScript Math!
• You can use JavaScript to do Math!document.write(3+4);document.write(3*4);document.write(3/4);
• Can write out a Math equation:document.write(“3+4=”, 3+4);
• Can multiply numbers with length of words:document.write(“Test”.length*10);
![Page 15: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/15.jpg)
JavaScript Communication
• You can talk to the user!confirm(“Today is a good day!”);confirm(“I am Batman”);
• You can ask for information:prompt(“What is your name?”);prompt(“What is your quest?”);prompt(“What is your favorite color?”);
![Page 16: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/16.jpg)
JavaScript Data Types
1. Numbers: 3, 2.5, -1000, 2.888889, etc.You can do math with them!
2. Strings: sequence of characters (words) in quotes“This is a string.”“Strings can also have numbers like 5 or symbols.”
![Page 17: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/17.jpg)
JavaScript Data Types cont.
• Boolean: only take values true or false• Statements can evaluate to true or false• Examples:– 100 > 10– 8 < 3– 10.4 < 30– “Test”.length < 2
![Page 18: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/18.jpg)
JavaScript Comparisons
• > : Greater than• < : Less than• <= : Less than or equal to• >= : Greater than or equal to• === : Equal to• !== : Not equal to
![Page 19: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/19.jpg)
Practice
• Make these true:– document.write(20 10);– document.write(“John Smith”.length 100);
– document.write(“USA” 3);
![Page 20: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/20.jpg)
Conditionals
• Using Comparisons and Conditionals, computers can now make decisionsif (100 > 2){
document.write(“That is correct!”);}
![Page 21: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/21.jpg)
2 Decisions – If, else
if (100 > 2){
document.write(“That is correct!”);}
else {
document.write(“That is incorrect.”); }
![Page 22: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/22.jpg)
If and Else
if (100 > 2){
document.write(“That is correct!”);}
else {
document.write(“That is incorrect.”); }
![Page 23: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/23.jpg)
Any Type of Comparison in If/Else
if (50/2 === “My Word”.length){
confirm(“Will the first block be displayed?”);}
else {
confirm(“Or the second block?”); }
![Page 24: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/24.jpg)
Variables
• Variables are like “boxes” or “containers” that can hold data (strings, numbers, booleans)
• Declaring some variables:var varName = “String variable”;var myAge = 23;var myName = “Matt”;var myBool = true;
![Page 25: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/25.jpg)
Some Variable Rules
• Variables can be letters and numbers:– No spaces or punctuation except underscores– When used, need to be spelled exactly
• Variables need to be declared once:var myVar = “Test variable”;myVar = “Changing test variable”;
![Page 26: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/26.jpg)
Variables Can Save Data to be Used Later
• var test1 = confirm(“Yes or no?”);• var test2 = prompt(“What is your favorite color?”);
• document.write(“You said: ”, test1, “<br>”);
• document.write(“Your favorite color is: ”, test2, “<br>”);
![Page 27: Intro to Programming and JavaScript. What is Programming? Programming is the activity of creating a set of detailed instructions (Program) that when carried](https://reader030.vdocuments.site/reader030/viewer/2022032708/56649e7a5503460f94b7a45d/html5/thumbnails/27.jpg)
Using Conditionals, Variables, and User Input
var myAge = prompt(“How old are you?”);if(myAge >= 18){document.write(“Welcome to rated R movie.”);
}else{document.write(“You cannot watch the rated R movie.”);
}