learnJavaScript/propsInfo.html at main · mikebars1995/learnJavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #example {
            width: 300px;
            height: 200px;
            overflow: auto;
            border: 25px solid #E8C48F;
            padding: 20px;
        }

        .key {
            cursor: pointer;
            text-decoration: underline;
        }
    </style>

</head>

<body>


    <div id="example">
        <h3>Introduction</h3>
        <p>This Ecma Standard is based on several originating technologies, the most well known being JavaScript
            (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared
            in that company's Navigator 2.0 browser.
            It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with
            Internet Explorer 3.0. The development of this Standard started in November 1996. The first edition of this
            Ecma Standard was adopted by the
            Ecma General Assembly of June 1997.</p>

        <p>That Ecma Standard was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure, and approved
            as international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the
            second edition of ECMA-262 to keep
            it fully aligned with ISO/IEC 16262. Changes between the first and the second edition are editorial in
            nature.</p>

        <p>The third edition of the Standard introduced powerful regular expressions, better string handling, new
            control statements, try/catch exception handling, tighter definition of errors, formatting for numeric
            output and minor changes in anticipation
            of forthcoming internationalisation facilities and future language growth. The third edition of the
            ECMAScript standard was adopted by the Ecma General Assembly of December 1999 and published as ISO/IEC
            16262:2002 in June 2002.</p>

    </div>


    <div id="mouse-wrap">Координаты мыши: <span id="mouse">...</span></div>
    <div id="info"></div>


    <script>
        let props = {
            geometry: ['clientLeft', 'clientTop', 'clientWidth', 'clientHeight', 'offsetWidth', 'offsetHeight', 'scrollWidth', 'scrollHeight'],
            scroll: ['scrollLeft', 'scrollTop'],
            offsetParent: ['offsetParent', 'offsetLeft', 'offsetTop']
        };

        info.innerHTML = '<h3>Click to see the value:</h3>';
        for (let k in props) {
            info.innerHTML += `<h4>${k}</h4>`;
            let prop = props[k];
            for (let i = 0; i < prop.length; i++) {
                info.innerHTML += "<span class='key'>" + prop[i] + '</span>: <span id="' + prop[i] + '">&nbsp;</span>' + " "
                i++;
                if (i < prop.length) {
                    info.innerHTML += "<span class='key'>" + prop[i] + '</span>: <span id="' + prop[i] + '">&nbsp;</span>';
                }
                info.innerHTML += "<br/>";

            }
        }

        document.onclick = function (event) {
            let target = event.target;
            if (!target.classList.contains('key')) return;

            let prop = target.innerHTML;
            let value = example[prop];
            value = value.tagName || value;
            document.getElementById(prop).innerHTML = value;
        };


        document.onmousemove = function (e) {
            document.getElementById('mouse').innerHTML = Math.round(e.clientX) + ':' + Math.round(e.clientY);
        };

        let scrollBottom = example.scrollHeight - example.scrollTop - example.clientHeight
        let scrollWidth = (example.offsetWidth) - example.clientWidth - 25 * 2
        console.log(scrollBottom)
        console.log(scrollWidth)
    </script>

</body>

</html>