Scribd
Upload
28 views

2.array Function and String

Uploaded by

Yuvraj More
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
28 views

2.array Function and String

Uploaded by

Yuvraj More
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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