Как запустить код javascript в браузере

Как запустить код javascript в браузере

Run JavaScript in the Console

Published on Wednesday, April 18, 2018

Technically, I’m a writer

This interactive tutorial shows you how to run JavaScript in the Chrome DevTools Console. See Get Started With Logging Messages to learn how to log messages to the Console. See Get Started With Debugging JavaScript to learn how to pause JavaScript code and step through it one line at a time.

Figure 1. The Console.

# Overview

The Console is a REPL, which stands for Read, Evaluate, Print, and Loop. It reads the JavaScript that you type into it, evaluates your code, prints out the result of your expression, and then loops back to the first step.

# Set up DevTools

This tutorial is designed so that you can open up the demo and try all the workflows yourself. When you physically follow along, you’re more likely to remember the workflows later.

Press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, ChromeOS) to open the Console, right here on this very page.

Figure 2. This tutorial on the left, and DevTools on the right.

# View and change the page’s JavaScript or DOM

When building or debugging a page, it’s often useful to run statements in the Console in order to change how the page looks or runs.

Notice the text in the button below.

Type document.getElementById(‘hello’).textContent = ‘Hello, Console!’ in the Console and then press Enter to evaluate the expression. Notice how the text inside the button changes.

Figure 3. How the Console looks after evaluating the expression above.

Below the code that you evaluated you see «Hello, Console!» . Recall the 4 steps of REPL: read, evaluate, print, loop. After evaluating your code, a REPL prints the result of the expression. So «Hello, Console!» must be the result of evaluating document.getElementById(‘hello’).textContent = ‘Hello, Console!’ .

# Run arbitrary JavaScript that’s not related to the page

Sometimes, you just want a code playground where you can test some code, or try out new JavaScript features you’re not familiar with. The Console is a perfect place for these kinds of experiments.

Type 5 + 15 in the Console. The result 20 will appear below your expression (unless your expression takes too much time to evaluate).

Press Enter to evaluate the expression. The Console prints the result of the expression below your code. Figure 4 below shows how your Console should look after evaluating this expression.

Type the following code into the Console. Try typing it out, character-by-character, rather than copy-pasting it.

See define default values for function arguments if you’re unfamiliar with the b=20 syntax.

Now, call the function that you just defined.

Figure 4. How the Console looks after evaluating the expressions above.

add(25) evaluates to 45 because when the add function is called without a second argument, b defaults to 20 .

You will not be able to run any code in this console session until your function has returned. If that takes too long, you can use the Task Manager to cancel the time-intensive computation; however, it will also cause the current page to fail and all data you have entered will be lost.

# Next steps

See Run JavaScript to explore more features related to running JavaScript in the Console.

DevTools lets you pause a script in the middle of its execution. While you’re paused, you can use the Console to view and change the page’s window or DOM at that moment in time. This makes for a powerful debugging workflow. See Get Started With Debugging JavaScript for an interactive tutorial.

The Console also supports a set of format specifiers. See Format and style messages in the Console to explore all the method to format and style console messages.

Apart from that, the Console also has a set of convenience functions that make it easier to interact with a page. For example:

• Rather than typing document.querySelector() to select an element, you can type $() . This syntax is inspired by jQuery, but it’s not actually jQuery. It’s just an alias for document.querySelector() .
• debug(function) effectively sets a breakpoint on the first line of that function.
• keys(object) returns an array containing the keys of the specified object.

See Console Utilities API Reference to explore all the convenience functions.

Как запустить код, написанный на JavaScript?

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

6 ответов

откройте редактор. Самый простой — это блокнот.

Напишите основной HTML-код, например, ниже

Добавьте тег script и напишите js внутри него, как показано ниже

или вы можете написать свой js-код в файле и сохранить как .js файл и ссылку, указанную в приведенном выше коде

Сохраните это как ваш файл .HTML и откройте в любом браузере

Запустите javascript в своем браузере, просто используйте следующие методы:

1. используйте jsfiddle.net

2. используйте консоль разработчика в своем браузере (как открыть консоль в Chrome/Firefox/Safari, которую вы можете прочитать в Wiki)

3. напишите свой собственный файл с расширением .html и поместите его:

в файл, сохранить файл и открыть его в браузере.

Каждый метод имеет свои преимущества при обнаружении JS. Мы, разработчики, каждый день используем все эти методы.

Введение в JavaScript — простой вывод

Изучение Node.js, JQuery, и Angular.js может быть очень веселым, но я думаю, что иметь некие базовые знания очень важно, и знать, как использовать простой JavaScript. Эта серия статей посвятит вас в JavaScript.

Прежде, чем мы перейдем к синтаксису, давайте узнаем, где мы можем запустить JavaScript.

Традиционно JavaScript использовался внутри браузеров, таких как Mozilla Firefox, Internet Explorer, Chrome, Opera, или Safari. Авторы добавляют JavaScript код в HTML страницы, которые получают пользователи, посещая веб-сайт. JavaScript код выполняется в браузере (то, что мы называем «на стороне клиента», в отличие от запуска «на стороне сервера»).

В последнее время люди начали использовать JavaScript также и на сервере. Возможно, самая известная среда для работы JavaScript на сервере это Node.js, но есть и другие. К примеру, io.js (форк от Node.js).

Мы можем выделить три основные части того, что мы обычно называем «JavaScript».

1. Сам язык. Он достаточно стандартный среди различных сред, как на стороне браузера, так и сервера.
2. DOM API — как язык может взаимодействовать с различными частями веб страницы в браузере. И, хотя с этой стороны браузеры достаточно близки друг к другу, все же они отличаются. Некоторые библиотеки, особенно заметна Query, пытаются предоставлять унифицированный API.
3. API на сервере (или просто API), предоставляемый Node.js или одной из других систем на стороне сервера.

В этой серии статей мы посмотрим все три основных компонента.

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

Редактор или IDE

Можно использовать любой текстовый редактор.

На MS Windows вы можете использовать даже встроенный Notepad, но я бы рекомендовал что-нибудь более функциональное. Вы можете скачать Notepad++, который очень похож на Notepad, но с кучей разных фич, или Aptana Studio. Научиться работать в последней будет сложнее, так что возможно, вы заходите начать с чего-то попроще.

Вставка или подключение

Вы можете как вставить JavaScript код прямо внутрь HTML файла, так и подключить внешний файл, содержащий весь JavaScript код. В большинстве случаев последнее предпочтительнее, но для нашего первого примера мы вставим JavaScript внутрь некоего HTML (просто для того, чтобы делать всю работу в одном файле).

Чтобы это сделать, мы просто добавляем открывающий тег <script> и закрывающий тег </script> . Между ними мы пишем наш JavaScript код.

Ввод и вывод

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

alert

Это покажет в браузере всплывающее окно (попап) с текстом. (Вы можете нажать Try! и страница откроется в отдельном окне). Функция alert() сейчас используется редко, но это простой способ продемонстрировать работу JavaScript.

examples/js/alert.html
Try!

Если хотите попробовать сделать это самостоятельно, откройте ваш редактор и создайте файл с расширением .html (например, hello.html) и вставьте код ниже в ваш файл. Затем вернитесь в браузер и откройте файл в браузере (большиство браузеров позволяет это сделать с помощью меню File/Open File).

document.write

examples/js/document_write.html
Try!

В этом примере у нас есть некоторый текст (First line), затем JavaScript код, а затем еще немного текста (Last line). Этот код на JavaScript использует функцию document.write для изменения содержимого страницы. Он просто вставит <h1>Hello World</h1> после «First line», но до «Last line».

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

console.log

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

examples/js/console.html
Try!

Большинство веб-браузеров предоставляют то, что называется «JavaScript console». Это дополнительное окно (которое не видно в нормально режиме), где браузер выводит предупреждения и ошибки, сгенерированные кодом JavaScript. Разработчики также могут выводить информацию в эту консоль с помощью вызова console.log() .

Для того, чтобы увидеть консоль, вам нужно будет ее открыть. Если вы используете Chrome на OSX вы можете открыть консоль с помощью Command-Option-J .

Для чего используется JavaScript и как его запустить

JavaScript де-факто является языком для создания веб-приложений, поскольку это единственный язык, поддерживаемый браузерами. Со временем JavaScript превратился из простого языка программирования для Интернета в кроссплатформенный объектно-ориентированный язык программирования, то есть язык программирования, поддерживаемый несколькими операционными системами, и он следует парадигме объектно-ориентированного программирования, где все является объектом.

Как запустить код на JavaScript?

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

Если вы хотите раскрыть все возможности JavaScript и использовать его в качестве языка программирования, вам необходимо установить Node.js. После установки ноды (сокр. от Node) используйте следующую команду, чтобы проверить, правильно ли она установлена.

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

Основы JavaScript

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

Типы данных

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

Строка

Строки — это тип данных, используемый для хранения текстовых значений. Чтобы определить строку, используйте одинарные или двойные кавычки.

Вы также можете использовать обратные кавычки («) для многострочных строк или строкового шаблона ($<. >) , где данные передаются в строку между символом доллара и фигурными скобками.

Число

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

Логический тип

Логические значения могут использоваться для хранения истинных значений, то есть true или false .

Undefined

Undefined используется для определения значения, которое еще не было определено.

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

Null

Null используется для определения отсутствия значения.

Условные конструкции

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

В данном примере, мы выводим текст в консоль только в том случае, если переменная shouldLog истинна.

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

Операторы сравнения

Рассмотрим следующий пример x = 5

Также поддерживаются операторы == и != , но их использование не рекомендуется, поскольку они приводят к неожиданным результатам, например:

Логические операторы

Рассмотрим следующий пример x = 5 и y = 3

Массивы

Если вы хотите сохранить коллекцию элементов в переменной, вы можете использовать массивы.

Циклы

JavaScript поддерживает циклы for и while .

Цикл for

Циклы For — лучший выбор, если известно количество итераций цикла.

Цикл whil

Циклы while эффективны, когда вы не знаете, сколько итераций будет выполняться. Он принимает условие и продолжает выполняться, пока условие не станет истинным.

var vs let vs const

JavaScript позволяет вам определять элементы данных с помощью var , let и const , когда использовать какие? var создает глобальную переменную, let создает переменную с локальной областью видимости, то есть она будет существовать только внутри блока, в котором она определена, а const используется для создания константы.

Использование JavaScript в браузере

Использование JavaScript в браузере дает вам доступ к DOM или объектной модели документа, которая позволяет вам управлять HTML с помощью JavaScript.

Допустим, у вас есть input на вашей странице:

Вы можете получить доступ к input в вашем сценарии JavaScript и изменить его по своему желанию или добавить слушателей событий ( event listeners ) в

Использование JavaScript с Node.js

Если вы используете JavaScript с Node.js, вы не можете получить доступ к DOM, поскольку он создается браузером, но вы сможете получить доступ к файловой системе, чего вы не можете сделать при использовании JavaScript из браузера.

Для запуска скрипта используйте команду:

Заключение

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