Как сделать комментарий в javascript
Написание комментариев в JavaScript
В программировании обычно в первую очередь учитывается то, как компьютер читает и интерпретирует написанный код. Но так же важно учитывать интересы людей, которые будут читать и работать с этим кодом дальше. Нужно уметь правильно комментировать и структурировать свой код, чтобы обеспечить простоту чтения.
Комментарии – это пометки в исходном коде программы, которые не читаются интерпретатором и поэтому не влияют на фактический вывод кода. Комментарии могут быть чрезвычайно полезны для объяснения целей и действий того или иного блока кода.
Без комментариев разработчикам бывает сложно понять код, написанный другими людьми. Да и вы сами можете просто забыть, для чего добавили в программу тот или иной блок кода. Правильно прокомментированный код поможет вам избежать проблем с поддержкой программы в будущем.
Синтаксис комментариев
В JavaScript есть два типа комментариев.
Однострочные комментарии в JavaScript записываются с помощью двух слешей //.
Интерпретатор будет игнорировать все символы после // до конца строки.
Многострочные комментарии заключаются в теги /* и */. Если вы знакомы с CSS, вы уже знаете, как работают такие комментарии.
Интерпретатор будет игнорировать все, что находится между этими тегами.
Все комментарии вне зависимости от их типа пишутся над блоком кода, который они объясняют.
// Print «Hello, World!» to the console
console.log(«Hello, World!»);
Кроме того, комментарии должны находиться на одном уровне с объясняемым кодом.
// Initialize a function
function alphabetizeOceans() <
// Define oceans variable as a list of strings
const oceans = [«Pacific», «Atlantic», «Indian», «Antarctic», «Arctic»];
// Print alphabetized array to the console
console.log(oceans.sort());
Обратите внимание, что комментарии являются такой же частью кода, как и сама программа. Код с устаревшими комментариями хуже, чем код совсем без них, поэтому не забывайте регулярно поддерживать и обновлять комментарии вместе с остальным кодом программы.
Встроенные комментарии
Если однострочный комментарий находится в конце строки кода, такой комментарий называется встроенным.
let x = 99; // assign numerical value to x
let y = x + 2; // assign the sum of x + 2 to y
Встроенные комментарии используются для создания коротких примечаний к небольшим отдельным фрагментам контента. Такой комментарий должен относиться только к той строке, в которой он написан.
Помните, что однострочные комментарии нельзя закрыть тегом. Если в эту строку случайно попадет код программы, интерпретатор пропустит его. Поэтому будьте внимательны, следите, чтобы комментарий не сливался со следующей строкой кода в одну строку.
for (let i = 0; i === 10; i++) // for loop that runs ten times <
// Running this code results in a syntax error
>
Встроенные комментарии бывают очень полезны, но их следует использовать экономно – код с большим количеством встроенных комментариев выглядит грязно и, следовательно, его трудно читать.
Многострочные комментарии
Многострочные комментарии пишутся на уровне блока и представляют собой длинные примечания или описание последующего блока кода. Часто этот тип комментариев размещается в верхней части файла или перед особенно сложным блоком кода.
Иногда встречается немного видоизмененный синтаксис: комментарий открывается тегом /**, и каждая строка начинается с символа звездочки.
/**
* Initialize constant with an array of strings.
* Loop through each item in the array and print
* it to the console.
*/
const seaCreatures = [«Shark», «Fish», «Octopus»];
for (const seaCreature of seaCreatures) <
console.log(seaCreature);
>
Иногда эти комментарии также содержат сведения о файле программирования, включая имя, версию и автора сценария.
Комментирование кода для тестирования
Комментарии позволяют игнорировать те или иные блоки кода для тестирования работы программы. Это называется «закомментировать код».
Если в каком-то блоке кода есть ошибка, вы можете попробовать закомментировать отдельные блоки для определения источника проблемы. Вы также можете использовать этот механизм для переключения между блоками кода, которые выдают разные результаты.
// Function to add two numbers
function addTwoNumbers(x, y) <
let sum = x + y;
return sum;
>
// Function to multiply two numbers
function multiplyTwoNumbers(x, y) <
let product = x * y;
return product;
>
/* In this example, we’re commenting out the addTwoNumbers
function, therefore preventing it from executing. Only the
multiplyTwoNumbers function will run */
// addTwoNumbers(3, 5);
multiplyTwoNumbers(5, 9);
Закомментировать код можно с помощью как однострочных, так и многострочных комментариев. Выбор зависит от объема блока, который нужно закомментировать.
Примечание: Комментировать код нужно только на время тестирования. Не оставляйте закомментированные блоки в конечном сценарии.
Комментирование кода может оказаться полезным при разработке логики программы, поскольку так вы можете определить источник ошибок или оценить производительность того или иного блока.
Заключение
Код программы JavaScript читает не только машина, но и другие разработчики и пользователи. Комментарии позволяют сделать код удобочитаемым и более понятным.
Вы когда-нибудь возвращались к проекту и испытывали трудности с пониманием внутренней логики? Вероятно, это потому, что указанный проект не был прокомментирован должным образом.
В этой статье мы рассмотрим, как комментировать код JavaScript, какие типы комментариев существуют, а также некоторые передовые практики.
Однострочные комментарии
Давайте посмотрим на пример однострочного комментария в действии:
Здесь мы используем однострочный комментарий, чтобы описать, что делает следующая строка кода.
Если однострочный комментарий появляется в конце строки кода, он называется встроенным комментарием.
Обычно они используются для добавления быстрых аннотаций:
Многострочные комментарии и строки документации JavaScript
Если мы хотим добавить примечание, которое занимает несколько строк, мы можем выбрать многострочные комментарии или комментарии на уровне блока.
Многострочные комментарии начинаются /* и заканчиваются */ :
Здесь многострочный комментарий используется для описания крестиков-ноликов. Как правило, многострочные комментарии используются для введения и объяснения раздела кода, где одной строки / предложения недостаточно.
Часто можно увидеть и другой тип многострочного комментария:
Часто эти комментарии могут включать информацию о выполняемом коде, такую как параметры функции или даже автора кода:
Эти комментарии называются DocStrings, поскольку они по сути являются строками (комментариями), составляющими документацию вашего кода.
Эти типы комментариев действительно полезны для других разработчиков в вашей команде, так как вы можете уточнить, каковы ожидаемые входные данные, каковы выходные данные, а также к кому обращаться в случае необходимости.
Дополнительным преимуществом является то, что вы можете создавать документацию на основе этих строк документа.
Использование комментариев для отладки
Помимо заметок, комментарии также можно использовать для быстрого предотвращения выполнения кода в целях отладки. Это возможно, потому что движки JavaScript не интерпретируют закомментированный код.
Если есть ошибочная строка, которая вызывает проблемы, мы можем просто «закомментировать ее», чтобы отключить ее, не удаляя строку. Это может быть связано с реальными отладчиками, чтобы помочь вам оценить, что происходит.
Рассмотрим следующий код:
Если мы хотим удалить второй оператор, но не хотим удалять его навсегда, мы можем просто закомментировать его:
Совет: в большинстве редакторов кода мы можем использовать сочетание клавиш Ctrl + / для Windows и Cmd + / для Mac, чтобы закомментировать одну строку кода.
Кроме того, вы также можете закомментировать целые разделы, если не уверены, удалять ли их или нет:
Хорошие практики комментирования
Используйте комментарии, чтобы объяснить, почему вы что-то сделали, а не как вы это сделали. Если вы обнаружите, что объясняете, как вы что-то сделали, то пора сделать шаг назад и реорганизовать ваш код в нечто самоочевидное.
Существуют полезные инструменты, такие как JSDOC 3, которые могут создавать документацию только на основе комментариев в вашем коде, которые отформатированы как DocStrings, описанные выше.
Вывод
Мы также увидели, как отлаживать наш код, используя технику, называемую «комментирование», и, наконец, подытожили некоторые хорошие практики комментирования.
Как сделать динамическое добавление комментариев, используя Ajax.
Всем привет! В этой статье я хочу рассказать вам, как сделать добавление комментариев через Ajax.
Наша система будет очень простой, чтобы показать суть, а дальше вы сможете сами все улучшить как нужно именно вам.
Для начала создайте файл index.html в корне сайта. Создайте папку libs, а в ней файл add_comment.php
Откроем файл index.html и создадим там простую форму.
Теперь создайте базу данных, у меня она называется comments. Создайте там табличку
CREATE TABLE IF NOT EXISTS `comm` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(30) NOT NULL,
`comment` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=36 ;
Теперь откроем файл add_comment.php и пропишем следующее
query(«SET NAMES utf8»);
$mysqli->query(«INSERT INTO `comm`(`name`, `comment`) VALUES(‘$name’, ‘$comment’)»);
?>
Думаю, тут все понятно. Получаем данные из массива post, записываем их в переменные, подключаемся к базе данных, отправляем запрос на установление кодировки, отправляем запрос на добавление комментария.
Вот такой небольшой кусочек кода нужен для решения этой задачи. Что мы тут сделали? Давайте разберемся.
Сначала мы находим кнопку и вешаем на нее обработчик события, который при клике вызывает анонимную функцию. В анонимной функции мы получаем значения имени и комментария и сразу же убираем там все html теги. Теперь проверяем, если хотя бы одно из полей является пустым, пишем об этом автору комментария и останавливаем скрипт. Если все нормально, то подключаемся к php файлу, отправляем заголовки с кодировкой и затем отправляем имя пользователя и текст его сообщения, кодируя русские символы.
Все, теперь вы можете ввести свой комментарий, нажать кнопку отправить, и он появится в базе данных без перезагрузки страницы.
На этом я заканчиваю эту статью, а в следующей мы разберем, как динамически подгружать комментарии. Эта задача также довольно нетрудная.
Итак, спасибо за внимание и удачи!
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 7 ):
А должно ли это работать на Denwer`е? Скопировал, создал таблицу, изменил название базы, не работает. Просто не подключается php файл, как я понимаю.
Конечно, должно! Если вы поменяли название базы, то не забудьте изменить ее название и в php файле. Также не забудьте проверить, где находится php файл. Он должен быть в папке libs и называться add_comment.php Если вы поменяли название файла или его путь, то поменяйте соответствующую строчку в JavaScript.
Работает не стабильно, как исправить? Кто нибудь подскажите.
После отправки данных возникает ошибка Cannot POST /Index.html. Что не так мог сделать? Проверил все как в уроке.
Обязателен alert в конце скрипта, как указано у SHOKIN выше. После первого вызова этого самого alert-a, при последующих вызовах ajax, alert уже не нужен. И что бы это могло быть?
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Пособие по запуску JavaScript: консоль, букмарклеты и прочее с примерами
Запускать JavaScript (или JS) код в браузере — обычный навык.
Если когда-то хотели апробировать свой первый JS-код, но боялись, этот пост для вас.
Цель поста для читателей — мочь самостоятельно запускать нужный код.
Цель моя — написать пособие, чтобы на будущее давать на него ссылку + давать готовый код, когда друзьям нужно установить какой букмарклет или мини-форму для какой небольшой автоматизации.
Друзья, которые читают. Если вы это видите, вероятно, вы только что получили код и конкретный пункт из этого пособия. Перечитайте пункт и установите скрипт по аналогии самостоятельно!
ПОМНИТЕ: не устанавливайте JS-код из сомнительных источников и когда не понимаете, что код делает!
§ I. ГДЕ запускать JavaScript код?
I.1. Через консоль браузера.
Чтобы открыть консоль нужно нажать ctrl+shfit+K или ctrl+shift+L.
Вставляете код, нажимаете enter, он сработает.
I.2. Через адресную строку браузера.
Это строка, где написан адрес сайта.
Стираете адрес сайта, вместо вставляете код, нажимаете enter, он сработает.
I.3. Через bookmarklet, или букмарклет, или «закладурку».
Это закладка браузера, в которой вместо сайта стоит JS-код.
Создаёте любую новую закладку. Затем находите закладку и исправляете её: вместо адреса сайта, который должен открываться, вставьте JS-код и сохраните.
Нажимаете на эту вкладку, срабатывает JS-код.
ПРИМЕЧАНИЕ: это один из удобнейших «многоразовых» способов запускать JS-код, в том числе в браузере смартфона!
I.4. Через обычный блокнот, сохранённый как HTML.
Открываете новый блокнот (notepad).
Вставляете туда нужный HTML с JS.
Нажимаете «Сохранить как», откроется меню. Тип файла — меняете «Текстовые документы (*.txt)» на «Все файлы (*.*)». Имя файла — мойкод.html. Его и открывать в браузере.
ПРИМЕЧАНИЕ: удобный «многоразовый» способ запускать JS-код на компьютере (без Интернета).
СПРАВОЧНО: HTML — это язык гипертекстовой разметки.
Любая открытая web-страница в браузере в общем случае — HTML.
I.5. Через блокнот в браузере (внося изменения в web-страницу).
Преимущества (многоразовое использование и не требуется Интернет), а также подход похожи на [I.4].
Открываете блокнот в браузере в качестве новой вкладки:
Затем в консоли находите элементы (HTML-код): открываете консоль (ctrl+shift+K или ctrl+shift+L), переходите в Elements.
Изменяете HTML-код, вставляя туда нужный HTML с JS.
Сохраняете страницу, закрываете её.
После сохранения её и открывать в браузере.
ПРИМЕЧАНИЕ: кстати, сам упомянутый браузерный блокнот удобен для своих заметок, которые можно потом сохранять в специальной папке (ctrl+s).
I.6. Через онлайн компилятор/интерпретатор.
Вставляете HTML и JavaScript в соответствующие поля, нажимаете «Save» для сохранения страницы с уникальным адресом (или «Run» для предпросмотра).
Для демонстрации сохранённого можно вставить в конец адреса «/show», будет видна просто страница:
ПРИМЕЧАНИЕ: удобнейший «многоразовый» способ запускать JS-код (когда есть Интернет).
I.7. Через специально установленные расширения (addon) браузера.
Вставляете код, сохраняйте. На соответствующих страницах должно работать.
ПРИМЕЧАНИЕ: удобно автоматически запускать JS-код сразу после загрузки (например, на конкретных сайтах с помощью @match).
§ II. ОСНОВНЫЕ ВИДЫ запуска JavaScrpt-кода?
Здесь речь будет идти о простейшем коде, запускающем окошко с текстом.
В будущем вместо него вам может быть нужно запускать какой-то другой код (но подход, описанный ниже, останется).
Применение: [I.1] консоль.
II.2. Протокол: немедленно вызываемая функция (или IIFE) объявляется и запускается.
Применение: [I.2] адресная строка браузера;
II.3. Userscript для Tampermonkey / Greasemonkey.
Применение: [I.7] специальные аддоны Tampermonkey / Greasemonkey.
II.5. Протокол: немедленно вызываемая функция, добавляющая на страницу код и кнопку, с помощью которой его можно запускать.
II.5.1. Протокол: немедленно вызываемая функция, добавляющая на страницу код и кнопку, с помощью которой его можно запускать: код на странице.
var scr1 = document.createElement(‘script’);
scr1.setAttribute(‘type’,’text/javascript’);
scr1.textContent=»var func1=function()
document.documentElement.getElementsByTagName(‘*’)[0].appendChild(scr1);
var btnDiv1 = document.createElement(‘div’);
btnDiv1.id = ‘btnDivId1’;
btnDiv1.style.position = ‘relative’;
btnDiv1.style.zIndex = 99999;
var btn1 = document.createElement(‘button’);
btn1.innerHTML = ‘Click’;
btn1.id = ‘btnId1’;
btn1.setAttribute(«onclick», «javascript:func1();»);
II.5.2. Протокол: немедленно вызываемая функция, добавляющая на страницу код и кнопку, с помощью которой его можно запускать: код по ссылке.
var scr1 = document.createElement(‘script’);
scr1.setAttribute(‘type’,’text/javascript’);
scr1.setAttribute(‘src’,’http://codepad.org/2NJ2YB3V/raw.txt’);
document.documentElement.getElementsByTagName(‘*’)[0].appendChild(scr1);
var btnDiv1 = document.createElement(‘div’);
btnDiv1.id = ‘btnDivId1’;
btnDiv1.style.position = ‘relative’;
btnDiv1.style.zIndex = 99999;
var btn1 = document.createElement(‘button’);
btn1.innerHTML = ‘Click’;
btn1.id = ‘btnId1’;
btn1.setAttribute(«onclick», «javascript:func1();»);
§ III. ОСНОВНЫЕ ТИПЫ запускаемых Javascript-кодов?
Разумеется, типов множество, но некоторые мы разобрали.
а) запускаемый сразу;
б) запускаемый после загрузки страницы;
в) запускаемый по кнопке;
г) запускаемый каждые N секунд — изучите самостоятельно!
Первые три вы знаете и видели.
Четвёртый нужно изучить самостоятельно, сделав по аналогии. И, если не выходит, пользуясь поиском в google. Или задавая вопросы на профильных сайтах, например, на stackoverflow или в соответствующих чатах.
Задание-1: чтобы закрепить знания, совет — проверить, «пощупать» каждый кусок кода, который приведён выше и удостовериться, что он работает.
Задание-2: измените КАЖДЫЙ приведённый выше кусок кода и удостоверьтесь, что он работает так, чтобы код запускался каждые 3 секунды.
Если обобщить, то измените в каждом куске
Как вы поняли, [II.1] уже сделан. Попробуйте сделать остальные.
Если у вас не получилась практика / иные причины, возможно, «маякните» в комментариях на предмет того, нужны ли «спойлеры» / ответы (хотя это несложно).
[Доп.советы, чуть более углублённые мелочи]
IV.1. О том, где может храниться JavaScript.
Он может быть как внутри самого файла HTML, так и быть внешним (ссылкой на код).
Во втором случае, то есть для хранения внешних, использовался сайт codepad.org, хотя есть и аналоги [но некоторые аналоги могут на уровне не давать возможность его подгружать в браузер, давая ошибку «CORS»; сейчас неважно, но просто учтите].
Там вставлялся код, выбирался «Plain Text», нажимался «Submit». После сохранения правой кнопкой мыши копировался адрес ссылки «Raw Code». Он-то и является ссылкой (использовалась в [II.4.2], [II.4.4], [II.5.2]).
На этом достаточно исчерпывающее пособие по запуску JavaScript подходит к концу.
Лицензия на текст, код и скрины: CC0.
Найдены дубликаты
Было желание опубликовать пост в Лига программистов, но там ограничение по карме, хотя там ему, мне кажется, самое место.
Возможно / разумно ли как-то попросить перенести?
Про мой путь в IT
*Моему второму подписчику, а так же всем, кому это может пригодиться*
Часто встречая посты про путь в разработку и сравнивая описанное в них с тем путем, который я прошел за последние два с половиной года, я постоянно испытываю странное ощущение, что это две абсолютно разные реальности. Отчасти в попытке разобраться, что не так, а отчасти, возможно, помочь кому-то, кто, подобно мне решил кардинально (или не очень) изменить свою карьеру и решил написать этот пост.
Заранее прошу прощения за возможные ошибки, чукча технарь,а не писатель)
Попробуем разобраться,что же вызывает у меня такой диссонанс, а потом, проследив путь, возможно, выделить какие-то рекомендации или предостережения.
Итак, что чаще всего пишут: 1) джунов крайне неохотно берут на работу 2) если и берут,то работать предстоит чуть ли не за еду в ближайшие пару лет 3) от начала обучения до того самого «джуна за еду» ещё пара тройка лет. 4) конкуренция на нижних уровнях крайне высока из-за разнообразных курсов, которые по сути ничего не дают, кроме иллюзий и обещаний.
И тем не менее, два с половиной года назад я написал свой первый в жизни «Hello world» на Java, год спустя я уже демонстрировал на ревью разработанный мной функционал, а сейчас впереди маячит повышение, в рамках подготовки к которому я вновь открыл свое резюме, периодически хожу на собеседования, от большей части которых приходится отказываться из-за нехватки времени.
Могу ли я, основываясь на этом что-то советовать или рекомендовать? Не знаю, но вдруг помогу хоть кому-то (причем не обязательно удачно сменить сферу деятельности, а, например, принять верное решение, передумать и не тратить время)
Продолжение, вероятно, придется перенести в комментарии, в виде ответов на вопросы, если такие возникнут.