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

Что такое пользовательский скрипт?

Позьзовательские скрипты (userscripts, User Scripts, User scripts, или.user.js) - это лицензионные расширения для браузеров с открытым исходным кодом, которые вносят изменения в веб страницы при загрузке. Она дают возможность пользователям заставлять сайты делать то, что они хотят, вместо того, что изначально планировалось. Обычно скрипт такого типа - это файл на вашем компьютере, названный сайт, на который он влияет - полезное имя, которым вы хотите его назвать.user.js и всегда заканчивается на.user.js .

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

Что такое библиотека скриптов?

Библиотека скриптов (libs, библиотеки или просто.js) - это многоразовые лицензионные куски кода и открытым исходным кодом, которые открыты для общего использования в других пользовательских скриптах. Обычно скрипт такого типа - это файл, названный полезное имя, которым вы хотите его назвать.js и никогда не заканчивается на.user.js .

Как я могу использовать пользовательский скрипт?

Для его использования необходимо установить расширение конкретно для вашего браузера. Эти расширения упрощают задачи управления, например, установку, удаление и обновление пользовательских скриптов. Исходным менеджером для управления пользовательскими скриптами был Greasemonkey для браузера Firefox, поэтому вы можете часто услышать, что пользовательские скрипты называют скрипты Greasemonkey. Чтобы узнать, как продолжить, посмотрите на варианты для вашего браузера в таблице ниже.

Каковы риски?

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

Чтобы уменьшить риски безопасности, большинство менеджеров пользовательских скриптов позволяют вам контролировать, к каким сайтам пользовательские скрипты будут иметь доступ и смогут ли они работать на безопасных (https) сайтах или локальных файлах на вашем компьютере. На awe.acestream.me исходный код каждого пользовательского скрипта может быть проверен, чтобы другие программисты могли видеть, есть там какой-либо вредоносный код или опасные баги или нет.

Что такое юзерскрипты?

Кратко: юзерскрипт - это программа, написанная на языке JavaScript , хранящаяся на компьютере пользователя и подключаемая браузером на определенных страницах. Юзерскрипт представляет собой файл с расширением .user.js (именно по расширению браузеры понимают, что файл является юзерскриптом), содержащий метаданные и непосредственно javascript -код.

Подключение юзерскриптов:

Для установки скрипта необходимо кликнуть по иконке Greacemonkey и выбрать пункт "Создать скрипт..."

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

Список готовых юзерскриптов:

Отключение пользовательских стилей:

// ==UserScript== // @name Shiki User Style Remove // @namespace http://сайт/ // @version 1.0 // @description Disabled Shiki User Styles // @updateURL https://openuserjs.org/meta/kaur/Shiki_User_Style_Remove.meta..org/* // @grant none // ==/UserScript== var func = function() { $("#custom_css").remove(); }; $(document).ready(func); $(document).on("page:load", func); $(document).on("turbolinks:load", func);

Реальный рейтинг Shikimori (по умолчанию отображается рейтинг MAL):
318x181
Последняя версия и обсуждение в отдельной теме
Автор @ Oniii-chan

Отображение дат в истории:
1184x249
Для отображения даты на русском заменить en-GB на ru-RU .

1..org/* // @match http://сайт/* // @grant none // ==/UserScript== var func = function() { "use strict"; $(".date").text(function() { return (new Date($(this).attr("datetime")).toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric", hour: "numeric", minute: "numeric" })); }); }; $(document).ready(func); $(document).on("page:load", func); $(document).on("turbolinks:load", func); $(document).on("postloader:success", func);

Кнопка для скроллинга к позиции нажатия кнопки "наверх" в левой части экрана
Скрипт добавляет кнопку в левой части экрана, которая идентична кнопке "наверх", но перемещает вниз к позиции нажатия кнопки "наверх", подобная механика реализована в ленте ВК

там, где написано 500 - скорость скроллинга на обратную позицию, 500 я посчитал достаточным
чтобы изменить этот элемент, вроде добавить эффект при hover нужно использовать класс.b-to-back и написать соответствующее правило в CSS

// ==UserScript== // @name Back to the last possition:Shikimori // @namespace http://сайт/ // @version 1.0 // @description try to take over the world!.org/* // @grant none // ==/UserScript== var scroll_bottom = 0; $(".b-to-top").css("z-index", "10"); $(".b-to-top").click(function() { scroll_bottom = $("body").scrollTop(); $("body").append(""); $(".b-to-back").click(function() { $("html, body").animate({ scrollTop: scroll_bottom }, 500); $(".b-to-back").remove(); }); });

Автоматическое скрытие меню при прокрутке.
Меню скрывается при прокрутке вниз. Прокрутка вверх, наведение курсором на вверх станицы и прокрутка до конца страницы заставляет меню снова появится. Установка через сайт greasyfork.org:

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

Что такое пользовательские скрипты и зачем они нужны

Я когда-то давно узнал что можно встраивать некий JavaScript прямо в браузер. Можно говорить ему: друг мой, выполни пожалуйста вот этот нехитрый скрипт когда я захожу на этот сайт и он будет это делать. Пользовательским этот скрипт называется потому что хранится он не на сервере, а прямо у клиента на компьютере. То есть, это ваш собственный скрипт, который доступен только вам.

Пользовательские скрипты реализуются некоторыми браузерами на нативном уровне, кажется. Вроде Опера это умеет, например. Но народную любовь снискал Greasemonkey — плагин для браузеров, который как раз позволяет выполнять пользовательские скрипты.

Мне это все было как-то без надобности. Ну что можно сделать жабаскриптом? Обычно это все касается изменения внешнего вида страницы. Убрать колонку, изменить размер чего-нибудь, показать что скрыто или наоборот. Так вот, мне это все было не нужно. А теперь у меня есть блог о футболках , куда я часто постю картинки с сервиса printdirect.

Процесс постинга картинки выглядит так:

• Я захожу на страницу товара
• Кликаю по изображению
• Кликаю по большой картинке правой кнопкой, выбираю "Копировать ссылку на изображение".
• Иду в редактор поста на tshirt-fan.ru и вставляю ссылку на изображение в поле вставки изображения визуального редактора.
• Заполняю поля alt и title картинки в том же редакторе
• Перехожу во вкладку "Положение" и в выпадающем меню "Класс" ставлю fcenter (это CSS класс для центрования картинки)
• Затем перехожу снова на страницу товара, выделяю адрес страницы
• Перехожу в редактор, выделяю изображение, нажимаю на "установить ссылку"
• В поле "Адрес" я ввожу скопированный адрес товара.
• Заменяю в этом адресе http:// на /go/ чтобы ссылка была внутренней и чтобы при переходе добавлялся партнерский код.

Вот столько всяких действий чтобы вставить ОДНУ картинку с ссылкой. Это очень, очень утомительно.

Поэтому я решил автоматизировать этот процесс. Потому что я ленивый программист.

Я взялся за изучение Greasemonkey. Оказалось, что там все не просто, а очень просто. По сути, это просто JS код, который снабжен парой служебных директив.

Greasemonkey скрипт для tshirt-fan.ru

Вдохновившись, я сразу захотел использовать jQuery. Лень мне писать на чистом JavaScript, видите ли. Хотя задача простая, если честно. Короче, я нашел как подключать jQuery к Greasemonkey и заюзал этот код. Он загружает jQuery с хостинга гугла. Обычно я загружаю с хостинга Яндекса, но какая разница?

Теперь надо было только написать сам скрипт. Все оказалось просто.

// Весь Greasemonkey код ниже function letsJQuery() { var full = $("#full_img_front").attr("src"); //хватаем адрес большой картинки if(full) { //если он есть — мы на нужной странице var url = location.href; //берем адрес страницы url = url.replace("http://", "/go/"); //изменяем его var text = $("h1.main").html(); //берем имя товара //формируем код для отображения var code = "
"; code+=""; $("div.images").append(code); //показываем его } }

Теперь страница товара у меня выглядит так.

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

Для управления пользовательскими скриптами в MozillaFirefox используется расширение Greasemonkey; Operaи GoogleChrome предоставляют средства поддержки пользовательских скриптов и возможности для выполнения ряда скриптов Greasemonkey.

Серверные приложения

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

Помимо Java 6, существует ряд платформ, использующих существующие движки (интерпретаторы) JavaScript для исполнения серверных приложений. (Как правило, речь идёт о повторном использовании движков, ранее созданных для исполнения кода JavaScript в браузерах WWW.)

Практическая часть

В данной курсовой работе мы будет использовать бесплатную программу для создания сайта – Мини-Сайт. В этой программе мы можем подготовить основной шаблон нашего сайта, разметку блоков, размеры блоков, подготовить необходимые страницы и прочее.

За тематику сайта был взят официальный сайт ИФХиБПП РАН, сайт которого разработан на CMSJoomla!

При создании сайта разберем исходный код нашей главной страницы html и посмотри из чего она состоит.

Любая страница, написанная на языке htmlобязательно должна содержать следующие строки или тэги:

1.

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

2.

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

3.

Данный тег включается в head, он должен быть написан внутри тега head. Данный тег title является обязательным и должен присутствовать в каждом html документе. В добавок к этому он отображается как заголовок окна браузера. Длинна такого заголовка не должна превышать 60 символов. В тексте такого заголовка должна содержаться максимально полная информация, которая характеризует содержание страницы.

После обязательного тега title, идет необязательный, но так же не мало важный тег meta. Данный тег является одинарным. С помощью данного тега задается описание для страницы (description) и ее ключевые слова (keywords).

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

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

5.

Говорит браузеру, что все помещенное между этими тегами, должно отобразиться в окне вашего браузера. Вот основные теги, которые могут присутствовать абсолютно в каждом документе. Тег body служит в качестве основного тела страницы, который включает в себя все ее содержимое. Данный тег желательно открывать и в конце документа не забыть закрывать.

6. Элемент Doctype

В каждом документе так же должен быть указан вот такой элемента doctype. Для чего он нужен и что в нем должно быть. Обычно народ сильно не увлекается этими строчками, копируют себе в документы и работают спокойно. Данные элементы говорят браузеру, какая версия html используется в документе, какое описание страницы, какая используется кодировка, какие ключевые слова включены, кто автор и как называется страница.

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

Так выглядит главная страница сайта.

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

Теперь немного слов о JavaScript.

1. Для того чтобы внедрить код JavaScript в html документ, достаточно прописать его внутри тэга . Например:

//Код JavaScript

2. Для того чтобы подключить отдельный файл кода JavaScript, достаточно прописать следующий код:

3. Теперь напишем традиционный первый скрипт, который покажет нам как работает JavaScript. Для этого создадим произвольный html документ следующего содержания:

Первый скрипт, написанный с использованием JavaScript

Начало документа...

document.write("Этот текст написан с использованием JavaScript");

Конец документа

Метод document .write () - предназначен для вывода в документ строки, указанной в качестве параметра данного метода. Если данный метод вызывается в процессе загрузки документа, то он выводит строку в текущем месте.

Теперь перейдем к рассмотрению нашего сайта и кода.

Как я уже говорил, JavaScript можно внедрить в html страницу двумя способами:

1. Разместить код JavaScript внутри тэгов.

2. Подключить отдельный файл JavaScript в котором находится сам код JavaScript.

Рассмотрим первый вариант.

На главной странице нашего сайта в левом блоке расположена ссылка на примеры использования JavaScript. Если перейти по этой ссылке, то первое что мы увидим, это всплывающее окно с надписью: “Всплывающее окно”. Это первый пример JavaScript. Исходный код следующий:

Пример 1. Всплывающие сообщение.

alert("Всплывающее окно");

Ссылка

Здесь основная операция это alert, она выводит модальное окно с сообщением. Посетитель не сможет продолжить работу, пока не нажмет на кнопку "ОК" в модальном окне.

Следующий пример JavaScript это изменение цвета окна при наведении на нее мыши. Исходный код следующий:

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

Замена элемента div.ЗаменитьfunctionmyFunction(){document.getElementById("myPar").innerHTML="Новыйпараграф";document.getElementById("myDiv").innerHTML="Новыйтекствэлементе div";} В этом скрипте основная операция это getElementById. Эта функция ищет элементы в HTML-документе, по значению их атрибута id="значение". Свойство innerHTML учитывает стили элементов, а именно отображается элемент или нет, а, следовательно, и его содержимое в браузере. Последний пример JavaScript это небольшая анкета, при заполнении которой скрипт выдает Вам информацию, которую Вы вводили.
При нажатии на кнопку “Отправить”, у нас получается следующее: Теперь рассмотрим второй вариант использования JavaScript с подключением отдельного файла highslide.js Данный скрипт увеличивает и уменьшает изображение при его нажатии. Примером может служить Фотогалерея сайта.
Здесьмыподключаем
И соответственно при нажатии на изображение идет запрос к файлу highslide.js