JavaScript — коды символов: описание, особенности и примеры

HTML позволяет людям читать текст, просматривать фотографии, смотреть видеоролики и нажимать ссылки для перехода на другие веб-страницы с большим количеством текста, изображений и видео. Когда нужно добавить «интеллект» на страницы, чтобы они могли взаимодействовать с посетителями сайта, используют JavaScript-коды.

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

Основы JavaScript

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

Тем не менее коды Java все еще сложны, хотя меньше, чем у HTML или CSS. Каждый язык программирования обладает уникальным набором ключевых слов и символов и собственным набором правил для объединения всех элементов — это и есть синтаксис языка. Нужно запомнить слова и правила коды JavaScript, чтобы быть во всеоружии или по крайней мере сохранить под рукой необходимый учебник Java и также справочник по jQuery — самой популярной в мире библиотеке JS. Она упрощает сложное программирование. Даже имея небольшие познания JS с помощью jQuery можно создавать сложные интерактивные веб-сайты в кратчайшие сроки.

Представление о компьютерной программе

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

Любая компьютерная программа представляет собой последовательность шагов, которые выполняются в определенном порядке. Предположим, нужно отобразить приветственное сообщение, используя имя посетителя веб-страницы: «Добро пожаловать, Боб!» Для выполнения этой задачи необходимо выполнить несколько действий:

1. Спросить имя посетителя.
2. Получить ответ посетителя.
3. Распечатать, или правильнее, показать сообщение на веб-странице.

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

Преобразование языков в веб-браузере

Веб-браузеры созданы для понимания HTML и CSS и преобразования этих языков на экране монитора. Часть веб-браузера, которая понимает HTML и CSS, называют механизмом компоновки или рендеринга. У большинства браузеров есть интерпретаторы JS. Это часть браузера, которая понимает JavaScript и может выполнять его шаги программирования. Браузер обычно ожидает HTML, поэтому в программе JS нужно конкретно указывать браузер с помощью тегов. Тогда он поймет, что дошел до конца программы, и сможет вернуться к своим нормальным обязанностям.

Много специалистов с удовольствием делятся своим опытом с новичками в программировании по поводу того, где и как размещать код JavaScript, вот некоторые из них для размещения внешних файлов:

1. Внешние файлы Script используют, если нужно применить один и тот же скрипт на многих страницах, чтобы не переписывать код на каждой.
2. Их используют для включения в двух случаях: в начале функции и JavaScript-скрипты, которые нужно запустить при загрузке страницы.
3. Убеждаются, что файлы (.js) не содержат тег. Они должны содержать только комментарии HTML и код JS, и ничего более.

Корневые пути для файлов

Ориентированный на документ путь указывает направление от веб-страницы к файлу JS. Если на сайте есть несколько уровней папок, нужно будет использовать разные пути для указания одного и того же файла. Например, предположим, что есть файл с именем site.js, расположенный в папке с именем scripts в главном каталоге сайта. Ориентированный на документ путь к этому файлу будет выглядеть для домашней страницы так: scripts / site.js, . Но для страницы, расположенной внутри папки с именем about, путь к тому же файлу будет другим: ../scripts/site.js -The ../, что означает идти в сценарии в папку и получить файл site.js.

Вот несколько советов по поводу того, какой тип URL использовать при написании программ:

1. Если нужно указать на файл, который находится не на том же сервере, что и на веб-страница, следует использовать абсолютный путь.
2. Корневые пути хороши для файлов JS, хранящихся на собственном сайте. Поскольку они всегда начинаются с корневой папки, URL-адрес для файла будет одинаковым для каждой страницы сайта, даже если веб-страницы находятся в папках и подпапках.
3. Корневые пути не работают, если не просматривают веб через сервер в Интернете или веб-сервер, который настроен на собственном компьютере для целей тестирования. Другими словами, если пользователь просто открывает веб-страницу с компьютера, используя команду «Файл» → «Открыть» браузера, он не сможет находить, загружать или запускать файлы, прикрепленные с использованием корневого пути.
4. Можно создать внешний файл JS, прикрепить его к веб-странице, а затем проверить в браузере, просто открыв страницу с жесткого диска. Отношения с документами отлично работают при перемещении на реальный веб-сайт в Интернете, но придется переписать URL-адрес в файл JS, если веб-страница перемещается в другое место на сервере.

Написание первой программы

Для пользователей CSS написание JavaScript освоить намного проще. Вот три важных шага, которые разработчики всегда должны соблюдать при создании или использовании кода JavaScript:

1. Применить тег сценария, чтобы сообщить браузеру, что используется JS.
2. Написать или загрузить JS.
3. Проверить работу скрипта.
4. Перед его использованием тестируют сценарий на самых разных системах и, самое главное, на разных веб-браузерах перед тем, как показать коды JavaScript оператору на сайте.

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

<html>

<body>

<script type=»text/JavaScript»>

<!—

document.write(«Привет, мир!»)

//—>

</script>

</body>

</html>

Этот пример скриптов Java Script — самый распространенный, приводится практически во всех учебниках по программированию для разных языков.

Использование тега <script>

Если все правильно сделано, на дисплее появляется фраза «Привет, мир!»

Первый шаг заключается в том, чтобы сообщить браузеру, что используется скрипт с тегом <script>. Затем устанавливается тип скрипта равным text / JavaScript и добавлен дополнительный комментарий HTML, который окружает код. Если браузер не поддерживает JS, он не отображает код в виде обычного текста для пользователя. Комментарий заканчивается // ->, потому что // означает комментарий в операторе, и добавляют его, чтобы браузер не читал конец комментария HTML в виде фрагмента кода.

Последним шагом скрипта было использование функции document.write, которая записывает строку в HTML-документ. Ее можно использовать для написания текста, HTML или того и другого вместе. В данном случае передана строка текста функции, чтобы описать «Привет, мир!», который он высветил на экране.

Обращают внимание на то, что в конце инструкции document.write («Привет, мир!») нет точки с запятой. JavaScript не требует, чтобы их использовали для обозначения конца оператору.

Опытные программисты все же предпочитают использовать точки с запятой и не стесняются это делать, помня при этом, что JS не работает с запятой в конце.

Добавление внешнего кода на HTML-страницу

Тег HTML <script> используется для объявления скрипта в документе HTML. Благодаря этому можно определить клиентский код. Если нужно добавить внешний скрипт внутри HTML, можно легко это сделать, используя атрибут src тега <script>.

Ниже перечислены атрибуты тега <script>.

Атрибут

Значение

Описание

async

асинхронной

Указывает, что скрипт выполняется асинхронно

charset

кодировок

Определяет кодировку символов, используемую скриптом

defer

откладывать

Объявляет, что скрипт не будет создавать какой-либо контент. Таким образом, браузер/пользовательский агент может продолжить синтаксический анализ и отображение остальной части страницы

src

URL

Указывает URI / URL-адрес внешнего скрипта

type

текст / приложение JavaScript / приложение ecmacript / текст JavaScript / vbscript

Указывает язык сценариев как тип содержимого (тип MIME)

Для добавления внешнего файла используют атрибут src. Файл HTML находится с src в JS-файле myscript.js.

Пример и код JavaScript приведены ниже:

<!DOCTYPE html>

<html>

<body>

<h2>Alert Button</h2>

<p>

<External JavaScript file is myscript.js/p>

<button type=»button» onclick=»sayHello()»>Click</button>

<script src=»myscript.js»></script>

</body>

</html>

Чтобы использовать JS из внешнего источника файла, записывают весь исходный код в простой текстовый файл с расширением «.js», а затем включают этот файл, как в приведенной выше структуре, то есть <script src = «myscript.js» > </ script>. Сохраняют следующий файл в файле myscript.js:

function sayHello() {

alert(«Hello World»)

}

Написание текста на веб-странице

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

В текстовом редакторе открывают файл hello2.html.

Хотя теги обычно появляются на веб-странице, но можно поместить их непосредственно в тело страницы:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/

html4/strict.dtd»>

<html>

<head>

<title>My Web Page</title>

<script type=»text/javascript»>

</script>

</head>

<!doctype html>

<html>

<head>

<meta charset=»UTF-8″>

<title>My Web Page</title>

<script>

alert(‘hello world!’);

</script>

</head>

Эта команда, которая буквально записывает все, что размещается между открывающимися и закрывающимися круглыми скобками. В этом случае: Hello world!

Далее:

1. Добавляют на страницу тег абзаца и два слова.
2. Сохраняют страницу и открывают ее в веб-браузере.
3. Откроется страница, и под заголовком появятся слова Hello world!

Прикрепление внешнего файла

Разработчик обычно ставит код в отдельный файл, если хочет использовать одни и те же сценарии на нескольких веб-страницах, и инструктирует страницы загружать файл и использовать внутри него JS. Внешние файлы нужны, когда используют чужой код. В частности, есть коллекции, называемые библиотекой кодов JavaScript. Обычно эти библиотеки облегчают выполнение чего-то сложного.

Порядок прикрепления внешнего файла:

1. В текстовом редакторе открывают файл fadeIn.html. Эта страница содержит только некоторые простые HTML — несколько тегов, заголовок и пару абзацев. В данном примере будет добавлен простой визуальный эффект на страницу, что приведет к постепенному исчезновению всего содержимого.
2. Нажать пустую строку между закрывающими тегами в верхней части страницы и ввести: <script src=»../_js/jquery.min.js»></script>
3. Чтобы упростить чтение при выполнении программирования, рекомендуется отступать в коде, чтобы показать, какие теги вложены внутри других тегов, и также можно отступать в строках кода, которые находятся внутри другого его блока.
4. Сохраняют файл HTML и открывают его в веб-браузере.

<link href=»../_css/site.css» rel=»stylesheet»>

<script src=»../_js/jquery.min.js»></script>

<script>

$(document).ready(function() {

$(‘header’).hide().slideDown(3000);

});

</script>

</head>

Браузер Chrome для веб-разработчиков

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

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

Браузер Chrome «любит» разработчиков. Его функция DevTools дает множество способов устранения проблем с HTML, CSS и JS. Кроме того, его консоль JScript — отличное место для начала отслеживания ошибок в коде. Она не только описывает найденные ошибки, но также идентифицирует строку в коде, где произошла ошибка.

Чтобы открыть консоль, нажимают кнопку «Настроить» и выбирают «Инструменты» → «Консоль JavaScript», или используют сочетание клавиш Ctrl + Shift + J (Windows) или -Option-J (Mac).

Общие ошибки разработчиков

Вот несколько распространенных ошибок, с которыми могут столкнуться начинающие разработчики:

1. Отсутствует пунктуация. Программирование JavaScript часто включает в себя множество пар символов, таких как открытие и закрытие круглых скобок. Сообщение «Неожиданный токен», означающее, что в этом случае он столкнулся с точкой с запятой, а не с закрывающей скобкой.
2. Отсутствуют кавычки. Строка представляет собой последовательность символов, заключенных в кавычках, например, hello — это строка в коде. Легко забыть знак открытия или закрытия. Также легко перепутать эти кавычки. В любом случае пользователь увидит сообщение об ошибке: Uncaught SyntaxError.
3. Команды с ошибками. Если пропущена команда, то пользователь получит сообщение об ошибке — команда с орфографической ошибкой не определена, например, Uncaught ReferenceError.
4. Ошибка синтаксиса JavaScript. Иногда Chrome не знает, что разработчик пытаетесь сделать, и предоставляет это как общее сообщение об ошибке. Синтаксическая ошибка представляет собой некоторую ошибку в коде. В этом случае нужно внимательно посмотреть на строку, где была найдена ошибка, и попытаться выяснить, какую ошибку совершили. К сожалению, эти типы ошибки часто требуют опыта и понимания языка JS для исправления.
5. Как можно заметить, многие ошибки, которые сделаны из-за невнимательности. К счастью, их легко исправить. По мере того как разработчик получает больше опыта программирования, он перестанет делать их практически полностью, хотя ни один программист не идеален.

Применение языка сценариев

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

Кроме того, некоторые относительно новые базы данных используют JS в качестве языка для создания, извлечения и обновления записей. MongoDB и CouchDB — два популярных примера. Существует термин full-stack JavaScript, что означает использование JS в качестве языка для клиентского браузера, веб-сервера и элемента управления базой данных. JScript — язык сценариев на стороне клиента. Это означает, что браузер веб-серфера осуществляет выполнение кода JavaScript.

Вот несколько приложений, которые пользователи встречали в веб-серфингах:

1. Часы.
2. Анимация мыши.
3. Выпадающие меню.
4. Предупреждающие сообщения.
5. Всплывающие окна.
6. Проверка данных формы HTML.

На самом деле, очень сложно подготовить полный список того, что можно сделать с JS, если пользователь умеет писать код, как Пол Аллен и Билл Гейтс. Но простые пользователи тоже не обижены, учитывая, что в Интернете существует множество невероятных инструментов для любителей скриптов, например:

• JavaFile.
• Java-Scripts.
• Выпадающие меню JavaScript.

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