Работа с многомерными массивами

Стр 1 из 4Следующая ⇒

ФЕДЕРАЛЬНОЕ АГЕНТСТВО СВЯЗИ

Федерального государственного бюджетного образовательного учреждения

Высшего образования

«Поволжский государственный университет телекоммуникаций и информатики»

КОЛЛЕДЖ СВЯЗИ

УТВЕРЖДАЮ: Директор КС ПГУТИ ___________Андреев Р.В. «____»______________2020г.

СБОРНИК

Практических занятий

по МДК.В.01.03

Веб - программирование

Часть 1

для специальности: 09.02.03 – Программирование в компьютерных системах

Номера занятий: № 1 – 14

Сборник рассчитан на 36 часов

Составлен преподавателем Шомас Е.А.

Рассмотрено на заседании П(Ц)К «Информационные системы и технологии» Председатель ____________ Шомас Е.А. Протокол №___ от ___________2020г.

Самара

2020г.

ПЕРЕЧЕНЬ КОМПЕТЕНЦИЙ

Общие компетенции

ОК 1.

Понимать сущность и социальную значимость своей будущей профессии, проявлять к ней устойчивый интерес;

ОК 2.

Организовывать собственную деятельность, выбирать типовые методы и способы выполнения профессиональных задач, оценивать их эффективность и качество;

ОК 3.

Принимать решения в стандартных и нестандартных ситуациях и нести за них ответственность;

ОК 4.

Осуществлять поиск и использование информации, необходимой для эффективного выполнения профессиональных задач, профессионального и личностного развития;

ОК 5.

Использовать информационно – коммуникационные технологии в профессиональной деятельности;

ОК 6.

Работать в коллективе и в команде, эффективно общаться с коллегами, руководством, потребителями;

ОК 7.

Брать на себя ответственность за работу членов команды (подчиненных), за результат выполнения заданий;

ОК 8.

Самостоятельно определять задачи профессионального и личностного развития, заниматься самообразованием, осознанно планировать повышение квалификации;

ОК 9.

Ориентироваться в условиях частой смены технологий в профессиональной деятельности.

Профессиональные компетенции

ПК 1.1

Выполнять разработку спецификаций отдельных компонент

ПК 1.2

Осуществлять разработку кода программного продукта на основе готовых спецификаций на уровне модуля

ПК 1.3

Выполнять отладку программных модулей с использованием специализированных программных средств

ПК 1.4

Выполнять тестирование программных модулей

ПК 1.5

Осуществлять оптимизацию программного кода модуля

ПК 1.6

Разрабатывать компоненты проектной и технической документации с использованием графических языков спецификаций

ПРАКТИЧЕСКОЕ ЗАНЯТИЕ №1

НАИМЕНОВАНИЕ: Создание простого сценария в JavaScript

1. ЦЕЛЬ: Составление простых сценариев JavaScript и внедрение их в HTML – код, формирование ОК 2, ОК 4, ОК 5, ПК 1.1, ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5, ПК 1.6

2. ПОДГОТОВКА К ЗАНЯТИЮ: по предложенной литературе повторить тему «Назначение языка JavaScript». Основные понятия и определения» и ответить на следующие вопросы:

2.1 Назначение языка JavaScript?

2.2 Где можно разместить сценарии JavaScript в HTML – документе?

2.3 Какие ключевые слова можно использовать для определения переменных?

3. ЛИТЕРАТУРА:

3.1 Шомас Е.А. Технологии стороны клиента. Язык JavaScript., Учебное пособие., Самара КС ПГУТИ, 2019г. – 4,9 п. л.

3.2 https://html5book.ru/javascript-jquery - Учебник по JavaScript

4. ПЕРЕЧЕНЬ ОБОРУДОВАНИЯ И ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ:

4.1 ПЭВМ, подключенные к сети Интернет

4.2 Текстовый редактор

5. ЗАДАНИЕ:

5.1 Используя метод prompt(), узнайте у пользователя его имя, а далее с помощью метода alert() поприветствуйте его.

5.2 Измените сценарий таким образом, чтобы приветствие выводилось в окне браузера.

5.3 Напишите сценарий, в котором происходит сложение следующих типов, данных:

- число – число;

- строка – строка;

- число – строка;

В браузере отобразите вывод, который вы получили. Методом alert() узнайте тип данных для каждого варианта сложения.

5.4 Преобразуйте строковый тип данных в числовой. Результат выведите в окно браузера.

ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ :

6.1.1Сначала необходимо объявить переменную;

6.1.2 Введенное пользователем имя присваивается объявленной переменной:

переменная = prompt();

6.1.3 Используйте метод alert() для вывода введенного имени;

6.2.1 Вместо метода alert (), воспользуйтесь конструкцией document.write("Привет, "+ваша переменная +". Спасибо, что зашли.")

6.3.1 Объявите переменную, в которой происходит

- сложение двух числовых данных (например, 5 и 5)

- сложение числовых и строковых данных (5 и «5»)

- сложение строковых данных («5b» и «5а»)

6.3.2 Выведите в браузере строку с полученным выводом (Вывод: если происходит сложение числа и строки, результатом будет …)

6.3.3 Тип данных можно узнать с помощью функции typeof ().

6.4 Для преобразования строки в число используются функции:

- parseInt() – функция принимает строку и преобразовывает ее в целое число;

- parseFloat() – функция возвращает числа с плавающей точкой.

7. СОДЕРЖАНИЕ ОТЧЕТА:

7.1 Наименование и цель работы

7.2 Задание, под каждым поместить код программы и полученные результаты в виде скринов.

7.3 Ответы на контрольные вопросы

7.4 Вывод о проделанной работе

8. КОНТРОЛЬНЫЕ ВОПРОСЫ:

8.1 Какие методы ввода/вывода информации используются в JavaScript?

8.2 Как сценарий JavaScript внедряется в HTML – документ?

8.3 К каким языкам программирования относится JavaScript?

ПРИЛОЖЕНИЕ:

JavaScript — это объектно-ориентированный язык программирования, предназначенный для написания сценариев, работающих как на стороне клиента, так и на стороне сервера.

Рассмотрим основные методы ввода/вывода информации в сценариях JavaScript:

Метод alert () применяется для вывода на экран простейшей диалоговой панели, отображающей какое – либо сообщение. После вызова этого метода выполнение сценария задерживается до тех пор, пока пользователь не нажмет кнопку ОК в окне с сообщением. Синтаксис: alert (“Сообщение”)

С помощью метода confirm() можно отобразить на экране диалоговую панель с вашим сообщением, но она уже будет содержать две кнопки – ОК и Отмена. В зависимости от того, какая кнопка будет нажата, метод возвратит значение true или false.

Если вам необходимо получить от пользователя одну текстовую строку, то можете применить метод prompt (). Он отображает на экране диалоговую панель, в которой есть одно текстовое поле ввода и кнопка ОК. Когда пользователь нажимает эту кнопку, метод возвращает введенную строку.

Код на JavaScript встраивается в веб – страницу вместе с кодом HTML. Его присутствие обозначается тегами <script> </script>. Как и HTML – код, сценарий на JavaScript выполняется с верхней строки вниз и обрабатывается выражение за выражением (пошагово).

Кроме размещения текста сценария в теле HTML – документа его можно поместить в отдельный файл. Это должен быть отдельный текстовый файл, с расширением * . js. В этом файле не должно быть ничего кроме операторов JavaScript. В тексте HTML - документа содержимое контейнера <script> приведите к следующему виду: <script src=”*.js”></script >

ПРАКТИЧЕСКОЕ ЗАНЯТИЕ №2

НАИМЕНОВАНИЕ: Создание электронной визитной карточки

1. ЦЕЛЬ: Использование функции prompt и возможностей динамического построения тела HTML – документа при помощи конструкции document.write, формирование ОК 2, ОК 4, ОК 5, ОК 8, ПК 1.1, ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5, ПК 1.6

2. ПОДГОТОВКА К ЗАНЯТИЮ: по предложенной литературе повторить тему «Назначение языка JavaScript. Основные понятия и определения» и ответить на следующие вопросы:

2.1 Какие группы операторов существуют в языке JavaScript?

2.2 Каким образом можно осуществить взаимодействие пользователей с веб ресурсом средствами языка JavaScript?

3. ЛИТЕРАТУРА:

3.1 Шомас Е.А. Технологии стороны клиента. Язык JavaScript., Учебное пособие., Самара КС ПГУТИ, 2019г. – 4,9 п. л.

3.2 https://html5book.ru/javascript-jquery - Учебник по JavaScript

4. ПЕРЕЧЕНЬ ОБОРУДОВАНИЯ И ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ:

4.1 ПЭВМ, подключенные к сети Интернет

4.2 Текстовый редактор

5. ЗАДАНИЕ:

5.1 Создать электронную визитную карточку с указанием своих

- имени и фамилии;

- статуса;

- номера телефона;

- логотип КС ПГУТИ (можно использовать другой логотип)

по следующему образцу:

5.2 Добавьте свой e-mail;

5.3 Самостоятельно произвести оформление визитной карточки средствами CSS

ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ :

6.1 Сначала создается статический HTML – макет в текстовом редакторе. Создавать макет можно через таблицу или блок div. Ширина таблицы (блока) будет 400px.

6.2 Для управления рамками таблицы и оформления текста воспользуйтесь средствами CSS.

6.3 Далее происходит динамическая верстка тела HTML – документа при помощи конструкции document.write (пример использования конструкции можно посмотреть в приложении)

6.4 Вводим переменные для обозначения имени и фамилии, статуса, телефона и e-mail. Присваиваем значения переменных к функции prompt()

6.5 Тестируем свою программу

СОДЕРЖАНИЕ ОТЧЕТА:

7.1 Наименование и цель работы

7.2 Задание, под каждым поместить код программы и полученные результаты в виде скринов.

7.3 Ответы на контрольные вопросы

7.4 Вывод о проделанной работе

КОНТРОЛЬНЫЕ ВОПРОСЫ :

8.1 Каким образом можно осуществить динамическое формирование содержимого HTML – документа?

8.2 Каким образом осуществляется отладка сценария JavaScript?

ПРИЛОЖЕНИЕ:

Пример динамической верстки тела HTML – документа при помощи конструкции document.write приведен в следующем листинге:

document.write('<table border="1">');

document.write('<tr><td width="150">');

document.write('<img src="logo.jpg"></td>');

document.write('<td id="ot">');

document.write('<b>' + name + '</b><br><br>');

document.write('</td></tr>');

document.write('</table>');

</script>

В данном примере формирование визитной карточки осуществляется через таблицу. Результат:

Чтобы осуществлять запрос на вывод фамилии и имени введите в свою программу функцию prompt().

ПРАКТИЧЕСКОЕ ЗАНЯТИЕ №3

НАИМЕНОВАНИЕ: Использование условных операторов в сценариях JavaScript

1. ЦЕЛЬ: Создание сценариев с использованием условных операторов, формирование ОК 2, ОК 4, ОК 5, ПК 1.1, ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5, ПК 1.6

2. ПОДГОТОВКА К ЗАНЯТИЮ: по предложенной литературе повторить тему «Условные конструкции в JavaScript» и ответить на следующие вопросы:

2.1 Какие условные операторы вам известны?

2.2 В каких случаях каждый из условных операторов применяется?

3. ЛИТЕРАТУРА:

3.1 Шомас Е.А. Технологии стороны клиента. Язык JavaScript., Учебное пособие., Самара КС ПГУТИ, 2019г. – 4,9 п. л.

3.2 https://html5book.ru/javascript-jquery - Учебник по JavaScript

4. ПЕРЕЧЕНЬ ОБОРУДОВАНИЯ И ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ:

4.1 ПЭВМ, подключенные к сети Интернет

4.3 Текстовый редактор

5. ЗАДАНИЕ:

5.1. Создайте сценарий JavaScript который находил бы значение функции в определенной точке:

№ варианта	Задание
1
2
3
4
5
6
7
8
9
10

5.2 С помощью оператора switch создайте сценарий JavaScript, в котором определенный цвет на русском языке соответствовал этому же цвету на английском языке.

5.3 Измените предыдущее задание таким образом, чтобы в соответствии с заданным цветом изменялся фон документа.

6. ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:

6.1 Порядок выполнения первого задания:

6.1.1 Сначала объявляются переменные x и y.

6.1.2 С помощью метода prompt () запросите значение х.

6.1.3 Преобразуйте введенную строку в число

6.1.4 Воспользовавшись оператором if или if … else определите значение функции;

6.1.5 С помощью метода alert () выведите значение функции

6.2 При решении второго задания определяйте не менее шести цветов;

6.2.1 Сначала объявляется переменная1;

6.2.2 Объявляется переменная2, в которой с помощью метода prompt () запрашивается название цвета

6.2.3 Прописываем соответствие цветов (переменная 2 (название цвета на английском языке): переменная 1 (название цвета на русском языке))

6.2.3 Изменение фона документа осуществляется через свойство document.bgColor

7. СОДЕРЖАНИЕ ОТЧЕТА:

7.1 Наименование и цель работы

7.2 Задание, под каждым поместить код программы и полученные результаты в виде скринов.

7.3 Ответы на контрольные вопросы

7.4 Вывод о проделанной работе

8. КОНТРОЛЬНЫЕ ВОПРОСЫ:

8.1 Синтаксис оператора if…else

8.2 Синтаксис оператора switch

8.3Назначение и принципиальное отличие операторов break и continue

ПРИЛОЖЕНИЕ:

Условные операторы

В процессе создания сценариев обычно требуется изменить порядок выполнения кода. Оператор if управляет последовательностью выполнения команд. Синтаксис:

if (условие) {

блок команд;

}

Сначала вычисляется логическое выражение, затем, если оно, верно, выполняются операторы, если оно не верно, то операторы пропускаются, и продолжается выполнение сценария.

Оператор if … else используется, когда необходимо задать действия, которые выполняются, если логическое выражение не верно. Синтаксис:

if (условие) {

операторы 1;

}

else {

операторы 2;

}

Пример: Функция f(x) определяется следующим образом:

Сценарий

var x,y;

//Запрашиваем значение х

X = prompt("Введите значение х","0");

//Преобразуем введенную строку в число

X = +x;

//определяем значение функции

if(x <= 0) {

y = x+10;

}

else

{ y = 2*x;

}

alert("Функция f("+x+")="+y);

</script>

Оператор switch позволяет сравнивать значение с множеством других. Этот оператор дает возможность предусмотреть операторы по умолчанию, которые выполняются, если не найдено ни одного соответствия.

switch (выражение)

{

case значение1:операторы 1;

break;

case значение2:операторы 2;

break;

…

default:операторы;

}

Рассмотрим пример сценария, который будет переводить названия животных с английского языка на русский:

//Запрашиваем название животного

let t;

let b = prompt("Введите название животного");

//Находим соответствующее название на русском языке

switch (b)

{

case "собака": t="dog";

break;

case "кошка": t="cat";

break;

case "корова": t="cow";

break;

default: t="Неизвестное животное";

}

alert(b + "-" + t);

</script>

ПРАКТИЧЕСКОЕ ЗАНЯТИЕ № 4

НАИМЕНОВАНИЕ: Использование циклов в сценариях JavaScript

1. ЦЕЛЬ: Применение операторов цикла в сценариях JavaScript, формирование ОК 2, ОК 4, ОК 5, ПК 1.1, ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5, ПК 1.6

2. ПОДГОТОВКА К ЗАНЯТИЮ: по предложенной литературе повторить тему «Операторы цикла JavaScript» и ответить на следующие вопросы:

2.1 Какие операторы цикла вам известны?

2.2 В каких случаях каждый из операторов применяется?

3. ЛИТЕРАТУРА:

3.1 Шомас Е.А. Технологии стороны клиента. Язык JavaScript., Учебное пособие., Самара КС ПГУТИ, 2019г. – 4,9 п. л.

3.2 https://html5book.ru/javascript-jquery - Учебник по JavaScript

4. ПЕРЕЧЕНЬ ОБОРУДОВАНИЯ И ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ:

4.1 ПЭВМ, подключенные к сети Интернет

4.2 Текстовый редактор

5 . ЗАДАНИЕ:

5.1 Создайте документ HTML с заголовком «Сюрприз». Фон документа должен быть белым. Потом с помощью JavaScript досчитайте до 5 (можно использовать метод alert() для подсчета, либо использовать таймер для задержки), на этом этапе цвет фона меняется на желтый и появляется текст: «Скоро будет еще один цветной сюрприз…». Снова досчитайте до 5, и измените цвет фона.

5.2 Запросите у пользователя запрос: «Сколько раз пожелать вам доброго дня?». Ограничимся предельным значением – 25. Пожелайте доброго дня столько количество раз, сколько запросил пользователь. В случае числа больше 25, выводится сообщение об ошибке.

6 ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:

6.1 Для выполнения первого задания воспользуйтесь оператором for.

6.2 Для выполнения второго задания воспользуйтесь оператором while.

7 СОДЕРЖАНИЕ ОТЧЕТА:

7.1 Наименование и цель работы

7.2 Задание, под каждым поместить код программы и полученные результаты в виде скринов.

7.3 Ответы на контрольные вопросы

7.4 Вывод о проделанной работе

КОНТРОЛЬНЫЕ ВОПРОСЫ :

8.1 Для каких целей в сценариях используют счетчики?

8.2 Чем отличаются операторы while от do…while?

ПРИЛОЖЕНИЕ:

Для многократного выполнения кода используют операторы цикла. Кроме того, циклы предоставляют удобные средства для манипулирования массивами.

Оператор for служит для создания цикла. Синтаксис:

for (выражение инициализации; выражение условия; выражение цикла)

{

операторы

}

Выражение инициализации служит для задания начального значения счетчика цикла. Выражение условия позволяет прекратить выполнять цикл, когда условие перестанет выполняться. Выражение цикла обычно осуществляет инкремент или декремент счетчика цикла. Любое из этих выражений может быть пропущено, но соответствующая точка с запятой должна ставиться.

Пример: Напишем программу, выводящую на страницу числа от 1 до 5.

for (i=1;i<=5;i++) {

document.write (i+'<br />');

}

Оператор while сходен с оператором for, но он не производит инициализацию и инкремент счетчика в своем объявлении. Синтаксис:

while (выражение условия) {

операторы;

}

Если выражение условия в цикле while сразу ложно, то операторы не выполнятся ни разу.

Оператор do … while практически идентичен оператору while, но, поскольку в нем проверка условия осуществляется в конце, он гарантирует выполнение операторов, по крайней мере, один раз. Синтаксис:

do {

операторы;

} while (выражение условия)

Пример: Пожелаем Доброго вечера три раза

var l=3; n=1;

while (n<=l){

document.write("Добрый ");

n=n+1;

}

document.write("вечер!")

</script>

ПРАКТИЧЕСКОЕ ЗАНЯТИЕ № 5

НАИМЕНОВАНИЕ: Работа с датой и временем в сценариях JavaScript

1. ЦЕЛЬ: Написание сценариев, позволяющих работать с объектом JavaScript – Date, формирование ОК 2, ОК 4, ОК 5, ПК 1.1, ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5, ПК 1.6

2. ПОДГОТОВКА К ЗАНЯТИЮ: по предложенной литературе повторить тему «Встроенные объекты языка JavaScript» и ответить на следующие вопросы:

2.1 Какой объект применяется для работы с датой и временем?

2.1 Перечислите известные вам методы для получения данных о дате и времени

3. ЛИТЕРАТУРА:

3.1 Шомас Е.А. Технологии стороны клиента. Язык JavaScript., Учебное пособие., Самара КС ПГУТИ, 2019г. – 4,9 п. л.

3.2 https://html5book.ru/javascript-jquery - Учебник по JavaScript

4. ПЕРЕЧЕНЬ ОБОРУДОВАНИЯ И ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ:

4.1 ПЭВМ, подключенные к сети Интернет

4.2 Текстовый редактор

5. ЗАДАНИЕ:

5.1 Напишите сценарий, который будет определять текущую дату и время и выводить ее в формате: В Самаре 2 февраля 2020, среда

Время 11:45:31

5.2 Напишите сценарий ежедневного календаря по следующему образцу (рис 1).

5.3 Перепишите предыдущей сценарий, позволяющий заменить номер месяца на его полное название. Образец оформления на рисунке 2.

Рис 1 Рис 2

ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ :

6.1.1 При выполнении задания необходимо подобрать соответствующие методы для объекта Date. Методы представлены в таблице Приложения.

6.1.2 Для представления в нужном нам формате названия месяца и дня недели необходимо применить оператор switch.

….

switch (mon){

case 0: s="января"; break;

case 1: s="ферваля"; break;

….

7. СОДЕРЖАНИЕ ОТЧЕТА:

7.1 Наименование и цель работы

7.2 Задание, под каждым поместить код программы и полученные результаты в виде скринов.

7.3 Ответы на контрольные вопросы

7.4 Вывод о проделанной работе

КОНТРОЛЬНЫЕ ВОПРОСЫ :

8.1 В чем отличие метода getDate от setDate?

8.2 Какое значение будет выведено в окне браузера при использовании следующей строки:

var myDate=new Date();

ПРИЛОЖЕНИЕ:

В JavaScript для работы с датой и временем применяется встроенный объект Date. Этот объект не имеет свойств, но обладает несколькими методами, позволяющими устанавливать и изменять дату и время.

Объект Date создается с помощью оператора new и конструктора – Date. Например,

var myDate = new Date ();

значение переменной myDate будет текущая дата и время. Методами объекта Date можно получить отдельно значения месяца, дня недели, часов, минут и секунд:

Метод	Действие
getDate	Возвращает число в диапазоне от 1 до 31, представляющее число месяца
getHours	Возвращает час суток в диапазоне от 0 (полночь) до 23
getMinutes	Возвращает минуты в диапазоне от 0 до 59
getSeconds	Возвращает секунды в диапазоне от 0 до 59
getDay	Возвращает день недели, как целое число от 0 (воскресенье) до 6 (суббота)
getMonth	Возвращает номер месяца в году, как целое число от 0 (январь), до 11 (декабрь)
getYear	Возвращает год в виде двух последних цифр
getFullYear	Возвращает год в виде четырех цифр

Предположим мы хотим написать сценарий, который будет определять текущее время и выводить его в формате «чч:мм:сс»

var t=new Date();

var h=t.getHours();

var m=t.getMinutes();

var s=t.getSeconds();

document.write(h+ ":" +m+ ":" +s);

</script>

ПРАКТИЧЕСКОЕ ЗАНЯТИЕ № 6

НАИМЕНОВАНИЕ: Работа со строковыми функциями в JavaScript

1. ЦЕЛЬ: Применение на практике функций для работы со строками, формирование ОК 2, ОК 4, ОК 5, ПК 1.1, ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5, ПК 1.6

2. ПОДГОТОВКА К ЗАНЯТИЮ: По предложенной литературе повторить тему «Объекты языка JavaScript» и ответить на следующие вопросы:

2.1 Какой объект используется для описания строк символов в языке JavaScript?

2.2 Какие методы JavaScript – объекта String вы знаете?

3. ЛИТЕРАТУРА:

3.1 Шомас Е.А. Технологии стороны клиента. Язык JavaScript., Учебное пособие., Самара КС ПГУТИ, 2019г. – 4,9 п. л.

3.2 https://html5book.ru/javascript-jquery - Учебник по JavaScript

4. ПЕРЕЧЕНЬ ОБОРУДОВАНИЯ И ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ:

4.1 ПЭВМ, подключенные к сети Интернет

4.2 Текстовый редактор

5. ЗАДАНИЕ:

5.1 Поиск и замена: дана строка aaa @ bbb @ ccc. Необходимо заменить все @ на ! (используйте метод replace)

5.2 Преобразование формата даты: в переменной date лежит дата в формате 2020-02-18. Преобразуйте эту дату в формат 2020:02:18 (используйте метод split)

5.3 Работа с регистром символов: дана строка – Я изучаю JavaScript !. Преобразуйте строку в верхний регистр, а затем в нижний регистр.

5.4 Во фразе – Я изучаю JavaScript! найдите количество символов.

5.5 Извлеките слово изучаю из предыдущей фразы с помощью методов substr, substring и slice и выведите ее на страницу

5.6 Раскодируйте значение строки, используя метод fromCharCode() и выведите ее на страницу:

(1052)(1086)(1089)(1082)(1074)(1072)

5.7 После того как строка будет раскодирована закодируйте ее обратно, используя метод charCodeAt() и сравните свой результат с данными задачи.

5.8 Закодируйте слово Самара

5 ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:

6.1 По предложенной литературе изучить необходимый материал и ответить на вопросы для допуска к практическому занятию;

6.2 Выполнить задание практического занятия;

6.3 Дать ответы на контрольные вопросы;

7. СОДЕРЖАНИЕ ОТЧЕТА:

7.1 Наименование и цель работы

7.2 Задание, под каждым поместить код программы и полученные результаты в виде скринов.

7.3 Ответы на контрольные вопросы

7.4 Вывод о проделанной работе

КОНТРОЛЬНЫЕ ВОПРОСЫ :

8.1 Как определить длину строки символов?

8.2 Как извлечь n-й символ из строки символов?

8.3 Каков индекс первого символа в строке?

ПРИЛОЖЕНИЕ:

Объект String – предназначендля создания строк символов и выполнения операций над ними. Он выступает в качествеконтейнера для всех функций, обрабатывающих текстовые строки. Объект String имеет всего одно свойство length, содержащий длину строки в символах.

Чтобы создать строковый объект можно воспользоваться конструктором newString.

Например, var s = newString(“Итого:”);

Если применить свойство объекта: s.length, результатом будет число 6.

Метод	Действие
charAt ()	Возвращает символ находящийся на указанной позиции в строке
charCodeAt ()	Возвращает цифровой код (Юникод) символа на указанной позиции в строке
concat ()	Объединяет две или более строки
fromCharCode()	Преобразует Юникод в символ
slice ()	Извлекает часть существующей строки и возвращает новую строку
indexOf ()	Возвращает позицию первого найденного совпадения выражения в методе со строкой текста
lastIndexOf ()	Возвращает позицию последнего найденного совпадения выражения в методе со строкой текста
split ()	Разделяет строку на массив подстрок
toUpperCase ()	Преобразует строку символов в верхний регистр
toLowerCase ()	Преобразует строку символов в нижний регистр
replase()	Предназначен для поиска подстроки в строке и замены найденных фрагментов другой подстрокой

Рассмотрим на примерах некоторые методы объекта String. Синтаксис:

строка.substr(начало, количество)

var str = 'Европа — одна из шести частей света.';

document.write(str.substr(9,4) + '<br />');

В браузере отобразится – одна

Синтаксис: строка.substring(начало, конец)

var str = 'Европа — одна из шести частей света.';

document.write(str.substring(8,22) + '<br />');

В браузере отобразится – одна из шести

С помощью метода fromCharCode Вы можете преобразовывать произвольные значения Юникода в соответствующие им символы. Синтаксис:

String.fromCharCode(Юникод1, Юникод2, … ЮникодN)

document.write(String.fromCharCode(1070,1085,1080,1082,1086,1076));

В браузере отобразиться - Юникод

Метод charCodeAt возвращает Юникод символа на указанной позиции в строке. Первый символ в строке имеет позицию 0, второй 1 и т.д. Синтаксис: строка.charCodeAt(позиция)

var str1 = new String('Я короткая строка!');

document.write(str1.charCodeAt(4)+'<br />');

В браузере отобразится - 1088

ПРАКТИЧЕСКОЕ ЗАНЯТИЕ № 7

НАИМЕНОВАНИЕ: Работа с массивами в JavaScript

1. ЦЕЛЬ: Составление сценариев JavaScript, позволяющих работать с элементами массива. Ознакомление с многомерными массивами, массивом images. Формирование ОК 2, ОК 4, ОК 5, ПК 1.1, ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5, ПК 1.6

2. ПОДГОТОВКА К ЗАНЯТИЮ: По предложенной литературе повторить тему «Встроенные объекты JavaScript» и ответить на следующие вопросы:

2.1 Какие способы объявления массива вы знаете?

2.2 Каков индекс первого элемента массива?

2.3 Как узнать длину массива?

3. ЛИТЕРАТУРА:

3.1 Шомас Е.А. Технологии стороны клиента. Язык JavaScript., Учебное пособие., Самара КС ПГУТИ, 2019г. – 4,9 п. л.

3.2 https://html5book.ru/javascript-jquery - Учебник по JavaScript

4. ПЕРЕЧЕНЬ ОБОРУДОВАНИЯ И ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ:

4.1 ПЭВМ, подключенные к сети Интернет

4.2 Текстовый редактор

5. ЗАДАНИЕ:

5.1 Работа с объектом Array :

5.1.1 Создайте два массива:

mass 1 = ['Банан', 'Яблоко', 'Свекла', 'Капуста', 'Груша', 'Морковь', 'Апельсин', 'Огурец', 'Помидор', 'Манго']

mass 2 = ['Филин', 'Тигр', 'Волк', 'Ворона', 'Лев', 'Воробей', 'Медведь', 'Сорока', 'Рысь', 'Синица']

Выведите их на экран браузера.

5.1.2 Из первого массива удалите все овощи и сохраните новый массив с названием frukt. Из второго массива удалите всех животных, не являющимися птицами, сохраните получившийся массив под названием bird.

5.1.3 Соедините полученные массивы (mass 3) в один и выведите их на экран.

5.1.4 Узнайте длину массивов

5.1.5 Добавьте в начало полученного массива - Мандарин, а в конец – Соловей.

5.1.6 Узнайте новую длину массива

5.1.7 Измените порядок следования элемента массива на противоположенный и выведите результат на экран

5.1.8 Отсортируйте массив и выведите результат на экран.

5.1.9 В массив frukt после каждого фрукта добавьте слово - съел

Работа с многомерными массивами

5.2.1 Сформируйте многомерный массив – Времена года, по следующему образцу:

Примерный код программы можно посмотреть в приложении.

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

5.3.1 Создайте массив с изображениями (пять различных изображений). С помощью метода prompt() запросите у пользователя, какой рисунок загрузить в браузере. Место для загрузки изображения - 200х150. Примерный код программы представлен в приложении.

6. ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:

6.2 Выполнить задание практического занятия;

6.3 Дать ответы на контрольные вопросы;

7. СОДЕРЖАНИЕ ОТЧЕТА:

7.1 Наименование и цель работы

7.2 Задание, под каждым поместить код программы и полученные результаты в виде скринов.

7.3 Ответы на контрольные вопросы

7.4 Вывод о проделанной работе

8. КОНТРОЛЬНЫЕ ВОПРОСЫ :

8.1 Определение и назначение массива?

8.2 Какие способы сортировки массива вы знаете?

8.2 Каков формат обращения к n-му элементу массива?

ПРИЛОЖЕНИЕ:

- Объявите два массива, используя следующую конструкцию:

var yun=[“Сергей”, “Алексей”];

var dew=[“Анна”, “Юля”];

- Для объединения массива используют метод concat ()

var fam = yun.concat(dew)

- Для вывода результата воспользуйтесь методом

document.write (fam)

- Для добавления разделителя между элементами массива используют метод join ()

document.write (dew.join(“и”))

- Для удаления последнего элемента из массива используют метод pop ()

- Для добавления элемента в конец массива используют метод push ()

- Для изменения порядка элементов в массиве используют метод reverse ()

- Для удаления первого элемента из массива используют метод shift ()

- Для добавления одного или нескольких элементов массива в начало массива используется метод unshift ()

- Для сортировки массива используют метод sort ()

- Для добавления, удаления или замены элементов в массиве служит метод splice ()

Чтобы узнать длину массива используется свойство – length

Многомерные массивы:

Многомерные массивы в JavaScript — это массивы, содержащие внутри себя другие массивы.

Примерный код программы многомерного массива:

list = new Array();

list[0] = new Array("Зима:", "Весна:", "Лето:", "Осень:");

list[1] = new Array("Декабрь, ", "Январь, ", "Февраль ");

…

list[3] = new Array("Июнь, ", "Июль, ", "Август ");

document.write("<b>" + list[0][0] + "</b><br>");

document.write("<i>" + list[1][0] + "</i>");

document.write("<i>" + list[1][1] + "</i>");

document.write("<i>" + list[1][2] + "</i><br>");

Массив images

Каждый объект img на странице хранится в массиве images[]. Этот массив – свойство объекта Document. Первый элемент на странице находится в элементе document.images[0], второе – в document.images[1] и т.д.

При желании можно сделать так, чтобы переменная ссылалась на объект img в массиве images [] – так будет легче читать код. Например, если вы напишите:

var myImage2 = document.images[1];

переменная myImage2 будет содержать ссылку на объект img внутри массива images [] с индексом 1. Теперь вы можете писать myImage2 вместо document.images[1] в вашем коде – результат будет тот же.

Вы можете также получить доступ к объектам img в массив images по имени. Например, к объекту img, созданному тегом <img>, название которого myImage, можно получить доступ через свойство images объекта Document, которое является массивом, следующим образом:

document.images["myImage"]

Поскольку свойство document.images – это массив, у него, в свою очередь, есть свойства встроенного объекта JavaScript Array – такие как length. Например, если вы хотите узнать, сколько изображений находится на странице, об этом сообщит код document.images.length.

Объект img имеет множество полезных свойств. Самое важное из них – src. Изменяя его, вы можете изменить загруженное изображение. Пример:

<html>

<body>

var myImages = new Array("1.jpg", "2.jpg", "3.jpg");

var imgIndex = prompt("Введите число от 0 до 2");

document.images["imgl"].src = myImages

</script>

</body>

</html>

ПРАКТИЧЕСКОЕ ЗАНЯТИЕ № 8

НАИМЕНОВАНИЕ: Использование пользовательских функций в JavaScript

1. ЦЕЛЬ: Создание собственных функций и внедрение их в сценарий, формирование ОК 2, ОК 4, ОК 5, ПК 1.1, ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5, ПК 1.6

2. ПОДГОТОВКА К ЗАНЯТИЮ: По предложенной литературе повторить тему «Функции JavaScript» и ответить на следующие вопросы:

1. Какие функции существуют и используются в сценариях JavaScript?

2. Какие функции JavaScript вы использовали на практических занятиях?

3. ЛИТЕРАТУРА:

3.1 Шомас Е.А. Технологии стороны клиента. Язык JavaScript., Учебное пособие., Самара КС ПГУТИ, 2019г. – 4,9 п. л.

3.2 https://html5book.ru/javascript-jquery - Учебник по JavaScript

4. ПЕРЕЧЕНЬ ОБОРУДОВАНИЯ И ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ:

4.1 ПЭВМ, подключенные к сети Интернет

4.2 Текстовый редактор

5. ЗАДАНИЕ:

5.1 Создайте функцию, которая возвращает квадрат числа. Число передается параметром

5.2 Сделайте функцию, которая возвращает сумму двух чисел

5.3 Сделайте функцию, которая отнимает от первого числа второе и делит на третье

5.4 Сделайте функцию, которая принимает параметром число от 1 до 7, а возвращает день недели на русском языке

6. ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:

6.1 Изучите теоретический материал по теме практической работы перед выполнением задания.

6.2 Примеры выполнения создания простейших функций можно найти в Приложении.

7. СОДЕРЖАНИЕ ОТЧЕТА:

7.1 Наименование и цель работы

7.2 Задание, под каждым поместить код программы и полученные результаты в виде скринов.

7.3 Ответы на контрольные вопросы

7.4 Вывод о проделанной работе

8. КОНТРОЛЬНЫЕ ВОПРОСЫ :

8.1 Что такое функция? Синтаксис функции.

8.2 Для чего предназначен оператор return?

ПРИЛОЖЕНИЕ:

Функции – это набор инструкций, выполняющих определенное действие или вычисляющих определенное значение. Синтаксис:

function имя_функции([параметр [, ...]]){

// Инструкции

}

Определение функции начинается с ключевого слова function, после которого следует имя функции. К имени функции применяются те же правила, что и для имени переменной. После имени функции в скобках идет перечисление параметров. Если параметров у функции нет, то скобки остаются пустыми. В фигурных скобках идет тело функции, содержащее набор инструкций. Пример простейшей функции:

function hello(){

document.write("Привет!");

}

hello();// вызываем функцию

Параметры функции

Мы можем передавать функции информацию, используя параметры (аргументы функции).

Рассмотрим передачу параметров функции:

function display(x){ // определение функции

let z = x * x;

document.write("Квадрат " + x + " равен " + z);

}

display(5); // вызов функции

Функция display принимает параметр – х. Поэтому при вызове функции мы можем передавать для него значение. В данном примере, передавалось число 5.

Возврат значения

Функцияможет возвращать результат. Для этого используется оператор return:

function sum(a, b) {

return a + b;

}

let result = sum(2, 3);

alert(result);// выведет 5

Оператор return может находиться в любом месте тела функции. Как только выполнение доходит до этого места, функция останавливается, и значение возвращается в вызвавший ее код (присваивается переменной result).

ПРАКТИЧЕСКОЕ ЗАНЯТИЕ № 9

НАИМЕНОВАНИЕ: Работа с DOM в JavaScript

2. ЦЕЛЬ: Создание событий пользователя, воздействие на элементы веб – страницы через пользовательские события, формирование ОК 2, ОК 4, ОК 5, ПК 1.1, ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5, ПК 1.6

2. ПОДГОТОВКА К ЗАНЯТИЮ: По предложенной литературе повторить тему «Основы работы с DOM в JavaScript» и ответить на следующие вопросы:

2.1. Что такое событие? Когда их применяют на веб – страницах?

2.2. Какие обработчики событий вам известны?

3. ЛИТЕРАТУРА:

3.1 Шомас Е.А. Технологии стороны клиента. Язык JavaScript., Учебное пособие., Самара КС ПГУТИ, 2019г. – 4,9 п. л.

3.2 https://learn.javascript.ru/introduction-browser-events – Введение в браузерные события

4. ПЕРЕЧЕНЬ ОБОРУДОВАНИЯ И ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ:

4.1 ПЭВМ, подключенные к сети Интернет

4.2 Текстовый редактор

5. ЗАДАНИЕ:

5.1 Изменение текста в инпуте: Пусть в текстовом поле записан любой текст (допустим - Привет!), при нажатии кнопки текст должен поменяться (например, Пока!)

5.2 В предыдущей задаче изменить цвет текста при нажатии кнопки (допустим, фраза Пока! должна изменить цвет на зеленый)

5.3 Создайте форму для ввода длины и ширины прямоугольника. При нажатии кнопки должна выводится площадь (периметр) прямоугольника в соответствующем текстовом поле.

5.4 Поместите небольшую картинку на страницу, под ней кнопку. При нажатии кнопки картинка должна поменяться на другую.

5.5 Пусть изменение картинки будет происходить при наведении курсора мыши на нее, когда убираем курсор мыши с картинки, она меняется на первоначальную.

5.6 Создайте кнопку, которая будет подсчитывать количество кликов по ней. Количество кликов должно отображаться на самой кнопке.

6. ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:

6.1 Изучите теоретический материал по теме практической работы перед выполнением задания.

6.2 Примеры выполнения создания простейших функций можно найти в Приложении.

7. СОДЕРЖАНИЕ ОТЧЕТА:

7.1 Наименование и цель работы

7.2 Задание, под каждым поместить код программы и полученные результаты в виде скринов.

7.4 Ответы на контрольные вопросы

7.4 Вывод о проделанной работе

8. КОНТРОЛЬНЫЕ ВОПРОСЫ :

8.1 Привести пример использования события на веб - странице

8.2 На какие группы можно разделить события?

ПРИЛОЖЕНИЕ:

Работа с событиями

Самый простой способ задать реакцию элемента на определенное событие – указать ее с помощью атрибута для определенного тега. Значением атрибута с событием служит JavaScript код. Например, по нажатию мышкой на кнопку выполнится функция alert:

или можно записать так:

function func() {

alert('!'); }

</script>

Можно выполнить не одну, а несколько функций:

Работа с getElementById

Научимся получать элементы HTML страницы и проводить с ними различные манипуляции.

Пусть у нас есть на странице тег с атрибутом id="test". Запишем ссылку на этот тег в переменную elem. Для этого воспользуемся методом getElementById, который получает элемент по его id.

Эта запись произойдет по клику на кнопку, которой мы зададим атрибут onclick. По нажатию на эту кнопку сработает функция func, которая найдет на HTML странице элемент с id="test" и запишет ссылку на него в переменную elem:

function func() {

var elem = document.getElementById('test');

}

Теперь в переменной elem лежит ссылка на элемент с атрибутом id="test". Сама переменная elem является объектом. Этот объект и тег HTML страницы связаны друг с другом и мы можем поменять какие – либо свойства объекта elem и при этом увидим изменения на HTML странице, которые произойдут с полученным нами элементом. Рассмотрим, как это происходит на практике.

Дата добавления: 2021-02-10; просмотров: 542; Мы поможем в написании вашей работы!

Поделиться с друзьями:

12 3 4 Следующая ⇒

Мы поможем в написании ваших работ!