1 Тема від ktretyak Востаннє редагувалося ktretyak (08.02.2015 17:00:06)

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Тема: Викладаємо різні цікаві JS-скрипти

Почну з себе.

Взагалі то я спочатку писав розширення "автозбереження в локальній пам'яті" для даного форума, а потім подумав: а чому б його не зробити у форматі "для всіх".

Так ось цей приклад можна використовувати для будь-якої веб-форми.

Початково припускається, що поле введення в формі матиме ім'я req_message. Але його можна змінити, відповідно змінивши налаштування у конфігураційному об'єкті

var config_autosave = {
  element_form : $('textarea[name=req_message]'), // Форма, яка матиме функціональність автозбереження
  element_block : $('#autosave_template'), // Текстовий блок, який буде показуватись в разі наявності автозбереженого повідомлення
  element_datetime : $('#datetime_autosave'), // span, в який буде вставлятись значення дати, раніше збереженого повідомлення
  timeout : 2000, // Тривалість паузи при введенні тексту, після якої відбувається автозбереження
  key_autosave : "autosave-" + window.location.pathname + window.location.search // Назва ключа, по якому буде зберігатись автозбережена версія повідомлення
}

JS-скрипт містить детальні коментарі, та мабуть буде цікавим для "чайників".

Подякували: 0x9111A, Q-bart, Faraon, Анатолій4

2 Відповідь від Invader

  • Invader
  • Invader
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 13.08.2012
  • Повідомлень: 2 047
    • Репутація: 575

Re: Викладаємо різні цікаві JS-скрипти

  <script>
    function calculator()
    {
        var a = document.getElementById('a').value;
        var b = document.getElementById('b').value;
        var result = ( +a!=a || +b!=b ) ? 'введите цифры' : +a + +b;
        document.getElementById('result').value = result;
    }
  </script>

3 Відповідь від Invader

  • Invader
  • Invader
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 13.08.2012
  • Повідомлень: 2 047
    • Репутація: 575

Re: Викладаємо різні цікаві JS-скрипти

alert((![]+[])[+[]]+(![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]);

4 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Викладаємо різні цікаві JS-скрипти

Invader написав:
alert((![]+[])[+[]]+(![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]);

Це що бінарне кодування літер?

5 Відповідь від ktretyak Востаннє редагувалося ktretyak (08.02.2015 18:12:29)

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Викладаємо різні цікаві JS-скрипти

Invader написав:
  <script>
    function calculator()
    {
        var a = document.getElementById('a').value;
        var b = document.getElementById('b').value;
        var result = ( +a!=a || +b!=b ) ? 'введите цифры' : +a + +b;
        document.getElementById('result').value = result;
    }
  </script>

Щось цей скрипт не працює, явно не вистачає, наприклад, згаданого ElementById('a')

6 Відповідь від ktretyak Востаннє редагувалося ktretyak (08.02.2015 18:26:44)

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Викладаємо різні цікаві JS-скрипти

Доречі, Google Chrome показує вміст localStorage

▼в онлайн-режимі

https://1933a544b9b651d3813e8de397efcd5a179e17e8.googledrive.com/host/0Bwk9euTxkxYUOFFUS29tSGJ4eXM/replace.org.ua/img/local-storage.png

Для цього натискаєте F12, переходите на закладку Resources та зліва вибираєте Local Storage

7 Відповідь від Invader

  • Invader
  • Invader
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 13.08.2012
  • Повідомлень: 2 047
    • Репутація: 575

Re: Викладаємо різні цікаві JS-скрипти

Працює:

<html>
<head>
<body>
<input type=text id=a>
<input type=text id=b>
<p><input type=text id=result>
<button onclick=calculator() >calc
         <script>
        function calculator()
        {
        var a = document.getElementById('a').value;
        var b = document.getElementById('b').value;
        var result = ( +a!=a || +b!=b ) ? 'введите цифры' : +a + +b;
        document.getElementById('result').value = result;
        }
        </script>

А що то таке я не знаю.

8 Відповідь від VTrim Востаннє редагувалося VTrim (08.02.2015 18:38:14)

  • VTrim
  • VTrim
  • =)
  • Поза форумом
  • Дата реєстрації: 07.09.2014
  • Повідомлень: 3 319
    • Репутація: 2298

Re: Викладаємо різні цікаві JS-скрипти

Було б добре, якби з'явився окремий модуль для добавки корисних шматків коду,для різних мов. З коментарями до них (для обговорення),бо який сенс добавляти тут,якщо буде один код на сторінку і N сторінок флуду,все змішано.

9 Відповідь від ktretyak Востаннє редагувалося ktretyak (08.02.2015 18:48:40)

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Викладаємо різні цікаві JS-скрипти

VTrim написав:

Було б добре, якби з'явився окремий модуль для добавки корисних шматків коду,для різних мов. З коментарями до них (для обговорення),бо який сенс добавляти тут,якщо буде один код на сторінку і N сторінок флуду,все змішано.

Такий модуль вже досить довго існує. Вміли б ним всі бажаючі користуватись.

P.S. При достатній кількості бажаючих можна елементарно створити групу на github, де б ми дійсно могли в зручний спосіб щось викладати і обговорювати. За разом новачки б потренувались працюючи з git.

Подякували: Анатолій1

10 Відповідь від Invader

  • Invader
  • Invader
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 13.08.2012
  • Повідомлень: 2 047
    • Репутація: 575

Re: Викладаємо різні цікаві JS-скрипти

Є якийсь сайт, і здається не один, де можна подібне розміщати і шукати.

11 Відповідь від VTrim

  • VTrim
  • VTrim
  • =)
  • Поза форумом
  • Дата реєстрації: 07.09.2014
  • Повідомлень: 3 319
    • Репутація: 2298

Re: Викладаємо різні цікаві JS-скрипти

<facepalm>
Я маю на увазі модуль для реплейсу,з мінімальними функціями. Вибір мови,добавити код,коментувати. Якщо вам скрізь зручніший гітхаб,то чому Ви не запропонували класти код туди,а вже сюди давати лінк?

12 Відповідь від ktretyak Востаннє редагувалося ktretyak (08.02.2015 19:17:39)

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Викладаємо різні цікаві JS-скрипти

VTrim написав:

<facepalm>
Я маю на увазі модуль для реплейсу,з мінімальними функціями. Вибір мови,добавити код,коментувати. Якщо вам скрізь зручніший гітхаб,то чому Ви не запропонували класти код туди,а вже сюди давати лінк?

Ви думаєте я не зрозумів, що ви маєте на увазі?...

Гітхаб дійсно зручний, зараз я створю там групу і спробуємо цю тему далі рухати.

13 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Викладаємо різні цікаві JS-скрипти

Готово http://replace.org.ua/post/49480/

14 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Викладаємо різні цікаві JS-скрипти

VTrim написав:

<facepalm>
Я маю на увазі модуль для реплейсу,з мінімальними функціями. Вибір мови,добавити код,коментувати. Якщо вам скрізь зручніший гітхаб,то чому Ви не запропонували класти код туди,а вже сюди давати лінк?

Готово

15 Відповідь від 0xDADA11C7

  • Звідки: Дніпрожидівськ
  • Дата реєстрації: 14.02.2014
  • Повідомлень: 5 707
    • Репутація: 5777

Re: Викладаємо різні цікаві JS-скрипти

Я за tiddlywiki для таких речей, хоча його інтеграція з гітхабом буде безперечним плюсом

16 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Викладаємо різні цікаві JS-скрипти

0xDADA11C7 написав:

Я за tiddlywiki для таких речей, хоча його інтеграція з гітхабом буде безперечним плюсом

А чим цей сервіс кращий за просто github?

17 Відповідь від 0xDADA11C7

  • Звідки: Дніпрожидівськ
  • Дата реєстрації: 14.02.2014
  • Повідомлень: 5 707
    • Репутація: 5777

Re: Викладаємо різні цікаві JS-скрипти

системою теґів, можливістю створювати довільні вибірки -- структуризація інформації краща навіть за вікіпедію.

18 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Викладаємо різні цікаві JS-скрипти

Однозначно цікавий і корисний код готового JS-редактора для веб-форм.

19 Відповідь від VTrim

  • VTrim
  • VTrim
  • =)
  • Поза форумом
  • Дата реєстрації: 07.09.2014
  • Повідомлень: 3 319
    • Репутація: 2298

Re: Викладаємо різні цікаві JS-скрипти

Побуквений вивід тексту.

<script>
var source,dest,len,now=0,delay=100,letters=1;
function show_text()
{
source = document.getElementById("pageTextSource");
dest = document.getElementById("pageText");
len = source.innerHTML.length;
show();
}

function show()
{
dest.innerHTML += source.innerHTML.substr(now,letters);
now+=letters;

if(now<len)
setTimeout("show()",delay);
}
</script>
<body onload="show_text();">
<p style="display:none" id="pageTextSource">

Текст для виводу...

<p id="pageText">
</p>
</body>

20 Відповідь від VTrim

  • VTrim
  • VTrim
  • =)
  • Поза форумом
  • Дата реєстрації: 07.09.2014
  • Повідомлень: 3 319
    • Репутація: 2298

Re: Викладаємо різні цікаві JS-скрипти

Анімація в <title>

<title>Replace.org.ua</title>
<script>
var tit = document.title;
var c = 0;
function writetitle()
{
document.title = tit.substring(0,c);
if(c==tit.length)
{
c = 0;
setTimeout("writetitle()", 3000);
}
else
{
c++;
setTimeout("writetitle()", 200);
}
}
writetitle();
</script>