How to take array input using JavaScript

3 Methods to Take array input from user in JavaScript

In this post, we will learn 3 Methods to Take array input from user in JavaScript. which one is the traditional method using the prompt() method that prompts a message that asks the user to input some values and returns the user-entered value other ways get element value by ID using document.getElementById(),getElementsByName().

3 Methods to Take array input from user in JavaScript

• Prompt() to Take array input from user in JavaScript
• Take array input from user in JavaScript getElementById()
• getElementsByName() to take array input from user in JavaScript

1. Prompt() to Take array input from user in JavaScript

In this javascript example, we will learn how to Take array input from users in JavaScript.We will ask users to input values for the array by using the prompt() function in javascript.

• We are running the for loop five times.The prompt() function everytime ask for user input whenever the loop run.
• After getting the array value from user.we are printing the final array

var myinputarr = []; var size = 5; // Array size for(var a=0; a //user eneter array console.log(myinputarr);

        
Please enter data
 
Name  
 
Age  
 
City  
 
   var arrCitys=new Array(); var arrNames=new Array(); var arrAges=new Array(); function savedata() < var name = document.getElementById('name').value; var city = document.getElementById('City').value; var age = document.getElementById('age').value; arrCitys[arrCitys.length]=city; arrNames[arrNames.length]=name; arrAges[arrAges.length]=age; >function displayData() < var content="Data Entered by User :
"; content+= [. arrNames]+"
"; content+=[. arrCitys]+"
"; content+=[. arrAges]+"
"; document.getElementById('display').innerHTML = content; >   

3. getElementsByName() to take array input from user

In this JavaScript example, we will learn how to take array input from the user by using getElementsByName() function.We have three textboxes with name =”txtval[]” which values we are accessing by using the function getElementsByName(‘txtval[]’)

• We are looping through all textboxes by using for loop.
• Accessing each text box value by array index and display it on div by using this code document.getElementById(‘display’).innerHTML

Data Entered by User : array[0].value= 1 array[1].value= 2 array[2].value= 3 array[3].value= 4

Summary

In this post, we have learned 3 Methods to Take array input from users in JavaScript with examples.

Источник

Object Array массивы в JavaScript

Массивы в JavaScript представляют собой объектный тип данных, служащий для хранения и обработки множества значений (чаще всего одного типа данных). Использование массивов в некоторых сценариях позволяет сделать код более компактным, в первую очередь благодаря сокращению количества объявляемых переменных. Массивы создаются при помощи оператора new. Существует три варианта вызова конструктора Array():

/* обычный синтаксис */ var array = [ elem0, elem1, elem2, . ] var empty = [] /* Синтаксис с new Array() */ var empty = new Array(); // создание пустого массива var a = new Array(length); // создание массива из "length" неопределенных значений var a = new Array(item1, item2, . ); // создание массива из заданных значений

Элементы массива хранятся последовательно, причем, каждый элемент имеет свой индекс (номер по порядку). Нумерация элементов массивов в JavaScript начинается с нуля. Для доступа к элементу массива используют имя массива и индекс элемента, записанный после имени в квадратных скобках:

Работа с массивами

Ввод массива с клавиатуры

Для ввода массива с клавиатуры чаще всего используют цикл. Если количество элементов массива известно заранее, используют цикл for. В противном случае подойдет цикл с постусловием do…while. Приведем пример:

var a = new Array(); var count = 10; for (var i=0; i
В приведенном фрагменте кода массив выводится в виде строки, где элементы массива разделяются символами ", ". Если массив необходимо вывести поэлементно, то можно будет снова использовать цикл for, так как длина массива нам известна и возвращается свойством length объекта Array().
Добавление элементов в массив
Для добавления элементов в массив можно воспользоваться методами push() и unshift(). Метод push() добавляет элементы в конец массива, а метод unshift() - в начало. Рассмотрим пример применения этих методов:
var a = new Array(1,2,3); alert ("Исходный массив: "+a.join(", ")); if (confirm("Добавить в начало?")) < a.unshift(-2,-1,0); >else < a.push(4,5,6); >alert ("Итоговый массив: "+a.join(", "));
 
Эти методы не позволяют добавить массив в массив. Для этих целей используйте метод concat()
 
Удаление элементов из массива
 
Для удаления элементов из массива используйте методы pop() и shift(). Метод pop() удаляет последний элемент массива, а метод shift() - первый. Рассмотрим пример применения этих методов:
 
var a = new Array(0,1,2,3, 4); alert ("Исходный массив: "+a.join(", ")); if (confirm("Удалить первый?")) < a.shift(); >else < a.push(); >alert ("Итоговый массив: "+a.join(", "));
 
Для удаления элемента располагающегося не в начале или в конце массива можно использовать метод splice() со следующими параметрами: splice(index, 1), где index - номер удаляемого элемента. Следующий пример демонстрирует удаление элемента с индексом "2":
 
var a = new Array(1,2,3,4); alert ("Исходный массив: "+a.join(", ")); a.splice (2,1); alert ("Итоговый массив: "+a.join(", "));
 
Применение метода sort()
 
Метод sort(), как упоминалось выше, позволяет выполнить сортировку, т.е. упорядочивание, элементов массива по заданному критерию. По умолчанию метод sort() рассматривает элементы как строки и критерием считается порядок символов строки в соответствии с таблицей ASCII . Для реализации других критериев сортировки элементов вы должны будете написать функцию, которая определяет порядок сортировки и строится следующим образом:
 
Листинг: сортировка элементов массива методом 'sort()'
 
// объявление и ввод массива var a = new Array(); var count = 5; for (var i=0; i function numDown(a1, a2) < // сортировка по убыванию return a2-a1; >
 
На самом деле, функцию для обратной сортировки массива можно было не писать. Достаточно отсортировать массив по возрастанию значений, а, затем, вызвать метод reverse() для получения обратного порядка следования элементов.
 
Работа со свойством prototype
 
Свойство prototype позволяет добавить в готовый объект новое свойство или метод. Для того, чтобы лучше понять принципы работы с этим замечательным свойством рассмотрим пример реализации метода max() (поиск максимального элемента) в массиве:
 
Листинг: использование сойства 'prototype'
 
function array_max() < var i, max = this[0]; for (i = 1; i < this.length; i++) if (max < this[i]) max = this[i]; return max; >Array.prototype.max = array_max; var a = new Array(); var count = 5; for (var i=0; i
В примере сначала описывается функция array_max(), определяющая максимум текущего массива, обращаясь к его свойствам и элементам посредством указателя this. Затем, строка Array.prototype.max = array_max; добавляет метод max() в массив. Вызов метода max() осуществляется традиционным образом.
Многомерные массивы
К сожалению, в JavaScript отсутствует стандартная реализация многомерных массивов (даже 2-мерных). Однако, этот печальный недостаток можно обойти, создав массив массивов. Для этого необходимо создать массив, а, затем, каждый элемент этого массива так же сделать массивом. Выглядит это примерно так:
var n=3, //количество строк m=5; //количество элементов в строке (столбцов) var a = new Array (); for (var i=0; i >
 
В приведенном примере создается и заполняется двумерный массив. Таким же образом можно создать и массивы большей размерности (3,4,5 и т.д). Для перебора элементов многомерных массивов используются вложенные циклы. Количество вложенных циклов, как правило, определяется количеством измерений создаваемого массива. На практике редко применяются даже двумерные массивы, не говоря уже о массивах большей размерности.
 
Кое что об индексах.
 
До сих пор говорилось, о том, что индекс элемента в массиве - целое число, определяющее порядковый номер элемента. На самом деле, индексом элемента в массиве может быть и уникальный в рамках одного массива строковый идентификатор (то есть строка!). Возникает вполне резонный вопрос - зачем это нужно? Если вдуматься, то использование строк в качестве идентификаторов элемента массива в ряде случаев оказывается полезным. Можно, например, хранить в массиве пароли пользователей, а индексами элементов считать имена пользователей:
 
var users = new Array(); users["admin"] = "qxpfr45d"; users["mama"] = "nf67r"; users["papa"] = "pwr12aa"; users["gosti"] = ""; var l = prompt("Введите свой логин:", "gosti"); var p = prompt("Введите свой пароль:", ""); if (p == users[l]) < alert ("Привет!"); //дальнейшие действия . >else
 
С точки зрения клиентского сценария данный пример не представляет практического интереса. Любой желающий может просмотреть код скрипта, увидеть в нем логин и пароль и воспользоваться ими для входа на страницу. Однако, не стоит забывать, что JavaScript используется для написания не только клиентских, но и серверных сценариев, код которых не посылается пользователю, а выполняется на сервере. В этом случае приведенный механизм защиты становится не таким уж и плохим.
 
Методы высшего порядка (forEach, filter etc)
 
У массивов есть несколько полезных методов высшего порядка – forEach, чтобы сделать что-то с каждым элементом, filter – чтобы построить новый массив, где некоторые значения отфильтрованы, map – чтобы построить новый массив, каждый элемент которого пропущен через функцию, reduce – для комбинации всех элементов массива в одно значение.
 
Источник