Основы Java Script

admin 3 января, 2021 урок 0

Лабораторная работа №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>

<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>

<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>

</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?

Основы Java Script