�Qu� es JavaScript?
Resumen: primeros pasos
Siguiente
�Bienvenido al curso de JavaScript para principiantes de MDN! En este art�culo
veremos JavaScript desde un alto nivel, respondiendo preguntas como "�Qu� es?" y
"�Qu� puedes hacer con �l?", y aseg�rate de estar c�modo con el prop�sito de
JavaScript.
Prerrequisitos: Conocimientos b�sicos de inform�tica, conocimientos b�sicos de
HTML y CSS.
Objetivo: Familiarizarte con lo que es JavaScript, lo que puede hacer y c�mo
encaja en un sitio web.
Una definici�n de alto nivel
JavaScript es un lenguaje de programaci�n o de secuencias de comandos que permite
implementar funciones complejas en p�ginas web, cada vez que una p�gina web hace
algo m�s que sentarse all� y mostrar informaci�n est�tica para que las veas,
muestra oportunidades actualizaciones de contenido, mapas interactivos , animaci�n
de Gr�ficos 2D / 3D, desplazamiento de m�quinas reproductoras de v�deo, etc.,
puedes apostar que probablemente JavaScript est� involucrado. Es la tercera capa
del pastel de las tecnolog�as web est�ndar, dos de las cuales ( HTML y CSS ) hemos
cubierto con mucho m�s detalle en otras partes del �rea de aprendizaje.
HTML es el lenguaje de marcado que usamos para estructurar y dar significado a
nuestro contenido web, por ejemplo, definiendo p�rrafos, encabezados y tablas de
datos, o insertando im�genes y videos en la p�gina.
CSS es un lenguaje de reglas de estilo que usamos para aplicar estilo a nuestro
contenido HTML, por ejemplo, establecer colores de fondo y tipos de letra, y
distribuir nuestro contenido en m�ltiples columnas.
JavaScript es un lenguaje de secuencias de comandos que permite crear contenido de
actualizaci�n din�mica, controlar multimedia, animar im�genes y pr�cticamente todo
lo dem�s. (Est� bien, no todo, pero es sorprendente lo que puedes lograr con unas
pocas l�neas de c�digo JavaScript).
Las tres capas se superponen muy bien. Tomemos una etiqueta de texto simple como
ejemplo. Podemos marcarla usando HTML para darle estructura y prop�sito:
<p>Player 1: Chris</p>
Copiar al portapapeles
Luego, podemos agregar algo de CSS a la mezcla para que se vea bien:
p {
font-family: 'helvetica neue', helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
border: 2px solid rgba(0,0,200,0.6);
background: rgba(0,0,200,0.3);
color: rgba(0,0,200,0.6);
box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
border-radius: 10px;
padding: 3px 10px;
display: inline-block;
cursor: pointer;
}
Copiar al portapapeles
Y finalmente, podemos agregar algo de JavaScript para implementar un comportamiento
din�mico:
const para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
let name = prompt('Enter a new name');
para.textContent = 'Player 1: ' + name;
}
Copiar al portapapeles
Intenta hacer clic en esta �ltima versi�n de la etiqueta de texto para ver qu�
sucede (ten en cuenta tambi�n que puedes encontrar esta demostraci�n en GitHub -
�consulta el c�digo fuente o ejec�talo en vivo)!
JavaScript puede hacer mucho m�s que eso - exploremos qu� con m�s detalle.
Entonces, �qu� puede hacer realmente?
El n�cleo del lenguaje JavaScript del lado del cliente consta de algunas
caracter�sticas de programaci�n comunes que permiten hacer cosas como:
Almacenar valores �tiles dentro de variables. En el ejemplo anterior, por ejemplo,
pedimos que ingreses un nuevo nombre y luego almacenamos ese nombre en una variable
llamada name.
Operaciones sobre fragmentos de texto (conocidas como "cadenas" ( strings) en
programaci�n). En el ejemplo anterior, tomamos la cadena " Player1:" y los unimos a
la variable namepara crear la etiqueta de texto completo, p. ej. '' Player1:
Chris".
Y c�digo ejecuta en respuesta a ciertos eventos que ocurren en una p�gina web.
Usamos un evento clicken nuestro ejemplo anterior para detectar cu�ndo se hace clic
en el bot�n y luego ejecutar el c�digo que actualiza la etiqueta de texto.
�Y mucho m�s!
Sin embargo, lo que a�n es m�s emocionante es la funci�n construida sobre el
lenguaje JavaScript de lado del cliente. Las denominadas interfaces de programaci�n
de aplicaciones ( API ) proporcionan superpoderes adicionales para utilizar en tu
c�digo JavaScript.
Las API son conjuntos de bloques de construcci�n de c�digo listos para usar que
permiten a un desarrollador implementar programas que de otro modo pueden ser
dif�ciles o imposibles de implementar. Hacen lo mismo para la programaci�n que los
kits de muebles prefabricados para la construcci�n de viviendas - es mucho m�s
f�cil tomar paneles precortados y atornillarlos para hacer una estanter�a que
elaborar el dise�o t� mismo, que ir y encontrar la madera correcta, cortar todos
los paneles del tama�o y la forma correctos, buscar los tornillos del tama�o
correcto y luego j�ntalos para hacer una estanter�a
