Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ооп</title>
    <style type="text/css">
        * {
            color: #333;
            font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
            font-size: 12px;
            line-height: 18px;
            padding: 0;
            margin: 0;
        }
​
        body {
            width: 500px;
            margin: 10px auto 0;
        }
​
        #newText {
            height: 150px;
            width: 100%;
            resize: none;
        }
​
        #add {
            border: 1px solid #ccc;
            height: 18px;
            margin: 10px auto;
            text-align: center;
            width: 50px;
            cursor: pointer;
            background-color: #ff0;
        }
​
        #itemList {
            border: 1px solid #ccc;
            height: 300px;
            list-style: none;
            overflow: auto;
        }
​
        #itemList li {
            border: 1px solid #ccc;
            cursor: default;
            padding: 13px;
        }
​
        #itemList li:hover {
            background-color: #eee;
        }
    </style>
</head>
<body>
<textarea id="newText"></textarea>
<div id="add">add</div>
<ul id="itemList">
    <li data-text="Структурное программирование. Методология разработки программного обеспечения, в основе
    которой лежит представление программы в виде иерархической структуры блоков. Предложена в 70-х годах XX века
    Э. Дейкстрой, разработана и дополнена Н. Виртом.">
        Структурное программирование.
    </li>
    <li data-text="Императивное программирование. Это парадигма программирования, которая, в отличие от
    декларативного программирования, описывает процесс вычисления в виде инструкций, изменяющих состояние программы.
    Императивная программа очень похожа на приказы, выражаемые повелительным наклонением в естественных языках,
    то есть это последовательность команд, которые должен выполнить компьютер.">
        Императивное программирование.
    </li>
    <li data-text="Функциональное программирование. Раздел дискретной математики и парадигма программирования, в
    которой процесс вычисления трактуется как вычисление значений функций в математическом понимании последних
    (в отличие от функций как подпрограмм в процедурном программировании).">
        Функциональное программирование.
    </li>
</ul>
​
<script>
    (function (window) {
        "use strict";
​
        var document = window.document,
                add = document.getElementById("add"),
                newText = document.getElementById("newText"),
                list = document.getElementById("itemList"),
                items = document.getElementsByTagName("LI"),
                regEx = /\.|\?|!/,
                i,
                len;
​
        function Unit (data, item) {
            this.first = data.slice(0, data.search(regEx) + 1) || data;
            this.text = data;
            this.name = item || this.add(this.text, this.first);
            this.init(this.name);
        }
​
        Unit.prototype.init = function (item) {
            var ref = this;
​
            item.onmouseover = function () {
                return ref.show(ref.name);
            };
            item.onmouseout = function () {
                return ref.hide(ref.name);
            };
        };
​
        Unit.prototype.add = function (text, first) {
            var item = document.createElement("li");
​
            item.setAttribute("data-text", text);
            item.innerHTML = first;
​
            list.insertBefore(item, list.firstChild);
​
            newText.value = "";
            newText.focus();
​
            return item;
        };
​
        Unit.prototype.show = function (item) {
            item.innerHTML = this.text;
        };
​
        Unit.prototype.hide = function (item) {
            item.innerHTML = this.first;
        };
​
        for (i = 0, len = items.length; i < len; i += 1) {
            items[i] = new Unit(items[i].getAttribute("data-text"), items[i]);
​
        }
​
        add.onclick = function () {
            var value = newText.value;
​
            if (!value) {
                return;
            }
​
            return new Unit(value, false);
        };
​
    }(this));
</script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers