Как изменить переменную js в браузере
Обновлено: 02.07.2024
После прочтения последних двух статей вы знаете, что такое JavaScript, что он может сделать для вас, как использовать его вместе с другими веб-технологиями и какими он обладает функциями высокого уровня. В этой статье мы перейдём к реальным основам, рассмотрим, как работать с большинством базовых блоков JavaScript — Переменными.
| Необходимые навыки: | Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript. |
|---|---|
| Цель: | Ознакомиться с основами переменных в JavaScript. |
Инструменты, которые вам нужны
В этой статье вам будет предложено ввести строки кода, чтобы проверить ваше понимание материала. Если вы используете браузер для настольных компьютеров, лучшим примером для ввода кода примера является консоль JavaScript вашего браузера (см. What are browser developer tools для получения дополнительной информации о том, как получить доступ к этому инструменту).
Также мы предоставили простую консоль JavaScript, встроенную ниже в странице, для ввода кода, если вы не используете браузер с консолью JavaScript или консоль на странице окажется для вас более комфортной.
Что такое переменные?
Переменные — это контейнер для таких значений, как числа, используемые в сложении, или строка, которую мы могли бы использовать как часть предложения. Но одна из особенностей переменных — их значение может меняться. Давайте взглянем на простой пример:
В примере, по нажатию кнопки выполнится несколько строк кода. Первая строка в функции покажет пользователю окно, где попросит ввести его имя и сохранит значение в переменной. Вторая строка отобразит приветствие с включённым введённым именем, взятым из значения переменной.
Чтобы лучше понять действие переменной здесь, давайте подумаем о том, как мы будем писать этот пример без использования переменной. Это будет выглядеть примерно так:
Переменные имеют смысл, и, когда вы узнаете больше о JavaScript, они начнут становиться второй натурой.
Ещё одна особенность переменных заключается в том, что они могут содержать практически все, а не только строки и числа. Переменные могут также содержать сложные данные и даже целые функции. Об этом вы узнаете больше при дальнейшем изучении курса..
Заметьте: мы говорим, что переменные содержат значения. Это важное различие. Переменные не являются самими значениями; они представляют собой контейнеры для значений. Представьте, что они похожи на маленькие картонные коробки, в которых вы можете хранить вещи.
Объявление переменной
Чтобы использовать переменную, вы сначала должны её создать, или, если быть точнее, объявить переменную. Чтобы сделать это, мы вводим ключевое слово var, за которым следует имя, которое вы хотите дать своей переменной:
Здесь мы создаём две переменные myName и myAge. Попробуйте ввести эти строки сейчас в консоли вашего веб-браузера или в консоли ниже (можно открыть эту консоль в отдельной вкладке или в новом окне). После этого попробуйте создать переменную (или две) с вашими именами.
Примечание: в JavaScript все инструкции кода должны заканчиваться точкой с запятой (;) - ваш код может работать правильно для отдельных строк, но, вероятно, не будет, когда вы пишете несколько строк кода вместе. Попытайтесь превратить написание точки с запятой в привычку.
Теперь проверим, существуют ли эти значения в среде выполнения. Для этого введём только имя переменной.
Примечание: Не путайте переменную, которая существует, но не имеет значения, с переменной, которая вообще не существует - это разные вещи.
Присвоение значения переменной
Как только переменная объявлена, ей можно присвоить значение. Для этого пишется имя переменной, затем следует знак равенства ( = ), а за ним значение, которое вы хотите присвоить. Например:
Попробуйте вернуться в консоль и ввести эти строки. Вы должны увидеть значение, которое вы назначили переменной, возвращаемой в консоли. Чтобы посмотреть значения переменных, нужно набрать их имя в консоли:
Вы можете объявить переменную и задать ей значение одновременно:
Скорее всего, так вы будете писать большую часть времени, так как запись и выполнения кода с одно строки происходит быстрее, чем выполнение двух действий на двух отдельных строках.
Примечание: Если вы пишете многострочную программу JavaScript, которая объявляет и инициализирует (задаёт значение) переменную, вы можете объявить её после её инициализации, и она всё равно будет работать. Это связано с тем, что объявления переменных обычно выполняются первыми, прежде чем остальная часть кода будет выполнена. Это называется hoisting - прочитайте var hoisting для более подробной информации по этому вопросу.
Обновление переменной
Когда переменной присваивается значение, вы можете изменить (обновить) это значение, просто указав другое значение. Попробуйте ввести следующие строки в консоль:
Правила именования переменных
Вы можете назвать переменную как угодно, но есть ограничения. Как правило, вы должны придерживаться только латинских символов (0-9, a-z, A-Z) и символа подчёркивания.
- Не рекомендуется использование других символов, потому что они могут вызывать ошибки или быть непонятными для международной аудитории.
- Не используйте символы подчёркивания в начале имён переменных - это используется в некоторых конструкциях JavaScript для обозначения конкретных вещей.
- Не используйте числа в начале переменных. Это недопустимо и приведёт к ошибке.
- Общепринято придерживаться так называемый "lower camel case", где вы склеиваете несколько слов, используя строчные буквы для всего первого слова, а затем заглавные буквы последующих слов. Мы использовали это для наших имён переменных в этой статье.
- Делайте имена переменных такими, чтобы было интуитивно понятно, какие данные они содержат. Не используйте только отдельные буквы / цифры или большие длинные фразы.
- Переменные чувствительны к регистру, так что myage и myAge - разные переменные.
- И последнее - вам также нужно избегать использования зарезервированных слов JavaScript в качестве имён переменных - под этим мы подразумеваем слова, которые составляют фактический синтаксис JavaScript! Таким образом, вы не можете использовать слова типа var , function , let , и for для имён переменных. Браузеры распознают их как разные элементы кода, и поэтому возникают ошибки.
Примечание: По ссылке можно найти довольно полный список зарезервированных ключевых слов: Lexical grammar — keywords.
Примеры хороших имён переменных:
Примеры плохих имён переменных:
Примеры имён переменных, которые вызовут ошибки:
Попытайтесь создать ещё несколько переменных прямо сейчас, используя знания, изложенные выше.
Типы переменных
Есть несколько различных типов данных, которые мы можем хранить в переменных. В этом разделе мы кратко опишем их, а затем в будущих статьях вы узнаете о них более подробно.
Числа (Numbers)
Вы можете хранить числа в переменных (целые числа, такие как 30, или десятичные числа, такие как 2.456, также называемые числами с плавающей точкой или с плавающей запятой). Вам не нужно объявлять типы переменных в JavaScript, в отличие от некоторых других языков программирования Если давать переменной значение числа,кавычки не используются:
Строки ('Strings')
Строки - это фрагменты текста. Когда вы даёте переменной значение строки, вам нужно обернуть её в одиночные или двойные кавычки, в противном случае JavaScript попытается проиндексировать её как другое имя переменной.
Логические (Booleans)
Booleans - истинные / ложные значения - они могут иметь два значения: true или false. Они обычно используются для проверки состояния, после чего код запускается соответствующим образом. Вот простой пример:
В действительности вы чаще будете использовать этот тип переменных так:
Здесь используется оператор «меньше» (<), чтобы проверить, является ли 6 меньше 3. В данном примере, он вернёт false, потому что 6 не меньше 3! В дальнейшем вы узнаете больше о таких операторах.
Массивы (Arrays)
Массив - это один объект, который содержит несколько значений, заключённых в квадратные скобки и разделённых запятыми. Попробуйте ввести следующие строки в консоль:
Как только эти массивы определены, можно получить доступ к каждому значению по их местоположению в массиве. Наберите следующие строки:
Квадратные скобки указывают значение индекса, соответствующее позиции возвращаемого значения. Возможно, вы заметили, что массивы в JavaScript индексируются с нулевой отметкой: первый элемент имеет индекс 0.
В следующей статье вы узнаете больше о массивах.
Объекты (Objects)
В программировании объект представляет собой структуру кода, который моделирует объект реальной жизни. У вас может быть простой объект, представляющий автостоянку, и содержит информацию о её ширине и длине; или вы можете иметь объект, который представляет человека, и содержит данные о его имени, росте, весе, на каком языке он говорит, как сказать ему привет и многое другое.
Попробуйте ввести следующую строку в консоль:
Чтобы получить информацию, хранящуюся в объекте, вы можете использовать следующий синтаксис:
Мы больше не будем рассматривать объекты в данном курсе - вы можете больше узнать о них в будущем модуле.
Динамическая типизация
JavaScript - это «динамически типизируемый язык», что означает, что в отличие от некоторых других языков вам не нужно указывать, какой тип данных будет содержать переменная (например, числа, строки, массивы и т. д.).
Например, если вы объявите переменную и присвоите ей значение, заключённое в кавычки, браузер будет обрабатывать переменную как строку:
Он всё равно будет строкой, даже если он содержит числа, поэтому будьте осторожны:
Попробуйте ввести четыре строки выше в консоль одну за другой и посмотреть результаты. Вы заметите, что мы используем специальную функцию typeof() - она возвращает тип данных переменной, которую вы передаёте в неё. В первый раз, когда она вызывается, она должа возвращать строку, так как переменная myNumber содержит строку '500' . Посмотрите, что она вернёт во второй раз, когда вы её вызовите.
Подведение итогов
К настоящему времени вы должны знать достаточно о переменных JavaScript и о том, как их создавать. В следующей статье мы остановимся на числах более подробно, рассмотрев, как сделать базовую математику в JavaScript.
В настоящее время console.log (a) показывает только 1, я провел небольшое исследование, говоря, что не могу передать его как переменную, потому что переменная передается как значение. Я думал об использовании global.a. Однако это тоже не работает, потому что a хранится как переменная модуля, а не как глобальная переменная, и я не хочу устанавливать ее как глобальную переменную.
Как мне это решить?
4 ответа
Изначально нет функции, которая называется second . Ваш модуль предоставляет функцию с именем change . Затем, когда вы передаете значение в функцию, это значение копируется, и любое изменение, которое вы делаете, влияет только на копию. Таким образом, передав значение a , изменение влияет только на копию этого значения, а не на оригинал. Что вы можете сделать, это передать объект. На этот раз копия ссылки на объект передается. Таким образом, любое внесенное вами изменение отражается обратно на исходный объект (это как указатели в C и C ++).
С точки зрения кода, изменения, которые вы должны сделать, следующие:
Последнее вы должны назвать это как:
Вы можете получить с помощью localStorage.getItem ('ключ')
Основной ответ заключается в том, что вы не можете сделать это именно так, как вы просили. Переменная, определенная как у вас a в app.js, является закрытой для области a , и только другой код в app.js может ее изменить.
Есть ряд других способов структурировать вещи так, чтобы модуль B мог что-то модифицировать в модуле A или заставить что-то изменить в модуле A.
Глобальный
Вы можете сделать a глобальным. Это не рекомендуется по разным причинам. Но вы можете сделать его свойством глобального объекта, изменив объявление a на:
Затем в модуле B вы можете напрямую установить:
Проход и возврат
Вы можете передать a в функцию в модуле B и заставить эту функцию возвращать новое значение, которое вы присваиваете обратно в a .
Затем, внутри moduleS, вы можете изменить свойства a напрямую:
Поместите значение в объект и передайте ссылку на объект
Вместо сохранения значения в простой переменной вы можете сохранить его как свойство объекта, а затем передать ссылку на этот объект. Объекты в Javascript передаются через ptr, поэтому некоторые другие функции, которым вы передаете объект, могут напрямую изменять его свойства.
Затем, внутри moduleS, вы можете изменить свойства a напрямую:
Первый способ - это возврат в вашу change функцию в second.js .
Второй способ - использовать объект в качестве параметра, чтобы передать его по ссылке:
Я искал способ редактировать JavaScript в браузере, например Firefox, на лету и выполнять его. Firebug позволяет редактировать HTML и CSS на лету, но JavaScript-это боль. Я должен вернуться к источнику и изменить это.
Я не понимаю, почему инструменты разработчика браузера не позволяют редактировать. Есть ли способ сделать это?
[обновление]: Отмечен новый ответ в 2015 году
- IE теперь предоставляет один из лучший опыт разработки / отладки
- Chrome предоставляет IntelliSense при написании javaScript, что круто
- FF работает так же, как 2010.
можно использовать все три (Firefox, Internet Explorer и Chrome) консоли браузера для обновления существующей функции: скажем, у меня была функция a() который использовал для консоли.log ('a'), я могу перейти к консоли, переопределить функцию a() as alert('a') и запустить его снова, чтобы увидеть предупреждение коробка.
когда я задал этот вопрос в 2010 году, браузеры не были так хороши в отладке JavaScript, а также я, вероятно, не знал, что функция может быть заменена на лету.
В Chrome: Откройте панель Chrome DevTools - > Sources, перейдите в левую навигацию или нажмите Ctrl + O для открытия файлов, включенных в страницу.
затем вы можете отредактировать файл и нажать Ctrl + S , чтобы сохранить изменения, и посмотреть, что происходит с новыми кодами. Обычно я делаю это с помощью брейк-пойнтов.
Если вы отлаживаете и хотите сохранить изменения в локальной файловой системе, вы можете щелкнуть правой кнопкой мыши по навигации и выбрать Добавить папку в рабочую область:
в таком случае, если вы сохраните изменения в DevTools, соответствующий файл в вашей файловой системе также будет обновлен.
например добавляю папку в рабочую область, в ней есть 1.js:
затем я редактирую файл JS в DevTools, изменение обновляется в локальной файловой системе сразу же:
конечно, я нашел Execute JS (для firefox) иногда полезным, и я думаю, что это то, что вы ищете:
Он позволяет просматривать и изменять Javascript на Вашей странице.
Chrome имеет довольно сильную функцию для внесения изменений в код JS. Вы в основном устанавливаете некоторые точки останова и после того, как вы редактируете JS по своему желанию. дополнительная информация и демо -- где Пол Айриш исправляет сломанную страницу.
в случае FF вы можете использовать Developer Edition:
Отладчик JavaScript Стоп, пошагово, изучить и изменить JavaScript в страницу.
Chrome предоставляет отличное средство для редактирования javascript в браузере
step1: запустите инструмент разработки Откройте Chrome, загрузите страницу из локальной файловой системы / сервера и откройте "инструменты разработчика" в меню "Инструменты" или нажмите Ctrl+Shift+I / Cmd+Shift+I. перейдите на вкладку "Источник", затем щелкните значок "источники" или нажмите Ctrl+O, чтобы выбрать файл JavaScript
setp2: изменить Теперь вы можете сразу перейти к редактированию кода. Chrome также предлагает полезный список функций, который поможет вам найти нужную строку-нажмите Ctrl+Shift+O / Cmd+Shift+O
Шаг 3:сохранить Нажмите Ctrl+S / Cmd+S, чтобы сохранить изменения. Это обновляет файл в памяти и немедленно применяет изменения. Примечание однако этот код не запустится снова, поэтому изменения переменных инициализации не будут затронуты.
, чтобы сохранить изменения в исходный файл, щелкните правой кнопкой мыши редактор и выберите сохранить или Сохранить как. Однажды готово, вы можете обновить страницу и скрипт перезапустится
Шаг 4: отменить Ваше обновление вызвало проблему? Щелкните правой кнопкой мыши редактор и выберите локальные изменения. Нижняя панель отображает все последние изменения и позволяет вернуться назад.
Firefox предоставляет еще один инструмент для редактирования JavaScript в браузере
setp1: запуск Scratchpad Чтобы открыть окно "Блокнот", нажмите Shift F4 или перейдите в меню веб-разработчика (подменю в меню Сервис на OS X и Linux), затем выберите Scratchpad. Откроется окно редактора Scratchpad. Оттуда вы можете сразу начать писать код JavaScript, чтобы попробовать.
Шаг 2: редактирование Меню Файл предлагает опции для сохранения и загрузки фрагментов кода JavaScript, так что вы можете использовать код позже, если хотите.Информация о завершении кода и типе доступна только в Firefox 32 и далее. Чтобы вывести список предложений автозаполнения, нажмите Ctrl пробел. Чтобы отобразить всплывающее окно, нажмите Shift Space в Firefox 32 или Ctrl Shift Space в Firefox 33+.
Шаг 3:Выполнение После написания кода выберите код, который вы хотите запустить. Если вы ничего не выберете, будет запущен весь код в окне. Затем выберите способ запуска кода с помощью кнопок вверху, меню "Выполнить" или контекстного меню. Код выполняется в области текущей выбранной вкладки. Любые переменные, объявленные вне функции, будут добавлены в глобальный объект для эту вкладку.
доступно четыре варианта выполнения.
- выполнить
- проверить
- дисплей
- перезагрузить и запустить
для создания / редактирования javascript в браузере я бы использовал firebug(плагин для firefox) или встроенная панель инструментов разработчика firefox(лучше всего использовать с версия для разработчиков firefox).
Так. как только вы создадите это JS snippet, который исправляет сайт для вас, вы можете использовать GreaseMonkey(плагин)для выполнения скрипта фиксации сайта при каждом посещении. Таким образом, вы можете нормально использовать сайт и не выполнять его вручную при каждой загрузке страницы.
в настоящее время это невозможно в Firefox OTB. Смотрите Ошибки 737743 и 486546.
в отношении @artur-grzesiak, "стоп, шаг через, изучить и изменить", как представляется, относится к переменные
в chrome версии 42.0.2311 в Developer Tool, нажав на консоли вы можете получить окно, где вы можете редактировать javascript и после нажатия enter можно увидеть его эффект в браузере.
в Mozilla версии 37.0.1 после открытия инструмента разработчика нажмите на консоли редактировать код сценария java в правой части окна инструмента и после завершения редактирования нажмите на run, чтобы проверить код сценария java в браузере.
Как изменить значение переменной в JavaScript? Его можно увеличить или уменьшить при помощи обычных арифметических операций. Но есть и другие способы.
Рассмотрим сокращенные арифметические операции в JavaScript. Сокращенное сложение, вычитание, умножение.
А также сокращенное увеличение и уменьшение значения переменной на единицу i++ , i-- .
Присвоение нового значения переменной
Значение переменной легко изменить, если присвоить ей новое значение .
В этом легко убедиться, если вывести на экран окна браузера те значения переменной, которые были в нее занесены.
Как Вы помните, для вывода информации в окно браузера используется метод write() объекта document.
<script type= "text/javascript" >
var price = 200;
var name = "Ксения";
document . write (price);
document . write (name);
//Ранее в переменную price было занесено значение 200. Его легко изменить, если присвоить переменной иное значение.
var price = 700;
//Теперь то, что было в переменной price Стерто. В этом легко убедиться.
document . write (price);
Увеличение или уменьшение значения переменной
Чтобы увеличить значение переменной необходимо выполнить операцию сложения или умножения этой переменной с нужным числом.
Соответственно, для уменьшения значения переменной нужно вычесть из нее какое-либо число или разделить ее на определенное число.
Таким образом изменить значение переменной в JavaScript легко.
<script type= "text/javascript" >
var count = 121;
count = count + 21;
document . write (count);
Сокращенные арифметические операции
Существуют сокращённые варианты записи арифметических операций над переменными: сокращенное сложение, вычитание, умножение или деление.
Сейчас мы их рассмотрим на тот случай , чтобы Вы не терялись, встретив где-либо в коде или в литературе подобные выражения.
Рассмотрим ранее приведённый пример.
Выражение count = count + 21 можно записать иначе.
<script type= "text/javascript" >
var count = 121;
count += 21; /* Это сокращенный вариант записи выражения count = count + 21; */
document . write (count);
var count = 121;
count -= 21; /* Это сокращенный вариант записи выражения count = count - 21; */
document . write (count);
var count = 121;
count *= 10; /* Это сокращенный вариант записи выражения count = count * 10; */
document . write (count);
Повторим ещё раз, такие записи как: count += 21 и count -= 21 означают сокращенное сложение или вычитание в JavaScript.
То есть при этом изменяется текущее значение переменной: к нему прибавляется или из него вычитается указанное число (или оно умножается, делится на это число).
Увеличение и уменьшение переменной на единицу
Ещё одним вариантом сокращённых арифметических операций, которые нередко используют при изменении значений переменных в JavaScript , являются сокращённые увеличение или уменьшение значения переменной на единицу.
Запись count++ означает увеличение текущего значения переменной на единицу.
Запись count-- говорит об уменьшени текущего значения переменной на единицу.
var count = 121;
count++; /* увеличение текущего значения переменной на единицу */
document . write (count);
var count = 121;
count--; /* уменьшение текущего значения переменной на единицу */
document . write (count);
Вот так, сокращенно и поэтому быстро и просто можно увеличить или уменьшить значение переменной на единицу в JavaScript.
Читайте также: