Быстрый старт с Javascript

1- Цель статьи

Javascript vs ECMAScript

Javascript и ECMAScript это 2 разных названия, но они имеют тесное отношение между собой. На самом деле  Javascript является языком разработанным по стандартам определенные с помощью  ECMAScript. Именно поэтому темы  Javascript и  ECMAScript сопоставленны нами в поочередном порядке.
-
Если вы начинающий с  Javascript я советую вам прочитать данную статью, чтобы больше понять про дранное отношение:
Javascript это язык программирования, сниппеты кода  Javascript встроены в HTML помогают веб странице взаимодействовать с пользователем.
Следующий пример это страница  HTML с тегом  <img src="light-off.gif">, которая отображает лампочку в отключенном состоянии (off), Javascript может поменять значение атрибута  src ( <img src="light-on.gif">) для замены старого изображения, изображение лампочки в включенном состоянии (on).
Цель данной статьи помочь вам понять как встроить Javascript в  HTML и выполнить практику с некоторыми простыми примерами, все эти примеры только для того, чтобы помочь вам ознакомиться с  Javascript перед тем как перейти к более подробным темам.

2- Написать Javascript в HTML

 Код  Javascript может быть написать внутри  HTML, точнее он может быть написан в теге  <script></script>:
Теги  <script> могут быть расположены в теге  <head> или в теге  <body>, для начала рассмотрим простой пример ниже:
Создайте файл  helloworld.html с содержанием:
helloworld.html
<!DOCTYPE html>
<html>
   <head>
      <title>Hello Javascript</title>

      <script type = "text/javascript">

         function sayHello()  {
             alert("Hello Everyone!");
         }
      </script>

   </head>
   <body>

      <button onclick="sayHello()">Click me!</button>

   </body>
</html>

 
Запустите файл  helloworld.html на браузере и посмотрите результат:
В примере выше, в теге  <script></script> я создал функцию  sayHello(). Когда пользователь нажимает на Button, вызывается функция sayHello() и она отображает  dialog (диалог) с содержанием  "Hello Everyone!". Не волнуйтесь, если вы еще не знаете что делать, пока пропустите это.

3- Написать Javascript в отдельном файле

Напишите код  Javascript в отдельном файле, потом  HTML импортирует данный файл для использования. Это способ, помогающий вам лучше управлять вашим кодом  Javascript, и файл Javascript может быть использовано совместно многими файлами  HTML.
Код  Javascript написан в файле с расширением (extension) как  js, Файлы  HTML будут импортировать файл  Javascript  выше для использования.
Далее это пример с лампочкой (Light), в данном примере нам понадобятся 4 файла:
light.js
function turnLightOn()  {
  var img = document.getElementById("myImage");
  img.src = "light-on.gif";
}

function turnLightOff()  {
  var img = document.getElementById("myImage");
  img.src = "light-off.gif";
}

 
light.html
<!DOCTYPE html>
<html>
   <head>
      <title>Light</title>

      <script type="text/javascript" src="light.js"></script>
      
   </head>
   <body>
      <h2>What Can JavaScript Do?</h2>
      <p>JavaScript can change HTML attribute values.</p>
      <p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

      <button onclick="turnLightOn()">Turn on the light</button>
      <img id="myImage" src="light-off.gif" style="width:100px">
      <button onclick="turnLightOff()">Turn off the light</button>
   </body>
</html>