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
