Download Web Programming and technology and more Lecture notes Web Programming and Technologies in PDF only on Docsity!
UNIT III
Introduction to JavaScript arrays In JavaScript, an array is an ordered list of values. Each value is called an element specified by an index : A JavaScript array has the following characteristics:
- First, an array can hold values of mixed types. For example, you can have an array that stores elements with the types number, string, boolean, and null.
- Second, the size of an array is dynamic and auto-growing. In other words, you don’t need to specify the array size up front. Creating JavaScript arrays JavaScript provides you with two ways to create an array. The first one is to use the Array constructor as follows: let scores = new Array(); The scores array is empty, which does hold any elements. If you know the number of elements that the array will hold, you can create an array with an initial size as shown in the following example: let scores = Array(10); To create an array and initialize it with some elements, you pass the elements as a comma- separated list into the Array() constructor. For example, the following creates the scores array that has five elements (or numbers): let scores = new Array(9, 10, 8, 7, 6); DECLARING AND ALLOCATING ARRAYS IN JAVASCRIPT There are two standard ways to declare an array in JavaScript. These are either via the array constructor or the literal notation.
In case you are in a rush, here is what an array looks like declared both ways: // Using array constructor let array = new array("John Doe", 24 , true); // Using the literal notation let array = ["John Doe", 24 , true]; How to Declare an Array with Literal Notation This is the most popular and easiest way to create an array. It is a shorter and cleaner way of declaring an array. To declare an array with literal notation you just define a new array using empty brackets. It looks like this: let myArray = []; You will place all elements within the square brackets and separate each item or element with a comma. let myArray = ["John Doe", 24 , true]; Arrays are zero-indexed, meaning you can access each element starting from zero or output the entire array. console.log(myArray[ 0 ]); // 'John Doe' console.log(myArray[ 2 ]); // true console.log(myArray); // ['John Doe', 24, true] How to Declare an Array with the Array Constructor You can also use the array constructor to create or declare an array. There are a lot of technicalities to declaring an array with the Array() constructor. Just as you can store multiple values with diverse data types in one variable with the array literal notation, you can do the same with the array constructor. let myArray = new Array(); console.log(myArray); // [] The above will create a new empty array. You can add values to the new array by placing them in between the brackets, separated by a comma. let myArray = new Array("John Doe", 24 , true); REFERENCE AND REFERENCE PARAMETERS IN JAVASCRIPT
javascript let a = 10; function changeValue(val) { val = 20; } changeValue(a); console.log(a); // 10 In this example, the original value of a remains 10, even after calling changeValue because a is passed by value. PASSING ARRAYS TO FUNTION Passing arrays to functions in JavaScript is a common practice, as arrays are one of the fundamental data structures. Here’s a detailed explanation along with examples to help you understand how it works. How It Works When you pass an array to a function in JavaScript, you are passing a reference to the array. This means that any changes made to the array within the function will affect the original array outside the function. Example javascript // Define a function that modifies an array function modifyArray(arr) { arr.push('new item'); } // Create an array let myArray = ['item1', 'item2']; // Pass the array to the function modifyArray(myArray); console.log(myArray); // Output: ['item1', 'item2', 'new item'] In this example, the modifyArray function adds a new item to the myArray. Since arrays are passed by reference, the original myArray gets modified. Using Arrays as Parameters You can also perform various operations on arrays within functions, such as iterating, filtering, or mapping:
Iterating over an Array javascript function printArray(arr) { for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } } let myArray = ['apple', 'banana', 'cherry']; printArray(myArray); // Output: apple, banana, cherry Filtering an Array javascript function filterArray(arr, callback) { return arr.filter(callback); } let numbers = [1, 2, 3, 4, 5, 6]; let evenNumbers = filterArray(numbers, function(num) { return num % 2 === 0; }); console.log(evenNumbers); // Output: [2, 4, 6] In this example, the filterArray function takes an array and a callback function to filter out even numbers. Mapping an Array javascript function mapArray(arr, callback) { return arr.map(callback); } let numbers = [1, 2, 3, 4, 5]; let squaredNumbers = mapArray(numbers, function(num) { return num * num; }); console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25] Here, the mapArray function takes an array and a callback function to return an array with squared numbers. MULTIDIMENSIONAL ARRAYS
This code will print all the elements of the array, one by one. Modifying Elements in a Two-Dimensional Array You can also modify elements in a two-dimensional array using their indices: javascript let array = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; array[1][1] = 42; console.log(array[1][1]); // Output: 42 console.log(array); // Output: [ [ 1, 2, 3 ], [ 4, 42, 6 ], [ 7, 8, 9 ] ] Higher-Dimensional Arrays You can create higher-dimensional arrays by adding more levels of nesting: Example of a Three-Dimensional Array javascript let threeDimensionalArray = [ [ [1, 2, 3], [4, 5, 6] ], [ [7, 8, 9], [10, 11, 12] ] ]; console.log(threeDimensionalArray); Accessing Elements in a Three-Dimensional Array To access elements in a three-dimensional array, you need three indices: javascript console.log(threeDimensionalArray[1][0][2]); // Output: 9 EVENTS IN JAVA SCRIPT
The change in the state of an object is known as an Event. In html, there are various events which represents that some activity is performed by the user or by the browser. When javascript code is included in HTML, js react over these events and allow the execution. This process of reacting over the events is called Event Handling. Thus, js handles the HTML events via Event Handlers. For example , when a user clicks over the browser, add js code, which will execute the task to be performed on the event. Event Handler Uses: It can be used directly within HTML elements by adding special attributes to those elements. They can also be used within the
