Central Games Forum
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Starting off Javascript Tutorial

Go down

Starting off Javascript Tutorial Empty Starting off Javascript Tutorial

Post by im_not_emo Fri Oct 31, 2008 8:39 pm

Javascript is my Main programming Language, i know some quite complex things when it comes to Javascript. So if you don't neccesairly need to learn Javascript, post on this and I'll help you out.

Before taking this Tutorial, you will need to know HTML. If you don't know any HTML go to My HTML Tutorial. As you will need to know about CSS also take John's HTML Tutorial

Ok, the basics. Javascript is a Client Side script for making Dynamic content on a website. What does this mean? It means that the script runs on the viewer's computer, and runs differently dependent on the browser. Dynamic content means that it reacts to how long the site has been viewed for, what the user is doing, what has been loaded etc.

So simply put, Javascript is the script of a website.

Ok, so when you add Javascript's to HTML, you use the "" tags. There is two ways you can add Javascript's to a HTML document:
Way 1:
Code:
<script>
window.onload=alert("Hello World");
</script>
Way 2:
Code:
<script src="hello.js"></script>
Note In way 2, you still need the closing tag.

Ok, so now lets learn how to program some basic scripts.
The Hello World script:
Code:
window.onload = alert("Hello World");

As you can see, that is very simple. Lets break that down:
window - This is an object, this particular object is predefined as the window of the website
onload - This is an event that is called by the window object when it is loading the page
alert() - This is a predefined function that makes a window come saying the string you put inside it.

Note Most lines must be finished by a ;

The Total Hello World Site:
Code:
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<script>
window.onload = alert("Hello World");
</script>
</body>
</html>

Lets think about how a website is loaded in a web browser. It is sent byte by byte. Which means that it is loaded in the order the page is written. So if for example you have a script that runs straight away that is placed at the top of the file, the rest of the site will not have appeared yet, and the opposite is true if you put it at the end.

So, how does that help us? It helps us because if we want the script to write the page, it can be placed at the top. If the script interacts with the page, then it should be placed at the end so that the elements it interacts with are loaded. It also helps us write loading scripts, but we'll get to that latter.

An example Game i wrote:
Code:
<html>
<head>
<title>INEGames</title>
<style>
body { background-color:#000; color:#009; font-family:arial; font-size:14pt; text-align:center }
h1 { font-family:princetown let }
h2 { font-family:princetown let }
.item { background-color:#004; cursor:pointer; color:#009; font-family:princetown let }
.clickable { cursor:pointer }
#site { background-color:#002; width:800; text-align:center }
</style>
</head>
<body>
<center><div id="site" align="center"><h1>INEGames</h1>
<div style="width:100%; background-color:#003"><span id="home" class="item" onmouseover="document.all['home'].style.color='#000'" onmouseout="document.all['home'].style.color='#009'" onclick="location.href='index.html'">Home</span> |
<span id="about" class="item" onmouseover="document.all['about'].style.color='#000'" onmouseout="document.all['about'].style.color='#009'" onclick="location.href='about.html'">About</span> |
<span id="contact" class="item" onmouseover="document.all['contact'].style.color='#000'" onmouseout="document.all['contact'].style.color='#009'" onclick="location.href='contact.html'">Contact Us</span> |
<span id="software" class="item" style="background-color:#224" onmouseover="document.all['software'].style.color='#000'" onmouseout="document.all['software'].style.color='#009'" onclick="location.href='software.html'">Software</span> |
<span id="projects" class="item" onmouseover="document.all['projects'].style.color='#000'" onmouseout="document.all['projects'].style.color='#009'" onclick="location.href='projects.html'">Projects</span></div>
<h2>Software</h2>
<div id="selection"><ISML TYPE="counter"> plays</div><br/>
<div id="result">Loading...</div><br/><br/>
Did you like this game?<br/>
<b onclick="location.href='voteYes.html'" class="clickable">Yes</b> | <b onclick="location.href='voteNo.html'" class="clickable">No</b>
<script>
var score = 0;
var wrong = 0;
var question = 0;
var answer;

function init()
{
 score = 0;
 wrong = 0;
 question = 0;
 document.all['result'].innerHTML = "<b onclick=\"start()\" class=\"clickable\">Click Here To Start</b>";
}

function start()
{
 document.all['result'].innerHTML = "<b>Score: </b>";
 document.all['selection'].innerHTML = "Guess the Correct Answer!";
 setTimeout("newQ()", 2000);
}

function newQ()
{
 document.all['result'].innerHTML = "<b>Score: </b>"+score+"<br/>\n<b>Question: </b>"+question;
 var a = Math.round(Math.random()*10) + 1;
 var b = Math.round(Math.random()*10) + 1;
 var c = Math.round(Math.random()*10) + 1;
 answer = Math.round(Math.random()*3);
 if( answer == 0 )
 {
  document.all['selection'].innerHTML = "<span onclick=\"answerR()\" class=\"clickable\">"+a+"</span> | <span onclick=\"answerW()\" class=\"clickable\">"+b+"</span> | <span onclick=\"answerW()\" class=\"clickable\">"+c+"</span>";
 }
 else if( answer == 1 )
 {
  document.all['selection'].innerHTML =  "<span onclick=\"answerW()\" class=\"clickable\">"+a+"</span> | <span onclick=\"answerR()\" class=\"clickable\">"+b+"</span> | <span onclick=\"answerW()\" class=\"clickable\">"+c+"</span>";
 }
 else
 {
  document.all['selection'].innerHTML =  "<span onclick=\"answerW()\" class=\"clickable\">"+a+"</span> | <span onclick=\"answerW()\" class=\"clickable\">"+b+"</span> | <span onclick=\"answerR()\" class=\"clickable\">"+c+"</span>";
 }
}

function answerW()
{
 question += 1;
 wrong += 1;
 if( question == 11 || wrong == 3 )
 {
  endGame();
 }
 else
 {
  newQ();
 }
}

function answerR()
{
 question += 1;
 score += 10;
 if( question == 11 )
 {
  endGame();
 }
 else
 {
  newQ();
 }
}

function endGame()
{
 document.all['selection'].innerHTML = "";
 if( Math.round(Math.random() * 10) == 5 )
 {
  score += 10 * Math.round(Math.random() * 10);
  document.all['selection'].innerHTML = "<font size=1>Bonus Points!</font><br/>";
 }
 document.all['selection'].innerHTML += "Game Over";
 document.all['result'].innerHTML = "<b>SCORE - "+score+"!</b><br/><br/>\n<p onclick=\"init2()\" class=\"clickable\">New</p>";
}

function init2()
{
 score = 0;
 wrong = 0;
 question = 0;
 newQ();
}
window.onload = init;
</script>
</body>
</html>
This can found at: http://inegames.5u.com/bored.html

Note This is almost exactly the same code i have on the site.

So why have I shown you this? Simple, it is to show how important it is to know HTML. If you have used GML (as most if not all of the users on this site have), you'll see it is very similar.

When to use ; to finish a line
Here is a way to remember:
A ; is the end of a line, if a ; is not present, the line continues (even if you have a newline). So If you don't put a ; it is because you want the code to continue. For example:
Code:

var a=0;
if(a==0)
{
 alert("0 equals 0");
 a+=1;
}
Is the same as:
Code:
var a=0;if(0==0) { alert("0 equals 0");a+=1; }

Functions:
function nameOfFunction(inputvars)

^^ That is how you define a function in Javascript. Input vars is any variable you want to call into the function. e.g.
Code:
function show_message(msg)
{
 alert(msg);
}

To use this function in Javascript:
show_message("Hello World");

To have multiple inputs into your function, you put a comma in-between the name of each one:
Code:
function show_messages(msg1,msg2,msg3)
{
 alert(msg1+"\n"+msg2+"\n"+msg3);
}
To call from in Javascript:
show_messages("Message 1","Message 2","Message 3");

Variables
These are possibly the most important part of any programming language. In Javascript, you must first define the variable:
var variableName = value;
var defines the variable variableName with the value value. You can also define a variable without a value:
var variableName;
Simple Example:
Code:
var myMessage = "Hello World";
alert(myMessage);

Re-assigning variable values:
To set a variable to a set value use the = operator:
var msg = "Hi";
msg = "Hello";
alert(msg);
You can also use += or -= to add to or subtract from respectively.
Code:
var msg = "He";
msg += "llo";
Is the same as var msg = "Hello";

Note Variables can either be strings or real numbers, or assigned the value of another variable:

var msg = Hello; Wrong
var msg = "Hello"; Right
var msg = 10; Right

That is all for now, i will be adding on to this as well

im_not_emo
Global Mod
Global Mod

Male
Number of posts : 896
Age : 31
Location : Auckland
Job/hobbies : Well, computer?
Warning :
Starting off Javascript Tutorial Left_bar_bleue0 / 1000 / 100Starting off Javascript Tutorial Right_bar_bleue

Reputation :
Starting off Javascript Tutorial Left_bar_bleue999 / 100999 / 100Starting off Javascript Tutorial Right_bar_bleue

Registration date : 2008-07-18

http://www.inegames.f33webhost.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum