Ruby on Rails c нуля!

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 »

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

1. Мне очень не нравится зависимость JavaScript от окружения. Это не есть недостатком самого языка, но есть большим недостатком технологии. Вместо того, чтобы писать код, программист вынужден бороздить просторы интернета в поисках документации о различиях браузеров и решении возникающих из этого проблем. Часто разработчики пишут код под какой-то один браузер (javascript движок), например под FireFox, а затем тестируют и допиливают его для работы в остальных браузерах. К счастью имеюттся различные фреймворки вроде jQuery, которые решают многие проблемы с кроссбраузерностью.
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. В этом посте я хочу исследовать почему писать крассивый JavaScript код сложно и как эти сложности исправить с помощью CoffeeScript — маленького языка компилируемого в 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 »