Начните вместе со мной веб-разработку - Заключительная часть: JavaScript, CSS и JS-фреймворки
Привет! На части 5 мы закончили заполнение формы для голосования. Мы создали базу данных для хранения голосов пользователей.
Потеряли в сериале? Вот Часть 1, Часть 2, Часть 3, Часть 4 и Часть 5.
Как начать учиться
После последнего поста я задался вопросом, какова цель этой серии. Что ж, ответ, который я нашел, заключался в том, что его цель, прежде всего, - документировать мой процесс обучения. Так что мне просто нужно найти что-то, о чем я хочу узнать, и начать писать.
Проблема в том, что я не знал, чему еще хотел научиться, или, скорее, я не знал, с чего начать. Так что же нам делать, если мы не знаем, с чего начать? Мы начинаем!
Вы: это чушь собачья
Я: Вы правы, как, черт возьми, можно начать, если даже не знаешь, с чего начать? Ну, как я это вижу, «с чего мне начать?» и "давай начнем?" есть только один ответ.
Предположим, мы оба хотим строить собственные автомобили, но вы инженер-автомобилестроитель, а я нет. Разница в том, что когда мы начнем строить автомобили, вы будете знать, какие детали вам нужны, а я - нет. Итак, вот вопрос, который вы зададите:
Где мне найти эти кусочки?
И вот вопрос, который я задам:
Какие части мне нужны?
Когда я это пойму, я пойму, что задаю тот же вопрос, что и вы, когда начинали.
Итак, что нам нужно сделать прямо сейчас, это спросить себя, что нам нужно для начала, но, конечно, сначала нам нужно что-то, чему мы хотим научиться.
JavaScript: чему поучиться
У меня масса вопросов по javascript:
Где он хранится на сервере?
Почему JavaScript вместо PHP?
Что это за вещи, в именах которых есть.js(node.js,express.js,…)?
Я также знаю, что JavaScript - это язык программирования и он очень популярен:
Шестой год подряд JavaScript является наиболее часто используемым языком программирования.
Прошло какое-то время с тех пор, как мы не начинаем что-то с нуля, но я помню, что Википедия - это всегда хорошее место для начала:
JavaScript, часто обозначаемый аббревиатурой JS, является высокоуровневым, интерпретируемым языком программирования, который соответствует спецификации ECMAScript. Это язык, который также характеризуется как динамический, слабо типизированный, основанный на прототипах и мультипарадигмальный.
Ух ты! Множество концепций, давайте разберем их в Приложении 1.
Хорошо, теперь, когда у нас есть минимальное представление о том, что такое JavaScript, давайте узнаем, как он работает и как перейти с PHP на JS.
Переход (?) С PHP на JavaScript
Давай погуглим:
с php на javascript
Не полезно. Как насчет этого?
javascript для замены php
Ничего такого. Блин.
как работает javascript
Буйах! Здесь мне нравятся два результата, читая первый, я нашел это:
JavaScript - это то, что называется языком сценариев на стороне клиента.
Это отличная информация, в то время как PHP работает на сервере (сценарии на стороне сервера), JavaScript работает на машине клиента! Еще одна интересная вещь во втором абзаце:
Интересен способ работы JavaScript. Внутри обычной веб-страницы вы размещаете код JavaScript (…). Когда браузер загружает страницу, у него есть встроенный интерпретатор, который считывает код JavaScript, который он находит на странице, и запускает его.
Интересно! Это идентично тому, что мы делали с PHP: вставляя код в HTML-страницы, разница теперь в том, что этот код отправляется клиенту, а затем запускается в его / ее браузере.
Второй результат немного глубже касается того, как родился JavaScript и как он работает с HTML и CSS (мы еще не говорили о CSS, но я планирую сделать это в будущем):
JavaScript используется для добавления динамического компонента на веб-страницу и обеспечения возможности программирования большинства элементов на странице.
(…)
Веб-браузер загружает веб-страницу, анализирует HTML и создает так называемый Объектная модель документа (DOM) из содержания. Модель DOM представляет вашему коду JavaScript просмотр веб-страницы в реальном времени. Затем ваш код может обновлять модель DOM и мгновенно предоставлять ее пользователю.
Итак, есть эта вещь DOM, которую обновляет JavaScript, это позволяет странице быть динамической, что означает, что она может изменяться в соответствии с действиями пользователей (наведение мыши на верхнюю часть кнопки заставляет ее изменяться коллоры и т. д.).
Они даже добавили раздел о том, как вставить JS на веб-страницу:
JavaScript может быть непосредственно встроен в HTML. Следующее приводит к появлению всплывающего окна предупреждения при загрузке веб-страницы.
<script type="text/javascript">
alert("Page is loaded");
</script>
Итак, вот что насчет JavaScript: страница может измениться без отправки сервером другой совершенно новой (или даже части) страницы! А теперь давайте напишем несколько глупых примеров.
Написание JS
Как всегда, начинайте с малого. Как насчет страницы, на которой появляется окно с надписью «Hello World!»?
Оно работает! Милая. Теперь давайте заставим эту страницу содержать переменную и напечатаем эту переменную во всплывающем окне:
Отлично. Как насчет того, чтобы сделать «Hello World!» окно появляется при нажатии кнопки?
Я не знаю, как заставить кнопку подключаться к JavaScript, давай посмотрим:
получить событие HTML-кнопки javascript
Хорошо, поэтому мы определяем функцию, которая делает то, что мы хотим, и назначаем ее кнопке в теге HTML ... Но как мы определяем функции на JavaScript?
функция javascript
"Ладно, хорошо". Итак, давайте сделаем следующее:
Милая. Что, если бы у нас было поле ввода текста, а затем кнопка отправки, чтобы в нашем окне предупреждений отображалось все, что пользователь вводит в поле? Что ж, нам нужно знать, как получить данные из входного тега с помощью JavaScript:
получить данные тега ввода с помощью javascript
Ладно, похоже, это кстати. Но должен признать, что знаю кое-что, чего раньше не объяснял: Идентификаторы тегов HTML, подробнее об этом читайте в Приложении 2:
Выполнено! Если честно, мне это показалось невероятно легким, мне даже не весело. Я пойду за чашкой кофе и подумаю о чем-нибудь более захватывающем.
Я вернулся, давай сыграем в крестики-нолики.
Крестики-нолики
Ооо, когда я останавливаюсь, это кажется намного сложнее, чем то, что мы делали до сих пор. Итак, давайте, опять же, разбиваем его на более мелкие и простые задачи, не так ли?
Вход
Во-первых, нам нужно, чтобы пользователь мог сообщить нам, в каком месте он играет, для этого я воспользуюсь переключателями:
Отлично. У нас есть симпатичная маленькая доска для нашей игры. Теперь нам нужно добавить к нему немного функциональности. Как насчет того, чтобы убрать выбранные кнопки? Понятия не имею, как это сделать, давайте посмотрим:
JavaScript заставляет кнопки исчезать
Я нашел это (как существовал Интернет до Stack Overflow?):
button.style.visibility = "hidden";Я собираюсь изменить значения на кнопках для идентификаторов, потому что мы в конце концов не используем формы, поэтому это значение никуда не отправляется:
<input type="radio" name="play" id="11"> <input type="radio" name="play" id="12"> <input type="radio" name="play" id="13"> <br> <input type="radio" name="play" id="21"> <input type="radio" name="play" id="22"> <input type="radio" name="play" id="23"> <br> <input type="radio" name="play" id="31"> <input type="radio" name="play" id="32"> <input type="radio" name="play" id="33"> <br>
Но как выбрать выбранную кнопку с помощью JavaScript?
javascript выбрать выбранную радиокнопку
Хммм ... Похоже, нам все-таки понадобится форма, я помечу ее и ID, чтобы мы могли легко ее найти:
<form id="board"> ... </form>
Теперь мы можем использовать цикл for для перебора списка кнопок, чтобы получить ту, которая отмечена, и скрыть ее:
Большой! Вот только, черт возьми, это не работает. Я решу это по задаче 1.
Черт, теперь у нас есть еще одна проблема: кнопка исчезает и возвращается вскоре после этого, посмотрите проблему 2, чтобы найти решение.
Теперь нам нужно заменить нажатую кнопку на X или O:
заменить теги html на javascript
"Это интересно:
Вы не можете изменить тип элемента таким образом, вместо этого вам нужно создать новый элемент и переместить в него содержимое. Пример:
var e = document.getElementsByTagName('span')[0];var d = document.createElement('div'); d.innerHTML = e.innerHTML;e.parentNode.replaceChild(d, e);
Но меня это не устраивает. Давайте посмотрим:
javascript заменить кнопку текстом
Это интереснее, вот что я изменил:
Это приводит к тому, что кнопки заменяются на X, но теперь они не на своих местах. Кажется, что теги div заставляют HTML разрывать строки.
Ах хорошо. Я достаточно долго убегал от этого.
Давайте использовать CSS. Обратитесь к Приложению 3 для решения текущей проблемы, а также краткого объяснения CSS.
Выбор поворота
Теперь нам нужно знать, кто играет в данный момент (если это игрок X или O), чтобы мы знали, какой символ и где идет. Я буду использовать две логические (True или False) переменные: ex и oh и менять их значения при каждом воспроизведении, вот что я сделал с computePlay:
Если вам интересно, что делают эти восклицательные знаки на ex = !ex; и oh = !oh;, я рекомендую быстро просмотреть побитовые операции.
Вопрос к вам: почему я объявил ex и oh вне функции? Сработало бы иначе? Почему? Почему нет? Подсказка: взгляните на переменные области видимости.
Проверка победителя
Наконец, нам нужно знать, когда игрок выиграл, и если да, то какой игрок выиграл. Для этого мы напишем функцию gameFinished, которая проверяет, есть ли победитель. gameFinished следует вызывать каждый раз, когда кто-то играет, и он возвращает X или O, если кто-либо из игроков выиграл, и null, если победителя еще нет.
Вот корректировки, которые нам нужно сделать в остальной части кода:
Я помещу код для gameFinished в Приложение 4.
Готово! Поиграйте в крестики-нолики, вы это заслужили.
Вы: Теперь, когда мы сделали кучу вещей с помощью JavaScript, что насчет тех
node.js,vue.js,react.js, о которых все так много говорят?
Фреймворки JavaScript: те вещи, о которых так много говорят
Я знаю, что это называется фреймворками, но я понятия не имею, какие фреймворки делают и как их использовать.
Я: Так что же нам делать, если мы о чем-то ничего не знаем?
Вы: Мы это погуглим?
Я: Они так быстро растут ... * плачет *
Давай попробуем это:
фреймворки javascript
Это кажется хорошим местом для начала, в нем есть определения фреймворка, библиотеки и инструмента, а также обзор наиболее популярных JS-фреймворков. Давайте посмотрим, что в нем говорится о фреймворках:
Фреймворк - это скелет приложения. Это требует от вас особого подхода к разработке программного обеспечения и вставки собственной логики в определенные моменты. Обычно вам предоставляются такие функции, как события, хранение и привязка данных. Используя аналогию с автомобилем, каркас представляет собой рабочее шасси, кузов и двигатель. Вы можете добавлять, снимать или переделывать некоторые компоненты, предполагая, что автомобиль останется в рабочем состоянии.
Поэтому я думаю, что большинство фреймворков предоставят нам веб-сервер, а также позаботятся о тех файлах конфигурации, с которыми у нас было много проблем при первой установке Nginx, круто. Затем мы могли бы просто добавить наш код, и все должно работать.
C ya!
Целью данной серии статей было дать вам общее представление о том, как работают не только в веб-разработке, но и в компьютерных технологиях в целом. Быть потерянным - не такая уж большая проблема - вам просто нужно разбить ее на более мелкие, простые и глупые.
Как всегда, спасибо за чтение :)
Куда?
Я предлагаю начать заниматься программированием, если вы еще этого не сделали. Программирование не зависит от языка: как только вы научитесь программировать (будь то Python, Java, JavaScript, C и т. Д.), Вам будет намного легче изучать новые языки программирования, потому что единственное, что вы на самом деле нужно изучить синтаксис. Хотя разные языки могут использовать разные парадигмы программирования, общие знания программирования все же значительно упрощают работу.
Python
Python - очень хороший язык для начала, его можно использовать практически для чего угодно: от машинного обучения, анализа данных и веб-сканеров до игр и полноценных приложений.
Вот учебник для начинающих по Python.
JavaScript / HTML / CSS
Вы уже знаете, для чего используются эти ребята. FreeCodeCamp - безусловно, лучший ресурс для изучения JavaScript: он полностью бесплатный, с открытым исходным кодом и ориентирован на практические действия.
Linux
Если вы не используете Linux, ничего страшного, никто не идеален.
ржу не могу
Если серьезно, то сейчас большинство машин в мире работают под управлением Linux (я не сказал, что большинство ПК): модемы, маршрутизаторы, серверы, смартфоны (Android) и т. Д. Даже если вы не планируете ежедневно использовать Linux на своем ПК, Крайне важно понимать, как работать с терминалом Linux, а также как процессы, разрешения, пользователи и службы работают в Linux.
Я нашел этот учебник, который, кажется, охватывает некоторые важные вещи, чтобы вы могли выжить в терминальном мире без мыши.
Приложение 1: Определения
Языки программирования высокого уровня
Существует множество языков программирования. Уровень языка часто означает, насколько далеко от реального компьютера, двоичного кода языкового кода и, следовательно, насколько далеко от человеческого языка.
Скажем компьютеру напечатать "Hello World!" на паре разных языков:
English
Hey computer, would you print "Hello World!" please?
Python
print('Hello World')
C
#include <stdio.h>
int main(int argc, char *argv[]) {
printf("Hello World!\n");
}
Assembly
section .text
global _start ;must be declared for linker (ld)
_start: ;tell linker entry point
mov edx,len ;message length
mov ecx,msg ;message to write
mov ebx,1 ;file descriptor (stdout)
mov eax,4 ;system call number (sys_write)
int 0x80 ;call kernel
mov eax,1 ;system call number (sys_exit)
int 0x80 ;call kernel
section .data
msg db 'Hello, world!',0xa ;our dear string
len equ $ - msg ;length of our dear string
Признаюсь, скопировал ассемблерный код. Основная идея здесь в том, что чем ниже языковой уровень, тем он дальше от человеческого языка (английский - это язык самого высокого уровня, потому что это человеческий язык!).
Это означает, что, учитывая тот факт, что JavaScript является языком высокого уровня, у нас не будет особых проблем с синтаксисом (командами) :)
Интерпретируемые и компилируемые языки программирования
Наши процессоры не понимают код так, как мы его пишем (с английскими словами и т. Д.). Вот почему у нас есть компиляторы и интерпретаторы.
Компиляторы обрабатывают наш код и создают двоичные файлы, содержащие только нули и единицы, которые может понять ЦП.
Интерпретаторы работают примерно так: каждая строка кода во время выполнения (время выполнения) транслируется в машинный код, а затем запускается. Интерпретация кода имеет гораздо больше вариантов, и, хотя не вся интерпретация кода работает так, как описано здесь, это более или менее основная концепция.
Динамические и статические языки программирования
Язык динамического программирования в терминологии информатика - это класс языков программирования высокого уровня, которые во время выполнения выполняют множество общих программных действий, которые статические языки программирования выполняют во время компиляции. Это поведение может включать расширение программы путем добавления нового кода, расширения объектов и определений или изменения системы типов.
Итак, давайте ненадолго вернемся к примеру Python «Hello World»:
#include <stdio.h>
...
printf ("Hello World!\n");
...
Вот и все. Вам не нужно включать код для правильного размещения букв в нужных местах экрана, загружать строку в память и т. Д. Это потому, что функция printf делает все это за вас! Эта функция находится в stdio библиотеке, которую мы включили в код. Когда код компилируется, компилятор включает код для функции printf в двоичный файл.
На динамических языках этого не происходит, это программа, выполняющая код, отвечает за включение любого внешнего кода, который требуется программе во время времени выполнения.
Слабые и строго типизированные языки программирования
В языках программирования часто используются типы переменных, такие как integer и char. Это хорошо объясняет, что такое языки со строгой и слабой типизацией:
Как правило, строго типизированный язык имеет более строгие правила типизации во время компиляции, что означает, что ошибки и исключения с большей вероятностью произойдут во время компиляции. (…) С другой стороны, слабо типизированный язык имеет более свободные правила типизации и может давать непредсказуемые результаты или может выполнять неявное преобразование типов во время выполнения.
Этот вопрос о переполнении стека на самом деле тоже очень актуален:
Термины «строго типизированный» и «слабо типизированный» не имеют общепринятого технического значения. Термины, которые имеют четко определенное значение:
Динамически типизированный означает, что типы присоединяются к значениям во время выполнения, и попытка смешивания значений разных типов может вызвать «ошибку типа времени выполнения». (…)
Статически типизированный означает, что типы проверяются во время компиляции, и программа, не имеющая статического типа, отклоняется компилятором. (…)
Парадигмы программирования
Вот что сообщает нам страница Википедии:
Парадигмы программирования - это способ классификации языков программирования на основе их характеристик. Языки можно разделить на несколько парадигм.
Я не буду вдаваться в подробности об этом, наши возможности становятся слишком широкими, слишком быстро.
Приложение 2: идентификаторы тегов HTML
На некоторых HTML-страницах есть множество тегов, несколько кнопок, полей ввода и т. Д. Итак, представьте, что вы работаете на странице с десятками полей ввода текста внутри различных форм. Как вы определяете каждое из этих полей?
Что ж, одна вещь, которую вы можете сделать, - это использовать идентификаторы тегов HTML. Идентификаторы могут использоваться для идентификации не только полей ввода, но и любого тега HTML. Вот пример использования HTML-тега ID.
Приложение 3: CSS (каскадные таблицы стилей)
Проблема, на которую мы наткнулись, кажется, довольно часто встречается в веб-разработке: как легко и точно стилизовать и разместить материалы на наших страницах? CSS - это ответ на такие проблемы… вроде того.
Вот и все. На этом мои познания в CSS заканчиваются. А теперь перейдем к исследованию:
как разместить кнопки в сетке
Как я могу стилизовать это с помощью CSS, чтобы эти кнопки отображались в виде сетки с максимум 4 столбцами? Я пробовал с
display:inline-blockиfloat:left, но безуспешно.
Что, если бы мы попробовали это, может быть, у нас это сработает.
Вы: Но подождите, где, черт возьми, мы пишем это в нашем HTML?
Отличный вопрос. Я понятия не имею, но эй:
где разместить css в html
This выглядит как хороший учебник. Я встроу свой CSS в строку (используя раздел 3 руководства), но не стесняйтесь делать что хотите. Я изменил все свои теги div, чтобы включить display: inline-block;:
<div style="display:inline-block;" id="div_11"><input type="radio" name="play" onclick="computePlay(11)" id="11"></div>
IT
РАБОТАЕТ
Честно говоря, я не ожидал, что это сработает вообще, так что представьте, как я счастлив прямо сейчас: D
Приложение 4: код функции «gameFinished»
Проблема 1. Не удается выбрать отмеченную кнопку.
Давайте еще раз взглянем на код:
Я предполагаю, что проблема в том, что поток выполнения никогда не входит в if(button.checked), это, вероятно, потому, что button.checked всегда ложно. Давайте посмотрим, что находится в button.checked, прямо перед оператором if я вставлю: alert(button.checked);, чтобы на странице появилось всплывающее окно с содержимым button.checked.
Там написано undefined! Хммм интересно, это свойство, вероятно, старое или не существует для переключателей. Но, глядя на этот пример использования for / in, я заметил кое-что полезное: for / in в JavaScript не похож на Python (как я предполагал). Давайте изменим его на это:
for (button in radios) {
if (radios[button].checked) {
return radios[button];
}
}
Милая! Оно работает!
Проблема 2: радиокнопка возвращается вскоре после исчезновения
Давайте что-нибудь погуглим, ладно?
button.style.visibility = «скрытый»; не скрывается
Нашел этот вопрос о переполнении стека, посмотрите на этот фрагмент его исходного кода:
document.getElementById("save").hidden = "";
Хм, он меняет это свойство hidden, а мы меняем style.visibility. Попробуем это изменить:
selected.hidden = "hidden";
Та же проблема. Я думаю, проблема не в том, чтобы скрыть кнопку, но она не должна возвращаться. Я предполагаю, что страница как-то перезагружается после того, как мы нажимаем Play. Тогда вернемся в Google:
переключатель не остается скрытым javascript
"Вот так":
Вы можете получить отдельные переключатели, используя что-то вроде
var rbtn = document.getElementById('radioButton1');
Затем установите стиль отображения или видимости, чтобы скрыть или показать.
rbtn.style.display = 'none'; // 'block' or 'inline' if you want to show.
Неа. Что ж, я думаю, мы не всегда можем использовать кнопку «Играть». Что мы сделаем, так это вызовем computePlay() после того, как игрок установит переключатель:
Большой! Теперь наши кнопки красиво исчезают. Что ж ... Не очень хорошо. Теперь кнопки исчезают, но не каждая кнопка, которую мы нажимаем, исчезает. Я предполагаю, что наша getSelectedButton функция работает не так хорошо. Что, если мы изменим computePlay на получение идентификатора кнопки в качестве аргумента, а затем изменим вызовы функций в HTML:
Та же проблема, черт возьми. Но я понимаю, что сейчас происходит: кнопки буквально прячутся!
Вы: Хорошо, теперь вы принимаете наркотики, чувак.
Я не осознавал, что скрытие кнопки не только делает ее невидимой (то есть кнопки продолжают оставаться на том же месте), но и скрывает ее на странице, поскольку ее никогда не существовало. Таким образом, мы действительно скрываем правые кнопки, но если мы нажмем кнопку 11 (верхний левый угол), например, она исчезнет, заставив 12 и 13 сместиться влево, как будто 11 там никогда не было!
Так что нам действительно нужен способ сделать кнопку невидимой, не удаляя ее со страницы.
Подожди, нет! В любом случае нам нужно будет поставить X или O вместо кнопки, так что избавление от переключателя после нажатия на него на самом деле хорошо!
Так…. Проблема вроде решена?
