пятница, 21 ноября 2014 г.

Домашнее задание 1


Задания:

  • (1) Запросить у пользователя логин и пароль. Если логин равен admin и пароль равен 11111, то показать сообщение «Добро пожаловать, администратор!». Если логин равен user и пароль равен 22222, то показать сообщение «Добро пожаловать, пользователь!», в ином случае сообщение «Вход не выполнен». 
  • (2) Запросить у пользователя число и вычислить значение функции 
  • (3) Запросить у пользователя 3 числа и найти среднее значение. 
  • (4) Запросить у пользователя 3 числа и найти из них минимальное. 
  • (5) Запросить у пользователя 3 числа и найти из них максимальное. 
  • (6) Запросить у пользователя 3 числа и получить значение разницы наибольшего и наименьшего числа. 

Выполнение:


  • (1)
var userName = prompt("Введите ваше имя");
var login = prompt("Введите логин");
var pass = prompt("Введите пароль");

if (login == "admin" && pass == 11111) {
alert("Добро пожаловать, администратор " + userName);
} else if (login == "user" && pass == 22222) {
alert("Добро пожаловать, пользователь " + userName);
} else if (login == "" || pass == "") {
alert("Вы ввели не все данные");
}
else {
alert("Вход не выполнен");
}


  • (2)
var x = parseInt(prompt("Введите x"));

if (x > 0) {
console.log(x-12);
} else if (x == 0) {
console.log("5");
} else if(x < 0) {
console.log(x*x);
}


  • (3, 4, 5, 6)
var a = parseInt(prompt("Введите a"));
var b = parseInt(prompt("Введите b"));
var c = parseInt(prompt("Введите c"));

//переменная max нам нужна, для того чтобы мы могли сравнивать максимальное число и по умолчанию,
// самое первое число будет максимальным
var max = a;
//минимальное нам пока не нужно, оно будет вычислено потом
var min = null;

//так как первое число уже максимальное, мы начинаем сравнивать его уже со вторым
//если оно больше чем первое
if (b > max) {
//мы назначаем его самым большим
max = b;
//значит по логике, из 2х чисел, если одно максимальное, значит другое минимальное
//поэтому мы назначим первое число минимальным
min = a;
} else {
//если же второе число, не было больше первого, значит оно минимальное
min = b;
}
//теперь мы сравниваем третье с максимальным числом из прошлого блока

if (c > max) {
//если третье число больше, значит теперь оно самое большое
max = c;
} else if (c < min) {
//если же выше блок не сработал, мы проверяем на минимальное
//и если третье число меньше минимального числа, теперь оно минимальное

min = c;
}
//мы высчитываем разницу максимальное - минимальное и заносим результат в переменную inequality
inequality = max - min;
// высчитываем среднее арифметическое ( сумма всех элементов деленное на количество элементов)
// заносим результат в переменную average
average = (a + b + c) / 3;

console.log("Максимальное число: " + max);
console.log("Минимальное число: " + min);
console.log("Разница: " + inequality);
console.log("Среднее число: " + average);

Полезности


Те материалы, которые посоветовал преподаватель:


Источники для обучения и книги
  • “JavaScript. Подробное руководство”. Д. Флэнаган (6-е издание).
  • “JavaScript. Шаблоны”. С. Стефанов.
  • “Секреты JavaScript ниндзя”. Дж. Резиг
  • “JavaScript. Сильные стороны”. Д. Крокфорд
  • “Веб-приложения на JavaScript”. А. Маккоу
  • http://www.w3schools.com/js/
  • http://learn.javascript.ru/



 Браузеры
  • Поддержка HTML5 - http://caniuse.com/
  • История развития - http://www.evolutionoftheweb.com/?hl=ru

1 Занятие [17.11.2014]

Записи: 


  • Имя переменной может начинаться с латинского символа, нижнего пробела и знака доллара
  • Имя переменное может содержать цифры, но не начинаться с них 
  • Оно должно быть логичным (логично, да? :) )
  • Есть 2 стиля именования:
    - camelCase (myName; yourName)
    - under_score (my_name; your_name)
  • Знак равно (=) - это оператор присваивания

Объявление с инициализацией:

var = 5;

- всегда писать var в начале
- всегда ставить ; в конце


Типы данных:

  • number - число (3)
  • string - строка ("hello")
  • bool - true, false
  • object
  • undefined - есть переменная, без присвоенного ей значения
  • null


JavaScript - не строго типизирован (в отличии от того же C++)

- тип определяется автоматически
(нам не нужно его задавать самим)
- в любой момент мы можем изменить один тип на другой

Конкатенация - сложение строк

var a = "srt1";
var b = "str2";

a + b

"str1str2" - результат конкатенации

Операторы сравнения

var a = 5;
var b = 7;


Если написать:

a = b 
(это будет значить, что мы заменим значение a, присвоив ему значение b.
то есть мы а = 5 заменим на а = 7, это не оператор сравнения, а оператор присваивания)

a == b 
(собственно оператор сравнения, то есть проверяет равно ли значение a значению b)

Есть:
  • = = 
(обычное сравнение, оно проверяет равны ли значения переменной.
чтоб и а и b были равны 5, к примеру)
  • = = =
(строгое сравнение, проверяет не только равенство значений, но и чтоб у переменных был один тип данных. чтоб обе были числами (number) или обе строками(string) или обе булевыми - true, false)


Условные операторы

(операторы с условиями)

  • if / else
  • тернарный оператор
  • switch
&& - И
| | - ИЛИ 

Первое условие | | (ИЛИ)  второе условия должны выполниться
(одно из двух)
Первое условие && (И) второе условия должны выполниться
(оба)

! - отрицание

var a = 5;
bar b = 3;

a = = b
false
(значение а равно значению b? - нет.)

var a != 5;
true
(значение а не равно значению b? - да.)


Пример задач на практике:


var userName = prompt("Введите ваше имя");
var login = prompt("Введите логин");
var pass = prompt("Введите пароль");

if (login == "admin" && pass == 11111) {
    alert("Добро пожаловать, администратор " + userName)
}
else if (login == "user" && pass == 22222) {
    alert("Добро пожаловать, пользователь " + userName)
}
else if (login == "" | | pass == "") {
    alert("Вы ввели не все данные");
}
else {
    alert("Вход не выполнен");
}

Другими словами;

Если логин будет совпадать слову "admin" И пароль будет равен 11111, то вывести на экран слова "Добро пожаловать, администратор" + имя, которое пользователь введет в первую форму  с запросом "Введите ваше имя", это будет значение переменной varName.

Если логин будет совпадать слову "user" И пароль будет равен 22222, то вывести на экран слова "Добро пожаловать, пользователь" + имя, которое пользователь введет в первую форму  с запросом "Введите ваше имя", это будет значение переменной varName.

Если логин будет пуст ИЛИ пароль будет пуст, то есть что-то не введут, то вывести на экран слова "Вы ввели не все данные".

В любом другом случае вывести на экран слова "Вход не выполнен".
(При любом другом вводе или логина или пароля - войти нельзя)

вторник, 4 ноября 2014 г.

WebStorm

https://www.jetbrains.com/webstorm/

"Скачать, когда начнутся функции и нужна будет отладка"


WebStorm обеспечивает автодополнение, анализ кода на лету, навигацию по коду, рефакторинг, отладку, и интеграцию с системами управления версиями. Важным преимуществом интегрированной среды разработки WebStorm является работа с проектами (в том числе, рефакторинг кода JavaScript, находящегося в разных файлах и папках проекта, а также вложенного в HTML). Поддерживается множественная вложенность (когда в документ на HTML вложен скрипт на Javascript, в который вложен другой код HTML, внутри которого вложен Javascript) — то есть в таких конструкциях поддерживается корректный рефакторинг.JetBrains WebStorm — интегрированная среда разработки на JavaScript, CSS & HTML от компании JetBrains, разработанная на основе платформы IntelliJ IDEA.

Основные возможности

  • Модификация файлов .css, .html, .js с одновременным просмотром результатов (англ. Live Edit, в некоторых источниках эта функциональность называется «редактирование файлов на лету» или «в реальном времени» или «без перезагрузки страницы»)
  • Поддержка HTML5
  • Поддержка JSDoc
  • Поддержка Node.js
  • Возможности Zen Coding и Emmet
  • Отладка кода на JavaScript
  • Удалённое развёртывание по протоколам FTP, SFTP, на монтированных сетевых дисках и т. д. с возможностью автоматической синхронизации
  • Интеграция с системами управления версиями: Subversion, Git, GitHub, Perforce, Mercurial, CVS поддерживаются из коробки с возможностью построения списка изменений и отложенных изменений
  • Интеграция с системами отслеживания ошибок

Live Edit

LiveEdit — новая возможность WebStorm, появившаяся в версии 5 и позволяющая одновременно редактировать код html, css или javascript и видеть, как результат отображается в браузере. Для этого требуется поддержка такой возможности со стороны браузера, поэтому WebStorm при установке ставит плагин для Google Chrome. Плагин работает с браузерами Google Chrome и его производными.

Поддержка node.js

WebStorm поддерживает отладку приложений в node.js. Также поддерживается полный набор функций редактирования приложений на javascript — как для исполнения на сервере, так и в браузере: автодополнение, навигация по коду, рефакторинг и проверка на ошибки.
Для node.js поддерживается также вывод сообщений node.js на отдельную вкладку в IDE.

LESS, Sass, SCSS

Языки стилей LESS, Sass и SCSS, которые расширяют возможности описаний стилей в CSS, полностью поддерживаются в WebStorm, в частности, поддерживается рефакторинг кода для них, когда надо изменить выражение (например, #a9a9a9) на переменную (например @grey), для того, чтобы сделать код более читаемым и проще переопределять параметры (например, путем присвоения им значения @grey: #a9a9a9)

Поддержка CoffeeScript

В версии WebStorm 5 для CoffeeScript есть навигация по коду, автодополнение, рефакторинг, подсветка синтаксиса и проверка на ошибки.

Поддержка JavaScript, HTML, CSS в IntelliJ IDEA

JetBrains также разрабатывает и поддерживает другую среду разработки — IntelliJ IDEA с аналогичными возможностями по поддержке JavaScript, HTML и CSS.

Полезная статься на Хабре (вырезки + ссылка на статью)

http://habrahabr.ru/post/231855/  -  Статья


 
Рабочая среда


Создай папку с готовым шаблоном для начала работы


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


Используй препроцессоры для CSS


LESS, SASS и прочие **SS нужно использовать по одной простой причине: они увеличивают скорость верстки. Не сразу, но со временем ты поймешь сколько времени ты сэкономил на вложенных стилях, примесях, переменных и прочих приятных мелочах.


Составь список LESS (SASS) сниппетов


Большие куски кода в любом случае качуют из проекта в проект, и у каждого верстальщика есть элементы, которые он использует снова и снова. Рекомендую их вынести в примеси, тогда при компилировании в чистом CSS они не будут занимать место, а при необходимости их легко будет встроить в любое место стилей.
Если ты все еще не совсем понимаешь зачем это нужно, то найди в интернете подборки сниппетов для нужного тебе препроцессора, и посмотри какие вещи реализуются с их помощью.


Используй Emmet (http://emmet.io)


Это плагин для большинства популярных текстовых редакторов, с помощью которого можно ускорить написание HTML кода в несколько раз. Просто попробуй.


Составь для себя подборку JavaScript плагинов


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


HTML


Используй минимальное количество HTML-тегов


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


Используй HTML5-теги


Они уже давно поддерживаются всеми современными браузерами, а для IE младше 9 версии включаются коротким скриптом.
Вот сам скрипт
<!--[if lt IE 9]>
        <script>
            var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(',');
            for (var i = 0; i < e.length; i++) {
                document.createElement(e[i]);
            }
        </script>
<![endif]-->

Наиболее часто используемые мной теги для обозначения областей сайта:
  • <header> — для «шапки» сайта или раздела, в которой обычно располагается заголовок
  • <nav> — для навигации, причем на странице может быть использован несколько раз
  • <section> — для задания раздела документа
  • <article> — для содержания сайта вроде новости, статьи, записи блога, форума или др.
  • <aside> — для боковых колонок и вторичного содержимого
  • <footer> — для «подвала» сайта или раздела

Подключай JavaScript перед закрывающим тегом </body>


Можно много спорить о том что уже многими браузерами поддерживается асинхронная подгрузка JavaScript и это ни к чему, но тут решение простое: вес кода страницы в большинстве случаев существенно меньше веса скриптов, следовательно они начнут грузиться практически сразу, а времени до отображения страницы потратится меньше.


Правильно используй HTML-теги


Например:
  • тег <h1> должен быть только один на странице;
  • тег <span> в первую очередь для текста, а не оформления блоков;

Весь текст из макета должен оставаться текстом при верстке


Бывают такие дни, что просто лень разделять шапку сайта на разные блоки, ты сливаешь ее в одну картинку и загружаешь на сайт. СТОП! Одумайся, так делать нельзя. Весь текст на сайте должно быть возможно выделить и скопировать, в случае необходимости.


Не бойся тега <br>


Последнее время очень часто вижу, как вместо использования <br> люди стараются изловчиться какими-то странными конструкциями. Нужно лишь понимать, что <br> нужен для переноса текста и все.


Используй специальные ссылки для телефона, скайпа, почты и прочего


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

  • <a href="tel: +74951234567">+7 (495) 123-45-67</a>
  • <a href="mailto: example@mail.ru">example@mail.ru</a>
  • <a href="skype: someskype?call">someskype</a>


Если этого не сделать, в случае если телефон будет разбит на несколько тегов, например:
+7 <span>(495)</span> 123-45-67

на мобильных устройствах для звонка выделится только часть телефона (123-45-67) без кода страны и города, и, соответственно, нельзя будет дозвониться.


Формы


Формы следует выделить в отдельный блок, поскольку количество ошибок и недочетов при верстке форм иногда просто зашкаливает.

Расставляй атрибут tabindex для элементов форм


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

Используй атрибут autofocus


Если на странице основное действие совершаемое пользователем это заполнение формы, то поставь атрибут autofocus в первое поле формы, люди скажут тебе спасибо (привет, youtube).


Используй HTML5 типы полей


Не бойся использовать типы полей появившиеся в HTML5. Если браузер не поддерживает данный тип, то он просто отобразит текстовое поле.
Из наиболее важных типов полей следует всегда использовать:
  • search — позволяет очищать поле нажав на крестик в правом краю поля ввода;
  • tel — показывает цифровую клавиатуру на мобильном устройстве;
  • url — на мобильном устройстве добавляет знаки “.”, “/” и доменную зону первого уровня в буквенную клавиатуру;
  • email — аналогично url добавляет знаки “@” и “.” в буквенную клавиатуру;
  • date — вызывает барабан дат на мобильном устройстве, в некоторых десктопных браузерах отображает календарь;
  • time — отображает барабан для выбора времени на мобильных устройствах, некоторые десктопные браузеры добавляют элементы управления для выбора времени;
  • datetime — используется как date и time вместе.

Используй тип поля tel для полей ввода цифр


Из предыдущего параграфа понятно назначение типов полей, но этот тип стоит выделить отдельно. Если ты уверен что в поле нужно вводить только символы с клавиатуры телефона (0-9#*+) то используй для этого поля тип tel. Это сильно облегчит ввод для пользователей мобильных устройств. Например:
  • ввод номера кредитной карточки;
  • цифровой пароль, высылаемый SMS.

Запрещай исполнение JavaScript для полей даты, времени и тега <select> на мобильных устройствах


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

Всегда используй атрибут for у тега <label>


Просто обычное удобство, зона клика для попадания в поля ввода существенно увеличивается.


Стили


Не используй :hover как триггер действия


Очень часто встречаются неудачные случаи с выпадающим меню, которое реализовано через псевдо-класс :hover, мало того, что это меню практически неработоспособно на мобильном устройстве, оно еще и доставляет немало головной боли пользователям десктопов. Решением, в данном случае, будет использование JavaScript.


Прорабатывай различные состояния элементов


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

Все скругления изображений контента верстай при помощи border-radius


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

Следуй принципу graceful degradation


Бессердечный IE

Браузер не поддерживает скругление углов блока? Да и ладно.
У элемента в IE7 не будет тени, с эффектом как будто плоскость под ним изогнута? Ну что поделать.
Не стоит тратить кучу сил и времени на создание скругленных углов у блока, если это не влияет на конечный результат. Другой вопрос если возможности (точнее невозможности) старого браузера повлияют на взаимодействие пользователя с сайтом, например: использование css-свойства box-sizing: border-box на сайте, важная часть посетителей которого заходят на него через IE7.



Производительность


Делай спрайты


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


Сжимай *.PNG и *.JPG


При сохранении изображений в photoshop они получаются довольно тяжелыми. При помощи сервисов http://www.jpegmini.com (для *.JPG изображений) и https://tinypng.com (для *.PNG изображений) можно уменьшить вес графики в среднем в 2 раза.

При использовании нестандартных шрифтов подключай только нужные начертания через Google Web Fonts или аналоги


Google Web Fonts позволяет подключать только нужные начертания и наборы символов. Например если у шрифта есть 5 вариантов толщины текста, а на сайте используется только 2 не стоит подключать все 5.
Если это обычный сайт, то скорее всего вам достаточно кириллицы и латиницы, не следует подключать расширенные наборы символов.


При использовании JQuery или других библиотек воспользуйся CDN


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

понедельник, 3 ноября 2014 г.

О целях

Вот и подошли к главному, к целям :)
Сегодня подвела итог, составила список из того, что я еще не знаю, но в чем собираюсь разобраться :)
По сути он состоит из:
- технологий, о которых я неоднократно слышала, но совсем ничего о них не знаю. (Пока не знаю!)
- вещей, в которых я кое-как с горем пополам разбираюсь, но настолько слабо, что это не в счет.
- слов, которые часто встречаются в требованиях на вакансии frontend разработчика :)


Пройти курсы Java Script:

(длительность - 3 месяца)

- Типы данных
- Переменные
- Выражения и операторы
- Инструкции языка
- Массивы
- Объекты
- Конструкторы
- Прототипы
- Функции
- Регулярные выражения
- Объекты Wiondow
- Работа с DOM
- События
- Ajax
- HTML 5
- jQuery
- Canvas
- Разработка с AMD
- Require JS
- MVC фреймворки
- Backbone JS


Самой разобрать:

- LESS
- SASS
- GIT
- GitHub
- BootStrap
- WordPress
- Joomla
- Node JS
- Angular JS


Просто составить представление о том, что такое:

- BEM
- JSON
- MySQL
- PHP
- Drupal
- OOP
- Grunt
- FrameWork
- MVC
- API
- CRUD
- Composer


:) Узнать, что значат эти буквы: 

- SVG
- SCSS
- ASP.NET
- SMACSS
- OOCSS


Параллельно:

- Подтягивать английский, хоть как-то, хоть по чуть-чуть)
- Разобрать всё, что еще осталось непонятного в html/css

Как без этого

Теперь что-то о себе скажу :)
Меня зовут Лика, мне 19 лет и живу я в Украине.
Вообще учусь на втором курсе института на инженера-технолога, что по сути является сплошными химиями, но, как вы уже наверное догадались, блог не о химии, так что и химик и технолог из меня так себе :)
Работаю удаленно в одной местной маленькой-маленькой-маленькой it-компании верстальщиком.
Вот уже пятый месяц :)
Так что какое-то начало на моем пути к цели уже положено.
А о целях в следующих постах :)


Забавно

Как раз по теме :)


Start

Начнем :)
Завожу этот Блог для того, чтоб помочь себе как-то систематизировать и контролировать свое обучение.
Здесь я буду делать какие-то пометки, хранить полезные статьи и отписываться о результатах и сложностях :)