Exilian

Game Design and Project Resources: The Workshops Quarter => Computer Game Development - The Indie Alley => Game & program tutorials => Topic started by: lordryan756 on April 30, 2011, 09:57:35 PM

Title: Javascript Tutorial 2 - First Codes
Post by: lordryan756 on April 30, 2011, 09:57:35 PM
This is a continuation of my previous tutorial, "Javascript Tutorial 1 - Beginner's Guide".

---Chapter 1---
~~Code Structure~~
Code,specifically Javascript code, uses an easily memorized structure. The structure comes in 4 general parts:
<html> - This goes first, so that you can write in HTML (Hyper Text Markup Language)
<head> - This goes below <html> and is used for off-screen stuff (CSS, JSS, HTML, Etc)
<body> - Most of the writing will be done in here
<script type="text/javascript"> - This is the most important tag for Javascript coding, since it lets the computer/browser know that everything following this is Javascript related.

Drum these tags into your thick skulled head, since these are the most important parts.

---Chapter 2---
~~Advanced Commands~~
Some of the more advanced commands will be listed and explained here:
Math.random()*Number Here - This is a slightly lengthy line of code that picks a random number. It will pick any number between 0 and "Number Here"

Math.floor() - This is an addition to "Math.random" that rounds the number down to the nearest whole number. Take the number you want and add 1

Math.ceiling() - This is an addition to "Math.random" that rounds the number up to the nearest whole number. Take the number you want and subtract 1

Example:
Code: [Select]
var randomnumber = Math.floor(Math.random()*11);
document.write(randomnumber);
Break it down: This generates a random number between 0-10 and then writes it in your browser.

<img src=\"Enter image URL here"> - This line of code makes the selected picture appear.
Example:
Code: [Select]
<openers>
document.write("This is me!")
<img src=\"URL for a picture of me">
<enders></div>

---Chapter 3---
~~Making a code~~
One example of a code is:

Code: [Select]
<html>
<head>
<body>
<script type="text/javascript">
var variable=5

if(variable==5)
{
document.write("Variable is equal to 5!")
}
</script>
</body>
</head>
</html>
This specific piece of code contains almost all of the points discussed in my last tutorial (Excluding the "else" statement). Now to break it down:

The "openers", or the <html>,<head>,<body>, and <script type="text/javascript"> let your browser/computer know what is going to happen (Re-read Chapter 1, Code Structure).
var variable=5 - Creates a variable, or "shortcut" that is the number 5.

if(variable==5) - This is part of an "if/then" statement. IF the variable (5) is equal to (==) 5....

{document.write("Variable is equal to 5!")} - THEN it writes this.

Then "enders" or </script>,</body>,</head>, and </html> means that the program/code is done, and that it has to stop.

This may seem like a lot, but after only 2 or so weeks, I can write this without thinking about it.


Sources:
http://www.tizag.com/javascriptT/ (http://www.tizag.com/javascriptT/)
Various Google sources

Coding Tools:
Notepad++ (Over 40 different code languages!)
Other items all over the internet

As always, corrections and comments are appreciated.


Edit 1: Fixed some errors
Title: Javascript Tutorial 2 - First Codes
Post by: Son of the King on May 01, 2011, 11:27:30 PM
Just one point, the closing tag for head usually appears before the body tag like this:

Spoiler (click to show/hide)

This is just a convention though and the way you described still works, just looks less neat to me...
Title: Javascript Tutorial 2 - First Codes
Post by: Marcus on May 02, 2011, 12:54:42 AM
The head tag has a big purpose, it holds all html/css/js info that isn't displayed on the screen, or is not directly to do with the look of the page.