marcobon90 · marcobon90 · Oct 15, 2024 · Nov 15, 2024 · Nov 15, 2024
diff --git a/Esempi/Autenticazione/autenticazione.html b/Esempi/Autenticazione/autenticazione.html
@@ -0,0 +1,3 @@
+<body>
+    <script src="handling-exception.js"></script>
+</body>
diff --git a/Esempi/Autenticazione/handling-exception.js b/Esempi/Autenticazione/handling-exception.js
@@ -0,0 +1,63 @@
+var Messaggio = /** @class */ (function () {
+    function Messaggio() {
+        this.elemento = this.Crea();
+    }
+    Messaggio.prototype.Crea = function () {
+        var div = document.createElement('div');
+        var p = document.createElement('p');
+        div.appendChild(p);
+        return div;
+    };
+    Messaggio.prototype.InserisciMessaggio = function (stringa) {
+        var p = this.elemento.querySelector('p');
+        if (p) {
+            p.textContent = stringa;
+        }
+    };
+    Messaggio.prototype.Mostra = function () {
+        document.body.appendChild(this.elemento);
+    };
+    Messaggio.prototype.Distruggi = function () {
+        var _this = this;
+        setTimeout(function () {
+            if (_this.elemento.parentNode) {
+                _this.elemento.parentNode.removeChild(_this.elemento);
+            }
+        }, 5000);
+    };
+    return Messaggio;
+}());
+var ProgrammaAutorizzazione = /** @class */ (function () {
+    function ProgrammaAutorizzazione() {
+    }
+    ProgrammaAutorizzazione.Esegui = function () {
+        var autorizzazioneUtente = true;
+        var messaggioAutorizzazione = new Messaggio();
+        try {
+            var accessoUtente = this.VerificaAutorizzazione(autorizzazioneUtente);
+            messaggioAutorizzazione.InserisciMessaggio(accessoUtente);
+            messaggioAutorizzazione.Mostra();
+        }
+        catch (error) {
+            console.log(error);
+            messaggioAutorizzazione.InserisciMessaggio(error);
+            messaggioAutorizzazione.Mostra();
+            //ritorno messaggio
+        }
+        finally {
+            if (messaggioAutorizzazione) {
+                messaggioAutorizzazione.Distruggi();
+            }
+        }
+    };
+    ProgrammaAutorizzazione.VerificaAutorizzazione = function (autorizzazione) {
+        if (autorizzazione) {
+            return 'Utente Autorizzato';
+        }
+        else {
+            throw new Error("Utente non autorizzato");
+        }
+    };
+    return ProgrammaAutorizzazione;
+}());
+ProgrammaAutorizzazione.Esegui();
diff --git a/Esempi/Autenticazione/handling-exception.ts b/Esempi/Autenticazione/handling-exception.ts
@@ -0,0 +1,72 @@
+class Messaggio {
+
+    private elemento: HTMLDivElement
+
+    constructor() {
+        this.elemento = this.Crea()
+    }
+
+    private Crea(): HTMLDivElement {
+        const div = document.createElement('div') as HTMLDivElement
+        const p = document.createElement('p') as HTMLParagraphElement
+        div.appendChild(p)
+
+        return div
+    }
+
+    public InserisciMessaggio(stringa:string) {
+        const p = this.elemento.querySelector('p')
+        if (p) {
+            p.textContent = stringa
+        }
+    }
+
+    public Mostra():void {
+        document.body.appendChild(this.elemento)
+    }
+
+    public Distruggi():void {
+        setTimeout(() => {
+            if (this.elemento.parentNode) {
+                this.elemento.parentNode.removeChild(this.elemento)
+            }
+        }, 5000);
+    }
+}
+
+
+
+class ProgrammaAutorizzazione {
+
+    static Esegui() {
+        let autorizzazioneUtente:boolean = false
+
+        let messaggioAutorizzazione: Messaggio = new Messaggio()
+        try {
+            let accessoUtente = this.VerificaAutorizzazione(autorizzazioneUtente)
+            messaggioAutorizzazione.InserisciMessaggio(accessoUtente)
+            messaggioAutorizzazione.Mostra()
+        } catch (error) {
+            console.log(error);
+            messaggioAutorizzazione.InserisciMessaggio(error)
+            messaggioAutorizzazione.Mostra()
+            //ritorno messaggio
+        } finally {
+            if (messaggioAutorizzazione) {
+                messaggioAutorizzazione.Distruggi()
+            }
+        }
+
+    }
+    static VerificaAutorizzazione(autorizzazione: boolean):string {
+        if (autorizzazione) {
+            return 'Utente Autorizzato'
+        } else {
+            throw new Error("Utente non autorizzato");
+        }
+    }
+
+}
+
+ProgrammaAutorizzazione.Esegui()
+
diff --git a/Esempi/Autenticazione/prova1.mts b/Esempi/Autenticazione/prova1.mts
@@ -0,0 +1,5 @@
+export class Prova1 {
+    constructor(parameters) {
+
+    }
+}
diff --git a/parte2-css/pagine/blog.html b/parte2-css/pagine/blog.html
@@ -0,0 +1,76 @@
+<style>
+    @media screen and (min-width:600px) {
+        body {
+            width: 500px;
+            margin: auto;
+
+            article {
+                display: flex;
+                flex-direction: column;
+                width: 400px;
+                margin: auto;
+
+                .riga-introduzione{
+                    display: grid;
+                    grid-template-columns: auto auto;
+
+                    .informazioni-introduttivi {
+                        background-color: antiquewhite;
+                        border: 1px solid;
+                        padding: 10px;
+
+                        p {
+                            text-align: center;
+                        }
+
+                        ul {
+                            list-style-type: none;
+                            position: relative;
+                            left: -12;
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>
+
+<div class="contenitore">
+    <header>
+        <img src="../../risorse/immagini/logo-250x100.webp" alt="">
+    </header>
+    <main>
+        <article>
+            <h1>Titolo blog</h1>
+            <div class="riga-introduzione">
+                <div class="blocco-introduzione">
+                    <p>Inserisci introduzione</p>
+                    <p>Inserisci introduzione</p>
+                    <p>Inserisci introduzione</p>
+                    <h2>Sottotitolo</h2>
+                    <p>Paragrafo</p>
+                    <p>Paragrafo</p>
+                    <p>Paragrafo</p>
+                    <p>Paragrafo</p>
+                </div>
+                <div class="informazioni-introduttivi">
+                    <p>Informazioni articolo</p>
+                    <ul>
+                        <li>
+                            Nome autore: 
+                        </li>
+                        <li>
+                            Data: 
+                        </li>
+                        <li>
+                            Categoria: 
+                        </li>
+                        <li>
+                            Tag: 
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </article>
+    </main>
+</div>
diff --git a/parte5-webcomponents/componenti/components.mjs b/parte5-webcomponents/componenti/components.mjs
@@ -0,0 +1 @@
+export {};
diff --git a/parte5-webcomponents/componenti/components.mts b/parte5-webcomponents/componenti/components.mts
@@ -0,0 +1 @@
+import { container } from "./container/container.mjs";
diff --git a/parte5-webcomponents/componenti/container/container.html b/parte5-webcomponents/componenti/container/container.html
@@ -0,0 +1,3 @@
+<template>
+    <link rel="stylesheet" href="template.css">
+</template>
diff --git a/parte5-webcomponents/componenti/container/container.mjs b/parte5-webcomponents/componenti/container/container.mjs
@@ -0,0 +1,9 @@
+import { AttaccaShadow, OttieniContentDaTemplate, OttieniTemplate } from "../function.mjs";
+export const container = customElements.define('container', class Container extends HTMLDivElement {
+    constructor() {
+        super();
+        const shadow = AttaccaShadow(this);
+        const templateContent = OttieniContentDaTemplate(OttieniTemplate('container-template'));
+        shadow.appendChild(templateContent);
+    }
+});
diff --git a/parte5-webcomponents/componenti/container/container.mts b/parte5-webcomponents/componenti/container/container.mts
@@ -0,0 +1,14 @@
+import { AttaccaShadow, OttieniContentDaTemplate, OttieniTemplate } from "../function.mjs"
+
+export const container = customElements.define('container', 
+    class Container extends HTMLDivElement {
+        constructor() {
+            super()
+
+            const shadow = AttaccaShadow(this)
+            const templateContent = OttieniContentDaTemplate(OttieniTemplate('container-template'))
+
+            shadow.appendChild(templateContent)
+        }
+    }
+)
diff --git a/parte5-webcomponents/componenti/container/template.css b/parte5-webcomponents/componenti/container/template.css
diff --git a/parte5-webcomponents/componenti/form/form.html b/parte5-webcomponents/componenti/form/form.html
@@ -0,0 +1,43 @@
+<template id="form-template">
+    <style>
+        form {
+            border: 1px solid blue;
+            width: 300px ;
+            margin: auto;
+            padding: 10px;
+
+            input {
+                display: block;
+                width: 50%;
+                margin: auto;
+            }
+        }
+    </style>
+    <form action="">
+        <input type="text" name="inputNome" id="inputNome" value="Inserisci Nome">
+    </form>
+</template>
+
+<!-- <form-infodit></form-infodit> -->
+<!--Inserisci qui un form predefinito e vedi che non si applica lo stile del template-->
+
+<!--Inserisci qui un form-infodit e avrai l'esatta copia del primo-->
+
+<!-- <script>
+    const formInfodit = customElements.define('form-infodit',
+        class FormInfodit extends HTMLElement {
+            constructor() {
+                super()
+
+                //Creazione dello shadow Dom
+                const shadow = this.attachShadow({ mode: 'closed' })
+
+                //Prendiamo il contenuto del template e lo copiamo su una variabile 
+                const template = document.getElementById('form-template').content.cloneNode(true);
+
+                //Attacchiamo la copia del template sullo shadow DOM
+                shadow.appendChild(template)
+            }
+        }
+    )
+</script> -->
diff --git a/parte5-webcomponents/componenti/form/form.mjs b/parte5-webcomponents/componenti/form/form.mjs
@@ -0,0 +1,12 @@
+import { InserisciTemplateNelloShadowDOM } from "../function.mjs";
+const formInfodit = customElements.define('form-infodit', class FormInfodit extends HTMLElement {
+    constructor() {
+        super();
+        //Creazione dello shadow Dom
+        const shadow = this.attachShadow({ mode: 'closed' });
+        //Prendiamo il contenuto del template e lo copiamo su una variabile 
+        //const template = OttieniTemplateDaHTML('form.html','form-template') as Promise<Node>
+        //Attacchiamo la copia del template sullo shadow DOM
+        InserisciTemplateNelloShadowDOM(shadow, 'form.html', 'form-template');
+    }
+});
diff --git a/parte5-webcomponents/componenti/form/form.mts b/parte5-webcomponents/componenti/form/form.mts
@@ -0,0 +1,17 @@
+import { InserisciTemplateNelloShadowDOM } from "../function.mjs"
+
+const formInfodit = customElements.define('form-infodit',
+    class FormInfodit extends HTMLElement {
+        constructor() {
+            super()
+            //Creazione dello shadow Dom
+            const shadow = this.attachShadow({ mode: 'closed' })
+
+            //Prendiamo il contenuto del template e lo copiamo su una variabile 
+            //const template = OttieniTemplateDaHTML('form.html','form-template') as Promise<Node>
+
+            //Attacchiamo la copia del template sullo shadow DOM
+            InserisciTemplateNelloShadowDOM(shadow,'form.html','form-template')
+        }
+    }
+)
diff --git a/parte5-webcomponents/componenti/form/prova.html b/parte5-webcomponents/componenti/form/prova.html
@@ -0,0 +1,2 @@
+<form-infodit></form-infodit>
+<script type="module" src="form.mjs"></script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		import { container } from "./container/container.mjs";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<form-infodit></form-infodit>
		<script type="module" src="form.mjs"></script>