JS_simple_ClassExample_private_public/JS_simple_ClassExample_private_public.html at main · Reinerth/JS_simple_ClassExample_private_public · 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>

<html>

    <head>
        <title>Class Example</title>
        <meta name="title" content="JS Class-Example with private and public functions">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="pragma" content="no-cache" />
    </head>

    <body>


        Learning JavaScript might be hard, but easier,<br>
        than try to explain the lemmings, they cant stop the flood with love ♥.


        <script>


            /**
            * The Class (in all programming languages)
            *
            * JavaScript has the greatest options for all ways of programming.
            * Lazy, procedural, with different syntax-rules and frameworks, quick and dirty
            * or modular, clean and proffesional for high-end-applications.
            *
            * With ECMA Script 5 (Version 5) it has reached its maximum of needed possibilities,
            * and best readable syntax (grammar-rules).
            * "let" vs. "var" is an exception. "let" is an inmprovement.
            * "let" has a more strict and logic scope than "var".
            *
            * All other new and different JS-"styles", are bad syntax-ideas.
            * Arrow-functions, fetch, backticks, promises and so on,
            * are only to confuse newbies and are bad practice.
            * They are hard to read and have no advantages
            * to the classic, native approach of ES5.
            *
            * A Class does not needs to be created
            * with a Syntax-given rule from the programming language itself.
            * Means something like "new Class". The word "class"
            * has not necessarily to be there, for letting a structure to be a class.
            * We even could name a class "thisIsNotAClass",
            * but that doesnt change a thing about the true structure.
            *
            * The Definition of a Class:
            * Group of objects, functions and variables, usually commonly used (intersection).
            *
            * Definition of an Object:
            * Group of properties and their values (like JSON).
            *
            * Thus, a so-called "CSS-class" is not a class, but an object,
            * because it is a group of properties.
            * CSS-functions like "calc" are only the substitute
            * for the "to-be-generated"-values of their properties.
            */


            /**
             * Author: Arthur Reinerth, 20250307, Duesseldorf
             *
             * For a clean modular structure with many classes,
             * the classes should be integrated in a "namespace".
             * For having all classes in one container and avoiding "namespace-pollution".
             * You can find here an example:
             * https://github.com/Reinerth/JS_modulePattern_ClassExample_private_public
             */


            "use strict"; /* Used traditional syntax and ES5, except "let". */


            // A list of items to be used in our Class.
            let wegetable = [
                {"name":"Aubergine",    "color":"violet"},
                {"name":"Beans",        "color":"green" },
                {"name":"Broccoli",     "color":"green" },
                {"name":"Champignons",  "color":"white" },
                {"name":"Cucumber",     "color":"green" },
                {"name":"Onion",        "color":"white" },
                {"name":"Potatoes",     "color":"beige" },
                {"name":"Pepper",       "color":"red"   },
                {"name":"Peas",         "color":"green" },
                {"name":"Tomato",       "color":"red"   }
            ];


            /** myFirstClass ********************************************************
             * Constructing a class "myFirstClass" with private and public functions.
             * The public functions can be accessed from outside of the class,
             * and the privat functions only from inside the class.
             */
            let myFirstClass = function (){

                let randomNumber = parseInt(Math.random()*10); // generate a random number 0-9

                // Private (can only be accessed from this class)
                let getVeggyName = function(){
                    return wegetable[randomNumber].name;
                };

                // Private (can only be accessed from this class)
                let getVeggyColor = function(){
                    return wegetable[randomNumber].color;
                };


                // Public (can be accessed from outside and other classes)
                this.init = function(){

                    let myVeggy = getVeggyName() + " ["+ getVeggyColor() +"]";

                    alert(myVeggy); // output

                    return myVeggy;
                };
            };

            // Variable "first", is initialized with an instantiation (new) of the class "myFirstClass"
            let first = new myFirstClass();


            // Starting the application
            first.init();


        </script>
    </body>
</html>