1
00:00:00,000 --> 00:00:04,980
Hoy vamos a desglosar paso a paso y exactamente como lo haría un profesor en el aula cómo

2
00:00:04,980 --> 00:00:09,439
se conectan los cimientos estructurales de una página web con su lógica interna.

3
00:00:09,640 --> 00:00:14,439
Y bueno, vamos a sumergirnos de lleno en esto, porque entender cómo interactúan estos lenguajes

4
00:00:14,439 --> 00:00:18,379
es absolutamente crucial para dominar el desarrollo web moderno.

5
00:00:18,660 --> 00:00:23,600
No se trata sólo de teclear líneas de código sin más, se trata de construir puentes de

6
00:00:23,600 --> 00:00:24,679
comunicación reales.

7
00:00:25,079 --> 00:00:29,440
Para lograr esa comprensión utilizaremos un enfoque totalmente metódico, diseccionando

8
00:00:29,440 --> 00:00:34,780
el código fuente para ver exactamente qué ocurre ahí, entre bambalinas. Para que quede todo clarísimo,

9
00:00:35,200 --> 00:00:40,259
esta es nuestra hoja de ruta. Primero veremos el esqueleto HTML, luego pasaremos el enlace del

10
00:00:40,259 --> 00:00:45,399
script, en tercer lugar el botón interactivo y por último la lógica de JavaScript. Y claro,

11
00:00:45,719 --> 00:00:50,600
este esquema ilustra a la perfección el enfoque pedagógico. Dividir el código en estas cuatro

12
00:00:50,600 --> 00:00:55,719
capas distintas es clave. ¿Por qué? Pues básicamente porque evita esa temida sobrecarga

13
00:00:55,719 --> 00:01:00,880
cognitiva. Cuando nos enfrentamos a la programación, intentar asimilar todo de golpe puede resultar

14
00:01:00,880 --> 00:01:06,260
bastante abrumador. Sin embargo, al separar la estructura, la conexión, la interfaz y la acción

15
00:01:06,260 --> 00:01:11,980
en pasos individuales, le damos a cada concepto el espacio necesario para que se asiente antes de

16
00:01:11,980 --> 00:01:18,079
saltar al siguiente. Empecemos por el principio. Paso 1. El esqueleto HTML, o lo que es lo mismo,

17
00:01:18,280 --> 00:01:23,180
los cimientos web. A ver, lo que resulta verdaderamente brillante aquí es la claridad

18
00:01:23,180 --> 00:01:27,959
de esta estructura. Tenemos el documento base. Arriba del todo salta a la vista la etiqueta

19
00:01:27,959 --> 00:01:34,760
Doctype, declarando al mundo que esto es HTML5. Inmediatamente después, un detalle vital. La

20
00:01:34,760 --> 00:01:40,700
etiqueta principal HTML incluye el atributo de idioma SS, indicando que el contenido está en

21
00:01:40,700 --> 00:01:45,439
español de España. Esto es oro puro para la accesibilidad y los motores de búsqueda. Luego

22
00:01:45,439 --> 00:01:50,280
vemos cómo el documento se divide ordenadamente en dos partes. Primero el head, la cabecera,

23
00:01:50,280 --> 00:01:55,480
con sus metadatos y esa codificación UTF-8 para que no haya problemas con los carácteres junto

24
00:01:55,480 --> 00:02:00,900
al título. Y segundo, el body, el cuerpo, que es lo que realmente se va a ver en la pantalla. Y hay

25
00:02:00,900 --> 00:02:07,120
dentro un sencillo encabezado H1 que dice Hola Mundo desde DDVC. Es una base semántica limpia

26
00:02:07,120 --> 00:02:13,840
y perfecta. Pasamos al paso 2, el enlace del script. ¿Cómo importar instrucciones? Fijémonos

27
00:02:13,840 --> 00:02:18,639
un momento en la parte superior del código, justo antes de que arranque la estructura del documento

28
00:02:18,639 --> 00:02:25,819
HTML. Hay una etiqueta que es, literalmente, un puente. La etiqueta script. El punto clave de

29
00:02:25,819 --> 00:02:31,699
esta línea es que actúa como importador. Al usar el atributo src, apuntando a myscriptjs,

30
00:02:32,219 --> 00:02:37,840
el HTML está dando una orden estricta. Ojo, antes de hacer nada más, busca las instrucciones de este

31
00:02:37,840 --> 00:02:42,139
archivo externo. Mantener el JavaScript separado así es una de las mejores prácticas de la

32
00:02:42,139 --> 00:02:46,979
industria. Deja el HTML limpísimo y permite reciclar ese mismo código en un montón de

33
00:02:46,979 --> 00:02:54,620
páginas distintas. Vamos con el paso 3, el botón interactivo para desencadenar acciones. Si volvemos

34
00:02:54,620 --> 00:02:59,379
la mirada al interior de la etiqueta body, encontramos la interfaz real. Justo debajo del

35
00:02:59,379 --> 00:03:04,419
encabezado asoma un elemento botón. Hasta aquí parece un simple botón visual y ya está, pero

36
00:03:04,419 --> 00:03:09,500
atención porque lleva adherido un atributo súper especial. Este pequeño fragmento es exactamente

37
00:03:09,500 --> 00:03:14,280
el lugar donde esa estructura estática y aburrida se prepara para cobrar vida. Y esto nos lleva

38
00:03:14,280 --> 00:03:20,560
inevitablemente a definir qué es exactamente ese atributo. El onClick es el detonante. Tal cual,

39
00:03:20,840 --> 00:03:25,159
es una instrucción súper directa que le dice al navegador, en el milisegundo en que se haga

40
00:03:25,159 --> 00:03:30,120
clic sobre este elemento, quiero que busques y ejecutes la orden saludar. Es el interruptor

41
00:03:30,120 --> 00:03:35,120
maestro, el que conecta el mundo estático del HTML con el motor lógico del JavaScript. Sin él,

42
00:03:35,379 --> 00:03:39,500
ese botón no sería más que un rectángulo de adorno en la pantalla. Y llegamos al paso 4,

43
00:03:39,500 --> 00:03:42,099
La lógica Javascript, definiendo la acción.

44
00:03:42,740 --> 00:03:48,060
Ahora cambiamos completamente el foco al archivo secundario, a smescript.js.

45
00:03:48,580 --> 00:03:51,000
Aquí es donde vive el comportamiento puro y duro.

46
00:03:51,560 --> 00:03:55,639
Podemos observar lo increíblemente aislado que está este código si lo comparamos con el HTML.

47
00:03:56,159 --> 00:04:00,180
Ni rastro de etiquetas de diseño, ni de textos estáticos, solo lógica.

48
00:04:00,800 --> 00:04:03,659
Trabajar con las responsabilidades tan separadas es una maravilla.

49
00:04:04,120 --> 00:04:07,900
Si mañana se decidiera cambiar el mensaje de saludo, bastaría con tocar este archivo

50
00:04:07,900 --> 00:04:10,539
y la estructura visual de la página web ni se inmutaría.

51
00:04:11,139 --> 00:04:13,159
Vamos a diseccionar un poco esa sintaxis.

52
00:04:13,599 --> 00:04:16,000
Lo realmente interesante es el uso de la función flecha.

53
00:04:16,579 --> 00:04:19,100
Esos paréntesis seguidos de un igual y un mayor que.

54
00:04:19,480 --> 00:04:23,759
Es una forma moderna, súper limpia y elegante que tiene Javascript para definir funciones.

55
00:04:24,160 --> 00:04:28,500
Básicamente declaramos una constante, la llamamos saludar y le asignamos esta acción.

56
00:04:28,939 --> 00:04:31,319
Dentro de las llaves está la orden real, un alert,

57
00:04:31,720 --> 00:04:33,980
una instrucción nativa que no se anda con rodeos

58
00:04:33,980 --> 00:04:37,120
y crea esa clásica ventana emergente en el navegador con el texto

59
00:04:37,120 --> 00:04:39,800
Hola Mundo desde DWC, directo al grano.

60
00:04:40,360 --> 00:04:43,620
Bueno, vamos a unir todas las piezas de este rompecabezas.

61
00:04:44,259 --> 00:04:48,959
Viendo ambos archivos frente a frente, el puente de causa y efecto es, francamente, de manual.

62
00:04:49,620 --> 00:04:52,220
A la izquierda, el HTML pone la interfaz de usuario.

63
00:04:52,600 --> 00:04:57,839
Al hacer clic, el evento a un clic salta y lanza un grito al vacío buscando la función saludar al 1.

64
00:04:57,839 --> 00:05:03,360
Y gracias a esa etiqueta script que pusimos al principio, el navegador sabe perfectamente a dónde ir.

65
00:05:03,360 --> 00:05:08,600
cruza el puente, llega al archivo de la derecha, encuentra la constante saludar y ejecuta la alerta.

66
00:05:08,939 --> 00:05:13,660
Es un ciclo de comunicación impecable entre dos lenguajes distintos trabajando en absoluta armonía.

67
00:05:14,220 --> 00:05:18,939
Para resumir esta explicación paso a paso, resulta súper útil recurrir a una analogía

68
00:05:18,939 --> 00:05:23,920
gramatical muy de profesor pero que funciona de maravilla. Pensemos en el HTML como si fuera

69
00:05:23,920 --> 00:05:29,759
el sustantivo. Es el que pone la estructura, los objetos, el texto, los botones, el esqueleto entero.

70
00:05:29,759 --> 00:05:34,079
Por su parte, el Javascript es el verbo, es el que pone el movimiento, la lógica,

71
00:05:34,199 --> 00:05:38,360
las reacciones y las transformaciones. Un idioma necesita sustantivos y verbos para

72
00:05:38,360 --> 00:05:41,860
poder contar una historia, ¿verdad? Pues la web necesita exactamente lo mismo,

73
00:05:42,139 --> 00:05:46,139
HTML y Javascript, para crear experiencias que sean de verdad interactivas.

74
00:05:46,759 --> 00:05:50,399
Y después de haber construido y desgranado esta arquitectura fundamental paso a paso,

75
00:05:50,660 --> 00:05:55,079
nos queda una reflexión bastante potente. Si un simple atributo onclick ya es capaz

76
00:05:55,079 --> 00:05:59,500
de levantar una ventana emergente trayendo órdenes desde otro archivo, ¿dónde está el límite?

77
00:05:59,759 --> 00:06:04,019
manteniendo esta lógica de separar la estructura por un lado y el comportamiento por otro se abre

78
00:06:04,019 --> 00:06:08,500
un universo de posibilidades absolutas desde procesar formularios súper complejos hasta

79
00:06:08,500 --> 00:06:13,120
cargar bases de datos en tiempo real sin recargar la página o crear animaciones brutales dominar

80
00:06:13,120 --> 00:06:17,740
hoy esta conexión tan simple es el primer gran paso para construir las grandes aplicaciones web

81
00:06:17,740 --> 00:06:21,899
del futuro esperamos que este análisis haya dejado cristalina la forma en la que las piezas

82
00:06:21,899 --> 00:06:23,560
clave de la web encajan a la perfección