Complete Javascript Programming Tutorial - Programming

Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,153,136 members, 7,818,422 topics. Date: Sunday, 05 May 2024 at 03:08 PM

Complete Javascript Programming Tutorial - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Complete Javascript Programming Tutorial (7155 Views)

Pls Is It Possible To Learn Javascript Programming In One Month / PPT: Personal Programming Tutorial / Complete Programming Tutorial For Beginner's (2) (3) (4)

(1) (2) (Reply) (Go Down)

Complete Javascript Programming Tutorial by Remedon: 9:46pm On Aug 12, 2009

I am an IT Professional and would like to start using a little of my time to assist interested 9jas who want to build thier knowledge in this application.
INTRODUCTION

What is JavaScript.

JavaScript is a potential Programming Language based on scripts and focused towards internet and which is used for
-execution of application for (WWW) World Wide Web
-user interface creation
- adding interactivity to your website
-generating dynamic HTML
-event control in HTML pages
-etc

JavaScript is a program which can be incluided inside HTML code and it does not necessarily need a compiler.Your web browser will be in charge of interpretation and execution of JavaScript code.

Its syntax starts with

<Script>,,,, </Script>

You will have add your code in place f the comma lines.

Example:1

<HTML>
<HEAD><TITLE> MY FIRST PROGRAM</TITLE>
</HEAD>
<BODY>
THIS IS HTML <BR>
<B>
<SCRIPT LANGUAGE = "JavaScript">
document.write("This is JavaScript. " wink

</SCRIPT>
</B>
<BR>ThIS IS HTML
</BODY>
</HTML>

Please ask all your questions, especially for people with little or no knowledge of programming. ALL questions will be answered.!

Re: Complete Javascript Programming Tutorial by Seun(m): 10:14pm On Aug 12, 2009

I'm interested. Will you introduce us to jQuery too?

Re: Complete Javascript Programming Tutorial by Remedon: 8:49am On Aug 13, 2009

Suen, Yes if we finish the JS training, we may go to JQuery but let us concentrate on the one we have at hand now if not we may not learn all the things we needed at last. After this JS course, the people that followed it to the end, MUST all be experts in it.

Re: Complete Javascript Programming Tutorial by Remedon: 10:33am On Aug 13, 2009

Chapter 1. Continues,

Origin and Incompatibility among different browsers.

JavaScript came through Netscape under the name LiveScript which was later renamed to JavaScript. Microsoft picked its name as JScript to avoid trademark problems.

To do the exercises in this course, you will need:A computer in which a browser is installed. If you are using a Microsoft Windows operating system, such as Microsoft Windows 95, 98, Me, NT, 2000, XP, or Windows Server 2003 you should already have Internet Explorer or Firefox. You can also download the Firefox browser from the Moxilla Firefox web site. Internet Explorer and Netscape browsers are also available for Macintosh computers. If you are using Linux, most distributions install the Netscape browser with the operating system; this means that you should also have the Netscape browser already. Linux also ships with other browsers such as Konqueror.

A text editor. If you are using a Microsoft Windows operating system, Notepad is already installed on your computer and that's what we will use. If you are using Linux, emacs and vi are available for text editing. Macintosh also has its own editors

Remember, this tutorial assumes that you already know HTML but i will answer some of the questions in HTML Code for people who have little or no knowledge of HTML.

This Chapter 1 seems to have taken enough theory than practical.This have to change as we go on because this course in more of practical than theory but i will always attend to every questions you may have based on the concepts in each chapter.

Comments

We can make a comment inside our codes as we build our Web Applications, Programs, etc, by applying Single or double lines comments. Our browser will only interpret our comment the way it is written and display it on our page.

Single line comment (//) is applied here.

document.write("this is my page. " wink

// this is just a comment

Double line comment /* */is applied here

example /* this is an example of a comments
with various lines */

Practical Example 2

This program allows the user to add a specific amount in Naira then calulate and visualize its equivalent in Euros
<HTML>
<HEAD><TITLE>Calculating exchange rate</TITLE></HEAD>
<BODY>

<SCRIPT> LANGUAGE = "JavaScript"> // beginning of script

var AmountNaira; // declared variable called AmountNaira with the keyword Var
var AmountEuros; // declared variable called AmountEuros with the keyword Var
AmountNaira = prompt("Add the amount in Naira: ",1); /* this Prompt instruction allows the user to add the amount of
Naira that he/she wants to conver and the value will be stored in the variable AmountNaira*/

if ( AmountNaira > 0) // "If" instruction is used to check if amount of Naira is greater than 0, it will return true or false by using "esle" instruction
{

AmountEuros = AmountNaira / 219.92; /* the vaue of Naira entered is now exchanged in Euro at the rate of #219.92 per 1 Euro,
and the result is stored in Euro variable as AmountEuros */

alert( AmountEuros); // the alert instruction prints the value on the screen.
}

else
{
alert(" Wrong amount " wink

; // that means the amount of Naira is less than 0. which returns false. Wrong amount will be printed on the screen.
}

// End of program.

I await for any questions from this simple program. Don´t be scared if you have lost as i will explain Variables and its decalration, the IF Statement, Alert statement, Prompt etc.

Re: Complete Javascript Programming Tutorial by quadrillio(m): 1:34pm On Aug 13, 2009

cool, am in

Re: Complete Javascript Programming Tutorial by Ojiemudia(m): 5:07pm On Aug 13, 2009

hey do you still have a broadband or you still searching?

Re: Complete Javascript Programming Tutorial by blacksta(m): 11:37pm On Aug 13, 2009

Fire on bros - The class don dey full

is anybody going to touch on Ajax?

Re: Complete Javascript Programming Tutorial by candylips(m): 9:21am On Aug 14, 2009

good. anyone here sabi dojo tookit or yui as well ?

Re: Complete Javascript Programming Tutorial by aje49ja(m): 11:51am On Aug 14, 2009

nice thread i may answer some Q and as well ask some (am good in JavaScript and as well in CSS)

i wonder if this class will extend to CSS

Re: Complete Javascript Programming Tutorial by Goodboy007: 12:44pm On Aug 14, 2009

Hi instructor,
I am really interested in the Java Training. I have some Quick questions to ask. Is it compulsory I install Sql server before running java scripts? I will like to know the basic software I need in order to be able to effectively write , run and debug java scripts including database driven applications. I already have netbeans running on my laptop.

Re: Complete Javascript Programming Tutorial by Remedon: 10:56am On Aug 17, 2009

CHAPTER 1 Continues.

Variables: position in a memory where a name can be assigned and where we can retrieve a stored value as well.

Operators: Symbols that can be used to calculate or compare values.

Example: Sum = sum + 500

Expression: These are combinations of variables, constants and operators that returns a value by calculating certain operations.

Instructions: This could include any grammartical element of JavaScript.

Functions: These are sequence of instructions that have a name and which can be executed or called as much time as it is required in your program.

Variables and Identifiers:

Variables are fundamental element in any programming language. They are used to store and manipulate information. We can represent a variable
as a recipient or bucket where we can store information that can be retrived or changed at any moment.

In reality a variable consists of a reserved position in a memory that we call identifier of the variable which will permit us to manipulate information.

Boolean Variables: A variable is referred to as Boolean if it can hold only one of two values: true or false. To declare a
Boolean variable, use the boolean or the Boolean data type. You will see its usage as we go on in this lesson

String Variable: A string is an empty space, a character, a word, or a group of words that you want the compiler to read or display as it is.
It is very normal to see the value of a string starts with a double quote and ends with a double-quote.

Example:
print("Welcome to Nairaland.com!";

This would yield:

Welcome to Nairaland.com!

Creation of Variables:

Variables are created normally at the beginning of a javascript program using the word var followed by the
name of the variable that we want to create then with a semi-colon at the end.

Example:

var name;
var age;

You can also separate your variables with a comma in one line.

Example:
var name, age;

Variables can be formed with
- letters(uppercase and lowercase)
- sign of dollar($)
- numbers (from 0-9)
- it can´t start with a number
- its name will never coincide with any of the
JavaScript reserved words.

Example:

Examples of valid identifiers Examples of ilegal identifiers
var vSurname; var 1Surname;
var $1Surname; var #1Surname;
var _Surname; var Surname1º;

STORING INFORMATION IN A VARIABLE.

To store information in a variable we use the operator (=) followed by the name of the variable with the value we want to assign to the variable and finally with a semi colon.

name = 'Michael'; // we use single string to envelope string character or a char datatype of a variable.
age = 21;

Arithmetical Operations of Variables

Variables accepts mathematicals signs.
+ - / * (plus, minus, division multiplication,etc)

Example

<html>
<body>
<Script language = "javaScript">

Var Num1 = 7; // Assigned 7 as value

Var Num2 = 9; //Assigned 9 as value

Var sum; // no value assigned yet
sum = Num1 + Num2; //calculates the value of the two numbers and stores the result in variable sum.
alert(sum); //printing the sum on the screen.
</Script>
</body>
</html>

Comparison Operations

The following operators are also available in JavaScript.
- Eqaul to (==)
- Distint to (<> wink

or (!=) not egual to
- More than (> wink

- Less than (< wink

- More than or egual to (>=)
- Less than or equal to (<=)
- Conjunction (&& wink

- Increment operator (++ ), a simpler way to add 1.
- Decrement operator (-- ), a simpler way to substracts 1.

Example:

<html>
<body>
<Script language = "javaScript">

Var A = 7; // Assigned 7 as value

Var B = 9; //Assigned 9 as value

alert(A==B); //This will result to false since 7 is not equal to 9.
</Script>
</body>
</html>

More Examples:

A -= B; equivalent to A = A - B; //subtraction
A += B; equivalent to A = A + B; //addition
A /= B; equivalent to A = A / B; //division
A *= B; equivalent to A = A * B; //multiplication
A %= B; equivalent to A = A % B; //module, returns the reminder of the division of two numbers.

Logical operators

They are used in conditions such as operators of comparison:

if(x && y)

&& logical AND. (true if the two operands x and y are true.)
|| logical OR. (true if one of the two operands is true.)
! logical NOT.( true if the operand is false.)

Please don´t let these mathematical expressions put you off. I repeat i will explain and assist you guys with any questions you may ask. Only say to yourself, I must be an expert to this language! and after mastering it, others will be cup of tea for you.

Entrance and exit instructions in JavaScript

The document.write("message" instruction permits us to write texts in an actual document. We did see its usage in our
last example.

The alert instruction is applied to display message or visualize data.

The Prompt Instruction displays a dialog window which includes
- a text or message
- a data input section
- two buttons: Accept and Cancel buttons

Its syntax is
prompt("message", defaultvalue);

The window will close by clicking one of the buttons:

-Accept:accepts the data input from the user
(or the default input in its case)
-Cancel:cancels the data input that would have been typed in(or assumes the default input)

If you don´t specify a default value, an indefinite(undefined)value will be assumed.

It is convinient to specify a value by default even 0 or " " (this quoted lines means empty string.)

Example from our past lesson

NairaAmount = prompt("Type in the amount of Naira:",1);
The following result from this window will appear. (see examples below)

The browser will wait untill the user types in a value or accept a value by default, then it will assign it to the
Variable NairaAmount as it was shown at the beginning of the instruction. In my case i typed in #1100.00 to get approx. 5 Euros (example below)

There are certain things i will explaining here that you may not find in any programming tutorials and this will help those who may proceed toward java or any other programming language. Please try to master these formulas as we are about to go into the real thing in our next lecture. Have a great day!

Re: Complete Javascript Programming Tutorial by Dreamchild(m): 2:48pm On Aug 17, 2009

PLz

How can u use Javascripts code with Css code?

Re: Complete Javascript Programming Tutorial by Remedon: 11:19pm On Aug 17, 2009

DreamChild, I believe you know how to use HTML and CSS together.If you do, then you will not find it difficult in adding your script in HTML-CSS codes. I don´t want to go into cut and join lectures here. I want everybody that follow this practical training to master this Language and become an expert in it before the middle of next month.Questions should come only on the topic we are treating here at the moment. We will go into CSS the moment we finish this course. This course is only about JavaScript, DHTML and Multimedia usage in our Web Application. All these topics will be treated one by one. I want us to learn how to cook one soup before going into another type of soup.

Re: Complete Javascript Programming Tutorial by Dreamchild(m): 11:00am On Aug 18, 2009

So wen will u take us on CSS

Re: Complete Javascript Programming Tutorial by Remedon: 11:13pm On Aug 18, 2009

CONTROL STRUCTURE

Conditional Statement

Structure of control determines the execution of one part
of a program or another, depending if a certian condition
is true or not.

This processing is performed using the if condition. Its syntax is:

if(Condition)

{

Statement

};

Where
- Condition is whichever expression that returns
a logical value.(true/false).

- Statement is a block of one or more statements that
will be executed only if the condition is true.
If it is in a single block of code, we can omit the
double curly brackets.({})

Examples:
if(Age < 18) document.write("Teen";

if(Age < 18) {
document.write("You are still a teenager, ";
document.write("you cannot play this game.";
}

[b]Example 1i.

<HTML>
<HEAD><TITLE>Clients Status and Age</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript"> // beginning of script
var Age;
Age = prompt("Please type in the age of this client: ",0);
if(Age < 18) {
document.write("The client is still a teenager!, " wink

;
document.write(" Please you cannot play this game." wink

;
}
else
alert("Valid age your welcome!" wink

;
</SCRIPT>
</BODY>
</HTML>

Example 1ii.

<HTML>
<HEAD><TITLE>Student Grade Specification</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript"> // beginning of script
var Grade;
Grade = prompt("Please type in the grade of the student: ",0);
if(Grade >= 5 && Grade <= 10)
{
alert("Passed!" wink

;
}
else
{
if(Grade >= 0 && Grade <5)
{
alert("You have failed!" wink

;
}
else
{
alert("You have just entered a wrong value" wink

;
}
}
</SCRIPT>
</BODY>
</HTML> [/b]

Mastering FOR, WHILE and DO Statements.

The for statement is used as a counter. To use it, we need to provide three items: the starting point, the condition to test, and the expression to execute.
The syntax is:

for(Start; Condition; Expression) Statement

To execute this loop, the Start condition is checked. This is usually the initial value where the counting should start. Next, the Condition is tested; this test determines whether the loop should continue. If the test yields a true result, then the Expression is used to modify the loop and the Statement is executed. After the Statement has been executed, the loop restarts.

In the following example, a FOR loop is used to count from 0 to 10 and the results of the loop are displayed on a screen:
<Script Language="JavaScript">
var Number;

for(Number = 0; Number <= 12; Number++)
document.write("Number " + Number + "<br>";
</Script>

Explanation: the compiler is asked to start counting at 0 and to consider Number as the variable that holds the count. Then, the value of the Number variable is tested to find out if it is less than or equal to 10. If this comparison test yields true, then the third section of the loop increases the counter on the variable by 1, and the document.write function is called to display the results on the screen.

If the Statement of the loop consists of various lines of code, you must include it between an opening and a closing curly brackets { Statement }

If the Condition in the loop never produces a true result, the loop never executes. On the other hand, if the Condition is always true, the loop would never stop. For these reasons, you should make sure that your loop has appropriate values (start and end) that it can act on, and that the loop gets modified so it can stop at one time.

Once has been executed and exits, the program continues with the next statement or expression outside of the loop.

The WHILE Statement.

In WHILE statement, the loop continues to execute as far as the condition holds true.
Its syntax is:

while(Condition) Statement

To execute this loop, the compiler tests the condition. If the result of the comparison is true, then the Statement is executed. After the Statement is executed, the loop restarts. This continues UNTIL the test on the Condition yields false or as long as the test on the Condition is true.

If the Statement to be executed covers more than one line of code, we should include it between an opening and a closing curly brackets.
Example:

<Script Language="JavaScript">
var Number = 0;
while(Number <= 4)
{
document.write("Number " + Number + "<br>";
Number++;
}
</Script>

Secondly, if the Condition is never met, the Statement will never execute. If the Condition is always met, then the Statement would never stop.
Each of these two situations should be avoided.

The DO…WHILE Statement

The trick with the WHILE statement is that it test the Condition first. If the test yields a false result, then the Statement doesn’t execute and the loop ends. If we want the Statement to be executed prior to testing the condition, Please use the DO…WHILE loop.
Its syntax is:

do Statement while(Condition)

When the compiler encounters this loop, it first executes the Statement. After executing the Statement, the Condition is tested. If the test yields a true result, then the Statement executes again. This looping continues as long as the condition is true.
The main difference between a WHILE loop and a Do…WHILE is that, in the WHILE loop, the Condition is tested first before the Statement is considered; on the other hand, in the DO…WHILE loop, the Statement is first executed, then the Condition is tested.

Example:
<Script Language="JavaScript">
var Number = 0;
do {
document.write("Number " + Number + "<br>";
Number++;
}while(Number <= 10)
</Script>

( this program will start by adding 1 each time it loops as long as the Number Variable is less than or equal to 10.When it gets to 12, the program will exit.)

Please try to learn these syntaxes as they will be very important when we start using them in our real life applications. I refused to comment on the codes in this lecture to see if there are questions.

Re: Complete Javascript Programming Tutorial by aje49ja(m): 8:01pm On Aug 21, 2009

the class don dey fall? teacher sad

Re: Complete Javascript Programming Tutorial by Remedon: 1:17pm On Aug 23, 2009

Please i beg your pardon for the short delay in our training.I had and emergency trip and that was why i have not been online.

Let us start with a program that uses an assignment operator with five variables called Addition, Subtraction, Multiplication Division and Module +=, -=, *=, /= y %=.

Example :1

<HTML>
<HEAD><TITLE>Math Operations</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">/* JavaScript starts*/
var Addition = 6, Subtract = 6, Multipli = 6, Division = 6, Module = 6; // declared multiple Variables separating each with a comma

Addition += 2; // this is the same as (Addtion = Addition + 2 wink

we just added 2 to the value of our variable called Addition
Subtract -= 2; // we did the same here, but in this case we subtracted
Multipli *= 2; // we multiplied following the same rule
Division /= 2; // same as Division = Division/2; that is dividing 6 by 2.
Module %= 5; // here we divided and used the reminder. In this case 1 is left out.
alert(
" Addition \t" +(Addition) // we printed each value on the screen and concatenated or joined our variables with a + sign
+"\nSubtract \t" +(Subtract) // the (\t) are horizontal tab or space while \n are new line.Try to remove them and see the differences.
+"\nMultipli \t" + (Multipli)
+"\nDivision \t" + (Division)
+"\nModule \t" + (Module)
);
</SCRIPT>
</BODY>
</HTML>

Please try to read CASE Statement and ARRAYS for the next lecture.We shall be treating those
topics soon and will also try to show some examples on how to apply them.

After this topic i will decide to go into more complex areas in JavaScript since
it is assumed that the interested people in this Training are all advanced in JavaScript Web Applications.

Re: Complete Javascript Programming Tutorial by dhtmlstar: 11:57am On Aug 25, 2009

Interesting tutorial. . .

Re: Complete Javascript Programming Tutorial by Remedon: 2:00pm On Aug 28, 2009

CASE Instruction in JavaScript:

In JavaScript to compare a variable against a number of diferrent values, we use a CASE Statement.
This is to say that a Case Statement is used when a condition may have multiple results and a different set of operations is done based on each result.

Its Syntax is:

switch (expression)
{ case value1:

instructions1;

break;

case value2:

instructions1;

break;

case value3

instructions1;

break;
,
case valuen:

instructionsn;

break;

[default:

instructions;]
};

-Expression:This is any valid expression with which the values that accompany the statement will be compared.
-Value1,, Valuen are values that the expression receives.
-Default: This is an optional statement that will be executed , should any of our conditions fail to comply.

Observations:

The Break Statement that appears in the format is not compulsory
but if it is not used, the functionality of the structure Switch, Case will be changed.
This Statement the responsible for the exit of the block once one of the CASE instructions has been executed.
You may try by removing it and observe the outcome of your values.

<HTML>
<HEAD><TITLE>Example3.1</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript"> // JavaScript code initialized
// Example of Switch, Case Statement.
var Grade; // We declared a variable called Grade with the corresponding semi colon as usual
var Result = " "; // We declared another variable called Result. Double quotation means no value assigned to it yet.
Grade = prompt("Type in the grade of the student: ", 0); //We called the Prompt Instrcution to type in the Grade by ourself.
Grade = Math.round(Grade); /* We applied a Mathematical function here to round off any integer we may type. Grade.Math.round(x)
where x is the value we want to round off. Example (Math.round 5.47) gives us approx. 5.5 or 6 */
if (Grade >= 0 && Grade <= 10) // We start to test the conditions here. If Grade is greater than or equal to 0 and grade is less than = 10.
{ // We opened the curly brace for the IF statement as usual to test our conditions.
switch(Grade)
{ case 1:
Result = "Distinction!!!" + "\t" + "Excellent."; //Please try to remove the ("\t" +) and watch the result.
break;
case 2:
Result = "Distinction!!!" + "Excellent.";
break;
case 3:
Result = "Very Good!!" + " Great Work.";
break;
case 4:
Result = "Very Good!!" + "\n" + " Great Work."; //Please try to remove the ("\n" +) and watch the result also.
break;
case 5:
Result = "Good!" + "We made it.";
break;
case 6:
Result = "Passed" + "You tried.";
break;
default:
Result = "Failed."+ "put more effort please";
}; //We closed the IF Statement.
} // We closed the CASE Statement
else // We initialized the ELSE Statement in case IF Statement did not meet our conditions.
{ // We opened the curly brace for the ELSE Statement
Result = "Invalid Grade";
} // We closed the ELSE Statement
alert(Result); // The result that matches each CASE Statement will be printed on the screen.
</SCRIPT>
</BODY>
</HTML>

Please try to test this program and study it very well.Tell us about any thing that you think can be changed or added to the scripts.
Our next lecture will be on and Functions and[b] Array[/b] and after that we will go into Object and Events and.I am available for any questions with regards to the topics we have done so far. If you master the programming tricks in this practical training, You will never be afraid of any Programming Language at all. If you want to get everything in one day, which is likely to be impossible, then your difficulties in Programming and scripting will remain where they are. Say NO to all your impossibilities in Programming and start seeing codes as your school file. If your afriad of your school file or bag. I will advice you to choose another thing. Have a great day!

Re: Complete Javascript Programming Tutorial by Remedon: 5:21pm On Aug 29, 2009

ARRAY in JavaScript

JavaScript has a structure named Array, which lookes like variables, but in this case it is a question of guarding several similar elements of information (for example the names of 20 Students in a classroom, different types of colours, etc.
We can define an Array as a series of elements all of the same type and which occupy contiguous positions inside a computer memory. One can fetch out or locate the elements of these Arrays through its name or by means of a common identifier for all the elements that the Array identifies, and a number or index that refers to the element of the Array.
Later we will see a graphical representation of an Array that contains the names of 6 Students:

MICHAEL HELEN GEORGE CHRISTINA IGNATIUS ALICE
Students[0] Students[1] Students[2] Students[3] Students[4] Students[5]

We observe that there are six elements of the Arrray Students. All of them share the same identifier Students but each one has, in addition, an index that refers to the element. We can estimate also that the first element is 0, second the 1, and so on. This way, when we refer to Students [4] we will be refirring to the element that occupies the position 5 whose content in this case is "IGNATIUS".

This structure is used most often in programming.We will go deep into its characteristics and usage as we go on.

Creation of an Array:

To create an array we will use the following format:

Var NameOfArray = new Array (NumberOfElements)

Where:
- NameOfArray is the name or identifier of the array.
- NumberOfElements is a number that indicates the number of elements that it will contain.

To create the Array Student that will contain 6 elements, we will write:
Var Students = new Array (6);

Now we have the structure created and the storage locations are reserved and available, though empty, because we have not assigned in them any value.

Once the structure of an Array is created,we can manipulate the elements of the array as if it was a variable .Through the index of the Array we want to use, we can add, change or to consult the values they contain.

To assign value to an element we normally use an assignment operator. For example, to introduce the value "MICHAEL" in the element ,we will write: Students [0] = "MICHAEL"; in a similar way all the elements of the Array will follow the same pattern:

Students[0] = "MICHAEL";
Students[1] = "HELEN";
Students[2] = "GEORGE";
Students[3] = "CHRISTINA";
Students[4] = "IGNATIUS";
Students[5] = "ALICE";

We can refer to any of the objects of the Array to change his its value, or to use it in expressions as if it was a variable,through the use of the index of the Array.Example:

Alert (Students [4]);

An alert that prints the content of Array Students number [4]

Students [4] = prompt (" Name of the Students ", " "

Reads a new value or name from the console and assigns it in the element Student [4]

var FirstTwo = Students [0] + Students [1];

Creates the variable FirstTwo and assigns in it the result of concatenating or joining Students [0] + Students [1];

Students [2]> Students [3]

It is an expression that compares the content of both elements and determines if the first one is greater that the second one according to its ASCII value in this case the result will be true, in opposite case false.

In general, to refer to an element of an Array we will use the generic format:

NameOfArray [Index]

The index does not have to be necessarily a numerical constant (3, 12, 34) you can also reference an index by means of any numerical expression that returns an integer. For example, the following expressions would be valid expressions (supposing that i is a variable of numerical integer):

Students[ i ]

Control Structure and Array:

for (i = 0; i < 6; i = i + 1)
{
document.write(Students[i]);
}

In this script,the[b] FOR LOOP [/b] will execute 6 times with the instruction document.write. For each of these executions the variable i will take one of the values corresponding to the index of the Array (0, 1, 2, 3, 4 and 5).

In Arrays there is a property available called length that returns the number of elements that an array has (including the empty values, if any). Its generic format is:

NameOfArray.length

Using this property we can write a structure that any complete array would pass:

for (i = 0; i < NameOfArray.length; i = i + 1)
{
Working_with_element_NameOflArray[i]);
}

Let's see a complete example on how to create an Array, initialization of the elements and how they look like:

<HTML>
<HEAD> <TITLE> Ejemplo3_13 </TITLE </HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">

/* Example Arrays 1*/
var Students = new Array (6);
Students[0] = "MICHAEL";
Students[1] = "HELEN";
Students[2] = "GEORGE";
Students[3] = "CHRISTINA";
Students[4] = "IGNATIUS";
Students[5] = "ALICE";
For (i = 0; i <6; i ++) {document.write (Students [i] + "*" wink

;
}
</SCRIPT>
</BODY>
</HTML>

The result of the execution of this program will be:

MICHAEL*HELEN*GEORGE*CHRISTINA*IGNATIUS*ALICE*

Please try to Study more on ARRAY and master its uses in JavaScript. Have a Pleasant Weekend!!!

Re: Complete Javascript Programming Tutorial by mizbelle: 7:27am On Sep 01, 2009

thanks

Re: Complete Javascript Programming Tutorial by candylips(m): 9:40am On Sep 01, 2009

mizbelle:

can we talk about ajax and push technology how they can be implemented? i also want to know how Ajax works its structure if u fit add pics will be glad and i also what
(ii) To what extent does it address towards a need for push technology?
(iii) Without doing any programming, explain whether AJAX could be used to implement vote notification and can u give me advantages or disadvantages this approach might have.

check comet

Re: Complete Javascript Programming Tutorial by mizbelle: 3:08pm On Sep 01, 2009

u have to give me somthing better than that i still dont get it gurl pls,. possible a web-link to study

Re: Complete Javascript Programming Tutorial by candylips(m): 3:22pm On Sep 01, 2009

mizbelle:

u have to give me somthing better than that i still dont get it gurl pls,. possible a web-link to study

http://ajaxpatterns.org/HTTP_Streaming

Re: Complete Javascript Programming Tutorial by Nobody: 12:51pm On Sep 29, 2009

Re: Complete Javascript Programming Tutorial by yawatide(f): 7:26pm On Oct 02, 2009

dreamchild, here is an example:

suppose you have this css in your code:

div#dreamChild {
display: none;
}

Now, suppose in your page, you have a button which once clicked, you want the dreamChild DIV to become visible, like so:

<button id="someButton" onClick="showDreamChild();" />

Your javascript would manipulate the CSS (via the D(ocument) O(bject) M(odel)) like so:

function showDreamChild() {
document.getElementById("dreamChild".style.display = "block";
}

Make sense? I hope this helps. Bottomline, you need to learn about the DOM and how to manipulate it. www.w3schools.com and other sites you can find via google can help in this regard.

Good luck!

Re: Complete Javascript Programming Tutorial by nightwish(f): 3:48pm On Oct 09, 2009

Thank you a million @poster. i seems to have a lot of question o but please don't look at them as stupid i am just a beginner with keen interest. My question is: I typed in a few code on Notepad to do some Arithmetic calculation but I cannot save it in html, I cannot run it to generate the output, the only RUN button present is from Start --> All program --> RUN which is not useful for what i need it for. please can u start from elementary level pls. I promise i will learn fast. if i write the code how can i run it to generate the desire output? or do i need to install anythg else? pls reply

Re: Complete Javascript Programming Tutorial by yawatide(f): 4:00pm On Oct 09, 2009

1) When you save files in notepad, you have to select "all files" from the "save as type". Otherwise it saves the file as a txt file, not say, an html file. Either that or you surround your file name in quotes.

2) To get your javascript to work, you will need to create a form with a button that you click. So it could look like so (try it out):

<html>
<head>
<script>
function sayHello() {
alert("hello";
}
</script>
</head>
<body>
<form name="SampleForm">
<input type="button" value="Convert" onClick="sayHello();">
</form>
</body>
</html>

Please note that this is a *very* elementary form and is missing a few values/attributes but you should get the point. Don't forget what I told you about how to save a file in notepad wink

good luck!

1 Like

Re: Complete Javascript Programming Tutorial by kodewrita(m): 12:05pm On Mar 19, 2012

where's the Jquery tutorial you promised? cry

Re: Complete Javascript Programming Tutorial by esorison(m): 8:20am On Apr 27, 2012

I tried running this on my system using firefox as my default browser it brought out a page with nothing written on it. I saved it with .html and saved as all files. What am i missing out?[]Please i beg your pardon for the short delay in our training.I had and emergency trip and that was why i have not been online.

Let us start with a program that uses an assignment operator with five variables called Addition, Subtraction, Multiplication Division and Module +=, -=, *=, /= y %=.

Example :1

<HTML>
<HEAD><TITLE>Math Operations</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">/* JavaScript starts*/
var Addition = 6, Subtract = 6, Multipli = 6, Division = 6, Module = 6; // declared multiple Variables separating each with a comma

Addition += 2; // this is the same as (Addtion = Addition + 2 wink

(1) (2) (Reply)

Data Analyst/science - The Smart Way To Learn And Be Effective / Web Service Using Java Or C# / Aspiring Video Game Programmers Lounge.

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 149
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.