• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Writing for people new to programming

 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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 ]
 
Ranch Hand
Posts: 3271
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Sounds like a great idea to me, Eric. If you need a hand with it (or even just another pair of eyes to do some review work), let me know. I've actually been doing a lot of work with JavaScript lately and quite often have no clue what I'm doing. I'm sure that working through your tutorial would only help my cause.
One other thing to keep in mind is who your intended audience is. Is this for people that are new to programming? Or is this for people that are already programmers and are new to HTML/JavaScript? Depending on who your audience is, your tutorials will probably take on an entirely different tone. With total neophytes, for example, you might have lots of pseudo-code and what-have-you in order to help them understand the concepts. If it's for people that already understand programming, you can skip a lot of that.
Corey
[ February 25, 2004: Message edited by: Corey McGlone ]
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
my goal is for the help people out that are new to programing.
There are a lot of tutorials for people that know the basics.
Writing down to this level will be hard, but I think I might be able to pull it off.
The hardest part I think is just getting started and explain the script tags and how it works and where to place it.
The other parts should not be that bad. And I know there will have to be a lot of small samples to explain the simpliest things.
Eric
 
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
A suggestion I would make would be to
  • Write the tutorials using the most "all browser" complient code possible
  • If this can't be done, be sure and point out things like "IE 5.x ONLY" or whatever.

  •  
    Eric Pascarello
    author
    Posts: 15385
    6
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    The code would work with all modern day browsers (AKA NOT NETSCAPE 4 / IE 4 and below) This basically has become the new standard in coding of late and I really do not want to sit there and explain 2 pages of code to make it work with Netscape 4.
    Eric
     
    Cowgirl and Author
    Posts: 1589
    5
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    Howdy Eric, I'm a huge fan of teaching by having people do small games, and I think the number guessing game is great (although it's not the most exciting game ) We do that same number guessing game at the beginning of Head First Java; we like it for the same reasons -- it covers programming fundamentals in a very simple way (input and output, variables, testing/branching, possibly looping, etc.)
    I'm not really knowledgeable about javascript, and obviously there's a little *more* overhead in learning to do this in javascript than in java, but with javascript the students can get it on the web and everyone can see it, so that's pretty compelling.
    The only thing I'd say is that (especially because of the extra learning overhead involved in using javascript over java for this) you should be brutal about knowing what to leave out when you first teach this. Be willing to say "you don't have to understand this part in any detail... we'll go into more about this later...". In other words, resist the siren song that makes you want to explain each topic that you have to touch on. If you build their confidence and reassure them that it's OK not to know and understand all of the pieces they're using, they'll be able to focus on nailing the key parts you want to teach at that point.
    I think it sounds like a good plan, but again -- I don't know javascript enough to comment on the specific details.
    cheers,
    Kathy
     
    Eric Pascarello
    author
    Posts: 15385
    6
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    JavaScript is one of the best anguages to learn because there is so much a person can do and all they need is notepad and a browser. JavaScript is also not a very strict language. If you miss a semicolon it does not stop the world from spinning. The number guessing game is boring, but if they can make it to memory or tic tac toe they will have the power to do almost anything they want that is not very hard.
    Most people want the ability to do stuf with form elements and displaying text/images. All three tutorials will give them that.
    The other tutorials would show people how to move images around the screen, detect mouse position, and do other things with that. These are nothing to get really excited about, but this is what I see building the basics of this.
    I am planning on doing a detailed tutorial on board game design with javascript that would take a person from planning stage to development stage.
    I just need to convince my girlfriend to do these tutorials and see if she is able to follow them. If se can, then I might be able to teach anyone!! LOL
     
    Consider Paul's rocket mass heater.
    reply
      Bookmark Topic Watch Topic
    • New Topic