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
|
---
title: Introducción
slug: Web/JavaScript/Guide/Introducción
tags:
- Guía
- Introducion
- JavaScript
- Novato
- Principiante
- 'l10n:priority'
translation_of: Web/JavaScript/Guide/Introduction
---
<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div>
<p class="summary">Este capítulo presenta JavaScript y analiza algunos de sus conceptos fundamentales.</p>
<h2 id="¿Qué_debes_conocer_previamente">¿Qué debes conocer previamente?</h2>
<p>Esta guía presume que tienes los siguientes antecedentes básicos:</p>
<ul>
<li>Comprensión general de Internet y la ({{Glossary("WWW", "World Wide Web")}}).</li>
<li>Buen conocimiento práctico del {{Glossary("HTML", "lenguaje de marcado de hipertexto (HTML)")}}.</li>
<li>Alguna experiencia en programación. Si eres nuevo en la programación, prueba uno de los tutoriales vinculados en la página principal sobre {{JSxRef("../../JavaScript", "JavaScript")}}.</li>
</ul>
<h2 id="Dónde_encontrar_información_sobre_JavaScript">Dónde encontrar información sobre JavaScript</h2>
<p>La documentación de JavaScript en MDN incluye lo siguiente:</p>
<ul>
<li>{{web.link("/es/docs/Learn", "Aprende desarrollo web")}} proporciona información para principiantes e introduce conceptos básicos de programación e Internet.</li>
<li>La {{JSxRef("../Guide", "Guía de JavaScript")}} (esta guía) proporciona una descripción general sobre el lenguaje JavaScript y sus objetos.</li>
<li>La {{JSxRef("../Reference", "Referencia de JavaScript")}} proporciona material de referencia detallado para JavaScript.</li>
</ul>
<p>Si eres nuevo en JavaScript, comienza con los artículos en el {{web.link("/es/docs/Learn", "área de aprendizaje")}} y la {{JSxRef("../Guide", "Guía de JavaScript")}}. Una vez que tengas una firme comprensión de los fundamentos, puedes usar la {{JSxRef("../Referencia", "Referencia de JavaScript")}} para obtener más detalles sobre objetos y declaraciones individuales.</p>
<h2 id="¿Qué_es_JavaScript">¿Qué es JavaScript?</h2>
<p>JavaScript es un lenguaje de programación multiplataforma orientado a objetos que se utiliza para hacer que las páginas web sean interactivas (p. ej., Que tienen animaciones complejas, botones en los que se puede hacer clic, menús emergentes, etc.). También hay versiones de JavaScript de lado del servidor más avanzadas, como Node.js, que te permiten agregar más funcionalidad a un sitio web que simplemente descargar archivos (como la colaboración en tiempo real entre varias computadoras). Dentro de un entorno (por ejemplo, un navegador web), JavaScript se puede conectar a los objetos de su entorno para proporcionar control programático sobre ellos.</p>
<p>JavaScript contiene una biblioteca estándar de objetos, como <code>Array</code>, <code>Date</code> y <code>Math</code>, y un conjunto básico de elementos del lenguaje como operadores, estructuras de control y declaraciones. El núcleo de JavaScript se puede extender para una variedad de propósitos completándolo con objetos adicionales; por ejemplo:</p>
<ul>
<li><em>JavaScript de lado del cliente</em> extiende el núcleo del lenguaje al proporcionar objetos para controlar un navegador y su <em>Modelo de objetos de documento</em> (DOM por <em>Document Object Model</em>). Por ejemplo, las extensiones de lado del cliente permiten que una aplicación coloque elementos en un formulario HTML y responda a eventos del usuario, como clics del mouse, formularios para ingreso de datos y navegación de páginas.</li>
<li><em>JavaScript de lado del servidor</em> amplía el núcleo del lenguaje al proporcionar objetos relevantes para ejecutar JavaScript en un servidor. Por ejemplo, las extensiones de lado del servidor permiten que una aplicación se comunique con una base de datos, brinde continuidad de información de una invocación a otra de la aplicación o realice manipulación de archivos en un servidor.</li>
</ul>
<p>Esto significa que en el navegador, JavaScript puede cambiar la apariencia de la página web (DOM). Y, del mismo modo, el JavaScript de Node.js en el servidor puede responder a solicitudes personalizadas desde el código escrito en el navegador.</p>
<h2 id="JavaScript_y_Java" name="JavaScript_y_Java">JavaScript y Java</h2>
<p>JavaScript y Java son similares en algunos aspectos, pero fundamentalmente diferentes en otros. El lenguaje JavaScript se parece a Java, pero no tiene el tipado estático ni la fuerte verificación de tipos de Java. JavaScript sigue la mayoría de la sintaxis de las expresiones de Java, convenciones de nomenclatura y construcciones de control de flujo básicas, razón por la cual se cambió el nombre de LiveScript a JavaScript.</p>
<p>A diferencia del sistema de clases en tiempo de compilación de Java creado por declaraciones, JavaScript admite un sistema de tiempo de ejecución basado en una pequeña cantidad de tipos de datos que representan valores numéricos, booleanos y de cadena. JavaScript tiene un modelo de objetos basado en prototipos en lugar del modelo de objetos basado en clases más común. El modelo basado en prototipos proporciona herencia dinámica; es decir, lo que se hereda puede variar en objetos individuales. JavaScript también admite funciones sin requisitos declarativos especiales. Las funciones pueden ser propiedades de objetos, ejecutándose como métodos débilmente tipados.</p>
<p>JavaScript es un lenguaje de forma muy libre en comparación con Java. No es necesario declarar todas las variables, clases y métodos. No tienes que preocuparte por si los métodos son públicos, privados o protegidos, y no tienes que implementar interfaces. Las variables, los parámetros y los tipos de retorno de función no se tipifican explícitamente.</p>
<p>Java es un lenguaje de programación basado en clases diseñado para una ejecución rápida y con seguridad de tipos. La seguridad de tipos significa, por ejemplo, que no puedes convertir un entero de Java en una referencia de objeto o acceder a la memoria privada corrompiendo el código de bytes de Java. El modelo basado en clases de Java significa que los programas constan exclusivamente de clases y sus métodos. La herencia de clases de Java y la tipificación fuerte generalmente requieren jerarquías de objetos estrechamente acopladas. Estos requisitos hacen que la programación Java sea más compleja que la programación JavaScript.</p>
<p>Por el contrario, JavaScript desciende en espíritu de una línea de lenguajes más pequeños de tipado dinámico como HyperTalk y dBASE. Estos lenguajes de «<em>scripting</em>» ofrecen herramientas de programación a una audiencia mucho más amplia debido a su sintaxis más sencilla, funcionalidad especializada incorporada y requisitos mínimos para la creación de objetos.</p>
<table class="standard-table">
<caption>JavaScript comparado con Java</caption>
<thead>
<tr>
<th scope="col">JavaScript</th>
<th scope="col">Java</th>
</tr>
</thead>
<tbody>
<tr>
<td>Orientado a objetos. No hay distinción entre tipos de objetos. La herencia se realiza a través del mecanismo de prototipo, y las propiedades y métodos se pueden agregar a cualquier objeto de forma dinámica.</td>
<td>Basado en clases. Los objetos se dividen en clases e instancias con toda la herencia a través de la jerarquía de clases. Las clases y las instancias no pueden tener propiedades o métodos agregados dinámicamente.</td>
</tr>
<tr>
<td>Los tipos de datos de las variables no se declaran (tipado dinámico, tipado flexible).</td>
<td>Los tipos de datos de las variables se deben declarar (tipado estático, fuertemente tipado).</td>
</tr>
<tr>
<td>No se puede escribir automáticamente en el disco duro.</td>
<td>Puede escribir automáticamente en el disco duro.</td>
</tr>
</tbody>
</table>
<p>Para obtener más información sobre las diferencias entre JavaScript y Java, consulta el capítulo {{JSxRef("../Guide/Details_of_the_Object_Model", "Detalles del modelo de objetos")}}.</p>
<h2 id="JavaScript_y_la_especificacion_ECMAScript" name="JavaScript_y_la_especificacion_ECMAScript">JavaScript y la especificación ECMAScript</h2>
<p>JavaScript está estandarizado en <a class="external" href="https://www.ecma-international.org/">Ecma International</a>, la asociación europea para estandarizar los sistemas de información y comunicación (ECMA antes era un acrónimo para la Asociación Europea de Fabricantes de Computadoras) para ofrecer un lenguaje de programación internacional estandarizado basado en JavaScript. Esta versión estandarizada de JavaScript, denominada ECMAScript, se comporta de la misma manera en todas las aplicaciones que admiten el estándar. Las empresas pueden utilizar el lenguaje estándar abierto para desarrollar su implementación de JavaScript. El estándar ECMAScript está documentado en la especificación ECMA-262. Consulta {{JSxRef("../Novedades_en_JavaScript", "Novedades en JavaScript")}} para obtener más información sobre las diferentes versiones de JavaScript y las ediciones de especificación ECMAScript.</p>
<p>El estándar ECMA-262 también está aprobado por <a class="external" href="https://www.iso.org/home.html">ISO</a> (Organización Internacional de Normalización) como ISO-16262. También puedes encontrar la especificación en <a class="external" href="https://www.ecma-international.org/publications/standards/Ecma-262.htm">el sitio web de Ecma International</a>. La especificación ECMAScript no describe el modelo de objetos de documento (DOM), que está estandarizado por el <a class="external" href="https://www.w3.org/">World Wide Web Consortium (W3C)</a> y/o <a href="https://whatwg.org">WHATWG (Grupo de trabajo de tecnología de aplicaciones de hipertexto web)</a>. El DOM define la forma en que los objetos de documentos HTML se exponen a tu «script». Para tener una mejor idea de las diferentes tecnologías que se utilizan al programar con JavaScript, consulta el artículo {{JSxRef("../Descripción_de_las_tecnologías_JavaScript", "descripción de las tecnologías JavaScript")}}.</p>
<h3 id="Documentacion_de_JavaScript_versus_especificacion_de_ECMAScript" name="Documentacion_de_JavaScript_versus_especificacion_de_ECMAScript">Documentación de JavaScript versus especificación de ECMAScript</h3>
<p>La especificación ECMAScript es un conjunto de requisitos para implementar ECMAScript. Es útil si deseas implementar funciones del lenguaje compatibles con los estándares en tu implementación o motor ECMAScript (como SpiderMonkey en Firefox o V8 en Chrome).</p>
<p>El documento ECMAScript <em>no</em> está destinado a ayudar a los programadores de scripts. Utiliza la documentación de JavaScript para obtener información al escribir tus scripts.</p>
<p>La especificación ECMAScript utiliza terminología y sintaxis que puede resultar desconocida para un programador de JavaScript. Aunque la descripción del lenguaje puede diferir en ECMAScript, el lenguaje en sí sigue siendo el mismo. JavaScript admite todas las funciones descritas en la especificación ECMAScript.</p>
<p>La documentación de JavaScript describe aspectos del lenguaje que son apropiados para un programador de JavaScript.</p>
<h2 id="Cómo_empezar_con_JavaScript">Cómo empezar con JavaScript</h2>
<p>Comenzar con JavaScript es fácil: todo lo que necesitas es un navegador web moderno. Esta guía incluye algunas funciones de JavaScript que solo están disponibles actualmente en las últimas versiones de Firefox, por lo que se recomienda utilizar la versión más reciente de Firefox.</p>
<p>La herramienta <em>Consola web</em> integrada en Firefox es útil para experimentar con JavaScript; Puedes usarla en dos modos: modo de entrada unilínea y modo de entrada multilínea.</p>
<h3 id="Entrada_unilínea_en_la_consola_web">Entrada unilínea en la consola web</h3>
<p>La {{web.link("/es/docs/Tools/Web_Console", "Consola web")}} te muestra información sobre la página web cargada actualmente, y también incluye un intérprete de JavaScript que puedes usar para ejecutar expresiones de JavaScript en la página actual.</p>
<p>Para abrir la Consola web (<kbd>Ctrl</kbd>+<kbd>Mayús</kbd>+<kbd>I</kbd> en Windows y Linux o <kbd>Cmd</kbd>-<kbd>Opción</kbd>-<kbd>K</kbd> en Mac), abre el menú <strong>Herramientas</strong> en Firefox y selecciona "<strong>Desarrollador ▶ Consola web</strong>".</p>
<p>La consola web aparece en la parte inferior de la ventana del navegador. En la parte inferior de la consola hay una línea de entrada que puedes usar para ingresar JavaScript, y la salida aparece en el panel de arriba:</p>
<p><img alt="Consola web" src="https://mdn.mozillademos.org/files/16569/2019-04-04_00-15-29.png" style="display: block; height: 1824px; margin-left: auto; margin-right: auto; width: 2784px;"></p>
<p>La consola funciona exactamente de la misma manera que <code>eval</code>: devuelve la última expresión ingresada. En aras de la simplicidad, te puedes imaginar que cada vez que ingresas algo en la consola, en realidad estás rodeado por <code>console.log</code> alrededor de <code>eval</code>, así:</p>
<pre class="brush: js notranslate">function greetMe(tuNombre) {
alert("Hola " + tuNombre)
}
<code>console.log(eval('3 + 5'))</code>
</pre>
<h3 id="Entrada_multilínea_en_la_consola_web">Entrada multilínea en la consola web</h3>
<p>El modo de entrada unilínea de la consola web es ideal para realizar pruebas rápidas de expresiones JavaScript, pero aunque puedes ejecutar varias líneas, no es muy conveniente para eso. Para JavaScript más complejo, puedes utilizar el <a href="/es/docs/Tools/Web_Console/The_command_line_interpreter#Multi-line_mode">modo de entrada multilínea</a>.</p>
<h3 id="Hola_mundo">Hola mundo</h3>
<p>Para comenzar a escribir JavaScript, abre la Consola web en modo multilínea y escribe tu primer código "Hola mundo" en JavaScript:</p>
<pre class="brush: js notranslate">(function(){
"use strict";
/* Inicio de tu código */
function greetMe(tuNombre) {
alert('Hola ' + tuNombre);
}
greetMe('Mundo');
/* Fin de tu código */
})();</pre>
<p>Presiona <kbd>Cmd</kbd>+<kbd>Intro</kbd> o <kbd>Ctrl</kbd>+<kbd>Intro</kbd> (o haz clic en el botón <strong>Ejecutar</strong>), ¡para ver cómo se desarrolla en tu navegador!</p>
<p>En las siguientes páginas, esta guía te presenta la sintaxis de JavaScript y las características del lenguaje, de modo que puedas escribir aplicaciones más complejas.</p>
<p>Pero por ahora, recuerda incluir siempre el <code>(function() { "use strict";</code> antes de tu código, y agrega <code>})();</code> al final de tu código. Aprenderás {{Glossary("IIFE", "qué significa IIFE")}} , pero por ahora puedes pensar que hacen lo siguiente:</p>
<ol>
<li>Mejoran enormemente el rendimiento.</li>
<li>Evitan la semántica estúpida en JavaScript que hace tropezar a los principiantes.</li>
<li>Evitan que los fragmentos de código ejecutados en la consola interactúen entre sí (por ejemplo, que algo creado en una ejecución de consola se utilice para una ejecución de consola diferente).</li>
</ol>
<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p>
|
