Как запустить джава скрипт на пк windows - Доктор Windows

В этом уроке вы узнаете, как запустить JavaScript на вашем компьютере разными способами. А еще напишите первую программу Hello, world!

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

Из-за широкого спектра применения JavaScript можно запустить несколькими способами:

через вкладку «Консоль» в веб-браузере;
с помощью Node.js
с помощью веб-страницы.

Через вкладку «Консоль» в браузере

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

Шаг 1. Откройте любой браузер (мы будем использовать Google Chrome).

Шаг 2. Откройте инструменты разработчика. Для этого щелкните правой кнопкой мыши на пустой области и выберите пункт «Просмотреть код» (Inspect). Горячая клавиша: F12.

Шаг 3. В инструментах разработчика перейдите на вкладку «Консоль» (Console). Здесь уже можно писать код на JavaScript. Попробуйте ввести console.log("Hello, world!") и нажмите Enter, чтобы запустить код.

С помощью Node.js

Node — среда выполнения кода JavaScript вне браузера. Вот, как запустить JS с помощью Node.js:

Шаг 1. Установите последнюю версию Node.js.

Шаг 2. Установите IDE или текстовый редактор. Мы будем использовать Visual Studio Code.

Шаг 3. В VS Code перейдите в Файл > Новый файл и напишите код на JS. Сохраните файл с расширением .js. Мы написали программу, которая выводит на экран строку «Hello, world!», поэтому файл будет называться helloworld.js.

Шаг 4. Откройте терминал/командную строку, перейдите к расположению файла (используйте команду cd <путь>). Введите node helloworld.js и нажмите Enter. Вывод появится в терминале.

Примечание. JavaScript-код можно написать и запустить непосредственно в терминале. Для этого просто введите node и нажмите Enter.

С помощью веб-страницы

JavaScript изначально создавали для того, чтобы сделать веб-страницы интерактивными, поэтому JavaScript и HTML идут рука об руку. Вот, как запустить код на JS с помощью веб-страницы:

Шаг 1. Откройте VS Code. Перейдите в Файл > Новый файл. Сохраните файл с расширением .html. У нас это будет main.html.

Шаг 2. Скопируйте doctype, расположенный ниже. Это необходимый для запуска HTML-страницы код. Сохраните скопированный текст в файле.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Codechick</title>
</head>

<body>
  <script src=""></script>
</body>
</html>

Шаг 3. Аналогично создайте файл с расширением .js. Напишите в файле следующий JS-код и сохраните его. У нас это будет helloworld.js.

console.log("Hello, world!");

Шаг 4. Вернитесь к файлу main.html и на 11 строке впишите название JS-файла. В нашем случае это будет выглядеть так:

Шаг 5. Откройте main.html с помощью браузера.

Шаг 6. Чтобы проверить, запустился ли ваш JS-код, щелкните правой кнопкой мыши в свободной области, нажмите «Просмотреть код» и перейдите на вкладку «Консоль».

Теперь, когда вы знаете, как запустить JavaScript, приступим к изучению основ JS.

Источник

Подключение и выполнение javascript

Подключение в любом месте
Вынос скриптов в заголовок HEAD
Внешние скрипты

В этом разделе мы понемногу рассмотрим все основные элементы javascript. Это позволит тут же писать и тестировать простейшие скрипты.

Javascript подключается напрямую в HTML-файл. Самый простой способ — это написать javascript-команды внутрь тега <script> где-нибудь в теле страницы.

Подключение в любом месте

Когда браузер читает HTML-страничку, и видит <script> — он первым делом читает и выполняет код, а только потом продолжает читать страницу дальше.

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

<html>
<body>
    <h1>Считаем кроликов</h1>

    *!*
    <script type="text/javascript">
        for(var i=1; i<=3; i++) {
            alert("Из шляпы достали "+i+" кролика!")
        }
    </script>
    */!*
    <h1>...Посчитали</h1>
</body>
</html>

В этом примере использовались следующие элементы.

<script type=»text/javascript»> … </script>: Тег <script> сообщает браузеру о том, что внутри находится исполняемый скрипт. Атрибут type говорит о том, что это javascript. Вообще говоря, атрибут может отсутствовать — разницы нет, но с точки зрения стандарта его следует указать.
Конструкция for: Обычный цикл, по синтаксису аналогичный другим языкам программирования.
Объявление var i: Объявление переменной внутри цикла: i — локальная переменная.
Функция alert: Выводит сообщение на экран и ждет, пока посетитель не нажмет ОК

Вынос скриптов в заголовок `HEAD`

Обычно javascript стараются отделить от собственно документа.

Для этого его помещают внутрь тега HEAD, а в теле страницы по возможности оставляется чистая верстка.

В следующем примере javascript-код только описывает функцию count_rabbits, а ее вызов осуществляется по нажатию на кнопку input.

<html>

    <head>
        *!*
        <script type="text/javascript">
            function count_rabbits() {
                for(var i=1; i<=3; i++) {
                   // оператор + соединяет строки
                   alert("Из шляпы достали "+i+" кролика!")
                }
            }
         </script>
         */!*
    </head>

    <body>
         *!*<input type="button" onclick="count_rabbits()" value="Считать кролей!"/>*/!*
    </body>

</html>

Для указания запускаемой по клику функции в input был использован атрибут onclick. Это лишь вершина мощного айсберга javascript-событий.

Внешние скрипты

Обычно javascript-код вообще не пишут в HTML, а подключают отдельный файл со скриптом, вот так:

<script src="/my/script.js"></script>

При этом файл /my/script.js содержит javascript-код, который иначе мог бы находиться внутри тега <script>.

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

Чтобы подключить несколько скриптов — используйте несколько таких тегов:

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
...

При указании атрибута src содержимое тега игнорируется.

То есть одновременно подключить внешний файл и написать что-то внутри тега нельзя. Придется делать два разных тега <script>: первый с src, второй — с командами, которые будут выполнены после выполнения внешнего файла.

Современное оформление тэга <script>.

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

Однако, знать это полезно хотя бы для того, чтобы сразу отличать современный и профессиональный скрипт от написанного эдак лет 5-6 назад.

Атрибут <script type=...>

По стандарту этот атрибут нужен для указания языка скрипта, но по умолчанию принят javascript, поэтому даже атрибута type нет — все работает ок. Но валидатор будет ругаться, т.к стандарт требует этот атрибут.

Иногда используют <script type="text/html"> как оригинальный способ добавить неотображаемые данные на страницу. Браузер не исполняет и не показывает <script> с неизвестным типом. В этом плане он ничем не отличается от обычного <div> с вечным style="display:none".

Атрибут <script language=...>

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

Комментарии до и после скрипта

В старых руководствах по javascript встречается указание «прятать» javascript-код от старых браузеров, заключая его в HTML-комментарии <!— … —>.

Браузер, от которого прятали код (старый Netscape), давно умер. Современные браузеры комментарии просто игнорируют. Не ставьте их.

Источник

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

Это руководство, по замыслу автора, рассчитано на тех, кто уже немного знаком JavaScript и хочет привести свои знания в порядок а также узнать о языке что-то новое. Мы решили немного расширить аудиторию этого материала, включить в неё тех, кто совершенно ничего не знает о JS, и начать его с написания нескольких вариантов «Hello, world!».

→ Часть 1: первая программа, особенности языка, стандарты
→ Часть 2: стиль кода и структура программ
→ Часть 3: переменные, типы данных, выражения, объекты
→ Часть 4: функции
→ Часть 5: массивы и циклы
→ Часть 6: исключения, точка с запятой, шаблонные литералы
→ Часть 7: строгий режим, ключевое слово this, события, модули, математические вычисления
→ Часть 8: обзор возможностей стандарта ES6
→ Часть 9: обзор возможностей стандартов ES7, ES8 и ES9

Hello, world!

Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.

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

Для того чтобы её написать, если вы пользуетесь Google Chrome, откройте меню браузера и выберите в нём команду Дополнительные инструменты > Инструменты разработчика. Окно браузера окажется разделённым на две части. В одной из них будет видна страница, в другой откроется панель с инструментами разработчика, содержащая несколько закладок. Нас интересует закладка Console (Консоль). Щёлкните по ней. Не обращайте внимания на то, что уже может в консоли присутствовать (для её очистки можете воспользоваться комбинацией клавиш Ctrl + L). Нас сейчас интересует приглашение консоли. Именно сюда можно вводить JavaScript-код, который выполняется по нажатию клавиши Enter. Введём в консоль следующее:

console.log("Hello, world!")

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

После того, как текст программы оказался в консоли, нажмём клавишу Enter.

Если всё сделано правильно — под этой строчкой появится текст Hello, world!. На всё остальное пока не обращайте внимания.

Первая программа в консоли браузера — вывод сообщения в консоль

Ещё один вариант браузерного «Hello, world!» заключается в выводе окна с сообщением. Делается это так:

alert("Hello, world!")

Вот результат выполнения этой программы.

Вывод сообщения в окне

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

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

Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js, которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега <script>. Когда браузер обнаруживает такой код, он выполняет его. Подробности о теге script можно посмотреть на сайте w3school.com. В частности, рассмотрим пример, демонстрирующий работу с веб-страницей средствами JavaScript, приведённый на этом ресурсе. Этот пример можно запустить и средствами данного ресурса (ищите кнопку Try it Yourself), но мы поступим немного иначе. А именно, создадим в каком-нибудь текстовом редакторе (например — в VS Code или в Notepad++) новый файл, который назовём hello.html, и добавим в него следующий код:

<!DOCTYPE html>
<html>
  <body>
    <p id="hello"></p>

    <script>
      document.getElementById("hello").innerHTML = "Hello, world!";
    </script>
  </body>
</html>

Здесь нас больше всего интересует строчка document.getElementById("hello").innerHTML = "Hello, world!";, представляющая собой JS-код. Этот код заключён в открывающий и закрывающий теги <script>. Он находит в документе HTML-элемент с идентификатором hello и меняет его свойство innerHTML (то есть — тот HTML код, который содержится внутри этого элемента) на Hello, world!. Если открыть файл hello.html в браузере, на ней будет выведен заданный текст.

Сообщение, выведенное средствами JavaScript в HTML-элемент

Как уже говорилось, примеры, приводимые на сайте w3school.com, можно тут же и попробовать. Существуют и специализированные онлайн-среды для веб-разработки, и, в частности, для выполнения JS-кода. Среди них, например codepen.io, jsfiddle.net, jsbin.com.

Вот, например, как выглядит наш пример, воссозданный средствами CodePen.

В поле HTML попадает код, описывающий HTML-элемент, в поле JS — JavaScript-код, а в нижней части страницы выводится результат.

Выше мы говорили о том, что JavaScript-программы можно выполнять на различных платформах, одной из которых является серверная среда Node.js. Если вы собираетесь изучать JavaScript, ориентируясь именно на серверную разработку, вероятно, вам стоит запускать примеры именно средствами Node.js. Учтите, что, говоря упрощённо, и не учитывая особенности поддержки конкретных возможностей языка используемыми версиями Node.js и браузера, в Node.js и в браузере будет работать один и тот же код, в котором используются базовые механизмы языка. То есть, например, команда console.log("Hello, world!") будет работать и там и там. Программы, использующие механизмы, специфичные для браузеров, в Node.js работать не будут (то же самое касается и попыток запуска программ, рассчитанных на Node.js, в браузере).

Для того чтобы запустить наш «Hello, world!» в среде Node.js, установим Node.js, скачав отсюда подходящий дистрибутив. Теперь создадим файл hello.js и поместим в него следующий код:

console.log('Hello, World!');

Средствами командной строки перейдём в папку, в которой хранится этот файл, и выполним такую команду:

node hello.js

Вот каким будет результат её выполнения:

Сообщение, выведенное средствами Node.js

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

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

Общие сведения о JavaScript

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

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

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

Основные характеристики JavaScript

JavaScript — это язык, который отличается следующими особенностями:

Высокоуровневый. Он даёт программисту абстракции, которые позволяют не обращать внимание на особенности аппаратного обеспечения, на котором выполняются JavaScript-программы. Язык автоматически управляет памятью, используя сборщик мусора. Разработчик, в результате, может сосредоточиться на решении стоящих перед ним задач, не отвлекаясь на низкоуровневые механизмы (хотя, надо отметить, это не отменяет необходимости в рациональном использовании памяти). Язык предлагает мощные и удобные средства для работы с данными различных типов.
Динамический. В отличие от статических языков программирования, динамические языки способны, во время выполнения программы, выполнять действия, которые статические языки выполняют во время компиляции программ. У такого подхода есть свои плюсы и минусы, но он даёт в распоряжение разработчика такие мощные возможности, как динамическая типизация, позднее связывание, рефлексия, функциональное программирование, изменение объектов во время выполнения программы, замыкания и многое другое.
Динамически типизированный. Типы переменных при JS-разработке задавать необязательно. В одну и ту же переменную можно, например, сначала записать строку, а потом — целое число.
Слабо типизированный. В отличие от языков с сильной типизацией, языки со слабой типизацией не принуждают программиста, например, использовать в неких ситуациях объекты определённых типов, выполняя, при необходимости, неявные преобразования типов. Это даёт больше гибкости, но JS-программы не являются типобезопасными, из-за этого усложняются задачи проверки типов (на решение этой проблемы направлены TypeScript и Flow).
Интерпретируемый. Широко распространено мнение, в соответствии с которым JavaScript является интерпретируемым языком программирования, что означает, что программы, написанные на нём, не нуждаются в компиляции перед выполнением. JS в этом плане противопоставляют таким языкам, как C, Java, Go. На практике же браузеры, для повышения производительности программ, выполняют компиляцию JS-кода перед его выполнением. Этот шаг, однако, прозрачен для программиста, он не требует от него дополнительных усилий.
Мультипарадигменный. JavaScript не навязывает разработчику использование какой-то конкретной парадигмы программирования, в отличие, например, от Java (объектно-ориентированное программирование) или C (императивное программирование). Писать JS-программы можно, используя объектно-ориентированную парадигму, в частности — применяя прототипы и появившиеся в стандарте ES6 классы. Программы на JS можно писать и в функциональном стиле, благодаря тому, что функции здесь являются объектами первого класса. JavaScript допускает и работу в императивном стиле, используемом в C.

Да, кстати, надо отметить, что у JavaScript и Java нет ничего общего. Это — совершенно разные языки.

JavaScript и стандарты

ECMAScript, или ES, это название стандарта, которым руководствуются разработчики JavaScript-движков, то есть — тех сред, где выполняются JS-программы. Различные стандарты вводят в язык новые возможности, говоря о которых нередко упоминают наименование стандартов в сокращённой форме, например — ES6. ES6 — это то же самое, что и ES2015, только в первом случае число означает номер версии стандарта (6), а во втором — год принятия стандарта (2015).

Сложилось так, что в мире веб-программирования очень долго был актуален стандарт ES3, принятый в 1999 году. Четвёртой версии стандарта не существует (в неё попытались добавить слишком много новых возможностей и так и не приняли). В 2009 году был принят стандарт ES5, который представлял собой прямо-таки огромное обновление языка, первое за 10 лет. После него, в 2011 году, был принят стандарт ES5.1, в нём тоже было немало нового. Весьма значительным, в плане новшеств, стал и стандарт ES6, принятый в 2015 году. Начиная с 2015 года, новые версии стандарта принимают каждый год.

Самой свежей версией стандарта на момент публикации этого материала является ES9, принятая в июне 2018 года.

Итоги

Сегодня мы написали «Hello, World!» на JavaScript, рассмотрели основные особенности языка и поговорили о его стандартизации. В следующий раз поговорим о стиле JavaScript-текстов и о лексической структуре программ.

Уважаемые читатели! Если вы, до чтения этого материала, не были знакомы с JavaScript, просим рассказать о том, получилось ли у вас запустить «Hello, world!».

Источник

Если вы только сели за изучение JavaScript, то у вас очень быстро возникнет вопрос: а как запустить код?

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

Node.js — среда выполнения JavaScript-кода. Она создана на базе движка V8, который крутится в сердце браузера Chrome. Эта среда позволяет запускать JavaScript-сценарии в окружении операционной системы, а не браузера.

Кроме стандартных возможностей JavaScript, Node.js даёт инструменты для работы с сетью, вводом и выводом, файловой системой и не только. В придачу к среде идёт и пакетный менеджер npm, который позволяет разработчикам ставить сторонние пакеты в одну строку.

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

Давайте попробуем

Сначала установим среду с сайта разработчиков и проверим в консоли, что всё прошло нормально.

Введём простую команду:

>node --version

Результат, который мы получили:

v8.11.3

Готово! Среда успешно установлена и готова к действиям. Теперь запустить скрипт можно прямо в консоли, предварительно запустив node.

Рассмотрим пару простых примеров. По традиции выведем Hello world!:

console.log('Hello, world!');

Hello world!

Вроде ничего неожиданного, кроме undefined в конце. Дело в том, что в JavaSсript функция всегда возвращает какое-то значение. Если автор функции опустил return, то считается, что она возвращает undefined. Именно это значение и выводит нам Node.js.

Попробуем пример сложнее, например, цикл выводов. Как консоль отреагирует на него?

Цикл выводов

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

Например, случайно пропустим букву в команде:

Упс, ошибка

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

Усложняем задачу

Попробуем перейти к чуть более продвинутому использованию среды.

Создайте на жёстком диске папку для проекта и положите туда ваш готовый скрипт. Назовите его index.js — так принято. Если под рукой скрипта нет, то возьмите цикл с выводом простого значения, с которого мы начали.

Для инициализации проекта необходимо создать файл package.json. Как это сделать?

Первый способ — открыть папку проекта в консоли и выполнить команду npm init. Это запустит инициализацию проекта. Пользователю предстоит ввести имя, версию и ряд других значений. Как результат, в папке проекта появится файл package.json.

Второй способ — самостоятельно создать текстовый файл, назвать его package.json и заполнить все необходимые поля. Файл будет представлением приложения, в котором содержится его имя, версия, авторы и зависимости. На данном этапе может выглядеть так:

{
	"name": "simple app",
	"version": "0.0.1",
	"author": "Buyanov K.M.",
	"scripts": {
		"start": "node index.js"
	}
}

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

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

Воспринимайте npm start как синоним команды node index.js. Учитывая, что окно терминала встроено в большинство современных сред разработки, синоним помогает ускорить работу над приложением.

Но вводить команду постоянно — не слишком рациональное расходование времени. Давайте упростим себе жизнь.

Находясь в папке проекта введём команду npm install express --save. Пакетный менеджер установит в папку компоненты фреймворка express, в котором содержатся необходимые компоненты для написания простого HTTP-сервера.
После установки файл package.json изменится, в нём появится поле dependencies.
Теперь создадим рядом в папке проекта новый файл static-file-server.js. В нём будет содержаться код сервера.

Скопируйте в файл следующий код:

var express = require('express'),
	app = express();	
app.set('port', 8080);
app.use(express.static(__dirname));
app.listen(app.get('port'), function() {
    console.log('Server started: http://localhost:' + app.get('port') + '/');
});

Вернитесь в package.json. Измените значение команды start следующим образом:
```
"start": "node static-file-server.js"
```

Подробнее про команды можно прочитать здесь.

Что мы сделали

Теперь при вводе команды npm start будет запускаться наш сервер, который будет обрабатывать всё содержимое нашего приложения.

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

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

Источник

I thought for some simple tests that just run a few commands i would try using some JavaScript and run it from the command line in Windows XP.

So for a quick test I created a script

alert('Hello, World!');

Then tried to run it

D:>Cscript.exe hello.js
Microsoft (R) Windows Script Host Version 5.7
Copyright (C) Microsoft Corporation. All rights reserved.

D:hello.js(1, 1) Microsoft JScript runtime error: Object expected

Google has not helped and I am sure I am missing something silly, can any of you guys shed any light on why this simple script doesn’t run?

j08691

201k31 gold badges257 silver badges270 bronze badges

asked Aug 21, 2012 at 15:45

You are calling a function called alert, but this is not part of JavaScript (it is part of DOM 0 and is provided by browsers)

Since you haven’t defined it, you are trying to treat undefined as a function, which it isn’t.

Qnan suggests using the Echo method instead.

answered Aug 21, 2012 at 15:48

QuentinQuentin

892k122 gold badges1194 silver badges1314 bronze badges

Try a named function replace since WSH does not support the window.alert method.

if (!alert) alert = function foo(s){WScript.Echo(s)}
alert("hello world");

answered Aug 21, 2012 at 15:52

mplungjanmplungjan

164k27 gold badges173 silver badges234 bronze badges

A good approach is to redirect all of the usual output like in a following examples. It will allow you to test JavaScript designed for web without needing to rewrite.

test.js

var console = {
    info: function (s){
        WSH.Echo(s);
    }
}
var document = {
    write : function (s){
        WSH.Echo(s);
    }
}
var alert = function (s){
    WSH.Echo(s);
}

console.info("test");
document.write("test2");
alert("test3");

You can call the script like this:

Cscript.exe test.js firstParam secondParam

which will give you:

test
test1
test2

trlkly

6517 silver badges13 bronze badges

answered Sep 10, 2015 at 15:15

volkincvolkinc

2,1331 gold badge14 silver badges19 bronze badges

alert is a method of the browswer’s window object. The Window’s scripting host does not supply such an object.

answered Aug 21, 2012 at 15:49

Scott SauyetScott Sauyet

47.9k4 gold badges46 silver badges97 bronze badges

Microsoft’s JScript runtime compiler does not provide the native JavaScript popups as found in the DOM (Document Object Model) which is supported by all major browsers today. However, this can be done by wrapping a function (in your case alert) around the native MessageBox found in WSH (Windows Scripting Host) as with any other scripting language supported with WSH.

But, just to give you an easier option… try DeskJS. It’s a new console-style app for Windows that’s designed to run pure JavaScript (ECMAScript 5.1 as of currently) away from the browser and supports all the basic JavaScript popup boxes together with other nifty additions to the language. You may just love it more than the browser’s console…

answered Jan 14, 2016 at 21:04

Источник

I need to do some scripts in java script.
I am working on it but couldn’t find a few solutions to a few problems.

First of all I need a GOOD tutorial, but not for an internet page but for a DESKTOP script.

Things couldn’t find out like :
1) I wanted a simple message box in order to debug my program, I used:

var name = prompt("What is your name","Type Name Here");

When running it I get error of «Object expected»

2) Couldn’t find how to open a file

asked Oct 17, 2009 at 18:23

Boris RaznikovBoris Raznikov

2,3359 gold badges34 silver badges55 bronze badges

Based on your comments, I guess that you are attempting to run a JavaScript file directly on Windows. Double-clicking on a .js file in windows will (probably) run it in Windows Script Host.
The prompt() function will not work this way, since WSH provides a completely different API than browser-embedded engines.

The following code should accomplish your intentions. However if you want anything more than a simple popup, HTAs are the only way to do complex GUIs with JScript on the desktop.

var fso, ws, ts;
fso = new ActiveXObject('Scripting.FileSystemObject');
ws = WScript.CreateObject('WScript.Shell');

var ForWriting= 2;
ts = fso.OpenTextFile('foo.txt', ForWriting, true);
ts.WriteLine(new Date().getTime());
ts.Close();

ws.Popup('Wrote to file!');

var ForReading= 1;
ts = fso.OpenTextFile('foo.txt', ForReading, false);
var fileContents = ts.ReadLine();
ts.Close();

ws.Popup('The file contained: ' + fileContents);

WScript.Quit();

answered Oct 17, 2009 at 19:53

I have to ask: why is JavaScript the right tool for the job? Why not use a scripting language intended to be used this way, such as Python, Ruby, Lua, … etc?

If you are using Microsoft’s JScript (and it sounds like you are), look to the MSDN web site for help. The page here looks fairly good. Google can also help with that.

Assuming you don’t mind using Java, you could also use the Mozilla Rhino shell. But it doesn’t look like there is a standard way of reading from the console in JavaScript. (presumably since this is not something typically required in a JavaScript application…) The built in JavaScript functions in the shell seem fairly basic, but you can read a file.

There area also examples of using Rhino, which may be helpful. You can interface with the Java API to do whatever else you need to do.

Edit: I wrote this answer a long time ago; today I would use node.js. See their learning page.

answered Oct 17, 2009 at 19:37

mpontillompontillo

13.4k7 gold badges59 silver badges90 bronze badges

The latest prerelease of Opera acts as a runtime for JS applications.

They have tutorials describing how to use it.

I used: var name = prompt(«What is your name»,»Type Name Here»);

When running it I get error of «Object expected»

Presumably your runtime doesn’t implement prompt that in a way that is compatible with those arguments.

2) Couldn’t find how to open a file

This depends on the runtime you use. JS itself doesn’t have anything built in to read files (or display a prompt). You need an environment that provides those objects.

answered Oct 17, 2009 at 18:31

QuentinQuentin

892k122 gold badges1194 silver badges1314 bronze badges

Источник

I need to do some scripts in java script.
I am working on it but couldn’t find a few solutions to a few problems.

First of all I need a GOOD tutorial, but not for an internet page but for a DESKTOP script.

Things couldn’t find out like :
1) I wanted a simple message box in order to debug my program, I used:

var name = prompt("What is your name","Type Name Here");

When running it I get error of «Object expected»

2) Couldn’t find how to open a file

asked Oct 17, 2009 at 18:23

Boris RaznikovBoris Raznikov

2,3359 gold badges34 silver badges55 bronze badges

The following code should accomplish your intentions. However if you want anything more than a simple popup, HTAs are the only way to do complex GUIs with JScript on the desktop.

var fso, ws, ts;
fso = new ActiveXObject('Scripting.FileSystemObject');
ws = WScript.CreateObject('WScript.Shell');

var ForWriting= 2;
ts = fso.OpenTextFile('foo.txt', ForWriting, true);
ts.WriteLine(new Date().getTime());
ts.Close();

ws.Popup('Wrote to file!');

var ForReading= 1;
ts = fso.OpenTextFile('foo.txt', ForReading, false);
var fileContents = ts.ReadLine();
ts.Close();

ws.Popup('The file contained: ' + fileContents);

WScript.Quit();

answered Oct 17, 2009 at 19:53

I have to ask: why is JavaScript the right tool for the job? Why not use a scripting language intended to be used this way, such as Python, Ruby, Lua, … etc?

If you are using Microsoft’s JScript (and it sounds like you are), look to the MSDN web site for help. The page here looks fairly good. Google can also help with that.

There area also examples of using Rhino, which may be helpful. You can interface with the Java API to do whatever else you need to do.

Edit: I wrote this answer a long time ago; today I would use node.js. See their learning page.

answered Oct 17, 2009 at 19:37

mpontillompontillo

13.4k7 gold badges59 silver badges90 bronze badges

The latest prerelease of Opera acts as a runtime for JS applications.

They have tutorials describing how to use it.

I used: var name = prompt(«What is your name»,»Type Name Here»);

When running it I get error of «Object expected»

Presumably your runtime doesn’t implement prompt that in a way that is compatible with those arguments.

2) Couldn’t find how to open a file

This depends on the runtime you use. JS itself doesn’t have anything built in to read files (or display a prompt). You need an environment that provides those objects.

answered Oct 17, 2009 at 18:31

QuentinQuentin

892k122 gold badges1194 silver badges1314 bronze badges

Источник

Допустим, вы начали писать свою первую реально полезную программу на JavaScript. У вас появляются реальные задачи, и они намного сложнее, чем обойти массив и сложить два числа. Где искать ответы на вопросы, о которых вы раньше не подозревали? У кого заимствовать идеи? Как их вклеить в свой код? Что делать, если что-то не работает, хотя должно?

Вот об этом — в статье.

Как начать исполнять программы

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

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

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

Страницу нужно будет положить на компьютер или опубликовать в интернете.

HTML — это язык гипертекстовой разметки документов (HyperText Markup Language). Проще говоря, это набор команд, которые говорят нашим браузерам, как рисовать сайты. Самая простая страница выглядит так:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>

</body>
</html>

На ней ничего нет, это просто шаблон, который можно наполнить своим содержимым — текстом, картинками, кнопками и скриптами.

<!DOCTYPE html>
<html>
<!-- служебная часть -->

<head>
  <!-- заголовок страницы -->
  <title>Адаптивная вёрстка на Бутстрапе</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->
  <style type="text/css">
    img {
      max-width: 100%;
    }
  </style>
  <!-- закрываем служебную часть страницы -->
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h1>Адаптивная вёрстка</h1>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-12 col-sm-12 col-md-4 col-lg-2 col-xl-2">
        <img src="http://thecode.local/wp-content/uploads/2019/06/cat1.jpg">
      </div>
      <div class="col-12 col-sm-12 col-md-4 col-lg-8 col-xl-8">
        <img src="http://thecode.local/wp-content/uploads/2019/06/cat2.jpg">
      </div>
      <div class="col-12 col-sm-12 col-md-4 col-lg-2 col-xl-2">
        <img src="http://thecode.local/wp-content/uploads/2019/06/anton-kraev-1166716-unsplash.jpg">
      </div>
    </div>
  </div>
</body>
<!-- конец всей страницы -->

</html>

HTML-страница сама по себе просто показывает какой-то контент. Чтобы там началась какая-то работа программы, внутрь страницы нужно встроить скрипт. Его можно добавлять прямо в HTML-файл в раздел <script>:

<script>
<!-- Здесь будет наш скрипт -->
	// Заводим переменные под наши задачи
    	var List = $('#tdlApp ul');
  	var Mask = 'tdl_';
	var number_Id = 0;
</script>

Другой вариант — писать код в отдельном файле подключать его к странице так:

<script type="text/javascript" src="script.js"></script>

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

⚠️ Куда положить скрипт? Теоретически скрипт можно положить в любое место страницы. Но для корректной работы он должен находиться перед закрывающим тегом </body>. То есть сначала должны загрузиться все элементы интерфейса и все стили, а потом — скрипт. Если в скрипте идёт обращение к каким-то элементам страницы, но эти элементы ещё не загрузились, браузер может выдать ошибку, а программа не исполнится.

То есть правильно так:

 <script type="text/javascript">/*Тут ваш скрипт*/</script> </body>  </html> 

Консоль

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

Почти во всех современных браузерах консоль можно открыть сочетанием клавиш Shift + Ctrl + J или Cmd + Alt + J. Справа или снизу появится дополнительное окно, в котором уже будет что-то происходить:

Если у вас не открылась консоль, зайдите в верхнее меню и поищите слово «Консоль». Обычно этот пункт прячется в разделе «Инструменты разработчика».

Когда вы открываете консоль, она сразу готова выполнять ваши команды. Если в неё вставить программу, написанную на JavaScript, и нажать Enter, ваш браузер её исполнит. Если в коде есть ошибки, консоль сама подсветит их. Можно отправлять в неё программу кусками: браузер будет помнить всё, что происходило в вашей программе, пока вы не перезагрузите страницу.

Самые основы JavaScript

Напомним необходимый минимум, чтобы писать на JavaScript: переменные, типы данных, циклы и условия, функции.

Переменная — это небольшая часть оперативной памяти, которой можно дать своё имя, а потом что-то там хранить: числа, строки и всё остальное. Самый простой способ объявить переменную — написать:

var i; ← просто объявили переменную i;

или var i = 15; ← объявили переменную i и сразу положили туда число 15.

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

var a = 1; ← целое число;

var b = 0.75; ← дробное число;

var c = ‘Привет!’; ← строка;

var d = [1,2,3,4,5]; ← массив;

var f = true; ← логическое значение.

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

Вместо var вы часто встретите в чужом коде слово let. Это тоже объявление переменной, но локальной: как только выполнится текущий кусок кода (например, цикл или функция), эта переменная самоуничтожится. Обычно глобальные переменные для всей программы объявляют через var, а внутренние и временные переменные — через let.

Циклы. Если нам нужно, чтобы компьютер сделал что-то несколько раз подряд, используют циклы. Главное, за чем следят в цикле, — чтобы он точно когда-нибудь закончился. Если этого не предусмотреть, то цикл будет выполняться бесконечно и программа зависнет.

В JavaScript есть три вида циклов:

Цикл for. В общем виде он выглядит так:

for (начало; условие цикла; шаг) {
  // тело цикла
}

Начало — это с какого значения переменной мы начинаем работать в цикле, условие — до каких пор цикл будет выполняться, а шаг — это на какое значение будет меняться переменная цикла. Например, вот как можно вывести числа от 0 до 10 в цикле for:

for (let i = 0; i <= 10; i++) { 
  console.log(i);
}

Цикл while. Он сначала проверяет условие, потом выполняет то, что внутри цикла, потом снова идёт проверять условие, и так до тех пор, пока условие не станет ложным:

while (условие) {
  // тело цикла
}

Выведем те же числа от 0 до 10:

var i = 0;
while (i <= 10) {
  console.log(i);
  i++;
}

Цикл do..while. Работает так же, как предыдущий, только мы сначала хотя бы раз выполняем тело цикла, а потом идём проверять условие:

var i = 0;
do {
  console.log(i);
  i++;
} while (i <= 10)

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

function название(аргументы) {
	// полезная работа
}

Например, эта функция выводит в консоль текущее время и дату:

function printCurrentDate() {
	var objToday = new Date(),
	weekday = new Array('Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'),
	dayOfWeek = weekday[objToday.getDay()],
	dayOfMonth =  objToday.getDate(),
	months = new Array('января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'),
	curMonth = months[objToday.getMonth()],
	curYear = objToday.getFullYear(),
	curHour = objToday.getHours() > 12 ? objToday.getHours() - 12 : (objToday.getHours() < 10 ? "0" + objToday.getHours() : objToday.getHours()),
	curMinute = objToday.getMinutes() < 10 ? "0" + objToday.getMinutes() : objToday.getMinutes(),
	curSeconds = objToday.getSeconds() < 10 ? "0" + objToday.getSeconds() : objToday.getSeconds(),
var today = curHour + ":" + curMinute + " " + dayOfWeek + " " + dayOfMonth + " " + curMonth + " " + curYear+ " г.";
return today;
}

А чтобы выполнить всё это хозяйство, достаточно написать в консоли или вызвать в коде одну команду:

printCurrentDate();

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

alert(printCurrentDate());

Что переводится как «Исполни функцию printCurrentDate без дополнительных аргументов, а её результат передай команде alert».

Кстати, как только функция выполняет команду return, она отдаёт нужные данные и перестаёт выполняться.

Аргументы функции. У функции могут быть аргументы: это способ сообщить что-то в функцию. Например, у вас может быть функция для проверки логина и пароля. Чтобы проверить их, вам нужно передать в функцию логин и пароль. Вы указываете при объявлении функции, что вам нужно передать в неё эти два параметра, и называете их по именам. Дальше внутри функции вы можете использовать эти имена. А при вызове функции вам нужно вместо имён передать уже настоящие данные.

Вот мы определили функцию, в которую передаются два параметра, а потом они проверяются:

function checkUserCredentials(username, password){ /*тут вы проверяете переменные username и password, например так:*/ if (username == secret1 && password == secret2){ return true; }else{ console.log('Неверный логин или пароль'); return false; } }

А теперь вызываем эту функцию, но уже с нужными данными:

var isValidUser = checkUserCredentials('admin','qwerty');

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

Как обратиться к чему-то на странице

Иногда в коде нужно обратиться к какому-то элементу на странице: конкретной кнопке, абзацу, элементу с определённым классом или названием. Для этого используют такое:

document.getElementById() — находит элемент по его ID. Например, если у нас есть абзац <p id="radio">Это текст абзаца</p>, то обратиться к нему можно так:

var s = document.getElementById("radio");

После этого через переменную s можно работать с этим конкретным абзацем.

Кроме document.getElementById() ещё применяют:

document.getElementsByName() — поиск по имени элемента;
document.getElementsByClassName — по названию класса;
document.querySelector() — возвращает первый элемент с указанным CSS-стилем;
document.querySelectorAll() — возвращает все элементы с указанным CSS-стилем.

Как вставить чужой код и вызвать его

Наверняка у вас возникнет ситуация, что вы хотите решить какую-то задачу кодом, но вообще не знаете, как к ней подойти. Тогда:

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

Чтобы код заработал, помните о таких нюансах:

Чаще всего вам дадут функции, которые нужно будет потом вызвать. Например, вы скопировали какой-то такой код:

function solveMyProblem(){ /*тут непонятный код*/ }

Вы вставляете этот код в свою программу, но ничего не происходит. Причина в том, что вы вставили функцию, но не вызвали её. Теперь нужно её вызвать — например повесить исполнение этой функции на кнопку. Или для начала просто открыть консоль и выполнить эту функцию:

solveMyProblem();

В функции могут быть ссылки на что-то в вашей странице. Например, у вас функция, которая делает что-то с вашей страницей — скажем, меняет цвет элемента. И там будет такая строка:

document.getElementById("myElement");

Вместо myElement может быть что-то другое. Вот на место этого слова нужно вписать айдишник нужного вам объекта на странице. Если у нужного объекта нет айдишника, его нужно прописать. Например: <div id="myElement">...</div>.

Как повесить событие на кнопку или нажатие клавиши

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

Кнопка на странице:

Создаём кнопку на странице тегом <button>:
<button>Это кнопка</button>
Добавляем обработчик нажатия onclick — он сработает, когда мы нажмём на кнопку:
<button onclick="">Это кнопка</button>
Внутри кавычек пишем JS-команду или функцию из нашего скрипта, который мы подключили к странице. Например, вызовем функцию test():
<button onclick="test()">Это кнопка</button>

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

Кнопка на клавиатуре:

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

Например, вот так мы сделали управление платформой в пинг-понге на JavaScript:

// Отслеживаем нажатия клавиш
document.addEventListener('keydown', function (e) {
  // Если нажата клавиша вверх,
  if (e.which === 38) {
    // то двигаем правую платформу вверх
    rightPaddle.dy = -paddleSpeed;
  }
  // Если нажата клавиша вниз,
  else if (e.which === 40) {
    // то двигаем правую платформу вниз
    rightPaddle.dy = paddleSpeed;
  }
  // Если нажата клавиша W, 
  if (e.which === 87) {
    // то двигаем левую платформу вверх
    leftPaddle.dy = -paddleSpeed;
  }
  // Если нажата клавиша S,
  else if (e.which === 83) {
    // то двигаем левую платформу вниз
    leftPaddle.dy = paddleSpeed;
  }
});

Нужна ли здесь jQuery или какая-нибудь ещё библиотека?

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

Чаще всего из дополнительных библиотек при веб-разработке подключают jQuery — с ней многие вещи можно сделать проще и быстрее. Примерно в половине случаев, когда вы берёте чужой код, там используется jQuery. Самый верный признак этого — в коде есть знак доллара и конструкции типа:

var $elem = $(".SomeClass") $elem.remove();

Чтобы такое заработало, нужно подключить jQuery на HTML-странице, добавив перед вызовом своего скрипта такую строку:

<script src="https://yastatic.net/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>

Если знака доллара нет, но при запуске скрипт ругается на какую-то команду, то, скорее всего, нужно подключить что-то ещё. Самый простой способ узнать, что именно подключать, — набрать в Яндексе набрать название этой команды и добавить фразу «как работает». Например, если скрипт выдаёт ошибку на команде LUME.defineElements();, то первый же ответ в поиске даст нам нужную библиотеку:

Спасательный круг для тех, кто начинает писать на JavaScript

Куда ходить за вопросами или помощью

Если нужно разобраться, как работает какая-то функция, библиотека или технология, — читайте «Код».

Если нужно быстрое решение — ищите его на StackOverflow.

Если нужна помощь со стороны и подробные объяснения, как что устроено, — приходите учиться в Практикум на веб-разработку. Можно не спеша на курсах, можно быстро на буткемпе.

Что дальше

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

Своя игра: создаём собственную «Змейку»
Пианино на JavaScript для Chrome
Автоматическое оглавление на странице
Делаем игру Quatro

Вёрстка:

Кирилл Климентьев

Источник

В этом уроке вы узнаете, как запустить JavaScript на вашем компьютере разными способами. А еще напишите первую программу Hello, world!

Через вкладку «Консоль» в браузере

С помощью Node.js

С помощью веб-страницы

Подключение и выполнение javascript

Подключение в любом месте

Вынос скриптов в заголовок HEAD

Внешние скрипты

Hello, world!

Общие сведения о JavaScript

Основные характеристики JavaScript

JavaScript и стандарты

Итоги

Давайте попробуем

Усложняем задачу

Что мы сделали

Как начать исполнять программы

Консоль

Самые основы JavaScript

Как обратиться к чему-то на странице

Как вставить чужой код и вызвать его

Как повесить событие на кнопку или нажатие клавиши

Нужна ли здесь jQuery или какая-нибудь ещё библиотека?

Куда ходить за вопросами или помощью

Что дальше

Вынос скриптов в заголовок `HEAD`