Javascript Tutorial 2 - First Codes

Started by lordryan756, April 30, 2011, 09:57:35 PM

Previous topic - Next topic

lordryan756

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:
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:
<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:

<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/
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

Son of the King

#1
Just one point, the closing tag for head usually appears before the body tag like this:

Spoiler
<html>
<head>
*metatags and stylesheet declaration, some functions perhaps*
</head>
<body>
*main body of page, text not in other tags here is displayed on the page (as Jubal describes in his Web Tutorial 1)*
</body>
</html>

This is just a convention though and the way you described still works, just looks less neat to me...

Marcus

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.
"So if you meet me, have some courtesy, have some sympathy, and some taste. Use all your well learned politesse, or I'll lay your soul to waste."