Bienvenido al primer tutorial que tendremos en nuestra web escueladeJavaScript.com. En este tutorial vas a aprender a escribir tu primera línea de código usando JS.
Aunque quizás no lo parezca JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar más, es un lenguaje sumamente poderoso. Se puede utilizar en cualquier navegadorUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los más del mundo. Además de eso, se puede usar para escribir código del lado del servidorLos servidores son ordenadores centrales y potentes dentro del campo de la tecnología de la información que procesan y proporcionan software y archivos en una red. Desde el punto de vista de un cliente, varios ordenadores en una red pueden ponerse en contacto con el servidor central para conseguir la información solicitada. En la arquitectura cliente-servidor, el servidor puede ser un software que proporciona un servicio y se ejecuta en más usando node.js.
Cuando usamos JavaScript dentro del navegador, podemos cambiar el aspecto de la página e incluso su comportamiento. En este tutorial, solo nos centraremos en aprender el idioma en sí, y por lo tanto, solo usaremos una función para imprimir los resultados llamados «console.log».
Conociendo a la etiqueta <script>
Vamos a empezar por lo mas importante. Seguramente te habrás preguntado anteriormente «¿Cómo voy a poder mostrar mis resultados en pantalla?» o «¿Cómo es posible enlazar mi código HTMLHTML (Hypertext Markup Language) se usa para estructurar el contenido de texto de un documento web. No sólo se marca el contenido, sino además la meta-información que describe este contenido. Las páginas HTML se almacenan normalmente en el directorio raíz del servidor. Cómo se creó En la era digital, a los usuarios les resulta difícil hallar su camino en las webs y hacer un seguimiento de las estructuras de las más con mi código JS?». Bueno, ya vas a saberlo.
Los programas elaborados en JavaScript se pueden insertar en cualquier parte de un documento HTML con la ayuda de la famosa etiqueta <script>.
Aquí abajo te muestro un ejemplo de ello:
<!DOCTYPE HTML> <html> <body> <p>Antes del Script</p> <script> alert( '¡Hola, Mundo!' ); </script> <p>...Después del Script.</p> </body> </html>
Este código te mostrará una pequeña alerta emergente (de la cual hablaremos mas adelante con más detalle) con el texto «¡Hola, Mundo!.
Para que veas los resultados de este código en tu navegador, debes realizar un documento de texto con extensión HTML y guardar este código en el, y luego ejecutarlo para que veas su funcionamiento.
La etiqueta <script> contiene código JavaScript que se ejecuta automáticamente cuando el navegador se encuentra con la etiqueta.
El marcado de etiquetas moderno
La etiqueta <script> tiene algunos atributos que son raramente usados hoy en día, pero podemos encontrarlos en código antiguo:
El atributoAtributo es una definición que se usa en varios campos de IT. Generalmente, un atributo se usa para describir un fichero o un campo de datos con más detalle. En la programación orientada a objetos, los atributos son una propiedad o característica que se puede asignar a un objeto (elemento). A través el uso de atributos se pueden asignar valores específicos a ciertos items. Áreas de aplicación Las tres áreas más type: <script type=…>
El antiguo estándar HTML4 requería un script para tener un tipo. Normalmente era type=»texto/javascript». El estándar HTML moderno asume este tipo por defecto. No se requiere ningún atributo.
El atributo de idioma: Lenguaje de script=…>
Este atributo estaba destinado a mostrar el lenguaje del script. Por ahora, este atributo no tiene sentido, el lenguaje es JavaScript por defecto. No hay necesidad de usarla.
Comentarios antes y después de los scriptsConcepto de Scripts¿Qué son los Scripts?Los Scripts son fragmentos de código que se usan para dar forma a herramientas tanto en Internet como en el sector de la informática en general. Son una parte crucial del software, puesto que se trata exactamente del código que conforma a una aplicación en su totalidad o a una de sus funciones, como además el que puedes hallar explorando cómo está hecha una web.Desde más.
En los libros y guías realmente antiguos, uno puede encontrar comentarios dentro de <script>, como este:
<script type="text/javascript"><!-- ...//--> </script>
Estos comentarios se suponía que ocultaban el código de un navegador antiguo que no sabía de una etiqueta <script>. Pero todos los navegadoresConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet más nacidos en los últimos 15 años no tienen ningún problema. Lo mencionamos aquí, porque tales comentarios sirven como señal. Si ves eso en alguna parte – ese código es probablemente muy antiguo y no vale la pena investigarlo.
Scripts externos
Si tenemos mucho código JavaScript, podemos ponerlo en un archivo separado.
El archivo de script se adjunta a HTML con el atributo src:
<script src="carpeta/script.js"></script>
Aquí carpeta/script.js es una ruta absoluta al archivo con el script (desde la raíz del sitio).
También es posible proporcionar una ruta relativa a la página actual. Por ejemplo, src=»script.js» significaría un archivo «script.js» en la carpeta actual.
También podemos dar una URLEl URL (Localizador Uniforme de Recursos), es una dirección definida que apunta a la posición de un archivo en un servidor y lo recupera. Las URL se introducen en un navegador web para ingresar a documentos en la web o se incrustan como hipervínculos dentro de un documento. Se puede usar un Permalink para que una URL esté disponible de forma permanente. Componentes de una URL • prefijo de protocolo más completa, por ejemplo:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
Para adjuntar varios scripts, utilice varias etiquetas:
<script src="/js/script1.js"></script> <script src="/js/script2.js"></script> …
Nota:
Como regla general, sólo los scripts más simples se ponen en HTML. Los más complejos residen en archivos separados.
La ventaja de un archivo separado es que el navegador lo descarga y lo almacena en su cachéUn caché es un tipo de memoria auxiliar de la que se puede recuperar a alta velocidad con una capacidad de almacenamiento relativamente pequeña. Se encuentra entre la unidad central de procesamiento (CPU) y la memoria principal. Ayuda a evitar el acceso al disco duro o los recálculos complejos almacenando temporalmente ciertos datos y haciéndolos disponibles rápidamente cuando sea necesario. El caché almacena una copia de la petición actual y más.
Después de esto, otras páginas que quieran el mismo script lo tomarán de la caché en lugar de descargarlo. Por lo tanto, el archivo se descarga sólo una vez.
Esto ahorra tráfico y hace que las páginas sean más rápidas.
Si src está configurado, el contenido del script se ignora.
Una sola etiqueta <script> no puede tener tanto el atributo src como el código dentro.
Esto no funcionará:
<script src="archivo.js"> alert(1); // el contenido es ignorado, porque src está configurado </script>
Debemos elegir: o es un <script src=»…»> externo o un <script> regular con código.
El ejemplo anterior puede dividirse en dos scripts para que funcione:
<script src="archivo.js"></script> <script> alert(1); </script>
Consideraciones generales
- Podemos usar una etiqueta <script> para añadir código JavaScript a la página.
- Los atributos de tipo e idioma no son necesarios.
- Se puede insertar un script en un archivo externo con <script src=»carpeta/script.js»></script>.
Hay mucho más que aprender sobre los scripts de los navegadores y su interacción con la página web. Pero tengamos en cuenta que esta parte del tutorial está dedicada al lenguaje JavaScript, así que no debemos distraernos de él. Usaremos un navegador como una forma de ejecutar JavaScript, que es muy conveniente para la lectura en línea, pero es uno de muchos.
Ejercicios
Cree una página que muestre el mensaje «Soy un código JavaScript»
Puedes hacerlo en una caja de arena, o en su disco duro, no importa, sólo asegúrate de que funciona.
Solución:
<!DOCTYPE html> <html> <body> <script> alert( "Soy un código JavaScript" ); </script> </body> </html>
Segundo ejercicio:
Toma el código de la solución de la tarea anterior de Mostrar una alerta. Modifícalo extrayendo el contenidoEl contenido puede ser muy difícil de definir con precisión. Es una definición que se refiere a las declaraciones contenidas en un documento o publicación de cualquier tipo y puede incluir las tecnologías de la información y la comunicación. Esto cubre todos los tipos de medios como imágenes y texto. A parte de esto, en el campo de la optimización de motores de búsqueda, los términos duplicar contenido, contenido único, más del script en un archivo externo llamado alert.js, que resida en la misma carpeta del archivo HTML.
Abre la página y asegúrate de que la alerta funcione correctamente.
Solución:
Código HTML:
<!DOCTYPE html> <html> <body> <script src="alerta.js"></script> </body> </html>
Documento con extensión .js
alert("Soy un código JavaScript");
