Scribd
Upload
20 views17 pages

CSS Unit 2. Array Function and String

Uploaded by

aditya nimbalkar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views17 pages

CSS Unit 2. Array Function and String

Uploaded by

aditya nimbalkar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

CM5I CSS 22519 Nibe Sir, CM Dept.

Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

Institute Vision and Mission

Institute Vision:

To provide quality technical education to rural students.

Institute Mission:

M1: To impart trainings for developing hands on skills.

M2: To develop technical skills by practicing the best teaching-learning pedagogies.

M3: To enhance career opportunities through industry connect.

Department of Computer Technology: Vision and Mission

Program Vision:

To provide quality technical education in the computer engineering field that prepares the rural
students for socio-economic development

Program Mission:

M1: To impart technical skills to solve problems in the field of computer engineering.

M2: To mould the students as computer professionals through the teaching - learning process.

M3: To create career opportunities through industry interaction and higher education.

Department of Computer Technology: PSOs (Program Specific Outcomes)

PSO1: Use concepts of fundamental engineering, hardware and software to solve engineering
problems.
PSO2: Design and develop quality software product for multidisciplinary industry.
PSO3: Apply programming skills to meet the growing needs of computer profession.

Department of Computer Technology: PEOs (Program Educational Objectives)

PEO1: Provide programming skills to develop solutions for the ever changing information
technology field.

PEO2: Adapt broad based programming technologies to work in multidisciplinary work


environments.

PEO3: Create opportunities for higher education through teaching learning process.

1
CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

Unit 2: Array, Function and String (14 Marks)


CO2: C5-22519-2: Implement arrays and functions in Java script.

*Array:
JavaScript arrays are 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"];

<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
var cars = ["Skoda”, "Volvo", "BMW"];
document.getElementById("demo").innerHTML = car;
</script>
</body>
</html>

Example (another way to declare an array)


var cars = [
"Skoda",
"Volvo",
"BMW"
];

2
CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

The following example creates an Array, and assigns values to it:


Example (new keyword is used)
If a number parameter is passed into the parenthesis that will set the length for the new
array.
var cars = new Array(3);

<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
var cars = new Array(3);
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>

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];

<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"];
3
CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>

Looping Array Elements


The safest way to loop through an array, is using for loop.

<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 <ol> for ordered list
for (i = 0; i < fLen; i++)
{
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

4
CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

Adding Array Elements

The easiest way to add 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"];
document.getElementById("demo").innerHTML = fruits;
function myFunction()
{
fruits.push("Lemon");
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

Unshift: insert an element at the beginning of 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.unshift("Lemon");
5
CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

Add an element at specific index location in an array:


The array.splice() method is usually used to add or remove items from an array.
This method takes in 3 parameters like (index,0,element)
<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 = new Array(1,2,3,4);
var element=6;
var index=2;
document.getElementById("demo").innerHTML = fruits;
function myFunction()
{
fruits.splice(index,0,element);//0: how many elements be deleted
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

6
CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

Delete Array Elements

The easiest way to add a new element to an array is using the pop() method.

<html>
<body>
<h2>JavaScript Arrays</h2>
<p>The pop method delete last element from 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.pop("");
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

shift() method used to delete elements of an array from first position


<html>
<body>
<h2>JavaScript Arrays</h2>
<p>The shift method delete first element from 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.shift("");
7
CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

splice() method used to delete range of elements from an array


<html>
<body>
<h2>JavaScript Arrays</h2>
<h1>The splice method deletes range of elements from an array.</h1>
<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.splice(1,2); //1 is index position and 2 is length of elements to delete
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

Display specific length of an array:


<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Display given length array</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
8
CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

document.getElementById("demo").innerHTML = fruits;
function myFunction()
{
fruits.length=2;
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

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.

Sorting an Array

The sort() method sorts an array alphabetically.

<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()
{
9
CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

fruits.sort();
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

Combine array elements into string:

<html>

<body>

<h2>JavaScript Arrays</h2>

<script>

var fruits = ["T", "A", "T", "A"];

var text=fruits.join();

var text1=fruits.join("");

document.write(""+text+"<br>");

document.write(""+text1+"<br>");

</script>

</body>

</html>

10
CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

JavaScript Functions

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 ().

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
}

<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>

11
CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

JavaScript String:
String Length

The length property returns the length of a 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>

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.

<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!";

12
CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

var pos = str.indexOf("locate");

var pos1 = str.lastIndexOf("locate");

document.write(pos);

document.write(pos1);

</script>

</body>

</html>

Substring() Method:
The method is used to retrieve substring using location.

<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>

var str = "Apple, Banana, Kiwi";

var res = str.substring(7,13);

document.getElementById("demo").innerHTML = res;

</script>

</body>

</html>

13
CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

substr() Method

The method is used to retrieve substring using length.

<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>

Replacing String Content

The replace() method replaces a specified value with another value in a string.

<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;


14
CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

var txt = str.replace("Microsoft","W3Schools");

document.getElementById("demo").innerHTML = txt;

</script>

</body>

</html>

The concat() Method

concat() joins two or more strings.

<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>

Extracting String Characters


The charAt() and charCodeAt() Methods

The charAt() method returns the character at a specified index (position) in a string.

15
CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

The charCodeAt() method returns the Unicode of the character at a specified index
(position) in a 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";

var code = str.charAt(1);

var code1 = str.charCodeAt(1);

document.write(code);

document.write(code1);

</script>

</body>

</html>

16
CM5I CSS 22519 Nibe Sir, CM Dept.
Padmashri Dr. Vitthalrao Vikhe Patil Institute of Technology & Engineering POLYTECHNIC Loni

Assignment No. 2

2 Marks

1. Write a JavaScript that initializes an array called “Fruits” with names of five
fruits. The script then displays the array in a message box. (L3)

4 Marks

1. Write a JavaScript function that checks whether a passed string is palindrome


or not. (L3)
2. Write a JavaScript function to count the number of vowels in a given string.
(L3)
3. Write a JavaScript that find and displays number of duplicate values in an
array. (L3)
4. Write a JavaScript function to insert a string within a string at a particular
position. (L3)
5. Write the use of CharAt() and indexOf() with syntax and example. (L3)
6. Write a Java script that will replace following specified value with another value
in a string. (L3)
String = “I will fail”
Replace “fail” by “pass”
7. Write a Java script code to display 5 elements of array in sorted order.

17

You might also like