teaching programming concepts with javascript: no software package required
DESCRIPTION
Teaching Programming Concepts with JavaScript: No Software Package Required. Paul Addison, Ivy Tech Community College Lafayette, Indiana. What scares off beginning programming students?. Software installation problems Confusion about files and directories Complexity of IDE - PowerPoint PPT PresentationTRANSCRIPT
Teaching Programming Conceptswith JavaScript: No Software
Package Required Paul Addison, Ivy Tech Community College
Lafayette, Indiana
What scares off beginning programming students?
• Software installation problems• Confusion about files and directories• Complexity of IDE• IF and WHILE statements? Not so much!
C# screen vs. JavaScript screen
C# screen vs. JavaScript screen
Simplicity of JavaScript
• No software installation• Any text editor works• No compiler needed• Runs in any browser• No Internet connection required• Instant feedback
Three HTML tags: that’s all
<html><body><script type=“text/javascript”>
(JavaScript statements go here)
</script></body></html>
JavaScript output goesto the browser
<html><body><script type=“text/javascript”>
// Display statements write to the browser pagedocument.write(“Do I have to say Hello, World?”);
</script></body></html>
Create and save the file in Notepad with an .html extension
<html><body><script type=“text/javascript”>
// Display statements write to the browser pagedocument.write(“Do I have to say Hello, World?”);
</script></body></html>
Open the file in any browser
Quickly move toprogramming concepts
<html><body><script type=“text/javascript”>
// Declare variables, add and display numbersvar numBoys = 14;var numGirls = 16;var totStudents = numBoys + numGirls;document.write(“Total students: ” + totStudents);
</script></body></html>
In the browser
The 3 programming structures<html><body><script type="text/javascript">
// Name of program: structures.html// Purpose of program: presents the three programming structures// Author: Paul Addison// Date: 15-Jan-2010
// Declare constants and variablesvar SP = " "; // literal spacevar BR = "<br />;" // line breakvar number; // number used for selection and loop
// This section demonstrates sequencedocument.write("These first three statements are in sequence." + BR);document.write("They follow one another in order." + BR);document.write("There is no variation or repeating." + BR);
// This section demonstrates selectionnumber = 5if (number < 10) document.write(number + " is less than 10." + BR);else document.write(number + " is greater than or equal to 10." + BR);
// This section demonstrates loopingwhile (number <= 20) { document.write(number + SP); number = number + 1}
</script></body></html>
In the browser
Arrays<html><body><script type="text/javascript">
// Name of program: displayArray.html// Purpose of program: set up an array, and display it forwards and backwards// Author: Paul Addison// Date: 15-Jan-2010
// Declare constantsvar BR = "<br />"; // line break
// Declare and initialize array of movie titlesvar movieTitles = new Array(8);movieTitles[0] = "Gone With the Wind";movieTitles[1] = "Finian's Rainbow"movieTitles[2] = "Camelot";movieTitles[3] = "Easy Rider";movieTitles[4] = "Hatari";movieTitles[5] = "Goldfinger";movieTitles[6] = "Swiss Family Robinson";movieTitles[7] = "Ben Hur";
// Display the array elements in forward order// Subscripts go from 0 up to 7for (i=0; i<=7; i++) { document.write(movieTitles[i] + BR);}document.write(BR);
// Display the array elements in backwards order// Subscripts go down from 7 to 0for (i=7; i>=0; i--) { document.write(movieTitles[i] + BR);}document.write(BR);
</script></body></html>
In the browser
Sorting algorithms<html><body><script type="text/javascript">
// Name of program: bubbleSort.html// Purpose of program: use bubble sort logic on an array// Author: Paul Addison// Date: 15-Jan-2010
// Declare constants and variablesvar BR = "<br />"; // line breakvar ARRAYSIZE = 3; // size of arrayvar maxElement; // last element in current array passvar index; // array index
// Declare and initialize the arrayvar presidentName = new Array(ARRAYSIZE);presidentName[0] = "Washington";presidentName[1] = "Kennedy";presidentName[2] = "Lincoln";
// Display the array before sortingdocument.write(BR + "Before sorting:" + BR);for (i = 0; i < ARRAYSIZE; i++) { document.write(presidentName[i] + BR);}
// Bubble sort logic// Outer loop works from last array element down to the first// Inner loop steps through array, comparing and swapping if necessaryfor (maxElement = ARRAYSIZE - 1; maxElement >= 0; maxElement--) { for (index = 0; index < maxElement; index++) { if (presidentName[index] > presidentName[index + 1]) { temp = presidentName[index]; presidentName[index] = presidentName[index + 1]; presidentName[index + 1] = temp; } }}
// display the array after sortingdocument.write(BR + "After sorting:" + BR);for (i = 0; i < ARRAYSIZE; i++) { document.write(presidentName[i] + BR);}
</script></body></html>
In the browser
Prompting and calling a function<html><head><script type="text/javascript">
// Name of program: squareFunction.html// Purpose of program: uses a function to compute and return a square// Author: Paul Addison// Date: 15-Jan-2010
// This function takes an argument and squares itfunction square(num1) { document.write("The argument sent to the square function was " + num1 + BR); var result = num1 * num1; return (result)}
</script></head>
<body><script type="text/javascript">
// Declare constants and variablesvar BR = "<br />"; // line breakvar ES = ""; // empty stringvar num; // number entered by uservar numSquared; // square of number, returned by function
// Prompt the user for a value between 15 and 25, convert to an integernum = prompt("Please enter a number from 15 to 25: ",ES);num = parseInt(num);document.write("You entered the number " + num + BR);
// Input validation: reprompt the user to enter a number between 15 and 25, as long as necessarywhile (num < 15 || num > 25) { num = prompt("Error...Please enter a number from 15 to 25: ",ES); num = parseInt(num)}
// Call the square function, display the resultvar numSquared = square(num);document.write("The value returned to the main program was " + numSquared + BR);document.write("End of program." + BR);
</script></body></html>
In the browser
Even recursion!<html><head><script type="text/javascript">
// Name of program: factorial.html// Purpose of program: use recursion to calculate a factorial// Author: Paul Addison// Date: 15-Jan-2010
// This function implements the definition of a factorial// If the number is 1, the function returns the value 1// Otherwise, it calls itself with the argument of the number - 1function factorial(num) { document.write("Processing the factorial of: " + num); if(num==1) return(1); else return(num * factorial(num-1));}</script></head>
<body><script type="text/javascript">
// Declare constants and variablesvar BR = "<br />"; // line breakvar ES = ""; // empty stringvar num; // the number entered by the uservar numFactorial; // the factorial calculated by the function
// Prompt the user for a number, convert the input to an integer// Call the factorial function, and display the resultnum = prompt("Enter a number: ",ES);num = parseInt(num);numFactorial = factorial(num);document.write("The factorial of " + num + " is " + numFactorial + BR);
</script></body></html>
In the browser
Summary
• Easy to use• Almost no overhead• Syntax carries easily from pseudocode, to C# and Java• You can teach good programming style and techniques• You can teach programming concepts, not software!
Teaching Programming Conceptswith JavaScript: No Software
Package Required Paul Addison, Ivy Tech Community College
Lafayette, Indiana