🗊Презентация JavaScript

JavaScript Занятие №5

Повторение Переменные Типы переменных Именование переменных Условные операторы Перечислить, описать принципиальные отличия Циклы Виды циклов break, continue

Массивы Объединение данных под одним именем Каждый элемент массива имеет свой порядковый номер - индекс Индексация начинается с нуля

Массивы. Синтаксис var first = new Array(1,2,3,4,5); // old one var second = [1,2,3,4,5]; // current way var myString = 'Hello, world'; console.log(first[0]); console.log(second[4]); console.log(myString[2]);

Методы для работы с массивами push - добавление в конец массива pop - удаление из конца массива shift - удаление из начала массива unshift - добавление в начало массива slice - возвращает часть массива splice - возвращает часть массива удаляя её из исходного reverse sort join

Пример с push var arr = [], digit; for (var i = 0; i < 5; i++) { digit = parseInt(prompt('Enter digit #' + (i + 1))); arr.push(digit); } document.write(arr);

Пример с pop var myArr = [1,2,3,4]; document.write("<p>" + myArr + "</p>"); myArr.pop(); document.write("<p>" + myArr + "</p>");

Пример с shift var myArr = [1,2,3,4]; document.write("<p>" + myArr + "</p>"); myArr.shift(); document.write("<p>" + myArr + "</p>");

Пример с unshift var arr = [], digit; for (var i = 0; i < 5; i++) { digit = parseInt(prompt('Enter digit #' + (i + 1))); arr.unshift(digit); } document.write(arr);

Пример с slice var arr = [1,2,3,4,5,6,7]; document.write("<p>" + arr + "</p>"); document.write("<p>" + arr.slice(1,3) + "</p>"); document.write("<p>" + arr + "</p>");

Пример с splice var arr = [1,2,3,4,5,6,7]; document.write("<p>" + arr + "</p>"); arr.splice(1,3); document.write("<p>" + arr + "</p>");

Пример с reverse var arr = [1,2,3,4,5,6,7]; document.write("<p>" + arr + "</p>"); arr.reverse(); document.write("<p>" + arr + "</p>");

Пример с join var arr = [1,2,3,4,5,6,7]; document.write("<p>" + arr + "</p>"); document.write("<p>" + arr.join(';') + "</p>");

Пример с sort var arr = [5, 7, 1, 8, 9, 4, 6, 2]; document.write("<p>" + arr + "</p>"); document.write("<p>" + arr.sort() + "</p>");

Пример с несколькими методами var arr = [5, 7, 1, 8, 9, 4, 6, 2]; document.write("<p>" + arr + "</p>"); document.write("<p>" + arr.sort().join(';') + "</p>");

Вывод цикла. v1 var arr = ['JS', 'PHP', 'Java', 'C#', 'Other']; for (var i = 0; i < arr.length; i++) { document.write('<p>' + arr[i] + '</p>'); }

Вывод цикла. v2 var arr = ['JS', 'PHP', 'Java', 'C#', 'Other']; var str = ''; for (var i = 0; i < arr.length; i++) { str += '<p>' + arr[i] + '</p>'; } document.write(str);

Объекты var product = { name: 'water', price: 10 }; console.log(product); console.log(product.name); console.log(product[‘price’]);

Практика + Домашнее задание Создать массив, длину и элементы которого задаёт пользователь. Затем отсортировать массив по возрастанию. Затем, удалить элементы из массива с 2 по 4. По мере изменений, выводить содержимое массива на страницу. Имеется массив с числами (заданы в скрипте). От пользователя получено некоторое число. Вывести на страницу уведомление о том, совпадает ли пользовательское число хотя бы с одним элементом массива. И если да - вывести индекс этого элемента.

Домашнее задание * Имеется массив объектов с товарами и их ценами. Вывести в консоль список с данными по всем товарам (каждый товар на отдельной строке). От пользователя получить номер товара (реализовать проверку на правильность ввода номера) и количество (так же, реализовать валидацию), вывести на страницу итоговую стоимость покупки. Если стоимость превышает 10.000грн рассчитать скидку в 20% и сообщить об этом пользователю. Усложнить практическое задание введением категорий товаров. Соответственно, пользователь может выбрать категорию товара, номер товара и количество. Затем результат его выбора отобразится на странице Начать изучать Twitter Bootstrap (HTML часть).