Review and Geolocation

Mini-Project Three

*Updated!* The deadline for Mini-Project Three has been extended to March 26th to give everyone time to debug their code and get more comfortable with these program structures. Bring your questions to today’s review. I will not be available on email from March 17th to 24th, but I can answer additional questions before and after that time.

Review: JavaScript Fundamentals

  • Visualizing Variables, Parameters, Arguments and Arrays
  • Functions
  • If/Else
  • Objects
  • Loops
  • Structuring a program
  • Associative Arrays ( {} )

Discussion: What’s the Big Deal about Mobile?

Practice: The Geolocation API / Spec

Reminder: Upcoming deadlines: Mini Project 3 (March 26th) and Pseudocode Design Analysis (April 2nd)- note that the schedule of due dates has been shifted back. Mini Project Four will require work with an API, Mini Project Five will be a canvas project. Make sure to plan your time and start thinking about your final project now!

Integrating JQuery

Review: Objects and Constructors

Pseudocode: Mini-Project Three

Introducing JQuery

In Class Exercise: Re-mastering Mastermind with JQuery

Working from the basic Mastermind code (available several posts down on the blog), we will transform the use of elements to JQuery standards.

Mini-Project Three: A JavaScript Sampler (due March 12th)

Following from the pseudo code you developed in class, design a game or application that uses all of the following:

  • Objects
  • Functions
  • Arrays
  • Variables
  • Built-in functions
  • Loops
  • If/Else statements
  • DOM/Elements

Your project should meaningfully integrate each element towards accomplishing your goal.  Example ideas include simple games, electronic literature and generated content, a dynamic portfolio page, or a simple web application.

  • A-Level Work: Build a working game or application that meaningfully integrates all the common JavaScript structures we’ve used thus far with well-commented and readable code. Code should demonstrate an understanding of how all structures work and the ability to combine the pieces towards an original solution to a clearly defined task. For A-Level work, the project should clearly demonstrate a move away from previous examples towards a new type of application.
  • B-Level Work: Build a working game or application that meaningfully integrates all the common JavaScript structures we’ve used thus far with well-commented and readable code. Code should demonstrate an understanding of how all structures work and the ability to combine the pieces towards an original solution to a clearly defined task.
  • C-Level Work: Create a basic application or game that includes all of the required content, but does not integrate the pieces (for instance, an application with several buttons that execute disconnected functions).
  • D-Level Work: Fails to compile or include all required elements.
  • Failing Work: Project is not submitted or demonstrates no attempt to complete the task.

JQ Mastermind

Aside

<!doctype html>
<html lang="en">
<head>
 <title>Mastermind</title>
 <meta charset="utf-8">
 <script src="jquery-1.7.1.min.js"></script>
 <script>
 var secret = "ABCDEF";
 //function init() {
 $(document).ready(function() {
 alert("I'm ready!");
 /* var button = document.getElementById("startButton");
 button.onclick = myButtonClick; */
 $("#startButton").click ( function() {
 alert("You clicked!");
 //var ul = document.getElementById("guessList");
 //$("ul").var userInput = document.getElementById("userGuess");
 //var userTry = userInput.value;
 var userTry = $("#userGuess").val();
 for (var i=0; i < secret.length; i++) {
 var found = false;
 if ((userTry.charAt(i))==(secret.charAt(i))) {
 $("#guessList").append(userTry.charAt(i).fontcolor("green"));
 found = true;
 }
 else {
 for (var j=0; j<secret.length; j++) {
 if ((userTry.charAt(i))==(secret.charAt(j))) {
 $("#guessList").append(userTry.charAt(i).fontcolor("red"));
 found = true;
 }
 }
 }
 if (found == false) {
 $("#guessList").append(userTry.charAt(i).fontcolor("black"));
 found = true;
 }
 }
 //alert(userTry);
 $("#guessList").append('<br>');
 });
 });
/* function myButtonClick() {
 var li = document.createElement("li");

 for (var i=0; i < secret.length; i++) {
 var found = false;
 if ((userTry.charAt(i))==(secret.charAt(i))) {
 li.innerHTML = li.innerHTML + userTry.charAt(i).fontcolor("green");
 found = true;
 }
 else {
 for (var j=0; j<secret.length; j++) {
 if ((userTry.charAt(i))==(secret.charAt(j))) {
 li.innerHTML = li.innerHTML + userTry.charAt(i).fontcolor("red");
 found = true;
 }
 }
 }
 if (found == false) {
 li.innerHTML = li.innerHTML + userTry.charAt(i).fontcolor("black");
 found = true;
 }
 }
 ul.appendChild(li);
 }
 //window.onload = init;*/
 </script>
</head>
<body>
 <form>
 <input type="text" id="userGuess" size="15" placeholder="Your Guess">
 <input type="button" id="startButton" value="Guess the Code">
 <ul id="guessList">
 </ul>
</body>
</html>

Tortoise and the Hare (in-class)

Aside

<!doctype html>
<html lang=”en”>
<head>
<title>Tortoise and Hare</title>
<meta charset=”utf-8″>
<script>
function makeMove(racer) {
if (racer.speed<=0) {
racer.speed = 1;
}
racer.position += racer.speed;
racer.rest();
// alert(racer.name + “: ” + racer.position);
}
function chooseWinner(racerOne, racerTwo) {
if (racerOne.position > racerTwo.position) {
return (racerOne.name + ” won!”);
}
else if (racerOne.position == racerTwo.position) {
return (“It’s a tie!”);
}
else {
return (racerTwo.name + ” won!”);
}
}
window.onload = function() {
var tortoise = {
name: “Tortoise”,
speed: 1,
position: 0,
rest: function() {
var tired=Math.floor(Math.random()*10);
if (tired==10) {
this.speed–;
}
else if (tired<4) {
this.speed++;
}
// alert(tired);
}
};
var hare = {
name: “Hare”,
speed: 3,
position: 0,
distract: 2,
rest: function() {
var tired=Math.floor(Math.random()*10);
if (tired > 4) {
this.speed–;
}
else if (tired<3) {
this.speed++;
}
// alert(tired);
}
};
for (var i=0; i<10; i++) {
// alert(“Got this far!”);
makeMove(tortoise);
makeMove(hare);
var ul = document.getElementById(“raceList”);
var li = document.createElement(“li”);
var liTwo = document.createElement(“liTwo”);
li.innerHTML = hare.name + “: ” + hare.position;
liTwo.innerHTML = tortoise.name + “: ” + tortoise.position;
ul.appendChild(li);
ul.appendChild(liTwo);
}
var winner = chooseWinner(hare, tortoise);
alert(winner);
}

</script>
</head>
<body>
<ul id=”raceList”>
</ul>
</body>
</html>

Objects and Functions

Mini-Project Two

Remember, Mini-Project Two is due before the start of class today. We need three volunteers to:

  • Share your solution for Mini-Project Two
  • Walk through and explain your script
  • Describe any challenges or debugging tasks and how you resolved them

Everyone will have to present once this semester for participation credit.

Introducing Objects, Methods and Functions

Discussion and Practice:

  • Parameters, Arguments and Return Statements (116-120)
  • Built-in Functions
  • Local and global variables (123)
  • Functions as values (128-129)
  • Objects (131-134)
  • Methods (142)
  • “this” (145)
  • Constructors (146-147)

In-Class Exercise and Homework: Revise our in-class “race simulator” to include three racers created using a constructor. Make sure the simulation correctly creates the three objects, properly uses methods to determine speed increase or decrease, and uses “this” to allow for potentially scaling the project beyond specific instances of racers. Email your code or a link to the project by next week’s class.

Mini-Project Three: A JavaScript Sampler (due March 12th)

Start brainstorming a small project that will use all the foundational JavaScript principles we’ve covered so far, including:

  • Objects
  • Functions
  • Arrays
  • Variables
  • Built-in functions
  • Loops
  • If/Else statements

Bring your ideas to class next week.

Initial Mastermind Solution

Aside

<!doctype html>
<html lang="en">
<head>
 <title>Mastermind</title>
 <meta charset="utf-8">
 <script>
 var secret = "ABCDEF";
 function init() {
 var button = document.getElementById("startButton");
 button.onclick = myButtonClick;
 }

 function myButtonClick() {

 var ul = document.getElementById("guessList");
 var userInput = document.getElementById("userGuess");
 var userTry = userInput.value;
 var li = document.createElement("li");
 alert("Button was clicked! " + userTry);
 for (var i=0; i < secret.length; i++) {
 var found = false;
 if ((userTry.charAt(i))==(secret.charAt(i))) {
 li.innerHTML = li.innerHTML + userTry.charAt(i).fontcolor("green");
 found = true;
 }
 else {
 for (var j=0; j<secret.length; j++) {
 if ((userTry.charAt(i))==(secret.charAt(j))) {
 li.innerHTML = li.innerHTML + userTry.charAt(i).fontcolor("red");
 found = true;
 }
 }
 }
 if (found == false) {
 li.innerHTML = li.innerHTML + userTry.charAt(i).fontcolor("black");
 found = true;
 }
 }

 ul.appendChild(li);
 }

 window.onload = init;
 </script>
</head>
<body>
 <form>
 <input type="text" id="userGuess" size="15" placeholder="Your Guess">
 <input type="button" id="startButton" value="Guess the Code">
 <ul id="guessList">
 </ul>
 </form>
</body>
</html>

“Interactive” Web Media

Class Discussion

  • Extending our work with user input
  • Adding elements to the DOM
  • Understanding Functions
  • Comparing two strings: mini-exercise

Mini-Project Two (Due February 27th!)

For project two, you’ll be working from the two examples we built in class to create a site that responds to user input. To get started, take a look at the rules of the game Mastermind: http://en.wikipedia.org/wiki/Mastermind_(board_game). Build a version of Mastermind that allows the user to guess at a combination, and keeps track of each previous guesses by displaying them on the page using visual cues (the color of text) to show a right letter in the wrong place or a right letter in the right place.

This project requires:

  • Generating the combination for the player to guess
  • Reading in the player’s guess and checking letter by letter (using loops to compare the character in each spot)
  • Outputting the guess to the browser (using an appended element, see pg 99)
  • Showing the player an alert message when they successfully win the game
For full credit, you need to attempt additional modifications. Here is the rubric for each grade:
  • A-Level Work: Build a working mastermind game that accurately responds to both a right letter in the wrong place and a right letter in the right place. Show the player’s guesses with clear visual cues, in some format appropriate to the game. End the game when the player guesses correctly. Handle inappropriate user guesses by prompting them to try again (if the guess is too long or has incorrect characters) Add  at least one extended functionality, such as: a high score table (based on number of guesses), the ability for the player to provide the code for someone else to guess (in imitation of a “two player” mode), or the option to play again without refreshing the browser.
  • B-Level Work: Build a working mastermind game that accurately responds to both a right letter in the wrong place and a right letter in the right place. Show the player’s guesses with clear visual cues, in some format appropriate to the game. Should respond to victory, but might not include the ability to reset without reloading the browser.
  • C-Level Work: Create a basic version of the game that is playable, but may not respond properly  to user hits or misses. Should successfully handle the victory condition.
  • D-Level Work: Mastermind is attempted but fails to compile due to errors in coding. The base of the scripting is present but not functional.
  • Failing Work: Project is not submitted or demonstrates no attempt to complete the task.

Challenge task: Keep track of the user’s high score using local storage. You can see the model for this type of code on page 105, and adapt it to this project. Remember to test your local storage on your server using Chrome or Firefox, and display the high score record somewhere on the page. 

Projects should be posted to your web server, and the link to the working project should be submitted by email by the start of class (5:30pm) on February 27th!

Countdown Class Exercise Solution

Aside

<!doctype html>
<html lang="en">
<head>
 <title>Countdown</title>
 <meta charset="utf-8">
 <script>
 function init() {
 var button = document.getElementById("startButton");
 button.onclick = myButtonClick;
 }

 function myButtonClick() {
 var userInput = document.getElementById("numberInput");
 var userNumber = userInput.value;
 alert("Button was clicked! " + userNumber);
 userNumber = parseInt(userNumber);
 if ((!isNaN(userNumber)) == true) {
 while (userNumber > 0) {
 alert("Countdown: " + userNumber);
 userNumber = userNumber - 1;
 }
 }
 else
 {
 alert("That's not a number!");
 }
 }
 window.onload = init;
 </script>
</head>
<body>
 <form>
 <input type="text" id="numberInput" size="15" placeholder="#">
 <input type="button" id="startButton" value="Start Countdown">
 </form>
</body>
</html>

Getting Started with JavaScript

Mini-Project One

Remember, Mini-Project One is due before the start of class today. We need two volunteers to:

  • Share your solution for Mini-Project One
  • Walk through and explain your script
  • Describe any challenges or debugging tasks and how you resolved them

Everyone will have to present once this semester for participation credit.

JavaScript and the Document Object Model

In-Class Exercise: Map out the DOM for your solution to Mini-Project One using the structures on page 56 for reference. Hand-in your map (on paper) before the end of class.

Discussion and Practice:

  • The Document Object Model (55-57)
  • While Loops and For Loops (46-47)
  • If and Else If (49-50)

Making a Countdown: Create a website that uses a “for” loop to alert the user as it counts down from a number of the user’s choosing. We’ll start with pseudocode and progress to handling user input. This is not a full project–you will submit your code at the end of class, and we’ll use elements of it to continue towards mini-project two.

Homework:

Create a main page (using properly structured HTML5) for linking to all your projects this semester. Email me the URL and indicate whether you are comfortable having the link shared to your classmates as part of the class blogroll (a list to be maintained on this site).  Also, please indicate if you are interested in having links to your projects tweeted publicly.

Getting to Know HTML5

Class Discussion

  • Getting to know HTML5
  • Using F12 + Learning From Code
  • Combining HTML5 and JavaScript
  • Pseudocode and project planning

Mini-Project One (Due February 13th!)

For project one, you’ll be working from existing code and building upon it. This is an opportunity to get used to the elements of HTML5 and start working with simple JavaScript elements to create dynamic web experiences. We’ll be working with the Phrase-O-Matic on page 70 of your text (HeadFirst HTML5 Programming). The base project takes arrays of words and combines them to make a random phrase display on the page each time the page loads.

This project requires:

  • Creating at least 3 arrays and filling them with strings of text
  • Using the Math.random() function to choose words
  • Printing out chosen words to a specified paragraph in the document
  • Using the “onload” command to display a phrase
For full credit, you need to attempt additional modifications. Here is the rubric for each grade:
  • A-Level Work: Convert the phrase generator to a poetry generator, imposing a structure and style on the generated content. Modify the stylesheet so that elements display appropriately and add context to the work. A-Level work must be cleanly formatted, include commenting for scripting, and use HTML5 elements appropriately.
  • B-Level Work: Extend the body section to include multiple paragraphs, each with a different phrase. B-level work should be cleanly formatted, include commenting for scripting, and use HTML5 elements appropriately.
  • C-Level Work: Get the phrase-o-matic working with your own content and at least one change in style, length of phrase, or another variable. C-level work should show an attempt at clean formatting, commenting and use of HTML5 but may not succeed in all elements.
  • D-Level Work: Phrase-o-matic is attempted but fails to compile due to errors in coding. The base of the scripting is present but not functional.
  • Failing Work: Project is not submitted or demonstrates no attempt to complete the task.

Challenge task: Change the code so that the user has some level of control. This might include pressing a button to generate a new phrase or poem, submitting words for inclusion in the phrase, or choosing the style of poem. (Challenge tasks are optional, and require working ahead in the book to succeed.)

Projects should be posted to your SIAT server space or another web server, and the link to the working project should be submitted by email by the start of class (5:30pm) on February 13th!