JS/JQ

ECMAScript

alert ([[0,1], 2][0][1])

JQuery in Action | Самоучитель
Шаг к JQuery (Drag and Drop)

Простой онлайн-редактор кода
Продвинутый онлайн-редактор кода (jsfiddle)

Идеология: кратко изучать базовые синтаксические свойства чистого Javascript (при необходимости анализируя стандарт ECMA-262, использовать для этого онлайн-редактор кода. Пройти курс Интуита.

Затем перейти к фреймворкам и работе с IDE и хостингом (возможно с репозиторием).

Код на Javascript в веб-проекте - это в основном функции, которые запускаются как реакция на те или иные события. Щелчок мышью по элементу, истечение времени таймера, и, конечно, загрузка документа.

Так как содержимое секции head загружается раньше всего, в него можно поместить команды, которые должны выполниться до загрузки остального документа (например, инициализация каких-то глобальных значений).

<!DOCTYPE html>
<html>
 <head>
  <title>Scrupting</title><meta charset="utf-8">
    <script>
       alert('1');
       (function(){alert('2')})()
    </script>
 </head>
 <body>
     <h1>Самовыполняющийся код</h1>
 </body>
</html>

первая команда - это вызов встроенного метода объекта window - можно было написать window.alert('1')
второе - более изощренный вариант - замыкание, самовызывающаяся безымянная функция - изолированный кусок кода.

Но если речь идет об обработке дерева DOM, то надо дожидаться момента, когда документ загрузится целиком. Обработчик события "загрузка документа" может быть определен в теге body с помощью событийного атрибута (onload). В качестве значения этого атрибута можно указать команду вызова ранее определенной функции - ее имя + оператор "круглые скобки" или указать какие-то другие команды, включая тот же alert

<!DOCTYPE html>
<html>
 <head>
  <title>Scripting</title><meta charset="utf-8">
    <script>
       function doIt(){alert('1')}
    </script>
 </head>
 <body onload="doIt()">
     <h1>Самовыполняющийся код</h1>
 </body>
</html>

Но прописывание обработчиков прямо в коде разметки - это неудачное решение, особенно в больших проектах. По аналогии с каскадными стилями - не стоит использовать <body style="....">

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

Так можно назначить обработчиком события onload безымянную функцию:

<!DOCTYPE html>
<html>
 <head>
  <title>Scripting</title><meta charset="utf-8">
    <script>
       window.onload = function(){alert('1')}
    </script>
 </head>
 <body>
     <h1>Загрузка</h1>
 </body>
</html>

или уже существующую функцию

<!DOCTYPE html>
<html>
 <head>
  <title>Scripting</title><meta charset="utf-8">
    <script>
       function doIt(){alert('1')}; window.onload = doIt;
    </script>
 </head>
 <body onload="doIt()">
     <h1>Загрузка</h1>
 </body>
</html>

или можно создать функцию "на лету" используя конструктор new Function, eval и т.д.

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

Подключается он, например, так (в head)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> Google's CDN

и вот так это работает

<!DOCTYPE html>
<html>
 <head>
  <title>HTML5 JQuery</title><meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>
     $(function(){
       $("h1").on("click", function(){
         $(this).css("background","red");
         alert($(this).html());
       }) 
     })
  </script>
 </head>
 <body>
  <article>
    <h1>Нажми чтобы увидеть мой <strong>код</strong></h1>
    <p></p>
  </article>
 </body>
</html>