Loop, Function and arrays in javascript
A JavaScript function is a block of code designed to
perform a particular task.
A JavaScript function is executed when
"something" invokes it (calls it).
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>This example calls a function which performs a calculation,
and returns the result:</p>
JavaScript Functions
<p id="demo"></p>
This example calls a function which performs a
calculation, and returns the result:
<script>
12
function myFunction(p1, p2) {
return p1 * p2;
}
[Link]("demo").innerHTML =
myFunction(4, 3);
</script>
</body>
</html>
JavaScript Function Syntax
A JavaScript function is defined with the function keyword, followed by
a name, followed by parentheses ().
Function names can contain letters, digits, underscores, and dollar signs
(same rules as variables).
The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: {}
function name(parameter1, parameter2, parameter3) {
// code to be executed
}
Function Return
When JavaScript reaches a return statement, the function will stop executing.
If the function was invoked from a statement, JavaScript will "return" to
execute the code after the invoking statement.
Functions often compute a return value. The return value is "returned" back
to the "caller":
Calculate the product of two numbers, and return the result:
var x = myFunction(4, 3); // Function is called, return value will end up in x
function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}
The result in x will be:
12
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>This example calls a function which performs a calculation
and returns the result:</p>
<p id="demo"></p> JavaScript Functions
This example calls a function which performs a calculation
<script> and returns the result:
var x = myFunction(4, 3); 12
[Link]("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
Why Functions?
You can reuse code: Define the code once, and use
it many times.
You can use the same code many times with
different arguments, to produce different results.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>This example calls a function to convert from Fahrenheit to
Celsius:</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
[Link]("demo").innerHTML = toCelsius(77);
</script>
</body>
</html>
Functions can be used the same way as you use
variables, in all types of formulas, assignments,
and calculations.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML =
"The temperature is " + toCelsius(77) + " Celsius";
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
</script>
</body>
</html>
Local Variables
Variables declared within a JavaScript function, become LOCAL to the function.
Local variables can only be accessed from within the function.
Example
// code here can NOT use carName
function myFunction() {
var carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carName
Since local variables are only recognized inside their functions, variables with the
same name can be used in different functions.
Local variables are created when a function starts, and deleted when the function
is completed.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Outside myFunction() carName is undefined.</p>
JavaScript Functions
Outside myFunction() carName is undefined.
<p id="demo1"></p>
string Volvo
<p id="demo2"></p>
undefined
<script>
myFunction();
function myFunction() {
var carName = "Volvo";
[Link]("demo1").innerHTML = typeof carName + " " + carName;
}
[Link]("demo2").innerHTML =
typeof carName;
</script>
</body>
</html>
What is an Array?
An array is a special variable, which can hold more
than one value at a time.
Creating an Array
Using an array literal is the easiest way to create a
JavaScript Array.
Syntax:
var array_name = [item1, item2, ...];
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2> JavaScript Arrays
Saab,Volvo,BMW
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
[Link]("demo").innerHTML = cars;
</script>
</body>
</html>
Using the JavaScript Keyword new
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
var cars = new Array("Saab", "Volvo", "BMW");
[Link]("demo").innerHTML = cars;
</script>
</body>
</html>
The two examples above do exactly the same. There is no need to use new Array().
For simplicity, readability and execution speed, use the first one (the array literal method).
Access the Elements of an Array
You access an array element by referring to
the index number.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>JavaScript array elements are accessed using numeric
indexes (starting from 0).</p>
JavaScript Arrays
<p id="demo"></p> JavaScript array elements are accessed using
numeric indexes (starting from 0).
<script> Saab
var cars = ["Saab", "Volvo", "BMW"];
[Link]("demo").innerHTML = cars[0];
</script>
</body>
</html>
Note: Array indexes start with 0.
[0] is the first element. [1] is the second element.
Arrays are a special type of objects. The typeof operator in JavaScript
returns "object" for arrays.
<!DOCTYPE html>
<html>
<body>
JavaScript Arrays
<h2>JavaScript Arrays</h2>
Arrays use numbers to access its elements.
John
<p>Arrays use numbers to access its elements.</p>
<p id="demo"></p>
<script>
var person = ["John", "Doe", 46];
[Link]("demo").innerHTML = person[0];
</script>
</body>
</html>
Objects use names to access its "members". In this example, [Link] returns John:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>JavaScript uses names to access object properties.</p>
<p id="demo"></p>
JavaScript Objects
<script> JavaScript uses names to access object properties.
var person = {firstName:"John", lastName:"Doe", age:46}; John
[Link]("demo").innerHTML =
person["firstName"];
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>The length property returns the length of an array.</p>
JavaScript Arrays
<p id="demo"></p> The length property returns the length of an array.
4
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
[Link]("demo").innerHTML = [Link];
</script>
</body>
</html>
Accessing the Last Array Element
Example
fruits =["Banana", "Orange", "Apple", "Mango"];
var last = fruits[[Link] - 1];
Looping Array Elements
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>The best way to loop through an array is using a standard for loop:</p>
<p id="demo"></p>
<script>
var fruits, text, fLen, i;
JavaScript Arrays
fruits = ["Banana", "Orange", "Apple", "Mango"];
The best way to loop through an array is using
fLen = [Link];
a standard for loop:
•Banana
text = "<ul>";
•Orange
for (i = 0; i < fLen; i++) {
•Apple
text += "<li>" + fruits[i] + "</li>";
•Mango
}
text += "</ul>";
[Link]("demo").innerHTML = text;
</script>
</body>
</html>
The easiest way to addhtml>
<!DOCTYPE a new element to an array is using the push() method:
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>The push method appends a new element to an array.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
[Link]("demo").innerHTML = fruits;
function myFunction() {
[Link]("Lemon");
[Link]("demo").innerHTML = fruits;
}
</script>
</body>
</html>