Writing a Tutorial, for classes.

I wrote:
As you all know (or should know) this forum is about learning rather than just taking. Those of you that are interested in learning, i hope this section can be an invaluable resource in helping you learn Javascript.

This first lesson will be a short sweet introduction to Javascript, and we will be starting from the very beginning. :)

Please be aware that for these lessons I will be assuming you have a bit of HTML knowledge, and will not be teaching HTML in these lessons. It is almost essential to know a bit about HTML before learning Javascript, so if you don't feel comfortable with HTML i suggest you take the step to learn it before venturing through these lessons.

Throughout the lessons i will be providing snippets of code to demonstrate and even some working examples.

Contents of this lesson
- The script tag, starting a javascript.
- Inline scripts & JS files.
- Variables and Strings
- Basic User Input.
- The famous IF - ELSE statements.

The Script Tag, Starting a Javascript
I'm sure you will have seen this in places around forumotion. The Script tag, is a HTML tag which signifies the start of a script, most commonly a Javascript. Like most HTML tags it needs to be opened and then closed.

So here's the regular script tag you'll see everywhere:

Code:


<script type="text/javascript">
Javascript Here
</script>


The 'type' attribute simply specifies that the script within the tags is Javascript. This attribute is not often needed nowadays as pretty much every browser will assume Javascript, however it should be used for safety.

Sometimes the script tag isn't needed however.

Inline scripts & JS files.
When using the script tag amongst the HTML of your pages, this is called an Inline Script. Its likely named this due to the fact it is inline with the rest of the HTML. The script tag is used to signify the start of a script.

When you have Javascript written within a javascript file, the script tag is not needed. Why? Because it's in a Javascript file and so there is no need to signify that it is Javascript. Javascript files end in '.js' (for example 'myjavascript.js').
To load your javascript file into your HTML page, you must use the script tag but this time with the source attribute so specify the source of the Javascript file.

Code:


<script src="/myjavascript.js"></script>

Now that you know how to include Javascript in your pages, lets begin to learn the language :)

Variables and Strings
In my opinion Variables and Strings are the two things you will use most in Javascript.

Variables
Variables hold information. The information a variable can hold is almost endless in possiblities, it can hold text, numbers, HTML elements, objects and more. We use variables in Javascript to store information so we can refer back to it and use it later on. The start if a new Variable is signified by using the word 'var' in Javascript.

So here is an example of some variables. Please read through the code below, and read my comments within it.

Code:


<script type="text/javascript">
var x=1;
var y=2;
//a variable called 'x' now holds the value of 1, and a variable called 'y' holds a value of 2.
//at this point i should say, all lines of javascript end in a semi-colon.

var z=x+y;
//variable z will hold the value of 3. Because 1+2 is 3 obviously.
</script>


So that showed you examples of variables holding a number value. Now we're going to take a look at strings.

Strings
Strings are a Javascript object. A string is just text. Not much more to say haha.
Strings can be started by either a Quote mark or a double quote mark, and they must be ended with whatever quote mark they started with. By this i mean, if you start a string with a double quote mark, then you must end it with a double quote mark, and within the string you can use as many single quote marks as you want and it won't end your string.

Here are some examples of variables holding string values:

Code:


<script type="text/javascript">
var x="Hello";
var y="There";
//variable x holds 'Hello' and variable y holds 'there'.

var z=x+y;
//variable z at this point would hold 'HelloThere'
//To mae this better we must insert a space somewhere within our strings.
//Here are three different ways to do this:

var z=x + " " + y;    //this is now x plus a string which is just a single space plus y. or
var y=" There";      //we could have had a space at the beggining of the string in y. or
var x="Hello ";      //we could have had a space at the end of x
</script>


Now that you know about simple variables. Its time to see a small use for these variables in a live example. First, you will see a new piece of Javascript on the example page, called an 'Alert Box'.
Alert boxes put an alert box up on the page to the user.
You use an alert box like this:

Code:

alert('Hello There');

Within the brackets of course, is what you want the alert box to say.

So here is your first live example of a small piece of javascript:

The code used in this example should be pretty clear to you but since its our first example i will explain it:

Code:


<script type="text/javascript">
var x="Hello ";
var y="and welcome!";
alert(x+y);
</script>


I'm ignoring the script tags, so when i refer to the first line, i mean the first line within the script tags. In this case: 'var x="Hello ";' and this will be the case throughout the lessons.

Anyway the first line of course specifies a variable called 'x' which holds a string with value of 'Hello '.
In the second line you can see another variable called 'y', which holds another string.

Now the interesting new part. The alert box.
You'll see that within the brackets of the alert box, i have not put any text. Instead i have put 'x+y' meaning that the alert box will alert the value of x=y, which is of course 'Hello and welcome!'.

So hopefully that covers the basics of strings for you. Later on in a later lesson we will return to strings and talk more about how to manipulate them and use them more to our advantage. We're now going to move on to some ways to get input from the user.

Basic User Input
So far you have learnt about, how to start a Javascript, Variables, Strings, And an Alert Box.
In this section your going to learn about the Prompt Box, Confirm Box, and an extra bit, not related to user input 'document.write();'

So to start this section, take a look at your next live example. After viewing the page, right click and view source and you'll see the script.
I've combined all the things we'll be looking at in this chapter into the one page.

So here it is: http://lgforum.forumotion.co.uk/h3-

So if you have clicked 'View Source' then you will have seen this:

Code:


<script type="text/javascript">
var x=prompt('Hi There. What is your name?','Name here');
var y=confirm('Hi '+x+' and do you want a welcome message?');

if (y) {
  document.write('Welcome '+x);
}
else
{
  document.write('Well here is a welcome anyway!');
}
</script>


So the first bit of this, is a variable named 'x' and what you see within that variable is something new called a Prompt Box.
You have seen how the prompt box works, as it was the first box you saw on the example page. The 'Prompt' function has two parameters, the first is what you want the prompt box to say, the second is what you want the default value to be.
So as you saw our prompt box was: prompt('Hi There. What is your name?','Name here');
The first bit within the brackets being the first parameter, and the bit after the comma is the second parameter. The second parameter is optional and can be left out. Once the user has typed something into the prompt box, the variable holds the value. So as i typed in 'LGforum' to the prompt box, the variable x, held a string with the value of 'LGforum'.

The next line shows a variable called 'y'. You'll see in this variable something new again, the confirm box. This is similar to the prompt box, however it does not provide a text field for the user to type in, instead it provides an 'Ok' button and a 'Cancel' button. If the user is to press the Ok button then variable 'y' holds the boolean (meaning true or false) value of true. And if they click cancel then it equals false. You can see that i have added the value of 'x' within the confirm box parameter to contain whatever the user typed in the first box.

This should hopefully be quite clear for you, so we're going to jump straight to the next chapter to learn about the next bit in the code. The IF statement.
Here is more info about the pop up boxes we've looked at: http://www.w3schools.com/js/js_popup.asp

The Famouse IF-ELSE Statement
IF statements are used very often in Javascript. They are used to run a piece of javascript depending on certain factors. For instance, in the example you saw that it will give you a welcome if you chose to have it. If you chose not to have it, it gave you a different welcome message.

The way to use the IF statement is simple. This is how it is laid out:

Code:


if (condition) { do this }


The word 'if' obviously signifies the start of the 'if' statement.
The part within the brackets is the condition to test.

This can be a lot of things. Here are some examples:

Code:


var x=1;
var y=2;

if (y == 2) { //this statement is true and so will run the code }
if (x < y) {  //this statement is true }
if (x == 2) { //this is false and so the code will not run }
if (x) { //this is true, due to the fact x has a value. If x didnt have a value, or had a value of false then it would be false }
if (y+x == 3) { //this is of course true }


SO there you have some examples. You have seen once again that variable can be used within the condition. Variables can be used in almost everyway in Javascript.
I'm going to quickly run through the example conditions i showed you:
The first one checks 'if y equals 2' which is of course true and so the code within the curly brackets will be executed.
I should explain that '==' is how we say 'equals' in Javascript. And on a similar note '&&' is how we say 'and', and '||' is how we say 'or'.
The rest of the conditions should be pretty clear to you.

Here are some more:
(i've removed the actual 'if' word and curly brackets bit for quickness)

(y==2 || x==2) - means if y equals 2 or x equals 2.
(y==2 && x==2) - means if y equals 2 and x equals 2.
(x || y) - means if x or y has a boolean value of true.

The Else Statement.
The else statement comes after an IF statement, as the code to execute if the condition is false. So if the condition is false, then it will not run the code in the curly brackets after the IF, but will instead run the code in the curly brackets after the ELSE.

Look back at the example page and code now, to take in a full understanding or how this works.

If you have fully understood everything and you are comfortable to move on, then i have a task for you to try out. After all, experimenting and trying things is a good way to learn.

Task Number 1
With all the information in this lesson you should be able to write a script which when the page loads, it asks the user to type in a letter. Then check if the letter is a vowel or not. If it is a vowel, alert a box saying it is a vowel, if it isn't alert a box telling the user that it isn't a vowel.

If you have managed to do this or tried a lot. Here is a script that will do the following, but don't look at this until you have tried:

Spoiler:

var x=prompt('Please enter a letter','Any letter will do');
if (x=='a' || x=='e' || x=='i' || x=='o' || x=='u' ) { alert(x +' is a vowel!'); }
else { alert(x + ' is not a vowel'); }

This can be done in quicker ways. But of course i only used what we have learnt so far.
If your solution was different, please feel free to share it as a post to this thread.

@grimofdoom wrote:HTML and Text

Header(2)

font size
bold
italic
undeline
center
link

There are many tags you can use to make your text do functions, place them or just to style them.
Some examples are making your text bold, jump down the page to a certain topic, make it into a
link and place it centerd inside an element or body.(Note:all of these tags require closing tag)

The basic one to start of on is size, you can use header size or font size. Header size only
make the size go up. It has the tage of < h1> to < h7> in numerical order(h1,h2,h3,h4,h5,h6,h7)
. When you use font size, you use the tag < font size=15>.Font size goes by "Pixel height", from
1 pixel to 25, after that it will be pixelated and not very good quality.

The next couple tags are to minipulate the look of the text. To make text bold use the tag < b>
, this will create all the text within the tags bold. Next tag is Italic, which is the tag < i>
, when using the italic tags,all the text within the tag will be italic, or slanted in other
words. To make text Underlined, you will use the tag, < u>, and as said earlyer, all the text
inside will be underlined. Another useful tag to know is the center tag, which is simply
to use < center>text which centers anything within this tag to be centered in the
parent(whether it be a div or the body)

When you want to create links, you would use anchors and a href to specify the link. The tag for
this would be("#" is used for a inactive link,refreshes the page but will not update if refreshed)
< a href=#>this is the linked text. the "this is the linked text" will be "anchored" to the
url("#") and send you to the link when clicked. When you want have a link send you down the page
to a certain section, you would use anchor again but use this < a name=trgt>blahblah to choose
the destination and then use < a href=#trgt >blah blah blah to send you to the targeted piece.
You can also send a target for another page with < a href=http://www.url.com/#trgt> blah. if
you want to open a targeted piece or url, add "target=_blank" for a new window or tab.

Who can fix it?