3. Самостоятельная работа повторите разметку страницы. Старайтесь добиться 100% сходства
 Скачать 1.33 Mb.
|
|
программирование Практическая работа 2 Ловить баги, можно с помощью функции alert со значением нужно переменной, или комментировать области текста, чтобы выяснить, где ошибка. Не забывайте про консоль (клавиша F12), которая покажет ошибки выполнения. Эта работа посвящена написанию калькулятора. 1. Большинство элементов в html – блочные, то есть они помещаются внутри прямоугольной области. Для этой области есть настраиваемые параметры, такие как margin – отступ от границ этой области до границ другой, border – рамки, padding – отступ от рамок до содержимого блока. Поля и свойства Посмотрите и натри последних свойства, вспомните, что они делают. Первые две команды служат для задания размеров нашего блока, ширины и высоты. 2. Тег позволяет вставить элементы для ввода какой-либо информации пользователем. Это могут быть и кнопки, и поля, и переключатели. Мы будем пользоваться самым простым вариантом – с типом текст и именем Имя. Имя этому тегу нужно, чтобы сервер отделял одно поле от другого. Напишите внутри тела страницы теги посмотрите, как он выглядит. Познакомимся с другими интересными параметрами этого тега. Size – позволяет задавать размер в символах, которые поместятся в этом поле. Value – это значение, которое будет написано внутри этого поля. Через стили мы можем управлять выравниванием и размером текста – установите размер текста в 40 пунктов, а выравнивание – по правому краю. 3. Самостоятельная работа – повторите разметку страницы. Старайтесь добиться 100% сходства. • Размер кнопок – 100 на 80 пикселей • Цвет lightblue • Размер шрифта – 40 pt 4. Разбор кода. Чтобы отцентровать сразу все элементы, можно схитрить – заключить все элементы в отдельный div, а его выровнять по центру свойством align=center. обратите внимание, что у каждой кнопки стоит одинаковый класса не идентификатор. У нескольких кнопок есть дополнительно и идентификатор, так как они отличаются от остальных. Если этого нет в коде – добавьте. Добейтесь 100% сходства с макетом. 5. У «=» и «0» есть отличия, это модификация ширины. Так как стили тут описаны ниже, чем стиль для класса кнопки, то они сработают последними, перекрыв эффект более раннего стиля. Общее оформление 6. У насесть дюжина кнопок, но 10 из них делают, по сути, схожую функцию – добавляют цифру к текстовому полю. Мы могли бы сделать 10 функций для каждой кнопки – Добавить 1, Добавить 2 и т.д. Номы можем написать одну функцию и передавать ей ту цифру, которую хотим добавлять к полю. Добавьте на любую кнопку событие по клику мышки – выполнение функции с параметром в виде любой текстовой строки. Обратите внимание на кавычки. Когда внутри пары кавычек нам нужно поставить ещё одну пару кавычек – мы должны чередовать одинарные и двойные, чтобы интерпретатор правильно понимал границы блоков. Напишите функцию, которая показывала бы алерт с текстом, который мы передаём через параметр. В скобках написано название переменной, в которой будет хранится значение, которое мы передали. 7. Удалите функцию showMessage. Теперь для каждой цифровой кнопки нужно задать функцию addDigit по клику мышки, при этом указывая в скобках цифру, которая должна добавиться при нажатии. Убедитесь, что уесть. Сама функция будет выглядеть просто. Мы берём значение поля input с помощью команды document.getElementById(‘id’).value и прибавляем к нему нашу цифру. Вот теперь нам нужно поговорить о типах переменных. У языка JS динамическая типизация, это значит, что мы не задаём напрямую тип переменной, число это или строка, программа сама понимает. Но возникают проблемы, когда для разных типов переменной есть одинаковые операции, такие как +. Для сложения чисел – это привычное нам математическое сложение, для сложения строк (группы символов) – это конкатенация, то есть слияние. Данная на слайде команда будет оперировать нашей переменной как строкой и добавите вконец уже существующему значению поля input. Повторите функцию, убедитесь, что она работает. 9. Как вы могли заметить, у нас остаётся 0. по-хорошему, его нужно удалять. Сделать это можно с помощью проверки. Если в поле записано 0 – мы заменяет его на цифру, иначе – добавляем цифру. Сделаем это с помощью оператора if-else. Напишите и проверьте. Убираем 0 при вводе 10. Что женам делать, если интерпретатор хочет работать с переменными как со строками, а нам нужно, чтобы он работал сними как с числами Для этого у насесть специальная функция – какую строку парсить), которая позволяет преобразовать строку в число. Если же в строке будут буквы, то преобразовать в число её не получится. Наверное, вы уже заметили проблему – можно набрать число любой длины и оно выходит за пределы текстового поля. Давай решим эту проблему. Добавим ещё один if, в тело которого заключим всё тело функции addDigit. В условии мы проверим, больше ли число чем 10 в 10 степени. Для этого мы сначала переведём его в int, то есть в целочисленное, а потом сравним с 10e+10. Напишите это условие и проверьте, что оно не даёт ввести слишком большое число в текстовое поле. Ограничиваем размер числа 11. Настало время подумать про операции. У насесть базовые операции, которые мы можем выполнять с числами. Для удобства давайте условно закодируем их деление это 0, умножение это 1 итак далее. Когда мы ввели число и нажали операцию, ещё ничего не происходит, ведь нужно ещё и второе число. Поэтому нам нужно будет запомнить код операции, чтобы использовать его позже. 12. Каждой операции напишите функцию operation(), а в скобках укажите ей её код. Эту функцию мы ещё не создали, но сейчас этим займёмся. 13. Но как женам запоминать операцию и числа Ну конечно же с помощью переменных. Сколько нам переменных нужно Две, чтобы запоминать числа, одну, чтобы запоминать код операции. Этого пока достаточно. Однако, обратите внимание на интересный способ инициализации переменной – приравнивание ей к null. null – это специальное значение, которое значит ничего. Когда мы хотим проверить, записано ли что-то в переменную, мы можем сравнить и с нулём, но чаще и ноль для нас – тоже важное значение. Так что если хотите, чтобы в переменной не было ничего – приравнивайте её к null. 14. Когда мы нажимаем на кнопку операции, мы должны запомнить число, которое уже набрано на калькуляторе, как первое код операции и очистить поле ввода, чтобы можно было вводить второе число. На всякий случай ещё обнулим второе число. Обратите внимание, что очистку мы вынесли в отдельную функцию без параметров. Мы так сделали потому, что этой функцией будет пользоваться ещё и другая функция. 15. Наконец, настало время кнопки «=». Зададим ей выполнение по клику функции calculate(), без параметров. 16. Начнём писать эту функцию. Во-первых, конечно нужно запомнить то, что набрано в поле ввода как второе число. Теперь у насесть всё необходимое два числа и операция, которую нужно проделать между ними. Тут нам снова поможет if. Сделаем так если код операции был равен 0, то мы делим переменные друг на друга, не забыв перед этим перевести их в integer. Иначе, если код операции равен 1, мы умножаем переменные итак далее. Результат перезаписываем в первое число и после всех if-ов выводим его в поле ввода, а код операции очищаем. Добавьте оставшиеся два условия для двух других операций и протестируйте, что вычисления происходят. 17. Вот так выглядит готовый код. Сравните со своим. 18. Но пользователь может нажать = и до того, как нажал на операцию и задал оба числа. Поэтому всё тело функции нужно заключить в if, в котором проверить, что код операции неравен, то есть кнопка операции была нажата. 19. И на сладкое – кнопка С, которая должна очищать всю введённую информацию. Это значит, что нужно вернуть все переменные в начальные значения и очистить поле ввода. 20. Конечно, мы не реализовали множество нюансов, например, запрет на ввод букв, или возможность поставить точку. Эти возможности можно попробовать выполнить дома. |