Newcomposers.ru

IT Мир
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Комментарий в javascript

Предложение от 8host.com

Написание комментариев в JavaScript

В программировании обычно в первую очередь учитывается то, как компьютер читает и интерпретирует написанный код. Но так же важно учитывать интересы людей, которые будут читать и работать с этим кодом дальше. Нужно уметь правильно комментировать и структурировать свой код, чтобы обеспечить простоту чтения.

Комментарии – это пометки в исходном коде программы, которые не читаются интерпретатором и поэтому не влияют на фактический вывод кода. Комментарии могут быть чрезвычайно полезны для объяснения целей и действий того или иного блока кода.

Без комментариев разработчикам бывает сложно понять код, написанный другими людьми. Да и вы сами можете просто забыть, для чего добавили в программу тот или иной блок кода. Правильно прокомментированный код поможет вам избежать проблем с поддержкой программы в будущем.

Синтаксис комментариев

В JavaScript есть два типа комментариев.

Однострочные комментарии в JavaScript записываются с помощью двух слешей //.

// This is a comment

Интерпретатор будет игнорировать все символы после // до конца строки.

Многострочные комментарии заключаются в теги /* и */. Если вы знакомы с CSS, вы уже знаете, как работают такие комментарии.

/* This is
a comment */

Интерпретатор будет игнорировать все, что находится между этими тегами.

Все комментарии вне зависимости от их типа пишутся над блоком кода, который они объясняют.

// 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 and invoke a the greetUser function
to assign user’s name to a constant and print out
a greeting. */
function greetUser() <
const name = prompt(«What is your name?»);
console.log(«Hello ,» + name + «! How are you?»);
>
greetUser();

Иногда встречается немного видоизмененный синтаксис: комментарий открывается тегом /**, и каждая строка начинается с символа звездочки.

/**
* 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 читает не только машина, но и другие разработчики и пользователи. Комментарии позволяют сделать код удобочитаемым и более понятным.

Комментарии

Как мы знаем из главы Структура кода, комментарии могут быть однострочными, начинающимися с // , и многострочными: /* . */ .

Обычно мы их используем, чтобы описать, как и почему работает код.

На первый взгляд, в комментариях нет ничего сложного, но новички в программировании часто применяют их неправильно.

Плохие комментарии

Новички склонны использовать комментарии, чтобы объяснять, «что делает код». Например, так:

Но в хорошем коде количество «объясняющих» комментариев должно быть минимальным. Серьёзно, код должен быть таким, чтобы его можно было понять без комментариев.

Читать еще:  Как восстановить предыдущее состояние компьютера windows 10

Про это есть хорошее правило: «Если код настолько запутанный, что требует комментариев, то, может быть, его стоит переделать?»

Рецепт: выносите код в функции

Иногда выгодно заменить часть кода функцией, например, в таком случае:

Лучший вариант – использовать отдельную функцию isPrime :

Теперь код легче понять. Функция сама становится комментарием. Такой код называется самодокументированным.

Рецепт: создавайте функции

И если мы имеем такой длинный кусок кода:

То будет лучше отрефакторить его с использованием функций:

Здесь комментарии тоже не нужны: функции сами говорят, что делают (если вы понимаете английский язык). И ещё, структура кода лучше, когда он разделён на части. Понятно, что делает каждая функция, что она принимает и что возвращает.

В реальности мы не можем полностью избежать «объясняющих» комментариев. Существуют сложные алгоритмы. И есть хитрые уловки для оптимизации. Но в целом мы должны стараться писать простой и самодокументированный код.

Хорошие комментарии

Итак, обычно «объясняющие» комментарии – это плохо. Но тогда какой комментарий считается хорошим?

Сделайте высокоуровневый обзор компонентов, того, как они взаимодействуют, каков поток управления в различных ситуациях… Если вкратце – обзор кода с высоты птичьего полёта. Существует специальный язык UML для создания диаграмм, разъясняющих архитектуру кода. Его определённо стоит изучить.

Документируйте параметры и использование функций

Есть специальный синтаксис JSDoc для документирования функций: использование, параметры, возвращаемое значение.

Подобные комментарии позволяют нам понимать назначение функции и правильно её использовать без необходимости заглядывать в код.

Кстати, многие редакторы, такие как WebStorm, прекрасно их распознают для того, чтобы выполнить автодополнение ввода и различные автоматические проверки кода.

Также существуют инструменты, например, JSDoc 3, которые умеют генерировать HTML-документацию из комментариев. Получить больше информации о JSDoc вы можете здесь: http://usejsdoc.org/.

Почему задача решена именно таким способом?

Важно то, что написано. Но то, что не написано, может быть даже более важным, чтобы понимать происходящее. Почему задача решена именно этим способом? Код не даёт ответа.

Если есть несколько способов решить задачу, то почему вы выбрали именно этот? Особенно если ваш способ – не самый очевидный.

Без подобных комментариев возможна следующая ситуация:

  1. Вы (или ваш коллега) открываете написанный некоторое время назад код и видите, что в нём есть, что улучшить.
  2. Вы думаете: «Каким глупым я раньше был и насколько умнее стал сейчас», и переписываете его на «более правильный и оптимальный» вариант.
  3. …Желание переписать код – это хорошо. Но в процессе вы понимаете, что «оптимальное» решение на самом деле не такое уж и оптимальное. Вы даже смутно припоминаете, почему, так как в прошлый раз вы уже его пробовали. Вы возвращаетесь к правильному варианту, потратив время зря.

Комментарии, объясняющие решение, очень важны. Они помогают продолжать разработку в правильном направлении.

В коде есть какие-то тонкости? Где они используются?

Если в коде есть какие-то тонкости и неочевидные вещи, его определённо нужно комментировать.

Итого

Комментарии – важный признак хорошего разработчика, причём как их наличие, так и отсутствие.

Хорошие комментарии позволяют нам поддерживать код, дают возможность вернуться к нему после перерыва и эффективнее его использовать.

Комментируйте:

  • Общую архитектуру, вид «с высоты птичьего полёта».
  • Использование функций.
  • Неочевидные решения, важные детали.

Избегайте комментариев:

  • Которые объясняют, как работает код, и что он делает.
  • Используйте их только в тех случаях, когда невозможно сделать настолько простой и самодокументированный код, что он не потребует комментариев.

Средства для генерации документации по коду, такие как JSDoc3, также используют комментарии: они их читают и генерируют HTML-документацию (или документацию в другом формате).

Комментарии и инструкции в JavaScript

В прошлой статье мы рассказывали вам об общем синтаксисе языка JavaScript. В этой же статье мы более подробно разберемся в работе некоторых инструкций, а также в их основном предназначении.

Сначала нужно ответить на вопрос: «нужно ли ставить точки с запятой?». Вообще да, но это не обязательно. Точки с запятой считаются правилом хорошего тона, а также позволяют избежать серьёзных ошибок при написании кода.

Точки с запятой обязательны не для всех инструкций. Если в коде допустим перенос на новую строку, то точки с запятой можно и не ставить. Кроме того, они не обязательны в блоках кода.

Блоки кода — отдельная часть кода, которая включает в себя несколько JavaScript команд. Часто их прописывают там, где должна находиться 1 JavaScript инструкция, но её одной может не хватить. Звучит странно, но в следующих статьях мы поговорим об этом подробнее.

Ещё одно применение точек с запятой — разделение скриптов. Чаще всего, перед выпуском готовой версии сайта, файлы с кодом сжимаются. Вследствие этого скрипты сжимаются в один JavaScript файл.

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

На первый взгляд — обычный код, но как вы могли заметить в начале каждого блока проставлена точка с запятой. Именно она и разделяет разные скрипты в JavaScript файле

Логические инструкции в Javascript

Теперь давайте подробно разберемся в работе некоторых инструкций. Начнем мы с логических операторов.

Самая главная команда логической конструкции — if. Не нужно быть знатоком английского языка чтобы знать, что это слово переводится как «если».

Читать еще:  Javascript справочник команд

Работа логической конструкции базируется на следующем принципе: «если соблюдается определенное условие, то будет выполнена следующая операция».

Кроме простого «если» существуют команды «иначе» и «иначе если». «Иначе» или else используется для создания простой логической конструкции из 2-х условий. Когда же применяется команда else if, то это говорит нам о том, что условий может быть много, от 3-х и более.

Пример сложной логической конструкции:

Самое главное — не забывайте заносить условие конструкции в круглые скобки. Может мы говорим банальные вещи, но для многих начинающих веб-разработчиков это является проблемой.

Кроме обычных логических конструкций можно создавать вложенные. Это как со списками в HTML — создаешь логический блок и внутри него создаешь ещё один, с двумя или более условиями(можно ограничиться и одним).

Команды циклов в Javascript

С логическими операторами разобрались, теперь давайте вернемся. Метод работы циклов также основывается на выполнении определенных условий. Единственное отличие в том, что при соблюдении условий в циклах, его команды могут выполняться неограниченное количество раз.

Для чего предназначены циклы? Их основная задача — повторение одного и того же кода определенное количество раз.

Существует 2 основных типа циклов:

Первый тип — while, работает пока заданное условие является верным. Проще говоря, если вы задали такое условие: «Переменная i меньше трех» — цикл будет выполняться пока переменная i меньше трех. Цикл зависит только от этой переменной, и если её не увеличивать до трех, цикл будет длиться бесконечно.

Есть ещё цикл «do… while» — практически одно и то же. Единственная разница в том, что в простом цикле while сначала проверяется условие, а уже потом совершается работа кода. Во втором случае всё наоборот — сначала начинает работать тело цикла, а уже потом совершается условие.

Второй тип — for, который является наиболее популярным среди всех JavaScript, и не только, разработчиков. Его условная конструкция выглядит так: «начало; условие; шаг».

  1. Начало — здесь вводится исходное значение условной переменной. Например — i=0.
  2. Условие — здесь вводится условие цикла. Например — i>3.
  3. Шаг — здесь вводится то значение, которое будет прибавляться к условной переменной или вычитаться из неё. Например — i++(i+=1).

Не обязательно прописывать каждое условие цикла, их можно и пропускать. Для этого достаточно поставить точку с запятой на том месте, где должно было находиться определенное условие. Можно убрать любую часть условия — начало, шаг и даже основное условие, но при этом получится бесконечный цикл.

Пару слов о комментариях в Javascript

При создании сайтов код часто увеличивается до больших размеров, кроме этого за него могут отвечать несколько разработчиков. Именно для этого и были придуманы комментарии. Они позволяют описывать ту или иную часть кода, чтобы он был более понятным и читабельным для других разработчиков.

Комментарии могут ставиться где угодно, никак не влияя на работу самого файла. Обработчик кода в JavaScript игнорирует комментарии полностью.

Заключение

В этой статье мы узнали основную информацию о работе циклов и условных конструкций, а также научились ставить комментарии.

Помните — JavaScript очень гибкий и сложный для изучения язык, а поэтому все наши советы и уроки могут применяться для самых различных вариантов разработки. Мы стараемся дать вам общую информацию о языке, но наши методы не являются единственно верными.

Comments

As we know from the chapter Code structure, comments can be single-line: starting with // and multiline: /* . */ .

We normally use them to describe how and why the code works.

At first sight, commenting might be obvious, but novices in programming often use them wrongly.

Bad comments

Novices tend to use comments to explain “what is going on in the code”. Like this:

But in good code, the amount of such “explanatory” comments should be minimal. Seriously, the code should be easy to understand without them.

There’s a great rule about that: “if the code is so unclear that it requires a comment, then maybe it should be rewritten instead”.

Recipe: factor out functions

Sometimes it’s beneficial to replace a code piece with a function, like here:

The better variant, with a factored out function isPrime :

Now we can understand the code easily. The function itself becomes the comment. Such code is called self-descriptive.

Recipe: create functions

And if we have a long “code sheet” like this:

Then it might be a better variant to refactor it into functions like:

Once again, functions themselves tell what’s going on. There’s nothing to comment. And also the code structure is better when split. It’s clear what every function does, what it takes and what it returns.

In reality, we can’t totally avoid “explanatory” comments. There are complex algorithms. And there are smart “tweaks” for purposes of optimization. But generally we should try to keep the code simple and self-descriptive.

Good comments

So, explanatory comments are usually bad. Which comments are good?

Describe the architecture Provide a high-level overview of components, how they interact, what’s the control flow in various situations… In short – the bird’s eye view of the code. There’s a special language UML to build high-level architecture diagrams explaining the code. Definitely worth studying. Document function parameters and usage There’s a special syntax JSDoc to document a function: usage, parameters, returned value.

Читать еще:  Метод alert в javascript

Such comments allow us to understand the purpose of the function and use it the right way without looking in its code.

By the way, many editors like WebStorm can understand them as well and use them to provide autocomplete and some automatic code-checking.

Also, there are tools like JSDoc 3 that can generate HTML-documentation from the comments. You can read more information about JSDoc at http://usejsdoc.org/.

Why is the task solved this way?

What’s written is important. But what’s not written may be even more important to understand what’s going on. Why is the task solved exactly this way? The code gives no answer.

If there are many ways to solve the task, why this one? Especially when it’s not the most obvious one.

Without such comments the following situation is possible:

  1. You (or your colleague) open the code written some time ago, and see that it’s “suboptimal”.
  2. You think: “How stupid I was then, and how much smarter I’m now”, and rewrite using the “more obvious and correct” variant.
  3. …The urge to rewrite was good. But in the process you see that the “more obvious” solution is actually lacking. You even dimly remember why, because you already tried it long ago. You revert to the correct variant, but the time was wasted.

Comments that explain the solution are very important. They help to continue development the right way.

Any subtle features of the code? Where they are used?

If the code has anything subtle and counter-intuitive, it’s definitely worth commenting.

Summary

An important sign of a good developer is comments: their presence and even their absence.

Good comments allow us to maintain the code well, come back to it after a delay and use it more effectively.

Comment this:

  • Overall architecture, high-level view.
  • Function usage.
  • Important solutions, especially when not immediately obvious.

Avoid comments:

  • That tell “how code works” and “what it does”.
  • Put them in only if it’s impossible to make the code so simple and self-descriptive that it doesn’t require them.

Comments are also used for auto-documenting tools like JSDoc3: they read them and generate HTML-docs (or docs in another format).

Управление и добавление текстовых комментариев

Добавление комментариев в БД
Хочу сделать форму добавления комментариев для новостного сайта. Саму форму я сделал, но вот.

Добавление комментариев
Добрый день! пишу сразу я новичок, много чего пока не понимаю. Есть скрип добавление комментарии .

Добавление комментариев
Ребят,есть следующие строки: <?php include("functions.php"); $nomer =.

Добавление комментариев с премодерацией
Здравствуйте, у меня не получается сделать премодерацию при добавлении комментариев. То есть, если.

— вводить что-либо юзер может вовнутрь текстовых полей ( и )

— то, что в текущий момент введено в текстовое поле, можно прочитать через свойство value этого текстового поля

— прочитанное можно сохранить в переменной

— значение переменной можно вывести внутрь любого тега:
если это будет тоже текстовыми полем, то переписав его value на значение этой переменной;
если это будет иным тегом (например,

, или , или ещё что-то), то присвоив значение переменной свойству innerHTML этого тега
————-

вот и всё
вам осталось написать простенький HTML-код, где будут:
— текстовые поля для ввода значений юзером и каждому из них дать уникальный id, чтобы именно к этому полю можно было легко обратиться через метод getElementByid ()

— кнопка, по нажатию на которую произойдёт чтение значений текстовых полей, их сохранение и итоговый вывод

— тег (или теги), куда сохранённые значения будут выводиться (им тоже нужны уникальные id)

Пока вот так получилось. Есть одно дополнение к заданию, надо выводить комментарии в 3 колонки и что бы
каждый новый коммент был сверху. Опять таки подскажите каким именно инструментом JS это можно сделать.
Начал читать «Дэвид Флэнаган — Javascript. Подробное руководство — 2012», но хочется побыстрей с этим заданием справится.

1. форма вам вовсе не нужна — вы ж ничего никуда не отправляете
уберите теги

2. значения id желательно выбирать такие, чтобы они не совпадали с названием существующих объектов или свойств: вам же самому потом проще будет их искать в коде
т.е. сделайте не id=»div», а id=»dv»; не id=»name», а id=»nick», не id=»textarea», а id=»txa1″. и т.д.
замените значения id на уникальные, не совпадающие с существующими именами объектов и свойств

3. в двух полях (для имени и комментариев) вы использовали id, а для емейла — почему-то атрибут name
пропишите в поле для емейла атрибут id=»myMail», а name уберите

4. для кнопки у вас зато и id, и name — хотя именно для кнопки вообще ничего не нужно, вы же кнопку внутри функции никак не используете
уберите id и name из кнопки

5. зачем вам изначальное слово comment в трёх ячейках таблицы?
замените все ваши comment’ы на неразрывные пробелы

6. для того, чтобы программно вывести тексты во вторую и в третью ячейку, вам надо их тоже идентифицировать
назначьте id=»second» и id=»third» для второй и третьей ячейки таблицы

7. ну и, наконец, внутри функции у вас должно быть всего три строчки
я напишу две, а третью — вы сами по аналогии попробуйте

Ссылка на основную публикацию
Adblock
detector