Как правильно оформить js файл

Обновлено: 04.07.2024

Скрипты используются в html-страницах для увеличения функциональности и возможностей взаимодействия с посетителями сайта.

Для добавления сценария на страницу HTML используется дескриптор:

Или сегодня можно использовать упрощенный вариант:

Атрибуты дескриптора:

Итак, кратко резюмируем то, что необходимо знать о javascript:

тег script обычно помещается в html-страницу в область head или body ;
этот тег указывает на то, что внутри находится сценарий — исполняемый код, в нашем случае скрипт на языке javascript;
когда html-парсер браузера, отображая последовательно структуру html, доходит до тега script , то он передает инициативу интерпретатору javascript ;
интерпретатор, в свою очередь, исполняет содержимое кода до закрывающего тега script , а затем опять передает управление html-парсеру.

Добавление javascript в html

Встраивание javascript в html происходит двумя основными способами, которые рассмотрим на примере:

1. Встраивание JavaScript непосредственно в HTML-страницу:

<hr> Это обычный HTML документ. </body></html>

В данном примере дескриптор script может находиться как в теле документа, т.е. теге body (как в примере), так и в области head .

Создайте две страницы: lab1.html и myscript.js. Расположите обе страницы в одном каталоге.
В html-документе разместите код:

При прикреплении внешнего файла со скриптом тег script следует размещать в области head . При прикреплении js-файла следует иметь в виду, что в html-файле надо указывать относительный путь к файлу со скриптом. Так, если файл со скриптом находится в каталоге jscripts , то код будет: sсript src="https://labs-org.ru/javascript-1/jscripts/myscript.js" .

Выполните следующий пример, чтобы увидеть особенности работы метода alert() :

Пример 2: Поменяйте местами alert и document.write . Посмотрите на результат в браузере. Важно: особенность модального окна alert() состоит в том, что пользователь не может продолжить работу, пока не щелкнет по кнопке окна

Обратите внимание, как работает javascript, помещенный в теги оформления шрифта:

Пример 3: Перенесите скрипт в BODY после тега H1 . Посмотрите на результат. Важно: Пример показывает, что при использовании метода write() на странице выводится не просто текст, а html-код. То есть данный код может содержать теги html, которые будут преобразованы в соответствующее форматирование текста. Задание Js 1. Вывести в окно браузера следующие данные: Ваше ФИО, возраст, хобби (каждое на новой строке)

Задание Js 2. Написать сценарий (javascript) для вывода двух строк текста, красной и синей.

Замечание:
Теги html для оформления текста цветом: Задание Js 3. Найдите и исправьте ошибки во фрагментах кода:

Что такое сценарий (скрипт)?
Сформулируйте основные задачи, решаемые с помощью скриптов javaScript.
Опишите основные правила подключения сценариев к странице html.
Какой метод javaScript используется для вывода текста (html-кода) на страницу?

2. Синтаксис javaScript, основные понятия

JavaScript – язык интерпретируемый (простыми словами: интерпретируемый — исполняется последовательно команда за командой), но также оснащен JIT-компиляцией.

JIT или компиляция «на лету» (Just-in-time compilation) — технология увеличения скорости работы программных систем, использующих байт-код, путём компиляции байт-кода в машинный код непосредственно во время работы программы.

Рассмотрим некоторые понятия, относящиеся к синтаксису языка:

операторов,
блоков, т. е. взаимосвязанных наборов операторов, и
комментариев.

Операторы могут содержать:

переменные — могут изменять свое значение в программе,
константы — не изменяют свое значение,
выражения.

Идентификаторы (identifiers) — имена переменных, методов и объектов:

состоят из комбинации букв и цифр;
должны начинаться либо с буквы, либо с символа подчеркивания;
не должны содержать пробелов.

Важно: Язык JavaScript чувствителен к регистру:

//переменные различаются: counter=1 Counter=1

«Верблюжья нотация» в записи идентификаторов:

Есть определенные устоявшиеся среди программистов правила для идентификаторов (имён) переменных, функций, массивов и классов. Рассмотрим их:

let myCounter=1; // просто переменная let userNames = new Array(); // массив function getUserCounter()<>// функция

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

Правила оформления скрипта JavaScript

каждый оператор JavaScript лучше начинать с новой строки;
каждый оператор заканчивается точкой с запятой;

Такой код не работает:

Код работает верно:

// способ 1: a=5 document.write(a) // способ 2: a=5; document.write(a); // способ 3: a=5; document.write(a);

блок — это набор операторов (составной оператор), заключенный в фигурные скобки < >.

JavaScript комментарии

В JavaScript допустимы два вида операторов комментария:

// — одна строка символов, расположенная справа от этого оператора, считается комментарием;
/*. */ — все, что заключено между /* и */ , считается комментарием; с помощью этого оператора можно выделить несколько строк в качестве комментария.

// проверка /* здесь может быть ошибка a=5; document.write(a); */

Второй способ комментирования обычно используется при поиске ошибок: тот блок сценария, в котором может находиться потенциальная ошибка, комментируется. Задание Js 4. Исправьте ошибки во фрагменте кода:

alert("Hello World!"); / это однострочный комментарий

Объявление переменных в javaScript и оператор присваивания

Переменная (variable) — это имя, присваиваемое ячейке памяти компьютера, которая хранит определенные данные.

Автор материала говорит, что она прямо-таки одержима написанием чистого кода. Она считает, что код надо писать так, чтобы, во-первых, с ним, в будущем, удобно было бы работать другим программистам, включая его автора, а во-вторых — с учётом возможности расширения этого кода. То есть, нужно стремиться к тому, чтобы в приложение сравнительно просто было бы добавлять новые возможности, и чтобы его кодовую базу было бы удобно сопровождать. Если бы программы писали, учитывая лишь нужды компьютеров, то, вероятно, программисты могли бы выражать свои мысли лишь с помощью нулей и единиц, больше ни о чём не заботясь. В этой статье приводится ряд рекомендаций по написанию качественного кода, проиллюстрированных примерами на JavaScript.

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

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

Не стремитесь к минимализму при написании текстов программ. Используйте полные имена переменных, которые тот, кто будет работать с вашим кодом в будущем, легко сможет понять.

Функции легче поддерживать, они становятся гораздо более понятными, читабельными, если они направлены на решение лишь какой-то одной задачи. Если мы сталкиваемся с ошибкой, то, при использовании маленьких функций, найти источник этой ошибки становится гораздо легче. Кроме того, улучшаются возможности по повторному использованию кода. Например, вышеприведённой функции можно было бы дать имя sumAndAverageArray , так как в ней мы вычисляем сумму значений элементов массива, используя метод reduce , а затем находим среднее значение, деля полученную сумму на количество элементов массива. Вот эта функция.

Её можно разбить на две функции, тогда роль каждого фрагмента кода станет более понятной. Кроме того, если мы создаём большую программу, наличие функции sumArray может оказаться очень кстати. Вот код двух новых функций. Одна вычисляет сумму элементов массива, вторая возвращает их среднее значение.

Признаком того, что функцию можно разбить на две, является возможность использования слова «and» в её имени.

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

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

Этот код — всего лишь пример. Вероятно, в подобной ситуации, вместо введения собственной константы, хранящей число Пи, лучше будет воспользоваться стандартным свойством Math.PI .

Комментарии к коду должны отвечать на вопрос «почему».

Обратите внимание на то, что для целей документирования кода имеет смысл воспользоваться специальными инструментами и соответствующими им правилами комментирования кода. В применении к Python мне нравится Google Style Docstrings, в применении к JavaScript — JSDoc.

Сэнди Метц отлично программирует на Ruby, делает интересные доклады и пишет книги. Она сформулировала четыре правила написания чистого кода в объектно-ориентированных языках. Вот они.

Классы не должны быть длиннее 100 строк кода.
Методы и функции не должны быть длиннее 5 строк кода.
Методам следует передавать не более 4 параметров.
Контроллеры могут инициализировать лишь один объект.

Рекомендую посмотреть её выступление, касающееся этих правил.

Я следую этим правилам уже примерно два года, и они так основательно закрепились в моём сознании, что я выполняю их, буквально, «на автомате». Мне они нравятся, и я полагаю, что благодаря их использованию повышается удобство сопровождения кода.

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

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

Рекомендую применять руководство по стилю кода и линтер, который позволяет приводить код к выбранному стандарту. Например, мне, для JavaScript, нравятся правила Standard JS, для Python — правила PEP8.

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

Одна из первых идей, которую стараются донести до того, кто хочет стать программистом, звучит так: «не повторяйся» (Don’t Repeat Yourself, DRY). Если вы замечаете в своих проектах повторяющиеся фрагменты — используйте такие программные конструкции, которые позволят сократить повторы одного и того же кода. Я часто советую моим ученикам поиграть в игру SET для того, чтобы улучшить их навыки по распознаванию шаблонов.

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

В результате, не стоит повторяться, но и не стоит, в борьбе за соблюдение принципа DRY, видоизменять код до такой степени, что он может стать трудным для понимания.

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

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

А если в программе надо работать лишь с данными об одном человеке, то их можно оформить так, как показано ниже.

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

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

Для создания объекта используйте фигурные скобки. Не создавайте объекты через конструктор new Object .

1.2 Зарезервированные слова

Не используйте зарезервированные слова в качестве ключей объектов. Они не будут работать в IE8.

1.3 Ключевые слова

Не используйте ключевые слова (в том числе измененные). Вместо них используйте синонимы.

1.4 Создание обьекта на 3 и более элементов.

При создании обьектов, равно как и массивов, содержащих большое количество свойств(элементов), и тем самым образующих строки, длиной более 20 символов, необходимо выполнять ряд условий:

Открывающая скобка располагается на той же строке;
Каждое свойство оформляется на новой строке;
Пробел после двоеточия;
Закрывающая скобка располагается на новой строке.

2. Переменные

Для именования переменных используйте существительные на английском языке(не транслит!). Имя переменной должно быть осмысленным.

Имя может состоять из букв, цифр, символов $ и _, не должно начинаться с цифры.

3. Функции

3.1 Именование функции

Имя функции должно быть глаголом на английском языке или начинаться с него. Для имён, состоящих из нескольких слов, используйте camelCase.

3.2 Передача функции в функцию

При передаче функции, как аргумент в другую функцию, оформляйте код как в примере ниже.

4. Отступы

4.1 Горизонтальные отступы

Отступ при вложенности - 2 пробела на каждый уровень вложенности.

4.2 Вертикальные отступы

Между логическими блоками(циклами, функциями и т.д.) следует оставлять пустую строку. Это делает код более читабельным. Избегайте блоков кода более 9 строк подряд.

5. Пробелы

Используйте пробелы между параметрами и не используйте между именем функции и скобкой; Хорошо Плохо
При создании анонимной функции необходимо использовать пробел перед скобкой; Хорошо Плохо
Используйте пробелы вокруг операторов. Хорошо Плохо

6. Скобки

Открывающая фигурная скобка располагается на той же строке. Перед скобкой пробел. Закрывающая скобка располагается на новой строке.

7. Кавычки

Всегда в коде скрипта используйте одинарные кавычки, если не требуется иного. Двойные кавычки допустимы, если в этой же строке необходимо использовать апостроф (') или одинарные кавычки для других целей.

8. Точка с запятой

В конце выражения обязательна точка с запятой.

9. Комментарии

Для пояснения кода используются комментарии. Комментарии не исполняются интерпретатором JavaScript.

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

Длина строки

Отступ с помощью табуляций.
Нет пробелов в конце строк.
Длина строк должна быть не больше 80 знаков, и не должна превышать 100 (табуляция считается за 4 пробела).
При переносе строк, отступ не обязательно должен быть равен 2, если вам надо, например, перенести на следующую строку аргументы функции, то выровнить их можно по тому месте где стоит первый аргумент.
if / else / for / while / try всегда имеют фигурные скобки и всегда являются многострочными.
Унарные операторы (в т.ч. ! , ++ ) должны выделяться пробелами.
Все , и ; не должны выделяться пробелами.
Все ; использующиеся в качестве окончания оператора должны быть в конце строки.
Все : после имени свойства в объекте должны выделяться одним пробелом с правой стороны.
Тернарный оператор ? и : должен иметь пробелы с обеих сторон.
Нет пробелов в пустых конструкторах (в т.ч., <> , [] , fn() )
Новая строка в конце каждого файла.
Пробел между аргументами и выражением

Плохой код

Хороший код

Заканчивайте инструкцию точкой с запятой

Используйте точку с запятой. Не следует полагаться на ASI (Automatic SemicolonInsertion).

Кавычки

Строки содержащие html разметку должны использовать двойные кавычки для строки, и одинарную кавычку для атрибуции:

Скобки

Ставьте открывающую скобку на той же строке:

Скобки следует использовать всегда, даже в ситуации, когда их можно опустить.

Декларирование переменных

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

Плохой код

Хороший код

Глобальные переменные

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

Имена переменных и функций

Использовать верблюжий стиль (camelCase), где первая буква пишется в нижнем регистре. Описывать переменные как можно подробнее. Исключения составляют лишь итераторы, например, индекс обозначать i. Конструкторы не должны начинаться с прописной буквы. Первое слово с маленькой буквы, все последующие с большой

Многострочные операции

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

Плохой код

Хороший код

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

Если проверка слишком длинная и не помещается в одну линию, следует последовательно выделить проверку в отдельные блоки:

Массивы и вызов функций

Всегда добавляйте пробелы вокруг элементов и аргументов:

Цепной вызов функций

Объекты и классы

Объектная декларация может описываться одной строкой, если она коротка (не забывать про лимит ширины). В противном случае, следует писать по одному свойству на каждой строке. Имена свойств нужны заключать в кавычки, если они используют зарезервированные слова или включают спецзнаки.

Плохой код

Хороший код

Используйте JSHint

JSHint — это анализатор кода, который укажет вам на ошибки в коде. Он совместим со многими широко используемыми текстовыми редакторами. Так же это хороший способ поддерживать стилистическое единство и целостность кода. Различные способы использования можно найти в документации. Ниже наш пример .jshintrc файла, который следует всем данным выше рекомендациям. Поместите этот файл а корневую папку вашего проекта, и если у вас установлен JSHint плагин, то ваш редактор теперь будут проверять код в соответствии с правилами которые вы определили.

Во все файлы, которые обрабатываются браузером добавляем:

Во все типы JS файлов, так же лучше добавить:

Это повлияет и на JSHint и на обработчика JavaScript в целом, который станет менее терпимым к ошибкам, но будет работать быстрее.

Node правила

.nodeName должен всегда использовать поддерживаемые .tagName. .nodeType должен всегда использовать определять классификацию node (не .nodeName).

Проверки

Строгое равенство (===) предпочтительней абстрактной (==). Исключая проверки на undefined и null.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Читайте также: