1 / 23

Teaching Programming Concepts with JavaScript:  No Software Package Required

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

clark
Download Presentation

Teaching Programming Concepts with JavaScript:  No Software Package Required

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Teaching Programming Conceptswith JavaScript:  No SoftwarePackage Required Paul Addison, Ivy Tech Community College Lafayette, Indiana

  2. What scares off beginning programming students? • Software installation problems • Confusion about files and directories • Complexity of IDE • IF and WHILE statements? Not so much!

  3. C# screen vs. JavaScript screen

  4. C# screen vs. JavaScript screen

  5. Simplicity of JavaScript • No software installation • Any text editor works • No compiler needed • Runs in any browser • No Internet connection required • Instant feedback

  6. Three HTML tags: that’s all <html> <body> <script type=“text/javascript”> (JavaScript statements go here) </script> </body> </html>

  7. JavaScript output goesto the browser <html> <body> <script type=“text/javascript”> // Display statements write to the browser page document.write(“Do I have to say Hello, World?”); </script> </body> </html>

  8. Create and save the file in Notepad with an .html extension <html> <body> <script type=“text/javascript”> // Display statements write to the browser page document.write(“Do I have to say Hello, World?”); </script> </body> </html>

  9. Open the file in any browser

  10. Quickly move toprogramming concepts <html> <body> <script type=“text/javascript”> // Declare variables, add and display numbers var numBoys = 14; var numGirls = 16; var totStudents = numBoys + numGirls; document.write(“Total students: ” + totStudents); </script> </body> </html>

  11. In the browser

  12. 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 variables var SP = " "; // literal space var BR = "<br />;" // line break var number; // number used for selection and loop // This section demonstrates sequence document.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 selection number = 5 if (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 looping while (number <= 20) { document.write(number + SP); number = number + 1 } </script> </body> </html>

  13. In the browser

  14. 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 constants var BR = "<br />"; // line break // Declare and initialize array of movie titles var 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 7 for (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 0 for (i=7; i>=0; i--) { document.write(movieTitles[i] + BR); } document.write(BR); </script> </body> </html>

  15. In the browser

  16. <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 variables var BR = "<br />"; // line break var ARRAYSIZE = 3; // size of array var maxElement; // last element in current array pass var index; // array index // Declare and initialize the array var presidentName = new Array(ARRAYSIZE); presidentName[0] = "Washington"; presidentName[1] = "Kennedy"; presidentName[2] = "Lincoln"; // Display the array before sorting document.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 necessary for (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 sorting document.write(BR + "After sorting:" + BR); for (i = 0; i < ARRAYSIZE; i++) { document.write(presidentName[i] + BR); } </script> </body> </html> Sorting algorithms

  17. In the browser

  18. 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 it function 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 variables var BR = "<br />"; // line break var ES = ""; // empty string var num; // number entered by user var numSquared; // square of number, returned by function // Prompt the user for a value between 15 and 25, convert to an integer num = 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 necessary while (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 result var numSquared = square(num); document.write("The value returned to the main program was " + numSquared + BR); document.write("End of program." + BR); </script> </body> </html>

  19. In the browser

  20. 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 - 1 function 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 variables var BR = "<br />"; // line break var ES = ""; // empty string var num; // the number entered by the user var 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 result num = prompt("Enter a number: ",ES); num = parseInt(num); numFactorial = factorial(num); document.write("The factorial of " + num + " is " + numFactorial + BR); </script> </body> </html>

  21. In the browser

  22. 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!

  23. Teaching Programming Conceptswith JavaScript:  No SoftwarePackage Required Paul Addison, Ivy Tech Community College Lafayette, Indiana

More Related