Intro to Programming and JavaScript

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 Numbers: 3, 2.5, -1000, 2.888889, etc.You can do math with them! 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 decisions if (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: varvarName= “String variable”; varmyAge = 23; varmyName = “Matt”; varmyBool = 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: varmyVar = “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 varmyAge = 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.”); }

Intro to Programming and JavaScript