Scribd
Upload
21 views

2.array Function and String

Uploaded by

Yuvraj More
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
21 views

2.array Function and String

Uploaded by

Yuvraj More
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 45

Unit 2

Array, Function and


String
(14 Marks)
Array
Array
• Used to store multiple values in a single variable.
• An array is a special variable, which can hold more
than one value at a time.
• Syntax
var array_name = [item1, item2, ...];
• Example
var cars = ["Skoda", "Volvo", "BMW"];
• Example (another way to declare an array)
var cars = [
"Skoda",
"Volvo",
"BMW"
];
HTML Method
• getElementById() Method
• Most common way to access an HTML Element is to
use ‘Id’ of the element.
• getElementById() method used id=“demo” to find the
element.
• ‘Id’ attribute defines HTML Element.
• To access the HTML element , JavaScript can use the
document.getElementById() method.
• Used to find elements by element id
HTML Property
• innerHTML property
• To get the content of an element is by using
the innerHTML property.
• The innerHTML property is useful for getting or
replacing the content of HTML elements.
• innerHTML is a property which defines the HTML
content.
• Syntax
1. RETURN the innerHTML property
HTMLElementObject.innerHTML
2. SET the innerHTML property
HTMLElementObject.innerHTML=text
HTML Property
• id property
• “id” attribute defines the HTML element.
• “id” property sets or returns the “id” of an element(the
value of an elements id attributes)
• “id” should be unique within a page.
• “id” property often used to return the element using
Document.getElementById()method.
1. Write a JavaScript program to create and display Array
Elements

<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
var cars = ["Skoda", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
Array Cont..
• To create an Array, and assigns values to it
• Syntax
• var arrayName = new Array(element1, element2, element3,...
elementN);
• Example (new keyword is used)
• var cars = new Array("Skoda", "Volvo", "BMW");
2. Write a JavaScript program to create and display Array
Elements using new keyword.

<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
var cars = new Array("Skoda", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
Array Cont..
• To Access the Elements of an Array
• You access an array element by referring to the index number.
• This statement accesses the value of the first element in cars.
var name = cars[0];

• Example
• var cars = ["Skoda", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0]
3. Write a JavaScript program to access Elements of an array

<html>
<body>
<h2>JavaScript Arrays</h2>
<p>JavaScript array elements are accessed using numeric
indexes (starting from 0)</p>
<p id="demo"></p>
<script>
var cars = ["Skoda", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>
Array Cont..
• Looping Array Elements
• The safest way to loop through an array, is using for loop.
• Syntax
for(initializer ; condition; iteration)
{
// Code to be executed
}
• “+=”can be used to add (Concatenate)two string.
• “+” Also known as Concatenation Operator.
4. Write a JavaScript program to Display array elements using for loop
<!DOCTYPE HTML>
<HTML>
<h2>JavaScript Arrays</h2>
<p>JavaScript array elements are accessed using numeric indexes (starting from
0)</p>
<p id="demo"></p>
<body>
<script>
var len,i;
var cars = ["Skoda", "Volvo", "BMW",’WRV’];
len=cars.length;
for(i=0;i<len;i++)
{
document.write(cars[i]+"<br>");
}
</script></body></html>
5. Write a JavaScript program to Display array elements using for loop
<!DOCTYPE HTML>
<HTML>
<h2>JavaScript Arrays</h2>
<p>JavaScript array elements are accessed using numeric indexes (starting from
0)</p>
<p id="demo"></p>
<body>
<script>
var len,i;
var cars = ["Skoda", "Volvo", "BMW"];
len=cars.length;
for(i=0;i<len;i++)
{
document.getElementById("demo").innerHTML+=cars[i]+"<br>";
}
</script></body></HTML>
6. Write a JavaScript program to concatenate two string using ‘+=‘
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Operators</h2>

<p>The assignment operator += can concatenate strings.</p>

<p id="demo"></p>

<script>
let text1 = "What a very ";
text1 += "nice day";
document.getElementById("demo").innerHTML = text1;
</script>

</body>
</html>
7. Write a JavaScript program to Looping Array Elements
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"</p>
<script>
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";//unordered list
for (i = 0; i<fLen; i++)
{
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Array Cont..
• Adding(Inserting) Array Elements
• The easiest way to add a new element to an array is using
the push() method.
8. Write a JavaScript program to insert new element in an Array

<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"];
document.getElementById("demo").innerHTML = fruits;
function myFunction()
{
fruits.push("Lemon");
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
Array Cont..
• Arrays and Objects
• In JavaScript, arrays use numbered indexes.
• In JavaScript, objects use named indexes.
• Arrays are a special kind of objects, with numbered indexes.
• You should use objects when you want the element names to
be strings (text).
• You should use arrays when you want the element names to
be numbers.
Array Cont..
• Sorting an Array
• The sort() method sorts an array alphabetically.
Button tag
• To access button object use <button> element by using
getElementById() method.
• Onclick Event:
• Occurs when user clicks on an element.
• Syntax
• In JavaScript
Object. onclick=“function()”
{
MyScript
};
9. Write a JavaScript program to sort an array string elements.
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>The sort() method sorts an array alphabetically.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction()
{
fruits.sort();
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
Numeric Sort
• By default, the sort() function sorts values as strings.
This works well for strings ("Apple" comes before "Banana").
• However, if numbers are sorted as strings, "25" is bigger than
"100", because "2" is bigger than "1".
• Because of this, the sort() method will produce incorrect result
when sorting numbers.
• You can fix this by providing a compare function:
Numeric Sort Cont..
The Compare Function
• The purpose of the compare function is to define an alternative
sort order.
• The compare function should return a negative, zero, or positive
value, depending on the arguments:
• function(a, b){return a - b}
• When the sort() function compares two values, it sends the
values to the compare function, and sorts the values according
to the returned (negative, zero, positive) value.
• If the result is negative a is sorted before b.
• If the result is positive b is sorted before a.
• If the result is 0 no changes are done with the sort order of the
two values.
9. Write a JavaScript program to sort an array Numeric elements.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
document.getElementById("demo").innerHTML = points;

</script>
</body>
</html>
9. Write a JavaScript program to sort an array Numeric elements.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the button to sort the array in ascending order.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;

function myFunction() {
points.sort(function(a, b){return a - b});
document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>
JavaScript Function
JavaScript Function
• 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).
• A JavaScript function is defined with the function keyword,
followed by a name, followed by parentheses ().
• The code to be executed, by the function, is placed inside curly
brackets: {}
Function function_name (parameter1, parameter2, parameter3)
{
// code to be executed
}
10. Write a JavaScript program to perform multiplication of two
numbers using function.
<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>
<script>
function myFunction(p1, p2)
{
return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(4,
3);
</script>
</body>
<html>
JavaScript String
String Length
• The length property returns the length of a
string
11. Write a JavaScript program to count the length of string.

<html>
<body>
<h2>JavaScript String Properties</h2>
<p>The length property returns the length of a
string:</p>
<p id="demo"></p>
<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
document.getElementById("demo").innerHTML = sln;
</script>
</body>
</html>
String Cont..

• Finding a String in a String


• The indexOf() method returns the index of (the position of)
the first occurrence of a specified text in a string
12. Write a JavaScript program to Finding a String in a String

<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The indexOf() method returns the position of the first
occurrence of a specified text:</p>
<p id="demo"></p>
<script>
var str = "Please locate the string!";
var pos = str.indexOf("locate");
document.getElementById("demo").innerHTML = pos;
</script>
</body>
</html>
String Cont..
• Substring() Method using location:
• The method is used to retrieve substring using location.
• Substring( first_Index, Last_Index)
13. Write a JavaScript program to retrieve the sub string using
Substring() Method

<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The substring() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id="demo"></p>
<script>
varstr = "Apple, Banana, Kiwi";
var res = str.substring(7,13);
document.getElementById("demo").innerHTML = res;
</script>
</body>
</html>
String Cont..
• substr( ) Method using length
• The method is used to retrieve substring using length
• substr (Start_index , Length)
14. Write a JavaScript program to retrieve the sub string using
Substr() Method
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id="demo"></p>
<script>
var str = "Apple, Banana, Kiwi";
var res = str.substr(7,6);
document.getElementById("demo").innerHTML = res;
</script>
</body>
</html>
String Cont..
• Replacing String Content
• The replace() method replaces a specified value with another
value in a string.
• replace(old_string, New_string)
15. Write a JavaScript program to replace one string by other
using replace() Method
<html><body>
<h2>JavaScript String Methods</h2>
<p>Replace "Microsoft" with "W3Schools" in the paragraph
below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft!</p>
<script>
function myFunction()
{
var str = document.getElementById("demo").innerHTML;
var txt = str.replace("Microsoft","W3Schools");
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
String Cont..
• The concat() Method
• concat() joins two or more strings.
16. Write a JavaScript program to replace one string by other
using replace() Method
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The concat() method joins two or more strings:</p>
<p id="demo"></p>
<script>
var text1 = "Hello";
var text2 = "World!";
var text3 = text1.concat(" ",text2);
document.getElementById("demo").innerHTML = text3;
</script>
</body>
</html>
String Cont..
• Extracting String Characters
• The charAt() Method
• The charAt() method returns the character at a specified index
(position) in a string.
• charAt(character_index)
17. Write a JavaScript program to display character at specific
location from string.
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The charAt() method returns the character at a given position
in a string:</p>
<p id="demo"></p>
<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str.charAt(1);
</script>
</body>
</html>
Thank you

You might also like