Scribd
Upload
2 views10 pages

Lab 4

This document provides an overview of basic JavaScript concepts, including syntax, functions, arrays, and string methods. It includes practical examples and scripts demonstrating how to add numbers, display prime numbers, and validate forms. The conclusion summarizes the key learnings about JavaScript functions, array and string methods, and form validation.

Uploaded by

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

Lab 4

This document provides an overview of basic JavaScript concepts, including syntax, functions, arrays, and string methods. It includes practical examples and scripts demonstrating how to add numbers, display prime numbers, and validate forms. The conclusion summarizes the key learnings about JavaScript functions, array and string methods, and form validation.

Uploaded by

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

LAB 4: BASIC CONCEPT OF JAVASCRIPT

THEORY
JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled
programming language with first-class functions. Javascript files have a .js
extension.
SYNTAX:
<html>
<head>
<script type=”text/javascript” scr=”script.js”></script>
</head>
JS Function
Functions are one of the fundamental building blocks in JavaScript. A function
in JavaScript is similar to a procedure—a set of statements that performs a task
or calculates a value, but for a procedure to qualify as a function, it should take
some input and return an output where there is some obvious relationship
between the input and the output. To use a function, you must define it
somewhere in the scope from which you wish to call it.
function square(number) {
return number * number;
}
JS Array
An array is an object that can store multiple values at once. For example,
const words = ['hello', 'world', 'welcome'];
Here, words is an array. The array is storing 3 values.
Array Methods
toString() – It coverts an array to a string of array values
join() – It joins all array element into a string.
pop() – It removes the last element from an array.
push() – It adds new element to the end of an array.
shift() – It removes the first array element and shift all other elements to a lower
index.
unshift() – It adds the new element at beginning of array and shifts all other
element to aa higher index.
JS string methods
1. indexOf() – get the index of the first occurrence of a substring in a string.
2. lastIndexOf() – find the index of the last occurrence of a substring in a
string.
3. includes() – check if a string contains a substring.
4. startsWith() – check if a string starts with another string.
5. endsWith() – determine if a string ends with another string.
6. split() – split a string into an array of substrings.
7. substring() – extract a substring from a string.
8. slice() – extract a part of a string.
9. toUpperCase – return a string with all characters converted to uppercase.
10.toLowerCase – return a string with all characters converted to lowercase.

QUESTIONS
1.Write a script that adds two numbers using function and write the result.
<!--Writa an script that adds two numbers using
function and write the result -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport" content="width=device-
width, initial-scale=1.0" />
<title>Add two numbers</title>
<script type="text/javascript">
function add(a, b) {
var c;
c = a + b;
document.write(c);
}
add(55, 66);
</script>
</head>
<body></body>
</html>

OUTPUT
121
2.Write Script to display the prime numbers between 1 to 50.
<!-- Write Script to display the prime numbers
between 1 to 50 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport" content="width=device-
width, initial-scale=1.0" />
<title>Display Prime Number</title>
<script type="text/javascript">
for (i = 1; i <= 50; i++) {
var flag = 0;
for (j = 2; j < i; j++) {
if (i % j == 0) {
flag = 1;
break;
}
}
if (i > 1 && flag == 0) {
document.write(i);
document.write("<br>");
}
}
</script>
</head>
<body></body>
</html>
OUTPUT
3.Write a JavaScript Program to illustrate and understand the following array
methods
a. push()
b. pop()
c. shift()
d. unshift()
e. concat()
f. reverse()
<!-- Write a javascript programs to illustrate and
understand following functions -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport" content="width=device-
width, initial-scale=1.0" />
<title>Array Functions</title>
<script type="text/javascript">
var arr1 = [1, 2, 3, 4, 5];
var arr2 = [6, 7, 8, 9, 10];
arr1.push(0);
document.write("Pushed 0: ", arr1);
document.write("<br>");
arr1.pop();
document.write("Poped element: ", arr1);
document.write("<br>");
arr2.push(12);
document.write("Pushed 12: ", arr2);
document.write("<br>");
arr2.pop();
document.write("Poped element: ", arr2);
document.write("<br>");
arr1.shift();
document.write("Shifted array: ", arr1);
document.write("<br>");
arr1.unshift(10);
document.write("Unshifted array: ", arr1);
document.write("<br>");
var arr3 = arr1.concat(arr2);
document.write("Concatenated Array: ", arr3);
document.write("<br>");
arr1.reverse();
document.write("Reversed Array: ", arr1);
document.write("<br>");
</script>
</head>
<body></body>
</html>
OUPUT

4.Find the largest element from following array:


[[3,5,10],[30,50,40,10],[1000,23,3000,450]]
<!-- Find the largest element from following array --
>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport" content="width=device-
width, initial-scale=1.0" />
<title>2D Array</title>
<script type="text/javascript">
var arr1 = [
[3, 5, 10, 2],
[30, 50, 40, 10],
[1000, 23, 3000, 450],
];
var maximum = 0;
for (i = 0; i < 3; i++) {
for (j = 0; j < 4; j++) {
if (arr1[i][j] > maximum) {
maximum = arr1[i][j];
}
}
}
document.write("The maximum element is: ",
maximum);
</script>
</head>
<body></body>
</html>
OUTPUT

5. Illustrate the concept of String object and implement following methods:


a. toLowerCase()
b. toUpperCase()
c. concat()
d. charAt()
e. indexOf()
f. lastIndexOf()
g. replace()
<!-- Write a javascript programs to illustrate and
understand following functions -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport" content="width=device-
width, initial-scale=1.0" />
<title>String Functions</title>
<script type="text/javascript">
var myString1 = "Hello ";
var myString2 = "World";
// myString1.toLowerCase();
document.write("Lower Case: ",
myString1.toLocaleLowerCase());
document.write("<br>");
// myString1.toUpperCase();
document.write("Upper Case: ",
myString1.toLocaleUpperCase());
document.write("<br>");
// myString2.toLowerCase();
document.write("Lower Case: ",
myString2.toLocaleLowerCase());
document.write("<br>");
// myString2.toUpperCase();
document.write("Upper Case: ",
myString2.toLocaleUpperCase());
document.write("<br>");
var myString3 = myString1.concat(myString2);
document.write("Concatenated String: ",
myString3);
document.write("<br>");
var myString4 = myString3.slice(1, 5);
document.write("Sliced String: ", myString4);
document.write("<br>");
document.write("Character at 0: ",
myString1.charAt(1));
document.write("<br>");
document.write("Index of l: ",
myString1.indexOf("o"));
document.write("<br>");
document.write("Last Index of l: ",
myString1.lastIndexOf("l"));
document.write("<br>");
myString5 = myString2.replace("World", "Uni");
document.write("Replaced String: ", myString5);
document.write("<br>");
</script>
</head>
<body></body>
</html>
OUTPUT
6.Create a function that takes an string input and returns its reverse.
<!-- Create a function that takes an string input and
returns its reverse -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport" content="width=device-
width, initial-scale=1.0" />
<title>String Reverse</title>
<script type="text/javascript">
function reverseString(str) {
var newString = "";
for (var i = str.length - 1; i >= 0; i--) {
newString += str[i];
}
return newString;
}
var str = prompt("Enter a string: ");
document.write("Reverse of the string is: ",
reverseString(str));
</script>
</head>
<body></body>
</html>
OUTPUT
7.Design a simple form consisting of username and password fields. Both field
are required for form submission. Check whether both fields are filled or not
while submitting. If any of the field is not filled, give a popup box giving
appropriate message.
<!-- Design a simple form consisting of username and
password fields. Both field are required for form
submission. Check whether both fields are filled or
not while submitting. If any of field is not
filled,give a popup box giving appropriate message-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport" content="width=device-
width, initial-scale=1.0" />
<title>Form Validation</title>
<script type="text/javascript">
function validateForm() {
var x =
document.getElementById("username").value;
var y =
document.getElementById("password").value;
if (x == "" || y == "") {
alert("Username and Password must be filled
out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="formValidation.html"
onsubmit="return validateForm()" method="post">
<label for="username">Username:</label>
<input type="text" id="username"
name="username" />
<br />
<label for="password">Password:</label>
<input type="password" id="password"
name="password" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
OUTPUT

CONCLUSION
In conclusion, in this lab we studied about java script and its various functions
aswell as array and string methods. We also studied form validation and
implemented it to validate a form.

You might also like