Различия

Показаны различия между двумя версиями страницы.


Предыдущая версия
—javascript [2025/07/06 12:39] (текущий) – внешнее изменение 127.0.0.1
Строка 1: Строка 1:
 +====== JavaScript: основы, синтаксис и современные тренды ======
 +~~Title: JavaScript: основы, возможности и применение ~~
 +{{htmlmetatags>
 +metatag-description=(Узнайте об основах JavaScript, его возможностях и практическом применении. Статья раскрывает ключевые концепции JavaScript, его синтаксис и применение в веб-разработке.)
 +}}
  
 +{{ :javascript-01.png?nolink&400 |}}
 +
 +  * JavaScript движки: Jaeger Monkey ([[Firefox]] 4) и [[Google V8]] ([[Chrome]])
 +  * [[Стандарты кодирования]]: правила наименования классов, PHP_CodeSniffer и т.д.
 +  * [[jQuery]] - фреймворк фокусирующийся на взаимодействии JavaScript и HTML.
 +  * [[jQuery Ui]].
 +  * [[nodejs]]
 +  * [[JSON]]
 +  * [[Принципы функционирования клиентских сценариев JavaScript]]
 +  * [[WooCommerce перевод строк]]
 +  * [[Как сохранить HTML-страницу сгенерированную на JavaScript]]
 +  * [[ReactJS]]
 +  * [[Функции JavaScript]]
 +  * [[funkcii-konstruktory_i_sozdanie_obektov]]
 +  * [[Шаблонные строки в JavaScript]]
 +  * [[this JavaScript]]
 +Дополнительная документация по JS:
 +  * [[https://www.w3schools.com/jsref/|W3Schools JavaScript and HTML DOM Reference]]
 +  * [[https://learn.javascript.ru|Современный учебник JavaScript]]
 +
 +**JavaScript** - объектно-ориентированный скриптовый язык программирования. Основные архитектурные черты: динамическая типизация, слабая типизация, [[wpru>прототипное программирование]], автоматическое управление памятью. JavaScript наиболее широкое применение находит в создании клиентских сценариев (или скриптов). Это означает, что текст сценария передается на компьютер конечного пользователя и там выполняется, внося в страницу дополнительную динамику и расширяя ее возможности.
 +
 +JavaScript может выполняться на стороне сервера, для этого на сервере должен быть установлен один из движков JavaScript, таких как V8, Rhino, SpiderMonkey.
 +
 +На основе общедоступной документации в Microsoft был создан "перепроектированый" JavaScript - [[JScript]].
 +
 +====== Использование JavaScript ======
 +  * [[Синтаксис JavaScript]]. Тернарный оператор. switch case. [[sintaksis_javascript?&#operatory_cikla_for_while_do|Циклы for, while, do.]]
 +  * [[Ввод/вывод данных JavaScript]]. Диалоговые окна: alert, confirm, prompt
 +  * [[pobitovye_ili_porazrjadnye_operacii?&#pobitovye_operatory_javascript|Побитовые операторы JavaScript]]
 +  * Оператор [[typeof]] - служит для проверки типов данных. Альтернатива использование ссылки на свойство constructor объекта.
 +
 +**Области видимости переменных**.
 +__Область видимости переменной__ - определяет место в тексте скрипта, где переменная может быть "видима", т.е. объявлена и доступна для использования. 
 +
 +Различают две области видимости: //глобальную// - область видимости уровня страницы (глобальные переменные являются свойства объекта [[Object Window]] HTML [[DOM]]), //локальную// - область видимости уровня функции. Переменные объявленные непосредственно в тексте сценария имеют глобальную область видимости, что делает их доступными в любом месте во всех блоках сценариев на странице. Если же переменная объявлена в теле одной из функций, то она получает локальную область видимости и может быть использована только операторами тела данной функции. Грубо говоря, интерпретатор "убивает" локальные переменные как только функция завершит свою работу. Это позволяет сэкономить массу системных ресурсов.
 +<note important>В JavaScript область видимости сохраняется внутри функций, а не блоков (образуемых такими операторами, как while, if и for).</note>
 +Если для переменной не объявлена область видимости (не использовано объявление при помощи ключевого слова var), эта переменная становиться глобальной, даже если она используется только в области видимости внутри функции.
 +
 +**Ссылки**.
 +
 +__Ссылка__ — это указатель на фактическое местонахождение объекта. В отношении которого действует предположение, что физический объект никогда не может быть ссылкой. Строка — это всегда строка, а массив — всегда массив. Но на один и тот же объект могут ссылаться многие переменные. Поддерживая наборы ссылок на другие объекты, язык предоставляет вам гораздо больше гибкости.
 +
 +Объект может содержать набор свойств, целиком состоящий из простых ссылок на другие объекты (такие как строки, числа, массивы и т.д.). Когда несколько переменных указывают на один и тот же объект, модификация исходного типа этого объекта отразится на всех переменных.
 +<note important>Важно запомнить, что ссылки всего лишь указывают на конечный объект, на который они ссылаются, и не являются ссылками друг на друга. в JavaScript ссылка опускается по цепочке ссылок, и указывает только на основной объект.</note>
 +
 +<note tip>При объединении строк всегда образуется новый объект строки, а не модифицированная версия исходной строки. Ссылки на новый объект отсутствуют.
 +</note>
 +
 +**Контекст JavaScript**. __Контекст__ - объект, внутри которого выполняется ваш JavaScript код. Переменная **this** всегда будет ссылаться на объект,
 +внутри которого код в данный момент работает. Следует помнить, что глобальные объекты фактически являются свойствами объекта window. Это означает, что даже в глобальном контексте переменная this будет ссылаться на объект.
 +
 +Методы call и apply служат для переключения контекста.
 +
 +
 +==== Поиск и обработка ошибок ====
 +
 +Рассмотрим код, вызывающий конструктор без ключевого слова new, в случае чего this не будет ссылаться на создаваемый объект. Некорректный вызов Person успешно происходит, но возвращается как undefined и создаёт глобальную переменную name. Для отладки (debugging) JavaScript можно перевести его в строгий режим. Для этого наверху файла или тела функции пишется "use strict";.<file javascript>
 +function Person(name) {
 +    "use strict";
 +    this.name = name;
 +}
 +var ferdinand = Person("Евлампий");
 +console.log(name);
 +
 +//undefined
 +//Евлампий
 +</file>
 +
 +
 +====== Операторы манипулирования объектом ======
 +**Операторы манипулированием объекта**:
 +  * for ... in
 +  * new
 +  * this
 +  * with 
 +**Оператор for...in**.
 +
 +Оператор for...in присваивает переменной поочередно все свойства объекта. Для каждого свойства JavaScript выполняет указанные утверждения. Оператор for...in выглядит следующим образом: 
 +<file>
 +for (variable in object) 
 +{   statements 
 +}
 +</file>
 +
 +Следующая функция берет ее как аргумент объект и имя объекта. Затем повторяет все свойства объекта и возвращает строку, в которую внесен список имени свойства и значения. 
 +<file>
 +function dump_props(obj, obj_name) {
 +   var result = ""
 +   for (var i in obj) {
 +      result += obj_name + "." + i + " = " + obj[i] + "<br>"
 +   }
 +   result += "<hr>"
 +   return result}
 +</file>
 +Для объекта car со свойствоми make и model, result выглядел бы так: 
 +<file>
 +  car.make=Ford
 +  car.model=Mustang
 +</file>
 +
 +
 +
 +
 +====== Задержки и интервалы. DHTML анимация. ======
 +  * [[object_window|Объект Window]]
 +
 +В сценариях часто возникает необходимость отложить выполнение действий на некоторое время или выполнять эти действия с заданной периодичностью. Примером может служить создание "тикающих" часов на web- странице. Для создания таких часов необходимо с периодичностью в одну секунду получать текущее время и выводить его на страницу.
 +
 +Одной из наиболее мощных DHTML технологий, которую можно реализовать с помощью JavaScript и [[CSS]], является анимация. В DHTML анимации нет ничего особенного – надо лишь периодически изменять одно или несколько свойств
 +стиля одного или нескольких элементов. Чтобы, например, передвинуть изображение влево, надо постепенно увеличивать значение свойства style.left этого изображения, пока последнее не займет требуемое положение. Можно также постепенно изменять свойство style.clip для «открытия» изображения пиксел за пикселом. Никакая DHTML анимация не обходится без метода setInterval() или setTimeout() (для анимации используется также requestAnimationFrame).
 +
 +  * **Отложенное выполнение функции**
 +Для отложенного выполнения функции используется метод setTimeout, имеющий следующий формат вызова: 
 +<file>
 +timerId = setTimeout("код javascript", timeout);
 +</file>
 +где
 +  * timerId - значение, возвращаемое методом setTimeout можно использовать для отмены отложенного выполнения вункции.
 +  * "код javascript" - операторы JavaScript или вызов замкнутой функции
 +  * timeout - задержка выполнения кода в миллисекундах. 
 +Для отмены отложенного выполнения кода используется метод clearTimeout, которому в качестве параметра передается идентификатор таймера, возвращаемый методом setTimeout: 
 +<file>
 +clearTimeout(timerId);
 +</file><file javascript>
 +<script>
 +document.body.style.background = "blue";
 +setTimeout(function() {
 + document.body.style.background = "yellow";
 +}, 2000);
 +</script>
 +</file>
 +
 +  * **Периодическое выполнение функции**
 +Для периодического выполнения функции используется метод setInterval, имеющий следующий формат вызова: 
 +<file>
 +timerId = setInterval("код javascript", period);
 +</file>
 +где
 +  * timerId - значение, возвращаемое методом setTimeout можно использовать для отмены отложенного выполнения вункции.
 +  * "код javascript" - операторы JavaScript или вызов замкнутой функции
 +  * period - период выполнения кода в миллисекундах. 
 +Для отмены периодического выполнения кода используется метод clearInterval, которому в качестве параметра передается идентификатор таймера, возвращаемый методом setInterval: 
 +<file>
 +clearInterval(timerId);
 +</file>Например, выводить сообщения каждую секунду<file javascript>
 +<script>setInterval(function () {
 +                alert('My message')
 +            }, 1000)
 +</script>
 +</file>

📌 Удобный подбор VPS по параметрам доступен на DIEGfinder.com - официальном инструменте проекта DIEG. Это часть единой экосистемы, созданной для того, чтобы помочь быстро найти подходящий VPS/VDS сервер для любых задач хостинга.

📌 Для тестирования скриптов, установщиков VPN и Python-ботов рекомендуем использовать надежные VPS на короткий срок. Подробнее о быстрой аренде VPS для экспериментов - читайте здесь.

💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!

7 Самых Популярных Статей

  1. Как запустить скрипты и веб-приложения на Python
  2. Что такое страны TIER 1,2,3
  3. 7 способов сравнения файлов по содержимому в Windows или Linux
  4. Установка и тестирование веб-панели HestiaCP
  5. Nginx простые примеры конфигурации
  6. top, htop, atop определение загрузки ОС (Load average, LA)
  7. Использование rsync в примерах

7 Самых Популярных Обзоров

  1. Хостинг для Python-скриптов и приложений
  2. ТОП 4 лучших антидетект браузеров (Бесплатные & Платные)
  3. Подборка купонов (промокоды) на хостинг, антидетект браузеры
  4. Обзор THE.Hosting (PQ Hosting): надежный хостинг с профессиональной поддержкой
  5. Хостинг в России
  6. Хостинг в Европе
  7. Обзор браузера Dolphin {anty} для мультиаккаунтинга