Ruby on Rails c нуля!

Работая с MongoDB у нас имеется базовый объект — db, который представляет собой саму базу данных, точнее является ссылкой на одну из имеющихся баз данных (по умолчанию, запуская консоль это база данных с именем test). Далелее идут коллекции документов, использую dot-нотацию получаем доступ к коллекции следующим образом:

> db.collection_name

Коллекции представляют собой наборы документов или вложенных коллекций. Обратиться к документу можно используя различные запросы.
Read the rest of this entry »

BOM — Browser Object Model — объектная модель браузера
BOM — представляет собой древовидную структуру, иерархию объектов браузера. Во главе этой структуры стоит объект window и представляет он собой само окно браузера. window также является глобальным объектом, то есть внутри него расположена глобальная область видимости и любая глобальная функция или переменная является соответственно методом или свойством объекта window.

Наиболее интересными функциями и свойствами window являются следующие:

window.navigator — информация о браузере.

window.innerHeight, window.innerWidth — внутренняя высота и ширина браузера, то есть размер области, которая отображает сайт.

window.outerHeight, window.outerWidth — внешняя высота и ширина, то есть размер самого окна браузера.

window.load() — функция-обработчик события загрузки сайта.

window.location — объект предоставляет информацию об адресе страницы и методы для редиректа, обновления страницы и т.д.

screen — объект предоставляющий информацию о пользовательском дисплее.

screenLeft(screenX), screenTop(screenX) — положение верхнего левого угла окна браузера.

scrollY, scrollX — положения горизонтальной и вертикальной полос прокрутки.

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

DOM — Document Object Model — объектная модель документа.

DOM является структурой вложенной в BOM. DOM содержит дерево всех элементов страницы и методы для работы с ними. Самыми популярными методами являются:

document.getElementById() — позволяет получить элемент по его ID.

document.getElementsByClassName() — позволяет получить элементы по их классу.

document.getElementsByName() — позволяет получить элементы по их имени.

document.getElementsByTagName() — позволяет получить элементы по имени тега.

document.getElementsByTagNameNS() — позволяет получить элементы по их имени, которые содержатся в определенной области видимости (оптимизированная версия getElementsByTagName).

Прежде, чем мы продолжим знакомится с остальными методами и свойствами для работы с DOM давайте подробнее рассмотрим что это такое и из чего DOM состоит. DOM описывается сразу тремя спецификациями разработанными W3C (W3C Level 1 DOM, W3C Level 2 DOM, W3C Level 3 DOM), которые были разработаны в разное время и соответственно в разной степени поддерживаются браузерами. В этой статье мы в первую очередь будем обращать внимание на DOM Level 1 так как он поддерживается полностью (или почти полностью) всеми современными (и не очень современными) браузерами. Вообще каждый Leve l является наслоением над предыдущим и добавляет определение новых свойств и методов для работы с DOM.

DOM состоит из узлов (node). О типах узлов позже.

<div>
  <p>
    <a>link</a> some text
  </p>
</div>

Можно изобразить так:

Read the rest of this entry »

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

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

Не правильно

if (true)
  alert(true);

Правильно

if (true){ alert(true); }

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

Неправильно

function myFunction(a,b) {
  var sum = a + b
  alert(sum)
}

Правильно

function myFunction(a,b) {
  var sum = a + b;
  alert(sum);
}

3. Всегда используйте var для объявления переменных и избегайте глобальных переменных.
Если вы не используете var для объявления переменных, то такие переменные объявляются как глобальные переменные. Глобальные переменные несут различные опасности связанные с некорректной работой кода.

Read the rest of this entry »

Сразу оговорюсь о том, что JavaScript не самый удобный язык программирования — в нем много чего сделано неправильно или недоделано, много простейших вещей отсутствует, много неочевидных моментов, например начать программировать на Ruby можно уже через день почитав созданные кропотливым трудом статьи на RubyDev, а для того, чтобы научиться программировать на JavaScript необходимо большее время. Под «научиться программировать» я не подразумеваю умение организовывать архитектуру и создавать большие приложения, но подразумеваю знание синтаксиса и философии языка.

Несмотря на множество недостатков JavaScript — чудесный язык программирования. Если бы не проблемы с кроссбраузерностью и нормальная поддержка браузеров современных стандартов (я о HTML5 JavaScript APIs) то удовольствие от программирования на JavaScript можно было бы сравнить с удовольствием программирования на Ruby.

В этой огромнейшей статье я постараюсь вам поведать об объектах в JavaScript, наследовании на прототипах и прочих вещах, а также познакомить вас с философией языка, точнее с тем, как ее понимаю я. Статья не будет раскрывать тему программирования на JavaScript всецело, я не ставлю целью написание еще одного справочника по языку — это глупо, вместо этого данная статья научит вас понимать то как и почему JavaScript работает так, как работает, как организовать код и т.д. Также оговорюсь, что в статье приводится не кроссбраузерный код, он работает в FireFox и Chrome о том, работает ли он в остальных браузерах я не знаю.

Read the rest of this entry »

В этой статье мы разберемся с обработкой событий в jQuery.

Чтобы присоединить обработчик к событию необходимоо использовать функцию bind():

$(function(){
  $('a.link-style').bind('click', function(){
    alert("Welcome to RubyDev.ru!")
  });
});

В примере выше функция bind() связывает с событием click (одиночный клик) с анонимной функцией, которая вызывает фнутри себя функцию alert(). Функция с которой связано событие называется обработчиком события.
Read the rest of this entry »

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

Проверяем имеют ли элементы определенный класс:

$('p:first').hasClass('super'); // проверяем имеет ли первый параграф класс super.

Добавляем класс определенному элементу (объекту DOM):

$("p.super").addClass("some-class"); // объявляем элементу p.super второй класс - some-class.

Удаляем определенный класс у определенного элемента:

$("p.some-class").removeClass("some-class");

Read the rest of this entry »

jQuery ч.2: Введение в jQuery Селекторы
Селектором могут быть свойства тега, стили тега, имя тега, имя класса и идентификатора.
В этой статье мы будем использовать следущий HTML/CSS код:

<!DOCTYPE html>
<html>
  <head>
    <title>RubyDev.ru</title>
    <style>
      div.mega-div{width:640px;margin: 0 auto;background:#c00; border:10px solid #a22;padding:10px;overflow:hidden}
      ul{list-style-type:none;margin:0;padding:0;}
      a{color:#fff;font-size:11px;}
      div#nav{width:200px;background:#333;padding:10px;border:10px solid #222;float:left;margin-right:10px;}
      div#content{width:350px;background:#333;padding:10px;border:10px solid #222;float:left}
      #content p{color:#ddd;padding:0;margin:0;margin-bottom:10px;text-indent:20px;}
    </style>
    <script src="jquery-1.6.2.min.js"></script>
  </head>
  <body>
    <div class="maga-div">
      <div id="nav">
        <ul>
          <li><a href="/">RubyDev</a></li>
          <li><a href="#" style="link-style">This page</a></li>
          <li><a href="http://rubyonrails.org/">Ruby on Rails</a></li>
          <li><a href="http://rubyflow.ru">RubyFlow.ru</a></li>
          <li><a href="http://rubyflow.com" id="link-id">RubyFlow.com</a></li>
        </ul>
      </div>
      <div id="content">
        <p>Content content content Content content content Content.</p>
        <p>Content content content Content content content Content.</p>
        <p>Content content content Content content content Content.</p>
        <p>Content content content Content content <a href="#">content Content</a>.</p>
      </div>
    </div>
  </body>
</html>

Давайте сначала выберим все ссылки:
$(«a»)
Read the rest of this entry »

jQuery: jQuery(document).ready()
Поскольку это первая статья о jQuery, позвольте рассказать у ней о том, что же такое jQuery.

jQuery — это фрреймворк написанный на JavaScript и ориентирован на использование на стороне клиента. Заходя на ваш сайт пользователь скачивает jQuery вместе со всеми вашими скриптами, которые содержатся в отдельных файлах. jQuery необходим для следующих целей:

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

Read the rest of this entry »

JavaScript — объектно-ориентированный язык программирования в котором почти все является объектами. Основным отличием «объектно-ориентированности» JavaScript от, например, Ruby является то, что JavaScript является class-free языком программирования, то есть в JavaScript отсутствует концепция классов. Если в Ruby объект является экземпляром класса, то в JavaScript объект является просто объектом, а передача свойств происходит через прототипы и функции — конструкторы.

Давайте для начала разберемся с тем, что такое объект в JavaScript. Объект — это просто коллекция свойств. Если свойство объекта ссылается на функцию, то оно называется методом. Простой пример:

myObj = new Object();
myObj.property = "Value.";
myObj['second_property'] = 12;
myObj.third_property = function () { alert(this.property); };

alert(myObj.second_property); //12
alert(myObj.property); //Value.
myObj.third_property(); //Value.

Read the rest of this entry »

Ранее, в первой части, говорилось о том, что разницы между следующими типами создания функций нету:

function funcName(){};

funcName = function(){};

funcName = new Function();

На самом деле отличия есть, они достаточно незаметны, но знать их необходимо.

function funcName(){} — декларация (объявление) функции;

funcName = function(){} — присвоение переменной выражения — функции;

funcName = new Function(); — конструирование функции.
Read the rest of this entry »