Начнем с самого начала)). Я сам обжигался на этом моменте. При работе почти всех javascript скриптов нужно дождаться загрузки всех элементов страницы. Если запустить скрипт без загрузки тегов, то ничего не произойдет. Скрипт не сработает. Нам поможет событие $(document).ready. Таких событий $(document).ready(function(){ // ваш код }); может быть много. Сколько подключаемых файлов - столько и таких событий внутри этих файлов.

  $(document).ready(function(){
	var arr = ['book1', 'pencil1', 'book2', 'pencil2'];	
	alert(arr .join('|'));	
  });

Есть аналог у события $(document).ready(function(){ // ваш код }) функция $(). Используйте ту функцию которая вам нравится. Я предпочитаю $(document).ready(function(){}).

   $(function(){
       // срабатывает после загрузки всех элементов страницы
       console.log("всем привет )))");
   });

Нужно очень хорошо представлять в какой последовательности появляются элементы на странице. Если вы пытаетесь что-то сделать с элементом, который не появился вовремя, то ничего не будет. Некоторые функции javascript должны объявляться после создания элементов

   function add_link(){
        $("#box").html("ссылка 1");
        start_function_link();
        create_link();
   }
   start_function_link(){
       create_link(){
          var link = $("#box a").attr("href");
          alert(link);
       }
        start_function2(){
           //код
        }
        start_function3(){
           //код
        }
   }

В показанном коде вы видите функцию create_link(). Обратите внимание на тот момент, что она срабатывает не по умолчанию, а после то как ссылка появилась. Функций вступающих в действие после создания ссылки может быть много start_function2(), start_function3().

Для начала работы вам нужно подключить jquery и расположить событие $(document).ready(function(){}). Для проверки вы сможете использовать функцию hide(). Она скрывает элементы на странице.