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.”);

}