Upload
phuoc
View
44
Download
0
Embed Size (px)
DESCRIPTION
Intro to Programming and JavaScript. 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. - PowerPoint PPT Presentation
Citation preview
Intro to Programming and JavaScript
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
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
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
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.
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
STOP
• Show programs
Algorithms and Pseudocode
• Algorithm – Detailed instructions for solving a problem
• Pseudocode – English like statements mixed with code statements for describing an algorithm
JavaScript
• Used mostly in web browsers• Interaction with the user• Control• Alter content
Some JavaScript Examples
• http://maroslaw.github.io/rainyday.js/demo1.html
• http://www.javascriptfreecode.com/• https://cs.mtsu.edu/~mw3n/csci1150.html
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.
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>”);
Finding the Length of Words
• document.write(“This sentence has five e’s”.length);
• document.write(“Short word”.length);• document.write(“Four”.length)
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);
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?”);
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.”
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
JavaScript Comparisons
• > : Greater than• < : Less than• <= : Less than or equal to• >= : Greater than or equal to• === : Equal to• !== : Not equal to
Practice
• Make these true:– document.write(20 10);– document.write(“John Smith”.length 100);
– document.write(“USA” 3);
Conditionals
• Using Comparisons and Conditionals, computers can now make decisionsif (100 > 2){
document.write(“That is correct!”);}
2 Decisions – If, else
if (100 > 2){
document.write(“That is correct!”);}
else {
document.write(“That is incorrect.”); }
If and Else
if (100 > 2){
document.write(“That is correct!”);}
else {
document.write(“That is incorrect.”); }
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?”); }
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;
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”;
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>”);
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.”);
}