javascript_intro/index.html at main · digitalers2021/javascript_intro · 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>javascript Course</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link href="style.css" rel="stylesheet" />

    <script src="https://code.iconify.design/2/2.0.4/iconify.min.js"></script>

    <script src="js/main.js"></script>
    <style></style>
  </head>
  <body>
    <div class="mx-auto my-5">
      <button
        class="
          flex flex-row
          mx-auto
          hover:bg-red-500
          focus:outline-none focus:ring-2 focus:ring-red-600
          p-2
          rounded
        "
        onclick="darkMode()"
      >
        <p class="mr-2">Dark mode</p>
        <span class="iconify" data-icon="bi:moon"></span>
      </button>
    </div>

    <div class="flex flex-row">
      <span
        class="iconify mx-2"
        data-icon="flat-color-icons:alarm-clock"
      ></span>
      <div id="MyClock" class="clock" onload="showTime()"></div>

    </div>
      <button class="bg-red-500 rounded" onclick="showOptions()">Ocultar aventura</button>
    <div id="aventura" >
      <div class="container mx-5">
        <div id="app"></div>
        Elegi tu propia aventura!

        <div class="my-2">
          Opcion 1:
          <button
            class="bg-red-500 px-2 rounded"
            onclick="miFuncionClick('mendoza')"
          >
            Ir a Mendoza
          </button>
        </div>

        <div class="my-2">
          Opcion2
          <button
            class="bg-red-500 px-2 rounded"
            onclick="miFuncionClick('cordoba')"
          >
            Ir a Cordoba
          </button>
        </div>

        <div class="my-2">
          Opcion3
          <button
            class="bg-red-500 px-2 rounded"
            onclick="miFuncionClick('tierrafuego')"
          >
            Ir a Tierra del Fuego
          </button>
        </div>
      </div>
    </div>

    <script>
      /* Comentario de varias lineas
console.log("Hola mundo!")
console.log("Hola mundo")
*/
      function suma(a, b) {
        console.log("La suma es: ", a + b);
      }
      const unaMas = "La tercer forma de definir una variable";
      let otra_forma = "Otra forma";
      let otraForma = "Otra forma";
      // console.log(miVariable)
      console.log(otraForma);
      console.log(unaMas);

      const total = 5 * 6 + 5;
      if (total > 5) {
        console.log("El total es: ", total, ", es correcto?");
      } else {
        console.log("El total es menor a 5");
      }

      const Alumno = {
        nombre: "Xavier Petit",
        edad: 33,
        cursando: "Python",
        suma: function (a, b) {
          const resultado = a + b;
          return resultado;
        },
      };
      console.log("El nombre del alumno es: ", Alumno.nombre);
      console.log("La edad es: ", Alumno["edad"]);

      // suma(5, 10)
      const res = Alumno.suma(5, 10);
      console.log("El resultado es ", res);

      const lista = [1, 2, 3, 4];
      console.log(lista);

      function imprimir(x) {
        console.log("Imprimiendo x:", x);
      }
      // Similar a lambda en python
      // estas son funciones anonimas en javascript
      lista.forEach((e) => console.log(e));
      lista.forEach(function (e) {
        console.log(e);
      });

      for (const e of lista) {
        console.log("For of example: ", e);
      }

      for (let i = 0; i < lista.length; i++) {
        console.log(`Lista en elemento ${i} su valor es ${lista[i]}`);
      }

      let i = 0;
      do {
        console.log(`While lista en elemento ${i} su valor es ${lista[i]}`);
        i++;
      } while (i < lista.length);

      lista.forEach(imprimir);

      // document.write("<b>Hola este es un mensaje en el DOM</b>")
      const miApp = document.querySelector("#app");
      miApp.innerHTML = "<b>Hola mundo </b>";

      miApp.onclick = function () {
        console.log("Hiciste click");
        miApp.innerHTML = "<b>Hiciste click</b>";
      };
      console.log(miApp);

      function miFuncionClick(aventura) {
        switch (aventura) {
          case "mendoza":
            console.log("Elegiste ", aventura);
            break;
          case "cordoba":
            console.log("Elegiste ", aventura);
            break;
          case "tierrafuego":
            console.log(`Elegiste,${aventura}`);
            break;
          default:
            console.log("No es ninguna de las opciones validas");
            break;
        }
      }

      /*
def imprimir(x):
    print(x)
for x in lista { imprimir(x)}
*/
      // comentario de una sola linea

      function showOptions(){
	      document.querySelector("#aventura").classList.toggle("hide")
      }
    </script>
    <script src="js/clock.js"></script>
    <script src="js/dark.js"></script>
  </body>
</html>