В этой небольшой книжке будет показано как создавать простые приложения для браузера. Итак, приступим. Начнем мы с генератора паролей. В домашней папке создайте директорию с любым названием, например, pasgen. В ней будут располагаться все файлы нашего генератора. Сам генератор мы будем писать в виде приложения(расширения) для браузера Google Chrome. Наше будущее приложение будет способно генерировать пароли из пользовательских наборов символов и из встроенных в само приложение наборов. Писать мы будем с использованием простого блокнота или любого текстового редактора. Для начала создадим разметку
интерфейса. Для этого в редакторе создайте файл с именем index.html и вставьте в него вот это:
<!DOCTYPE html>
<!–
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
Если сейчас запустить этот код в каком-нибудь браузере, то мы увидим примерно вот это:
В верхнем левом углу вы видите надпись pasgen, здесь должно быть изображение растянутое
по всей ширине. Как его добавить? Оно прописано в коде в теге img, но отсутствует в директории программы. Для добавления создайте в папке pasgen еще одну папку с именем assets, а в нее закиньте какую-нибудь картинку размером примерно 1000/123 и с именем imagespg.jpg. Также нам понадобятся иконки размером 16/16 и 128/128. Иконки должны иметь названия соответственно icon_16.png и icon_128.png и располагаться в той же папке assets.
Я использовал такие изображения:
Для шапки
Для иконки
Еще один нюанс. Чтобы у нас все выглядело как надо нам понадобиться каскадная таблица стилей. В том же редакторе создайте файлик под названием styles.css и заполните его вот этим содержимым:
a{
outline:none;
}
hr{
width: 100%;
size: 2px;
}
img{
width: 100%;
height: 123px;
}
Сохраните файл стилей в папке pasgen.
После того как вы выполните все вышесказанное и запустите index.html вы увидите приблизительно следующее:
Но вот ведь незадача! Ничего не работает! Ну, конечно, кроме выпадающего списка и полей для ввода/вывода данных. Чтобы заработало все остальное нам нужен еще один файл. Тот самый где будет расписана вся логика нашей программы. В редакторе создайте файл с именем generator.js и вставьте туда следующий текст:
var l=document.querySelector(".l");
var n=document.querySelector(".n");
var us=document.querySelector(".us");
var s=document.querySelector(".s");
var buttonCalc=document.querySelector(".buttoncalc");
var buttonClear=document.querySelector(".buttonclear");
