Lately I have seen many people that are new to programming trying to program advanced applications way to fast and running into problems they have no idea what is going on. So I started to write out a framework for tutorials I am going to write to help people out. I want to explain this is 'baby' language and avoid the technical look at it so people new are eased into it.
There are a bunch of tutorials online, but many people complain about them since they do not actually give real results since they usually go chunk by chunk. They are not sure how to combine these chunks into a script. So that is why I had this idea.
Everyone should know I am into game programming so I thought that is what the new people can learn since it produces something that can be used and share to their friends.
I am going to place the outline for my toturials I have so far and I am wondering if you think this would be a good into into JavaScript without going to fast. I am trying to give the basics and give the new programmer nice results in their first script. People always want to play with displaying text on the screen and using form elements right away. So I want to show them how to do all of this.
-First tutorial
Description: Number Guessing Game. Explains: form elements, if statements, and function calls, variables, strings, uses innerHTML, document.write
JavaScript
-little introduction (nothing major)
-explain script tags
-show where code can be placed (head-body and why it goes there)
-explain how code executes in order
Variables and Strings
-explain difference between variables and strings
-add numbers together
-add strings together
-use Math properties for Random Number and Rounding Values
If Statements
-show how if statement works with else
-explain using else if
Form Elements
-onclick with button
-explaining functions and calling/executing the function
-get value of text area
Displaying Dynamic Text On Page
-explain how to use document.write and explain when and when not to use it
-explain innerHTML and it uses
Develop Game
-Go through process what needs to happen
-Develop Each Step On at a time
-Develop the following code
<html>
<head>
<TITLE> Number Guessing Game </TITLE>
<script>
var countTurns = 0; //variable to count number times to get answer
var numberMin = 0; //minimum number the random number can be
var numberMax = 10; //maximum number the random number can be
var randomNumber = Math.round(Math.random()*(numberMax-numberMin))+numberMin; //store random number
var outputMessage;
var alertMessageStr;
function MakeGuess(){
countTurns = countTurns + 1; //Add turn to total
var theGuess = parseInt(document.NumberGame.GuessNumber.value); //Get value user entered into the form
if(theGuess == randomNumber){ //If Numbers is equal. Then display alert and winning text
alertMessageStr = "You figured out that " + randomNumber + " was the Answer! It took you " + countTurns + " turns.";
outputMessage = "Game Over! Click Refresh to play again.";
alert(alertMessageStr); //alert that the user was correct
document.NumberGame.GuessButton.disabled = true; //disable the form button
}
else if(theGuess > randomNumber){
outputMessage = "The Secret Number is less than " + theGuess + "."
}
else{
outputMessage = "The Secret Number is greater than " + theGuess + "."
}
//Display Text om the page
document.getElementById("DisplayMessage").innerHTML = outputMessage;
document.getElementById("NumberMessage").innerHTML = "Current Turn Count: " + countTurns;
}
</script>
</head>
<body>
<script>
document.write("Please guess the secret number that is between " + numberMin + " and " + numberMax);
</script>
<form name="NumberGame">
<p><div id="NumberMessage"></div></p>
<p><div id="DisplayMessage">Please make your guess!</div></p>
<p><input type="textbox" name="GuessNumber">
<input type="button" name="GuessButton" value="Make Guess" onclick="MakeGuess()"></p>
</form>
</body>
</html>
-Second Tutorial
Description: Memory Match Game; Explains: For loop, 1D arrays, onmouseover onmouseout, changing object properties (images), setTimeout, time (if statements, variables, strings)
-Third Tutorial
Description: Tic Tac Toe; Explains: 2D arrays, dropdowns, Case/Switch Statements, global variables, local variables, cookies
Eric
[ February 25, 2004: Message edited by: Eric Pascarello ]
[ February 25, 2004: Message edited by: Eric Pascarello ]
I'm sure that working through your tutorial would only help my cause.
