betacode

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

  1. Цель статьи
  2. Написать Javascript в HTML
  3. Написать 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>

Pуководства ECMAScript, Javascript

Show More

Pуководства ECMAScript, Javascript

Show More

Новейшие статьи

Show More