Откройте свой Мир!

Регистрация Вход

Мы применяем рекомендательные технологии

Сортировать: по обновлениям | по дате | по рейтингу Отображать записи: Полный текст | Заголовки

« Предыдущие 35

Ирина , 29-11-2015 22:52 (ссылка)

Адаптивное видео как фон шапки сайта

Что должно получиться в итоге: http://www.netapplications.com/

[ Читать далее... → ]

Метки: видео

Рейтинг

0 комментариев

Ирина , 15-01-2016 15:00 (ссылка)

Открываем модальное окно. И закрываем

В вёрстке классы
.login - кнопка "Вход"
.modal-content - окно авторизации с параметром css display: none;
.modal-content-show - клас с единственным свойством css display: block;
.modal-content-close - крестик в окне авторизации

JavaScript
<script>

var link = document.querySelector(".login");
var popup = document.querySelector(".modal-content");
var close = document.querySelector(".modal-content-close");

link.addEventListener("click", function(event){
event.preventDefault();
popup.classList.add("modal-content-show");
});

close.addEventListener("click", function(event){
event.preventDefault();
popup.classList.remove("modal-content-show");
});

</script>

Что здесь происходит
- первые три строки ищем все нужные нам элементы и присваиваем им переменные;
- 4 и 7 строки - добавляем переменную addEventListener, которая будет отлавливать клики по кнопке "Вход" и по закрывающему крестику;
- 5 и 8 строки - отменяем события по умолчанию. В том числе и для дива (седьмая строка) для которого события по умолчанию не предусмотрено. На всякий случай.
- 6 и 9 строки - переназначаем классы. добавление класса .modal-content-show отображает окно ввода пароля, удаление класса - скрывает окно

Метки: js

Рейтинг

0 комментариев

Ирина , 15-01-2016 16:38 (ссылка)

Небольшие улучшения

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

JavaScript
<script>

var link = document.querySelector(".login");
var popup = document.querySelector(".modal-content");
var close = document.querySelector(".modal-content-close");
var login = popup.querySelector("[name=login]");

link.addEventListener("click", function(event){
event.preventDefault();
popup.classList.add("modal-content-show");
login.focus();
});

close.addEventListener("click", function(event){
event.preventDefault();
popup.classList.remove("modal-content-show");
});

</script>

var login = popup.querySelector("[name=login]"); - в диве с классом .modal-content ищем форму с именем login
login.focus(); - указываем, что она в фокусе

Метки: js

Рейтинг

0 комментариев

Ирина , 24-01-2016 01:09 (ссылка)

Две хорошие книги по JavaScript

Выразительный Javascript - сейчас читаю эту. Хорошая, но сложная. Без ручки и тетрадки делать нечего. Нужно не только читать, но и писать и думать.

Для тех, кто хочет попроще, книга издательства O'Reilly "Изучаем программирование на Javascript". Здесь всё с картинками, несложными вопросами, примерами. Намного проще и понятнее. Одна проблема - жаль времени. Материал размазан по всей книге и растянут до невозможности

Рейтинг

0 комментариев

Ирина , 27-05-2016 21:37 (ссылка)

CS50. Пятая неделя. Лекции

Лекция 5-1 https://youtu.be/vtpqXBe9NLg
Конспект http://prometheus.org.ua/cs...

Лекция 5-2 https://youtu.be/NoCpDbxPoSo
Конспект http://prometheus.org.ua/cs...

Короткие видео

Библиотека CS50 https://youtu.be/eNPvJA5C8_c
Связанные списки https://youtu.be/c6IHpwyq5QE
Valgrind https://youtu.be/KrrFr8UImmk

Путеводитель

scanf - 0 https://youtu.be/7jHBIWN2lfs
scanf - 1 https://youtu.be/LTe9S8SEFGI
scanf - 2 https://youtu.be/72_07tl1zL0
swap https://youtu.be/h06O5xK3xe0
GetInt https://youtu.be/erIQfao-lbQ

Семинар http://prometheus.org.ua/cs...

Метки: cs50

Рейтинг

0 комментариев

Ирина , 14-01-2016 16:31 (ссылка)

Три главных слова

querySelector

addEventListener

classList

querySelector - метод поиска элементов

addEventListener - метод отлова событий

classList - метод управления классами

Метки: js

Рейтинг

0 комментариев

Ирина , 19-12-2016 23:42 (ссылка)

Этапы загрузки компьютера

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

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

Решением проблемы является постоянная память ПЗУ или ROM установленная на материнской плате и записанная в ней программа BIOS, которая запускает установку операционной системы.

ПЗУ не очищается при перезагрузке компьютера, а программа BIOS в ней записывается только один раз - на заводе изготовителе. Можно и перепрошить (перезаписать) BIOS, но если в процессе перезаписи отключится электричество, включить компьютер уже не удастся.

Этапы загрузки компьютера

[ Читать далее... → ]

Рейтинг

0 комментариев

Ирина , 29-04-2016 21:56 (ссылка)

СS50. Первая (нулевая) неделя. Лекція 0-2

[ Читать далее... → ]

Метки: cs50

Рейтинг

0 комментариев

Ирина , 17-01-2016 18:44 (ссылка)

Базовые примитивы. Объекты

Объект состоит из пар: ключ - значение

Примеры объектов

var a = {text: "red"};
var b = {count: 74};
var c = {massive: [10, 30, 55]};

Получаем значение ключа

var d = a.text; // значение ключа получаем через точку или
var d = a["text"]; // значение ключа получаем через квадратные скобки

Присвоение значения ключу

console.log(d); // red

a.text2 = "snow"; // присваиваем значение var a = {text: "red", text2: "snow"};

var f = a["text2"]; // snow

Метки: js

Рейтинг

0 комментариев

Ирина , 22-06-2016 19:01 (ссылка)

CS50. Девятая неделя

Лекция 9-1 https://youtu.be/9dH7FGSwqr0
Конспект http://cdn.cs50.net/2014/fa...

Лекция 9-2 https://youtu.be/WfK2wZY-QB0
Конспект http://cdn.cs50.net/2014/fa...

Короткие видео

DOM https://youtu.be/nc5znY_xSIs

Путеводитель

DOM - 0 https://youtu.be/vrJR-c061bg
DOM - 1 https://youtu.be/KQp58wxlvKs
DOM - 2 https://youtu.be/jv1s8GJN_AE
Form - 0 https://youtu.be/EdnyENdVBd8
Form - 1 https://youtu.be/fc-_gcFL_yI
Form - 2 https://youtu.be/nRKXsVaKhYw
AJAX-0 https://youtu.be/Oo-CGhMmbzI
AJAX-1 https://youtu.be/A3Fx2j2ByHE
AJAX-2 https://youtu.be/_IVouHdfey8
Geolocation - 0 https://youtu.be/Gsk34PIGztA
Geolocation - 1 https://youtu.be/_Em2vOMCbs4

Материалы семинара http://prometheus.org.ua/cs50/sections/section9.html

Задание 7 http://courses.prometheus.o...

Метки: cs50

Рейтинг

0 комментариев

Ирина , 06-05-2016 23:47 (ссылка)

ASCII 1

Программа, превращающая цифры в буквы

#include 

int main(void)
{
    for(char c = 'A'; c <= 'Z'; c++)
    printf("%i is %c\n", (int) c, c);
}

[ Читать далее... → ]

Метки: cs50

Рейтинг

0 комментариев

Ирина , 29-04-2016 21:44 (ссылка)

СS50. Первая (нулевая) неделя. Лекція 0-1

Первая неделя была вводной и достаточно простой. На лекциях рассматривали системы счисления, давали общие представления о работе компьютера и программировании.
Вопросы были не сложными. Например, сколько будет 50 в двоичной системе? а в шестнадцатеричной?

Практическое задание предполагало программирование на Scratch.
[ Читать далее... → ]

Метки: cs50

Рейтинг

0 комментариев

Ирина , 06-05-2016 22:50 (ссылка)

Разбить слово или фразу на буквы

[ Читать далее... → ]

Метки: cs50

Рейтинг

0 комментариев

Ирина , 16-01-2016 13:39 (ссылка)

Добавляем логин в форму авторизации

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

var link = document.querySelector(".login");
var storage = localStorage.getItem("login");

link.addEventListener("click", function(event){
event.preventDefault();
popup.classList.add("modal-content-show");

if(storage) {
login.value = storage;
password.focus();
}else {
login.focus();
}

});

Метки: js

Рейтинг

0 комментариев

Ирина , 01-12-2015 22:32 (ссылка)

Открытое образование. Веб-программирование

Курс предназначен для новичков в области веб-программирования, будет полезен как для школьников старших классов и студентов технических специальностей, так и для всех людей, которые интересуются веб-технологиями или планируют начать карьеру в этой индустрии. Полученный уровень подготовки позволит вам начать карьеру HTML-верстальщика или другого интернет-специалиста.
[ Читать далее... → ]

Метки: Открытое образование

Рейтинг

0 комментариев

Ирина , 09-05-2016 13:09 (ссылка)

Шифр Цезаря

[ Читать далее... → ]

Метки: cs50

Рейтинг

0 комментариев

Ирина , 31-07-2016 13:20 (ссылка)

Формат bmp

Формат bmp (от слов BitMaP - битовая карта, или, говоря по-русски, битовый массив) представляет из себя несжатое (в основном) изображение, которое довольно легко читается и выводится в ОС Windows
[ Читать далее... → ]

Метки: cs50

Рейтинг

0 комментариев

Ирина , 05-08-2016 12:48 (ссылка)

Простейшая страница

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Заголовок окна</title>
    </head>
    <body>
        <!-- Содержимое -->
    </body>
</html>

Метки: html

Рейтинг

0 комментариев

Ирина , 25-01-2016 13:25 (ссылка)

Выразительный Javascript. Упражнения

Упражнение «Шахматная доска» для произвольного количества строк

var n = 8; // произвольное число
var odd = "#_";
var even = "_#";
var count = 0;

while (odd.length <=n) {
odd = odd + "#_";
even = even + "_#";
}

while (count < n) {
console.log (odd);
console.log (even);
count +=2;
}

Метки: js

Рейтинг

0 комментариев

Ирина , 14-01-2016 16:43 (ссылка)

querySelector

querySelector возвращает элемент из DOM-дерева, соответствующий CSS-селектору

document.querySelector(".class")

document - поиск ведётся по всему документу
querySelector - ищем
.class - что ищем (теги, классы, id, или их комбинации)

Рейтинг

0 комментариев

Ирина , 02-05-2016 21:53 (ссылка)

Марио-2

[ Читать далее... → ]

Метки: cs50

Рейтинг

0 комментариев

Ирина , 06-06-2016 22:25 (ссылка)

CS50. Шестая неделя.

Лекция https://youtu.be/toB-JlGaMo8
Конспект http://prometheus.org.ua/cs50/week6.html

Короткие видео

Хэш-таблицы https://youtu.be/gBmaQSO7KXQ
Очереди https://youtu.be/GdjYPEh0dCE
Деревья https://youtu.be/ZvjvbDgPL0Y
Рекурсивные деревья https://youtu.be/hpwwPZLGEy4

Семинар http://prometheus.org.ua/cs50/sections/section6.html

Рейтинг

0 комментариев

Ирина , 30-08-2016 10:03 (ссылка)

Просто картинка

Метки: js

Рейтинг

0 комментариев

Ирина , 05-08-2016 18:19 (ссылка)

Частые имена классов

title - заголовок
container - контейнер
logo - логотип
icon - иконка
main-menu - главное меню
image - картинка
btn - кнопка
link - ссылка
item - элемент
element - элемент
block - блок
module - модуль
column - колонка
col  - колонка
sidebar  - сайдбар
panel  - панель
top-panel – верхняя панель
horizontal-nav – горизонтальное меню
left-side – левая сторона
center-column – центральная колонка
right-col – правый столбец
main-nav – главное меню
subnav – вспомогательное меню (выпадающее)
main-content – основное содержание
sidebar – боковая панель
content
news
item
title
date
wrapper - в основном используется для ограничения размеров блока, находящегося внутри тянущегося контейнера

Словарь сокращений

Метки: html

Рейтинг

0 комментариев

Ирина , 14-01-2016 16:22 (ссылка)

Консоль

Если в консоли браузера ввести JavaScript-код, нажать Enter, то он исполнится на этой странице.
Консоль открывается F12 (или Ctrl+Shift+J, но про эту я пока не знаю)
Чтобы в консоли ввести код в несколько строчек, используется сочетание клавиш Ctrl+Shift

Метки: js

Рейтинг

0 комментариев

Ирина , 14-01-2016 17:04 (ссылка)

Ищем элемент на странице

var link = document.querySelector(".b-leftmenu__avatar-img-2");

var - объявление (создание) переменной
link - имя переменной (произвольное)
document.querySelector - поиск переменной на странице
b-leftmenu__avatar-img-2 - аватарка слева вверху

Метки: js

Рейтинг

0 комментариев

Ирина , 06-06-2016 22:37 (ссылка)

CS50. Седьмая неделя.

Лекция 7.1 https://youtu.be/VGIBUAyZQdU
Лекция 7.2 https://youtu.be/8snlJzqXi6E

Короткие видео
HTTP https://youtu.be/S7P5Isv7rk4
HTML https://youtu.be/mJWol1Vo0oE
CSS https://youtu.be/nnfMbAULRUU
РНР https://youtu.be/Js3yQqq6X9g

Hello, HTML https://youtu.be/dXdXpbsCt6I
Параграфы https://youtu.be/dXdXpbsCt6I
Заглавия https://youtu.be/1JpPLCtUooU
Список https://youtu.be/Gz0MCfHjbSI
Ссылки https://youtu.be/cFWrmGC2H4s
Изображения https://youtu.be/xIOu-kJ4yl8
Таблицы https://youtu.be/BkfYIIow-Hw
CSS 0 https://youtu.be/lisUBOFAQ1g
CSS 1 https://youtu.be/RaNfw4G-ej4
CSS 2 https://youtu.be/ceK6KSaCUjY
Hello, PHP https://youtu.be/Wt38veUWO1M

Семинар http://prometheus.org.ua/cs....
Коды программ http://cdn.cs50.net/2014/fa...

Метки: cs50

Рейтинг

0 комментариев

Ирина , 22-09-2016 11:41 (ссылка)

364 страницы обсуждения

Просмотреть тему

Рейтинг

0 комментариев

Ирина , 14-01-2016 12:33 (ссылка)

Bведение в JavaScript

JavaScript везде.
С его помощью можно делать мобильные игры, веб-приложения, приложения на Windows 8 тоже можно на нём писать. И, конечно, на нём пишут фронтенд и бэкенд сайтов, их пользовательская и серверная часть.
JavaScript очень полезный язык программирования.
JavaScript работает в браузере.
С HTML и CSS JavaScript соединяется при помощи DOM - Document Object Model.
DOM выглядит в виде DOM-дерева
[ картинка → ]

Метки: js

Рейтинг

0 комментариев

Ирина , 29-04-2016 22:10 (ссылка)

Как научиться создавать компьютерные игры

Несколько раз в сообществах видела посты с вопросами как научиться создавать компьютерные игры. Спрашивали, конечно, дети. А взрослые рассказывали им, что нужно долго учиться, закончить школу, институт и только тогда приступать к созданию игр.
Гнусная ложь.
Писать свои собственные игрушки могут дети начиная с восьми лет. Именно на такой возраст рассчитана среда программирования Scratch.
Покажу те игры, которые можно научиться делать в Scratch за неделю. По проектам можно увидеть прогресс: первые совсем простые, последний гораздо сложнее.
[ Читать далее... → ]

Метки: cs50

Рейтинг

0 комментариев

Ирина , 25-01-2016 12:26 (ссылка)

FizzBuzz, или почему программисты не умеют программировать

http://geektimes.ru/post/11...

В другой статье пишут, что 19 из 20 программистов не могут решить задачу FizzBuzz ручкой на бумаге. Странно как-то. У меня на неё ушло два дня. То есть не на неё, а чтобы дойти до её решения с нуля. Они что же даже два дня не потратили?

С другой стороны, здесь как о само собой разумеющемся пишут "Прочитал Eloquent Javascript. Прочитал Javascript Garden". Хоть непонятно почему "прочитал". Разве учебники читают? А Javascript Garden даже не учебник - сборник примеров и задач. Их точно читать бессмысленно

Метки: js

Рейтинг

0 комментариев

Ирина , 14-01-2016 21:28 (ссылка)

Попробуем сменить класс

На странице Обсуждений есть квадратная аватарка группы с классом
.b-navigation__avatar
и круглая аватарка пользователя слева вверху с классом
.b-leftmenu__avatar-img-2

Что будет, если аватарке пользователя присвоить класс .b-navigation__avatar?
Смотрим

Код:

var link = document.querySelector(".b-leftmenu__avatar-img-2");
link.classList.remove("b-leftmenu__avatar-img-2");
link.classList.add("b-navigation__avatar");
[ результат → ]

Метки: js

Рейтинг

0 комментариев

Ирина , 01-08-2016 23:00 (ссылка)