[Js] If, If-else, If-else if-else, while

4 posts Page 1 of 1
Post Reply
Contributors
User avatar
smashapps
Coding Guru
Coding Guru
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am
[Js] If, If-else, If-else if-else, while
smashapps
Post Options:
Quote
Hello,

Very simple tutorial in JavaScript for If statements, If else statements, If - else if - else, and while loops.

We use EXTERNAL JavaScript files as it is easier to manage your code later on in the future, However I will show you how to use external JavaScript files and Embedded scripts.

We need two files and that is the HTML file and the JavaScript file. Note we're using HTML5.

Method 1: Embedded
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Tutorial</title>
<script type="text/javascript">
document.write("Your code goes here");
</script>
</head>
<body>
</body>
</html>
Method 2: External
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Tutorial</title>
<script type="text/javascript" src="javascriptFile.js>
</script>
</head>
<body>
</body>
</html>
[*]It doesn't matter what you name your files[/*]
[*]JavaScript is case sensitive[/*]
[*]It doesn't matter where you use the <script> tag[/*]

IF Statement

If you're using the Embedded Script then just add the code in the script tag after the > and before the </script>, if not just add the entire code to the .js file then save it.
Code: Select all
var myAge = 18;
if (myAge == 18) 
     {
     document.write("Your age is: 18.");
     }
Line 1: var myAge = 18; is a variable think of Visual Basic we would of typed Dim myAge As Integer = 18 var is variable, in this case an integer.

Line 2: if (myAge == 18) here we are testing if our variable is equal to 18. == is a comparison operator.

Some of the different types of operators are:

> This is Greater than
< This is less than
>= Greater than or equal
<= Less than or equal
!= Not equal

After line 2 we have the opening brace.

Line 3: document.write("text here"); is easy to understand. we're writing the text in quotation to the web page. Then we close up with the } brace.

If Else Statements
Code: Select all
var myAge = 18;

if (myAge == 18)
     {
     document.write("You are 18.") 
     }
else
     {
     document.write("You are not 18!")
     }
This is the same as the above example except after we close up our brace we add else { document.write(" "); }

So basically if your age is not 18 it will say: "You are not 18!". Here is a better example, uses the Date.
Code: Select all
var d = new Date()
var time = d.getHours()

if (time < 12) 
     {
     document.write("Good Morning")
     }
else 
     {
     document.write("Good Afternoon")
     }
we have a variable called d. It's value is a new date from the computer system. We have a second variable called time that gets the hours from the date. The if else statement checks the time value. If the value is less than 12 pm (goes in 24 hour format) then we write "Good Morning" to the web page, if it is after 12 pm we write "Good Afternoon" to the web page.

If, Else If, Else Statements
Code: Select all
var d = new Date()
var time = d.getHours()

if (time<12) 
     {
     document.write("Good Morning")
     }
else if (time >=12 && time<18) 
     {
     document.write("Good Afternoon")
     }
else 
     {
     document.write("Good Evening")
     }
Same as above with the exception we have changed the else section to an else if then added else. We are getting the Date, Setting a variable "time" then testing if the time is less than 12 pm if it is we write good morning to the web page. If it is not before 12 pm we check if it is in between 12 pm and 5 pm and if it is we write good afternoon to the web page and then finally if it isn't between 12 and 5 pm we just write good evening.

Note that when you write text to a web page you can use anything you want. It doesn't write to the screen it writes to the page. I.e document.write("<br />"); it will simply add a line break in the web page. This is how my JavaScript/PHP menu works. You're writing HTML code to the page.

While Loops

A while loop is a loop that will run through over and over until the value becomes false.
Code: Select all
var age = 0; 

while (age <= 18)
     {
     document.write("Your age is: ", age);
     document.write("<br />");
     age ++;
     }
We have a variable called age and it's value is 0. We start the loop and we are testing whether the age is LESS THAN or EQUAL TO so the loop is going to run through until it reaches 15, 16, 17, 18 than it's going to say NOPE we are equal to the variable now we can stop. We open it up with braces then write two things to the web page. We write "Your age is: ", age.

In the first document.write we have text in quotation marks then add a comma than the age. This is the same in visual basic.Just slightly different syntax. We then add a line break to the web page because we run this loop several times it is all going to be in one big line. Then we add one to the age variable. + and ++ are different. They are Arithmetic operators.

The arithmetic operators are:

+ Addition
- Subtraction
/ Division
* Multiplication
% Modulus
++ Increment
-- Decrements

If we don't Increment our variable the loop will continue. Don't make the loop too big either as in don't run the loop until the variable reaches a million. We will end up with a million lines of text on the web page. I've tried it - lol.

That is the end of my tutorial. If you didn't understand something or something didn't make sense leave a comment and I will help you.
Last edited by smashapps on Sun Mar 31, 2013 12:37 pm, edited 2 times in total.
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
Top
User avatar
Shim
VIP - Donator
VIP - Donator
Posts: 882
Joined: Wed Dec 14, 2011 5:02 am
Re: If, If-else, If-else if-else, while
Shim
Post Options:
Quote
very useful tutorial bro :) you should write about variables :) +REP
Find my programs on Softpedia
Top
User avatar
zosoft
Just Registered
Just Registered
Posts: 2
Joined: Sun Mar 31, 2013 7:16 am
Re: If, If-else, If-else if-else, while
zosoft
Post Options:
Quote
good tutorial very well explained
Top
User avatar
benji_19994
VIP - Donator
VIP - Donator
Posts: 156
Joined: Mon Apr 16, 2012 3:13 pm
Re: If, If-else, If-else if-else, while
benji_19994
Post Options:
Quote
Great tutorial for a beginner rep + from me
Top
Post Reply
4 posts Page 1 of 1
Return to “Tutorials”

Copyright Information

Powered by phpBB® Forum Software © phpBB Limited Privacy | Terms

Copyright © Codenstuff.com 2020 - 2023