Skip to content

Commit 61592b9

Browse files
alexba2004alexba2004
committed
First Commit to JavaScript-Basics
1 parent e58c97b commit 61592b9

File tree

20 files changed

+1496
-0
lines changed

20 files changed

+1496
-0
lines changed

‎css/domStyles.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/* Programa desarrollado por Jose Alejandro Briones Arroyo */
2+
3+
html {
4+
box-sizing: border-box;
5+
font-size: 62.5%;
6+
}
7+
8+
body {
9+
font-size: 1.6rem;
10+
font-family: Arial, Helvetica, sans-serif;
11+
background-color: rgba(3, 112, 131, 0.473);
12+
}
13+
14+
*,
15+
*:before,
16+
*:after {
17+
box-sizing: inherit;
18+
}
19+
20+
header {
21+
padding: 3rem 0;
22+
}
23+
24+
header h1 {
25+
text-align: center;
26+
color: rgb(2, 105, 105);
27+
font-size: 6rem;
28+
}
29+
30+
header p {
31+
text-align: center;
32+
color: #fff;
33+
font-size: 3.2rem;
34+
}
35+
36+
header a {
37+
text-decoration: none;
38+
color: #8f2222;
39+
text-align: center;
40+
}
41+
42+
.DOM {
43+
max-width: 120rem;
44+
margin: 0 auto;
45+
}
46+
47+
.DOM h2 {
48+
color: #fff;
49+
text-align: center;
50+
}
51+
52+
.DOM nav a {
53+
color: rgb(50, 55, 205);
54+
font-size: 20px;
55+
text-decoration: none;
56+
margin-right: 10px;
57+
}
58+
59+
.DOM p {
60+
color: #fff;
61+
font-size: 20px;
62+
}
63+
64+
.DOM #formulario {
65+
max-width: 500px;
66+
margin: 0 auto;
67+
}
68+
69+
.DOM #formulario input {
70+
display: block;
71+
width: 100%;
72+
border: none;
73+
margin-bottom: 2rem;
74+
padding: 2rem;
75+
border-radius: 1rem;
76+
}
77+
78+
.DOM #formulario input[type="submit"] {
79+
background-color: rgb(2, 105, 105);
80+
font-weight: 700;
81+
text-transform: uppercase;
82+
font-size: 20px;
83+
color: #fff;
84+
}
85+
86+
.alerta {
87+
padding: 1rem;
88+
text-align: center;
89+
color: #fff;
90+
text-transform: uppercase;
91+
font-size: 20px;
92+
}
93+
94+
.alerta.error {
95+
background-color: rgb(162, 0, 0);
96+
}
97+
98+
.alerta.exito {
99+
background-color: rgb(7, 145, 7);
100+
}

‎css/indexStyles.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/* Programa desarrollado por Jose Alejandro Briones Arroyo */
2+
3+
/* Configuración global */
4+
html {
5+
box-sizing: border-box;
6+
font-size: 62.5%; /* Establece 1rem como 10px */
7+
}
8+
9+
*,
10+
*:before,
11+
*:after {
12+
box-sizing: inherit;
13+
}
14+
15+
/* Estilos del cuerpo de la página */
16+
body {
17+
font-size: 1.6rem; /* 16px */
18+
font-family: "Raleway", sans-serif;
19+
background-color: cadetblue;
20+
}
21+
22+
/* Encabezado */
23+
header {
24+
padding: 3rem 0;
25+
text-align: center;
26+
}
27+
28+
header h1 {
29+
color: aqua;
30+
font-size: 6rem;
31+
}
32+
33+
header p {
34+
color: aliceblue;
35+
font-size: 3.2rem;
36+
}
37+
38+
header a {
39+
text-decoration: none;
40+
color: blue;
41+
}
42+
43+
/* Elementos con clase "DOM" */
44+
.DOM {
45+
max-width: 120rem;
46+
margin: 0 auto;
47+
}
48+
49+
.DOM h2 {
50+
color: aliceblue;
51+
text-align: center;
52+
}
53+
54+
.DOM nav a {
55+
color: aquamarine;
56+
font-size: 20px;
57+
text-decoration: none;
58+
margin-right: 10px;
59+
}
60+
61+
.DOM p {
62+
color: azure;
63+
font-size: 20px;
64+
}
65+
66+
/* Formulario dentro de elementos con clase "DOM" */
67+
.DOM #formulario {
68+
max-width: 500px;
69+
margin: 0 auto;
70+
}
71+
72+
/* Botón de envío dentro del formulario */
73+
.DOM #formulario input[type="submit"] {
74+
background-color: antiquewhite;
75+
font-weight: 700;
76+
text-transform: uppercase;
77+
font-size: 20px;
78+
color: blueviolet;
79+
}

‎html/dom.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!-- Programa desarrollado por Jose Alejandro Briones Arroyo -->
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<!-- Declaración del tipo de documento HTML -->
6+
<meta charset="UTF-8" />
7+
<!-- Definición de la codificación de caracteres -->
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
9+
<!-- Configuración de la compatibilidad con Internet Explorer -->
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
11+
<!-- Configuración de la vista y escala inicial -->
12+
<title>Fundamentos de JS - 220013</title>
13+
<!-- Título de la página en la barra de título del navegador -->
14+
<link rel="preconnect" href="https://fonts.googleapis.com" />
15+
<!-- Establecimiento de una conexión previa al servidor de fuentes -->
16+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
17+
<!-- Conexión previa a otro servidor de fuentes con configuración de seguridad -->
18+
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet" />
19+
<!-- Enlace a una fuente de Google Fonts -->
20+
<link rel="stylesheet" href="/css/domStyles.css" />
21+
<!-- Enlace a una hoja de estilos CSS local -->
22+
</head>
23+
<body>
24+
<header>
25+
<h1 id="elemento1">Fundamentos de JavaScript - DOM</h1>
26+
<!-- Título principal de la página -->
27+
<p class="patito">
28+
Creado por: &lt; Jose Alejandro Briones Arroyo &gt;
29+
<!-- Información del autor -->
30+
<a href="https://github.com/alexba2004">GitHub</a>
31+
<!-- Enlace al perfil de GitHub del autor -->
32+
</p>
33+
</header>
34+
35+
<div class="DOM">
36+
<h2 class="heading" id="heading">Probando el DOM</h2>
37+
<!-- Título de la sección -->
38+
<nav class="navegacion">
39+
<!-- Navegación -->
40+
<a href="#">Enlace 1</a>
41+
<a href="#">Enlace 2</a>
42+
<a href="#" id="elemento1">Enlace 3</a>
43+
<!-- Enlace 3 con un ID -->
44+
<a href="#">Enlace 4</a>
45+
</nav>
46+
47+
<div class="tecnologias" id="tecnologias">
48+
<!-- Sección de tecnologías -->
49+
<p id="JavaScript" class="JavaScript">JavaScript</p>
50+
<!-- Etiqueta de JavaScript -->
51+
<p id="React" class="React">React.js</p>
52+
<!-- Etiqueta de React.js -->
53+
<p id="Node" class="Node">Node.js</p>
54+
<!-- Etiqueta de Node.js -->
55+
</div>
56+
57+
<form id="formulario" class="patito">
58+
<!-- Formulario de inicio de sesión -->
59+
<input type="text" placeholder="Tu Nombre" id="nombre" class="nombre" value="" />
60+
<!-- Campo de nombre -->
61+
<input type="password" placeholder="Tu Password" id="password" class="password" />
62+
<!-- Campo de contraseña -->
63+
<input type="submit" value="Login" id="botonLogin" action="/index" />
64+
<!-- Botón de inicio de sesión -->
65+
</form>
66+
</div>
67+
68+
<script type="module" src="/js/18.js"></script>
69+
<!-- Enlace al archivo JavaScript -->
70+
</body>
71+
</html>

‎html/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!-- Programa desarrollado por Jose Alejandro Briones Arroyo -->
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8" />
6+
<!-- Define la codificación de caracteres como UTF-8 -->
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
8+
<!-- Configura la compatibilidad con Internet Explorer -->
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<!-- Establece la escala inicial para dispositivos móviles -->
11+
<link rel="stylesheet" href="/css/indexStyles.css" />
12+
<!-- Enlaza una hoja de estilos CSS externa -->
13+
<link rel="preconnect" href="https://fonts.googleapis.com" />
14+
<!-- Establece una conexión previa para cargar fuentes de Google Fonts -->
15+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
16+
<!-- Establece una conexión previa para cargar fuentes de Google Fonts de forma segura -->
17+
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100;300&display=swap" rel="stylesheet" />
18+
<!-- Enlaza una fuente de Google Fonts llamada Raleway -->
19+
<title>Repaso de Javascript Vanilla &lt; 220103 &gt;</title>
20+
<!-- Establece el título de la página -->
21+
</head>
22+
<body>
23+
<header>
24+
<h1>Fundamentos de Javascript</h1>
25+
<!-- Encabezado principal -->
26+
<p>
27+
Elaborado por: <strong>Jose Alejandro Briones Arroyo.</strong><br />
28+
<!-- Información del autor -->
29+
<a href="https://github.com/alexba2004">GitHub</a>
30+
<!-- Enlace al perfil de GitHub del autor -->
31+
</p>
32+
<p>Asignatura: <strong>Aplicaciones Web Orientadas a Servicios.</strong></p>
33+
<!-- Información sobre la asignatura -->
34+
35+
<p>Docente: <strong>M.T.I. Marco Antonio Ramírez Hernández.</strong></p>
36+
<!-- Información sobre el docente -->
37+
</header>
38+
39+
<script src="/js/02.js"></script>
40+
<!-- Enlaza un archivo JavaScript -->
41+
</body>
42+
</html>

‎js/02.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
// Programa desarrollado por Jose Alejandro Briones Arroyo.
2+
// Práctica 02: Declaración de Variables.
3+
4+
// Declaración de variables en ECMAScript 6 (ES6).
5+
6+
// Estilización de secciones.
7+
const style = "font-weight: bold; font-size: 20px; color: red; text-shadow: 1px 1px 0 rgb(217,31,38), 2px 2px 0 rgb(226,91,14), 3px 3px 0 rgb(245,221,8), 4px 4px 0 rgb(5,148,68), 5px 5px 0 rgb(2,135,206), 6px 6px 0 rgb(4,77,145), 7px 7px 0 rgb(42,21,113); margin-bottom: 6px; padding: 2%";
8+
9+
// Muestra una advertencia en la consola.
10+
console.warn("----- Práctica 02: Declaración de Variables -----");
11+
12+
// Declaración de variable con VAR (obsoleta).
13+
console.error("%ca) Declaración con VAR.", style);
14+
15+
// Variables declaradas con "var" pueden ser redefinidas.
16+
// Actualmente se prefiere "let" o "const" en lugar de "var".
17+
// El valor de "var" puede ser asignado después de la declaración.
18+
// El valor puede ser actualizado.
19+
var nombre = "Briones";
20+
console.log("Hola " + nombre);
21+
console.log(typeof nombre);
22+
nombre = 17;
23+
console.log("Hola " + nombre);
24+
console.log(typeof nombre);
25+
// Console.log("Hola " + fecha_nacimiento);
26+
27+
// Declaración de variable con LET (recomendada).
28+
console.error("%ca) Declaración con LET.", style);
29+
30+
// Variables declaradas con "let" son redefinibles, pueden ser declaradas sin valor inicializado,
31+
// se pueden reasignar y pueden cambiar de tipo de dato.
32+
let colorFavorito = "Azul"; // Utilizando "let" para declarar una variable.
33+
console.log(`Tu color favorito es ${colorFavorito}`);
34+
console.log(typeof colorFavorito);
35+
colorFavorito = 278;
36+
console.log(`Tu color favorito es ${colorFavorito}`);
37+
console.log(typeof colorFavorito);
38+
39+
// Declaración de variable con CONST (para constantes).
40+
console.error("%ca) Declaración con CONST.", style);
41+
42+
// "const" se utiliza para crear constantes, valores que no cambian durante su uso.
43+
// No se pueden declarar constantes sin inicialización.
44+
const cancionFavorita = "R U Mine?";
45+
console.log(`Tu canción favorita es ${cancionFavorita}`);
46+
console.log(typeof cancionFavorita);
47+
48+
// Declaración de variables numéricas.
49+
let num1 = 1;
50+
let num2 = "1";
51+
52+
// Compara si num1 y num2 son estrictamente iguales en valor y tipo.
53+
if (num1 === num2) {
54+
console.log("Son iguales");
55+
} else {
56+
console.log("No son iguales");
57+
}

0 commit comments

Comments
 (0)