Основы Java Script

Лабораторная работа №0. “Hello, World”
Цель работы
Получить навыки первоначальной настройки среды разработки, получить базовое представление об операторах вывода.
Задания для выполнения
- Установите на компьютер редактор кода Sublime Text 3.
- Установите Google Chrome.
- Создайте новый пустой текстовый файл 1.txt в выбранной директории. Поменяйте разрешение на 1.html и откройте его в Sublime Text 3 и Google Chrome.
- Выведите на экран в браузере Google Chrome сообщение «Hello, World».
- Установить SmartGit
- Сделать клон репозитория https://github.com/al-shatalova/students.git
- Отправить файл на Git со своей фамилией в комментарии (Commit — Push)
Методические указания
Скачать Sublime Text 3 можно с сайта SublimeText (https://www.sublimetext.com/3). После скачивания запустите setup-файл и установите Sublime Text 3.
Скачать Google Chrome можно с сайта (https://www.google.com/intl/en/chrome/). После скачивания запустите setup-файл
Скачать Smart Git можно с сайта: https://www.syntevo.com/smartgit/. После скачивания запустите setup-файл.
Вывести сообщение можно набрав, теги:
Контрольные вопросы
- С какими операционными системами работает Google Chrome?
- Для какой цели служит JavaScript?
- В каких операционных системах работает JavaScript?
- Что означает строчка: <meta charset=’utf-8′>?
Дополнительные задания
Попросите пользователя ввести число и сохраните его в переменную a.
Лабораторная работа №1. Переменные, типы данных
Цель работы
Получить навыки работы с переменными, различными типами данных, операциями над ними.
Задания для выполнения
- Попросите пользователя ввести любое число и сохраните его в переменную.
- Создайте калькулятор, который будет выполнять все арифметические операции над любыми введенными пользователем двумя числами.
- Сохраните калькулятор и отправьте на GitHub в репозиторий Student, используя формат в названии Фамилия(латинскими буквами)_1.
Методические указания
Для запоминания числа можно использовать команду prompt:

Чтобы запустить файл, необходимо запустить его в Google Chrome.
Проверить наличие ошибок можно с помощью нажатия трех точек в верхнем правом углу, затем – Дополнительные инструменты – Инструменты разработчика. В подсказке выдается номер строки, где содержится ошибка.
Вывести на экран значение переменной можно таким образом:

Для перевода в целочисленный тип из строки можно воспользоваться функцией parseInt.
Контрольные вопросы
1. В чем разница между var и let?
- Какие типы данных в Java Script вы знаете?
- В каком типе сохраняется переменная, полученная с помощью команды prompt?
Дополнительные задания
Выведите на экран тип используемой переменной.
Лабораторная работа №2. Оператор ветвления if, циклы do, while, for
Цель работы
Получить навыки работы с циклами и научиться создавать проверку условий средствами Java Script.
Задания для выполнения
- Реализовать представленную блок-схему посредством Java Script

- Напишите программу на Java Script, которая считает от 1 до 10.
- Создайте программу для застолий, которая будет предлагать «Еще по одной?» пока пользователь не введет единицу.
- Загрузите три полученные программы на GitHub в репозиторий Student, используя формат в названии Фамилия(латинскими буквами)_2.
Методические указания
Чтобы создать проверку условия, можно воспользоваться оператором if. Синтаксис:

Для подсчета чисел от 1 до 10 можно воспользоваться циклом While:

Или цикл For:

Для реализации программы «Застолье» можно воспользоваться циклом do:

Контрольные вопросы
- Какие условия могут проверяться оператором if?
- В чем отличие циклов while, do, for?
Дополнительные задания
Написать программу «Угадай число»: компьютер загадывает произвольное число и если пользователь угадывает его, компьютер сообщает об этом и выходит из цикла.
Лабораторная работа №3. Массивы и функции
Цель работы
Получить навыки работы с массивами и функциями.
Задания для выполнения
- Организовать симулятор, который выдает только три случайных значения – красный, черный и белый (0, 1, 2). Запустить симуляцию 1000 000 раз. Узнать, какое максимальное число раз выпадало красное значение.
- Реализовать функцию getSum для подсчета суммы очков в массиве карт.
- Загрузить созданные программы на GitHub в репозиторий Student, используя формат в названии Фамилия(латинскими буквами)_3.
Методические указания
Для задания массива достаточно задать: var arr = [];
Для формирования случайного значения можно использовать функцию:
arr.push(Math.round(Math.random()*2))
Для обращения к элементам массива можно использовать цикл:
for(i=0; i<=1000000; i++) {
arr[i] = Math.round(Math.random()*2);
}
Для подсчета суммы очков в массиве карт можно воспользоваться функцией:

Контрольные вопросы
- Какие значения могут принимать элементы массива?
- Может ли функция описываться позже, чем осуществляться ее вызов?
Дополнительные задания
- Организовать симулятор, который выдает только три случайных значения – красный, черный и белый (0, 1, 2). Запустить симуляцию 1000 000 раз. Узнать, какая последовательность из красных, черных или белых значений была самой длинной.
Лабораторная работа №4. Игра Black Jack
Цель работы
Применить полученные навыки при создании алгоритма для игры в Black Jack.
Задания для выполнения
- Составить алгоритм игры в Black Jack и реализовать его на Java Script.
- Загрузить созданную программы на GitHub в репозиторий Student, используя формат в названии Фамилия(латинскими буквами)_4.
Блэкдже́к (англ. Blackjack «чёрный валет») — одна из самых популярных карточных игр в казино по всему миру. Большая популярность игры обуславливается простыми правилами, скоростью игры и наиболее простой стратегией в подсчёте карт.
Методические указания
Термины
Игрок — Играющий за столом против казино.
Дилер (Крупье) — Работник казино, выполняющий роль чесальщика колоды.
Рука — Набор карт игрока или дилера. Обычно правилами казино игрокам запрещается прикасаться к своим картам.
Трекинг (Tracking) — Отслеживание игроком расположения карт в процессе игры, с использованием этой информации на следующем шаффле.
Шаффл (Shuffle) — Полный «игровой цикл», начинающийся с замешивания колоды, и заканчивающийся выходом разрезной карты.
Башмак, шуз (англ. shoe — ботинок) — Специальное приспособление для карточных игр в казино. Колода перемешивается и вставляется в шуз, из которого потом идет раздача карт.
Фишка (англ. chip) — Плоский небольшой предмет круглой, квадратной или восьмиугольной формы, на котором написан его номинал, может обмениваться на наличные деньги в кассе казино.
Правила
Ошибочно считается, что цель заключается в том, чтобы набрать как можно больше очков, но не более 21. На самом деле цель — обыграть дилера (крупье). В игре используется от одной до восьми колод. Из-за того что вероятность комбинации блек-джек при большем числе колод ниже, то преимущество игрока уменьшается при увеличении числа колод. При игре с шаффл-машинкой считается, что используется бесконечная колода. По окончании партии, когда осталась примерно треть карт (точное значение устанавливает дилер, размещая специальную карточку в т. наз. «шуз» на глаз), колоды перемешиваются. При игре одной колодой чаще всего она перемешивается после каждой партии.
Значения очков каждой карты: от двойки до десятки — от 2 до 10 соответственно, у туза — 1 или 11 (11 пока общая сумма не больше 21, далее 1), у т. н. картинок (король, дама, валет) — 10.
Если у игрока и дилера число очков на руках равное, то такая ситуация называется «ровно»: за рубежом это называется — пуш (англ. push). В такой ситуации все остаются при своих ставках, никто не выигрывает и не проигрывает. Хотя в казино бывают исключения, и при «пуше» выигрывает казино.
Игроки до раздачи карт делают ставки, кладя фишки на соответствующие поля игрового стола. После того, как первая карта сдана, игрокам запрещается делать ставки и прикасаться к своим фишкам.
Дилер раздаёт карты (обычно из одной или двух колод карт, но чаще из шуза, содержащего не менее четырёх колод): по две карты каждому игроку, себе раздаёт одну карту (в США принято раздавать дилеру две карты, одна из которых открыта, а другая — закрыта, то есть находится на столе рубашкой вверх). Все карты открываются сразу (видны и дилеру, и игроку).
Если у игрока сразу после раздачи набралось 21 очко (то есть у игрока туз и десятиочковая карта), то такая ситуация и называется блек-джек. В таком случае игроку сразу выплачивается выигрыш 3 к 2 (то есть в 1,5 раза превышающий его ставку). Исключение составляют случаи, когда дилеру первой картой (открытой) попадается 10, картинка или туз. В этом случае существует вероятность, что у дилера также будет блек-джек, поэтому игроку с блек-джеком предлагается либо взять выигрыш 1 к 1 (только если первая карта дилера — туз), либо дождаться окончания конца игры (и в случае, если у дилера не блек-джек, получить выигрыш 3 к 2).
Далее игрокам, у которых не блек-джек, предлагается на выбор либо взять ещё карту (в таком случае игрок должен сказать дилеру «карту» или «ещё», англ. hit me), либо остаться при тех картах (и той сумме очков), которые у него на руке (в этом случае игрок должен сказать дилеру «достаточно» или «хватит»).
Как правило, если у игрока после взятия новой карты в сумме получается 21, дилер не спрашивает его больше и переходит к следующему игроку.
Если у игрока после взятия новой карты сумма очков превысит 21, то такая ситуация называется «перебор». Дилер произносит «много» и снимает ставку игрока в пользу казино.
Если у дилера в первых двух картах набирается 21 очко (блек-джек), то все игроки (кроме тех, у кого тоже блек-джек), проигрывают. Те, у которых блек-джек, остаются при своих ставках, если они ранее не выбрали взять выигрыш 1 к 1 или если не застраховали свою комбинацию от блек-джека.
В некоторых случаях, в зависимости от того, какие карты на руках у игрока, дилер может предложить ему дополнительные варианты (см. ниже).
После того, как все игроки завершили брать карты, дилер говорит «себе» и раздаёт карты себе. Общее правило блек-джека состоит в том, что дилер обязан остановиться, как только наберёт 17 очков или выше, и обязан брать, пока не достигнет (даже если у всех не перебравших меньше очков). В различных казино может варьироваться правило, должен ли дилер останавливаться в ситуации, если у него туз и шестёрка (то есть 7 или 17 очков на руке). Обычно это правило написано на игровом столе.
При окончательном подсчёте очков в конце раунда карты остальных игроков для вас значения не имеют, игра ведётся только против дилера, то есть сравниваются карты только игрока и дилера, карты и ставки параллельных игроков не учитываются.
Контрольные вопросы
- Что произойдет при обращении к функциям getRandomInt и getCard?

- Что возвращают функция getSum?

- Что хранится в переменных dealer, player, answer?

- Что делает функция getStatus?

- Что делает цикл do?

- Что выведется на экран?

Лабораторная работа №5. Класс
Цель работы
Получить навыки работы с классами.
Задания для выполнения
- Создайте класс, который будет сохранять в переменную имя пользователя и выводить его на экран. Используйте его.
- Перепишите код с использованием синтаксиса класса:


- Загрузить созданные программы на GitHub в репозиторий Student, используя формат в названии Фамилия(латинскими буквами)_5.
Методические указания
Для задания и вызова класса можно использовать синтаксис:

Базовый синтаксис для классов выглядит так:

Контрольные вопросы
- Для чего нужен класс?
- Как доказать, что класс в JS – это функция?
Дополнительные задания
- Организовать симулятор, который выдает только три случайных значения – красный, черный и белый (0, 1, 2). Запустить симуляцию 1000 000 раз. Узнать, какая последовательность из красных, черных или белых значений была самой длинной.
Лабораторная работа №6. Стрелочные функции
Цель работы
Получить навыки работы с массивами и функциями.
Задания для выполнения
- Создайте пустую стрелочную функцию возвращает undefined
- Создайте массив и напишите стрелочные функции для него: суммирование всех элементов, выявить все четные, умножить каждый элемент на 2.
- Создайте массив с e-mail. Организуйте фильтр на странице html по названию почты.
- Загрузить созданные программы на GitHub в репозиторий Student, используя формат в названии Фамилия(латинскими буквами)_6.
Методические указания
Базовый синтаксис
(param1, param2, …, paramN)=>
{
statements
}
(param1, param2, …, paramN)=>
expression
// эквивалентно: (param1, param2, …, paramN) => { return expression; }
// Круглые скобки не обязательны для единственного параметра:
(singleParam)=>
{
statements
}
singleParam=>
{
statements
}
// Функция без параметров нуждается в круглых скобках:
()=>
{
statements
}
()=>
expression
// Эквивалентно: () => { return expression; }
// Пустая стрелочная функция возвращает undefined
let empty = () => {};
(() => 'foobar')();
// Удобные операции над массивами: filter, map, ...
var arr = [5, 6, 13, 0, 1, 18, 23];
var sum = arr.reduce((a, b) => a + b);
// 66
var even = arr.filter(v => v % 2 == 0);
// [6, 0, 18]
var double = arr.map(v => v * 2);
// [10, 12, 26, 0, 2, 36, 46]
Контрольные вопросы
- Из-за чего появилась стрелочная функция?
- Объяснить работу алгоритма:
3. // Стрелочные функции без параметров, которые визуально легче разбирать
4. setTimeout( () => {
5. console.log('Я буду раньше');
6. setTimeout( () => {
7. // deeper code
8. console.log('Я буду позже');
9. }, 1);
10. }, 1);
Лабораторная работа №7. Работа с формами
Цель работы
Получить навыки работы с элементами формы в Java Script.
Задания для выполнения
- Ознакомьтесь с информацией на сайте: https://htmlweb.ru/java/forms.php
- Создайте форму, которая будет запоминать параметры входа (ник и пароль) с валидацией пароля.
- Оформите форму стилями.
- Загрузить созданные программы на GitHub в репозиторий Student, используя формат в названии Фамилия(латинскими буквами)_7.
Методические указания
Форму с валидайцией пароля можно создать следующем образом:
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html;charset=utf-8″>
<script><!—
function Complete1()
{
if(document.Sel3.Pwd.value==document.Sel3.Pwd1.value)
alert(«Вас зарегистрировали\nID=»+document.Sel3.Id.value+»\nPassword=»+document.Sel3.Pwd.value);
else
alert(«Ошибка при вводе пароля\nПопробуйте еще раз»);
}
//—>
</script>
</head>
<body>
<H1>Регистрация</H1>
<FORM NAME=»Sel3″>
<TABLE>
<TR><TD><B>Идентификатор:<B></TD>
<TD><INPUT NAME=»Id» SIZE=20
onBlur=»this.value=this.value.toUpperCase()»></TD></TR>
<TR><TD><B>Пароль:<B></TD>
<TD><INPUT TYPE=»password» NAME=»Pwd» SIZE=20
onFocus=»this.select();»></TD></TR>
<TR><TD><B>Проверка пароля:<B></TD>
<TD><INPUT TYPE=»password» NAME=»Pwd1″ SIZE=20
onFocus=»this.select();»></TD></TR>
</TABLE>
<INPUT TYPE=»button» VALUE=»Готово» onClick=»Complete1();»>
<INPUT TYPE=»reset» VALUE=»Сброс»>
</FORM>
</body>
</html>
Cтили можно создать внутри документа:
<!DOCTYPE HTML>
<html>
<head>
<meta charset=»utf-8″>
<title>Глобальные стили</title>
<style>
H1 {
font-size: 120%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333366;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Контрольные вопросы
1. Сколько наборов свойств имеет форма?
2. За что отвечает свойство length?