Hogar › Servicios › Conceptos básicos de JavaScript. ¿Qué son los JavaScript? Funciones básicas de JavaScript

Conceptos básicos de JavaScript. ¿Qué son los JavaScript? Funciones básicas de JavaScript

HTML impone algunas limitaciones al sitio y, para superarlas, es necesario ir un poco más allá del lenguaje de marcado de hipertexto. HTML se necesita principalmente para organizar texto y gráficos en una página web, para vincular diferentes archivos. Y hace frente a estas tareas a la perfección. Si desea que las páginas de su sitio no se diferencien prácticamente de los dibujos en papel normales, entonces el lenguaje de marcado de hipertexto, es decir, HTML, será suficiente.

Si desea crear algo especial y único que resalte su sitio y atraiga la atención de los usuarios, entonces debe recurrir al lenguaje de programación Java Script.

Por ejemplo, utilizando Java Script, se puede implementar lo siguiente en el sitio:

Agregue una función de búsqueda al sitio. Esto proporcionará enormes beneficios a los usuarios al eliminar la necesidad de navegar manualmente por cada página web para encontrar la información que necesitan.

Protege con contraseña un área específica del sitio. Esto limitará el acceso a información que no se recomienda para exhibición pública.

Brindar a los usuarios la oportunidad de comunicarse. Hay muchas formas de hacer esto: desde simples foros de mensajes hasta chats con todas las funciones.

Agregue herramientas de cronometraje a su sitio, como un reloj o un calendario. A los usuarios suele gustarles.

Agregue juegos y rompecabezas al sitio. Créame, esta es la mejor manera de hacer que los visitantes se relajen y se sientan como en casa.

Proporcionar enlaces a información constantemente actualizada. Los visitantes del sitio seguramente estarán interesados en noticias, tipos de cambio, pronósticos meteorológicos y similares.

¿Por qué JavaScript? Los lenguajes de programación PHP y MySQL fueron creados para facilitar el trabajo con la computadora.

El procesamiento se realiza en el navegador web del usuario, por lo que no hay carga en el servidor. No necesitas mucha inteligencia para agregar scripts escritos por otros programadores. Esto lo puede hacer fácilmente un simple desarrollador de sitios web.

Normalmente, no se requieren cambios en el código del programa. En el mejor de los casos, tendrás que cambiar el nombre del archivo aquí y allá o agregar URL a alguna lista.

Brevemente sobre cómo funciona Java Script

Cuando trabaja con Java Script, necesita agregar dos componentes al código de la página web: el script en sí y el procedimiento que lo ejecutará.

Normalmente, las instrucciones que vienen con el script contienen toda la información necesaria sobre el procedimiento para iniciar el script.

El cuerpo del script se coloca en una etiqueta contenedora, como en el esqueleto del código siguiente, que define alguna función, sea cual sea.

/*
Aquí es donde suele ubicarse el comentario.
*/
funcionar lo que sea()
{
Y en este lugar el código del programa en sí.
}

Es aceptable colocar un script dentro de una etiqueta en lugar de una etiqueta; sin embargo, esto puede resultar arriesgado. El navegador web debe traducir el código Java Script escrito por el programador a código de máquina.

El navegador procesa el script de etiqueta antes que los elementos de etiqueta. Esto significa que el script estará definido y listo para ejecutarse antes de que se muestre algo en la ventana del navegador web.

Si el script se encuentra dentro de la etiqueta, puede surgir una situación en la que el usuario acceda al script antes de que esté definido. En este caso, el script simplemente no funcionará. Por tanto, es mejor seguir la secuencia habitual.

También debería agregarse algún tipo de procedimiento a la página que ejecutará el script. Suele encontrarse dentro del elemento.

La ejecución de un script se puede realizar de varias maneras, pero el desarrollador no necesariamente necesita conocerlas todas. Cada script, extraído de Internet y traducido a código HTML, tiene su propio procedimiento de inicio.

Ejemplos.

1. El script se activa después de que el puntero del mouse hace clic en cualquier elemento de la interfaz cuando el usuario pasa el puntero del mouse sobre él. Para ello se utiliza el atributo onClick.
Entonces, en el siguiente fragmento, el atributo onClick se usa para el elemento A:
Haga clic aquí para ejecutar cualquier función.

Pero, en general, el atributo onClick es único y puede usarse para casi cualquier elemento.

2. O el script se puede ejecutar después de que la página web se cargue en la ventana del navegador.
Para activar el script después de que se haya cargado la página web, utilice el atributo onload del elemento, como en el siguiente ejemplo.

Hay una gran variedad de otros atributos. Por ejemplo, el atributo onMouseOver, que se utiliza para ejecutar un script después de que el usuario pasa el mouse sobre algún elemento de la interfaz. O el atributo onMouseOut, cuando el usuario quita el puntero del mouse.

Java Script y jQuery Por cierto, dominar Java Script se ha vuelto aún más fácil con la llegada de la biblioteca jQuery.

Las funciones de jQuery resuelven muchos problemas prácticos y urgentes. Crear incluso un script complejo se vuelve simple cuando se usa.

Y para un sitio web, el uso de jQuery abre una enorme lista de complementos que se pueden conectar a cualquier recurso, lo principal es que se utiliza Java Script. Usando complementos de jQuery que puedes implementar en unas pocas líneas de código

menús hermosos y complejos,
galerías de imágenes,
Varias funciones de gestión de páginas.

Si su sitio está creado en un CMS, también puede implementar sus propios scripts allí. La combinación de un CMS simple y Java Script le permite crear soluciones muy hermosas, fáciles de implementar y soportar, y también livianas para proyectos pequeños.

Con la ayuda de Java Script y jQuery, puede convertir incluso el sitio web de tarjetas de presentación más simple en un recurso brillante y completo que será un excelente representante de la empresa en las vastas extensiones de Internet.

JavaScript está evolucionando a una velocidad tremenda. Una gran ola de nuevas tecnologías está cubriendo las piedras de tareas engorrosas que ayer parecían inexpugnables y amenazadoras.

En esta lección, presentamos 10 scripts útiles que le ayudarán a ahorrar tiempo a la hora de resolver problemas comunes. La mayoría de los scripts anteriores se pueden copiar simplemente en su proyecto, pero es mejor hacer un poco de trabajo analítico para adaptar el código de la mejor manera posible.

1. Alto o ancho máximo en un conjunto de elementos

Un script muy útil para ajustar la altura o el ancho de las columnas.

Opción de altura:

Var getMaxHeight = function ($elms) ( var maxHeight = 0; $elms.each(function () ( // En algunos casos puedes usar externalHeight() var height = $(this).height(); if (height > alturamax) (alturamax = altura;) ); devuelve alturamax;

Uso:

$(elementos).height(getMaxHeight($(elementos)));

Para usar el script para el ancho, debe reemplazar todas las inclusiones de alto y alto con ancho y Ancho, respectivamente.

2. Verificación de la fecha de vigencia

El kit de herramientas de fechas de JavaScript es muy básico y no suficiente para formatear fechas. Aunque hay muchas bibliotecas que facilitan mucho el procesamiento de fechas, a menudo solo necesitas verificar la fecha en una cadena. El siguiente script es perfecto para tal caso. Permite consultar una fecha con cualquier separador y un año de 4 dígitos.

Función isValidDate(value, userFormat) ( // Usa el formato predeterminado si no se especifica nada userFormat = userFormat || "mm/dd/yyyy"; // Encuentra el separador excluyendo los símbolos de mes, día y año (en inglés - m, d, y) var delimitador = /[^mdy]/.exec(userFormat); // Crea una matriz de mes, día y año, // es decir, conocemos el orden del formato var theFormat = userFormat.split(delimiter) ; Cree una matriz a partir de la fecha del usuario var theDate = value.split(delimiter);< len; i++) { f = format[i]; if (/m/.test(f)) m = date[i]; if (/d/.test(f)) d = date[i]; if (/y/.test(f)) y = date[i]; } return (m >0 &&m< 13 && y && y.length === 4 && d >0 && // Comprobar si el día del mes d es correcto en la parte inferior de un archivo HTML es que el navegador carga los elementos HTML en el orden en que aparecen en el archivo. Entonces, si JavaScript se carga primero y necesita interactuar con el HTML que se encuentra debajo, fallará porque JavaScript se cargará antes que el HTML con el que necesita interactuar. Por lo tanto, colocar JavaScript en la parte inferior de la página HTML se considera la mejor estrategia.

¿Qué pasó?

Entonces el título de tu texto se cambió a "¡Hola mundo!" utilizando JavaScript. Hicimos esto usando una llamada de función. selector de consulta(), tomando un enlace a nuestro encabezado y almacenándolo en una variable llamada myHeading. Esto es muy similar a lo que hicimos en CSS con selectores. Si desea hacer algo con un elemento, primero debe seleccionarlo.

Después de esto, establece el valor de la variable myHeading en contenido de texto propiedad (que representa el contenido del encabezado) "¡Hola mundo!".

Curso intensivo sobre conceptos básicos del idioma.

Echemos un vistazo a algunas características básicas del lenguaje JavaScript para que comprenda mejor cómo funciona todo. Además, estas características son comunes a todos los lenguajes de programación. Si puedes comprender estos conceptos básicos, ¡podrás comenzar a programar como si nada hubiera pasado!

variables

Nota: JavaScript distingue entre mayúsculas y minúsculas: myVariable es diferente de myvariable. Si tienes problemas en tu código, ¡revisa el caso!

Después de declarar una variable, puedes asignarle un valor:

MiVariable = "Bob";

Puede realizar ambas operaciones en la misma línea si lo desea:

Var miVariable = "Bob";

Puede obtener el valor simplemente llamando a la variable por su nombre:

MiVariable;

Después de establecer el valor de una variable, puedes cambiarlo más tarde:

Var miVariable = "Bob"; miVariable = "Steve";

Tenga en cuenta que las variables tienen diferentes tipos de datos :

Ejemplo de explicación de variableCadena Número Booleano JavaScript, Java, C++, Python y Ruby son lenguajes de programación que se clasifican como lenguajes orientados a objetos (POO).

Una secuencia de texto llamada línea. Para indicar que este valor es una cadena, debe encerrarlo entre comillas.	var miVariable = "Bob";
Números. Los números no tienen comillas alrededor.	var miVariable = 10;
El valor es Verdadero/Falso. Las palabras verdadero y falso son palabras clave especiales en JS y no necesitan comillas.	var miVariable = verdadero;
Una matriz que le permite almacenar múltiples valores en una sola referencia.	var miVariable = ; Puede acceder a cada elemento de la matriz de esta manera: miVariable, miVariable, etc.
Objeto	Básicamente, cualquier cosa. Todo en JavaScript es un objeto y se puede almacenar en una variable. Tenga esto en cuenta mientras aprende. var miVariable = document.querySelector("h1");

Todo esto es de los ejemplos anteriores.

Entonces, ¿por qué necesitamos variables? Bueno, se suponía que las variables harían algo interesante en programación. Si los valores no pudieron cambiar, entonces no podrás hacer nada dinámico, como personalizar el mensaje de bienvenida o cambiar la imagen que se muestra en la galería de imágenes.

Puedes poner comentarios en código JavaScript, tal como lo hiciste en CSS:

/* Todo lo que hay aquí es un comentario. */

Si su comentario no contiene saltos de línea, suele ser más fácil utilizar dos barras diagonales, como esta:

// Este es un comentario

Operadores

Nota: Mezclar tipos de datos puede generar algunos resultados inesperados al realizar cálculos, así que tenga cuidado de hacer referencia a sus variables correctamente para obtener los resultados esperados. Por ejemplo, ingresa "35" + "25" en tu consola. ¿Por qué no obtuviste el resultado que esperabas? Debido a que las comillas convirtieron números en cadenas, terminó con la concatenación de cadenas en lugar de la suma de números. Si ingresa 35 + 25 obtendrá el resultado correcto.

Términos

Las condiciones son estructuras de código que le permiten probar si una expresión es verdadera o falsa y luego ejecutar otro código según el resultado. La forma más común de condición se llama si... si no. Por ejemplo:

Var iceCream = "chocolate"; if (iceCream === "chocolate") ( alert("¡Sí, me encanta el helado de chocolate!"); ) else ( alert("Awwww, pero el chocolate es mi favorito..."); )

La expresión dentro de if (...) es una prueba que utiliza el operador de identidad (como se describe arriba) para comparar la variable iceCream con la cadena de chocolate y ver si son iguales. Si esta comparación devuelve verdadero, se ejecutará el primer bloque de código. De lo contrario, este código se omitirá y se ejecutará el segundo bloque de código, después de la declaración else.

Funciones Eventos

Para crear una verdadera interactividad en un sitio web, necesita eventos. Los eventos son un marco que escucha lo que sucede en el navegador y luego le permite ejecutar código en respuesta. El más obvio es evento de clic, que es llamado por el navegador cuando hacemos clic en algo con el mouse. Para demostrar este evento, ingrese el siguiente comando en su consola y luego haga clic en la página web actual:

Document.querySelector("html").onclick = function() ( alert("¡Ay! ¡Deja de pincharme!"); )

Hay muchas formas de adjuntar un evento a un elemento. aquí elegimos elemento y establecer un controlador de propiedad para él al hacer clic una función anónima (es decir, sin nombre) que contiene el código que queremos ejecutar en el evento de clic.

tenga en cuenta que

Document.querySelector("html").onclick = función() ();

equivalente

Var miHTML = document.querySelector("html"); myHTML.onclick = función()();

Es simplemente más corto.

Actualicemos nuestro ejemplo de sitio web

Ahora que hemos cubierto algunos conceptos básicos de JavaScript, agreguemos algunas funciones interesantes y livianas a nuestro sitio de ejemplo para darle una idea de cómo funciona.

Agregar un cambio de imagen

En esta sección, agregaremos otra imagen a nuestro sitio y agregaremos algo de JavaScript simple para cambiar entre las dos imágenes cuando se haga clic en ellas.

En primer lugar, busque otra imagen que le gustaría mostrar en su sitio. Asegúrese de que tenga el mismo tamaño que su primera imagen o lo más cerca posible de ella.

Guarde la imagen en su carpeta de imágenes.

Cambie el nombre de esta imagen a "firefox2.png" (sin las comillas).

Vaya a su archivo main.js e ingrese el siguiente JavaScript. (Si su JavaScript "hola mundo" aún existe, elimínelo). var myImage = document.querySelector("img"); myImage.onclick = function() ( var mySrc = myImage.getAttribute("src"); if(mySrc === "images/firefox-icon.png") ( myImage.setAttribute("src","images/firefox2. png"); ) else ( myImage.setAttribute("src","images/firefox-icon.png"); ) )

Guarde todos los archivos y cargue index.html en su navegador. ¡Ahora, cuando hagas clic en la imagen, debería cambiar a otra cosa!

Entonces guardamos una referencia a nuestro elemento. en la variable miImagen. A continuación, creamos un controlador de eventos onclick con una función anónima para esta variable. Ahora, cada vez que se hace clic en este elemento de imagen:

Obtenemos el valor del atributo src de la imagen.

Usamos una condición para verificar el valor src y ver si la ruta a la imagen original es igual a:

Si es así, cambiamos el valor src a la ruta a la segunda imagen, lo que hace que la otra imagen se cargue dentro del elemento. .

Si no es así (lo que significa que ya debe haber cambiado), cambiamos el valor de src , volviendo a la ruta de la imagen original como estaba en primer lugar.

Agregar un mensaje de bienvenida personal

A continuación, agregaremos otro código para cambiar el título de la página a un mensaje de bienvenida personalizado cuando el usuario acceda al sitio por primera vez. Este mensaje de bienvenida se guardará cuando el usuario abandone el sitio y luego regrese; lo guardaremos usando . También incluiremos la posibilidad de cambiar el usuario y, por tanto, el mensaje de bienvenida, en cualquier momento que sea necesario.

En index.html, agregue la siguiente línea antes del elemento : Cambiar usuario

En main.js, agregue el siguiente código al final del archivo, exactamente como está escrito: tomará referencias al nuevo botón y título y los almacenará en variables: var myButton = document.querySelector("button"); var miEncabezado = document.querySelector("h1");

Ahora agregue la siguiente función para configurar un saludo personalizado; no hará nada, pero la usaremos más adelante: function setUserName() ( var myName = Prompt("Por favor, ingrese su nombre."); localStorage.setItem(" nombre", miNombre); myHeading.innerHTML = "Mozilla es genial, " + miNombre) Esta función contiene la función inmediato(), que muestra un cuadro de diálogo similar a alert() excepto que Prompt() solicita al usuario que ingrese algunos datos y los almacena en una variable después de que el usuario hace clic en Aceptar. En este caso, le pedimos al usuario que ingrese su nombre. A continuación, llamamos a una API llamada localStorage, que nos permite almacenar datos en el navegador y recuperarlos más tarde. Usamos la función setItem() de localStorage para crear y almacenar datos en una propiedad llamada "nombre", y establecemos este valor en la variable myName, que contiene el nombre ingresado por el usuario. Al final configuramos el contenido de texto del título como una cadena y el nombre de usuario.

Luego agregue un bloque if... else; podríamos llamar a este código de inicialización ya que estructura la aplicación cuando se carga por primera vez: if(!localStorage.getItem("name")) ( setUserName(); ) else ( var almacenadoName = localStorage .getItem("name"); myHeading.innerHTML = "Mozilla es genial, " + almacenadoName ) Este bloque primero usa el operador de negación (NO lógico, representado como!) para verificar si los datos en el elemento de nombre existen. De lo contrario, se ejecuta la función setUserName() para crearlos. Si los datos existen (es decir, el usuario los configuró en una visita anterior), recuperamos el nombre almacenado usando getItem() y configuramos el textContent del título para que sea la cadena más el nombre de usuario, tal como lo hicimos dentro de setUserName().

Finalmente, configure un controlador de eventos onclick para el botón. Cuando se hace clic en el botón, se ejecuta la función setUserName(). Esto permite al usuario establecer un nuevo nombre cuando lo desee haciendo clic en un botón: myButton.onclick = function() ( setUserName(); )

Ahora, cuando visite el sitio por primera vez, le pedirá un nombre de usuario y luego le proporcionará un mensaje personalizado. Puede cambiar el nombre en cualquier momento haciendo clic en el botón. Como beneficio adicional, dado que el nombre se almacena dentro de localStorage, persiste después de que se cierra el sitio, ¡y al mismo tiempo mantiene un mensaje personalizado la próxima vez que abra el sitio!

Conclusión

JavaScript es un lenguaje de programación que está integrado en el código html de las páginas web para aumentar la funcionalidad del sitio. Javascript fue desarrollado por Netscape en colaboración con Sun Microsystems basándose en el lenguaje Java de Sun. Los scripts se ejecutan en el lado del cliente, aunque inicialmente Liveware, el progenitor de Java Script, era un lenguaje de programación del lado del servidor.
Con JavaScript se pueden crear hermosas páginas web interactivas, algo que no se puede hacer en HTML puro. Normalmente, los scripts se ejecutan después de que el usuario realiza alguna acción: pasar el cursor por encima, hacer clic, etc. secuencia de comandos Java También se puede ejecutar cuando se carga una página web.

Puede escribir un script Java utilizando cualquier editor de texto: Notepad, Notepad++, Dreamweaver. En este último, además del resaltado de código y sugerencias, se implementa una verificación de sintaxis para escribir javascript. Pero para ello es necesario conocer el lenguaje, el principio de escritura de funciones, métodos, propiedades, etc. navegador capaz de procesar scripts Java Por ejemplo, Mozilla Firefox con un complemento Firebug incorporado, con el que puede ver el trabajo de JavaScript y Microsoft Internet Explorer (ya que estos dos navegadores perciben JavaScript de manera diferente).
Por cierto, no todos los scripts se muestran igual en los navegadores. La mayoría de los scripts Java que se pueden descargar de forma gratuita en Internet no son compatibles con el navegador Opera hasta la versión 12.16. Al mismo tiempo, el trabajo de JS no depende en modo alguno del sistema operativo: ya sea Android, iOS, Windows u otros.

Descargue el código JavaScript listo para usar.

A continuación se muestran scripts Java ya preparados que puede
descárgalas completamente gratis y decora tu sitio web con ellas.

Alojamiento javascript.

El código Javascript se puede colocar en la propia página o en un archivo separado.

Un ejemplo de cómo colocar código Javascript listo para usar dentro de HTML.

Los scripts escritos en javascript se pueden ubicar en la propia página html entre etiquetas, que a su vez generalmente se encuentran dentro de las etiquetas. La etiqueta debe tener un único parámetro "tipo", que indica el tipo de escritura del script:

En teoría, las etiquetas también pueden ubicarse en el cuerpo del documento (en etiquetas). Este escenario se ejecutará cuando el navegador "lea" la página hasta este punto (hasta las etiquetas).

Si no lo sabes idioma Javaguion, luego puede descargar el código de script listo para usar de forma gratuita y colocarlo como se describe arriba en su sitio web.

Un ejemplo de cómo colocar código Javascript ya preparado en un archivo separado.

Creamos una página en cualquier editor de texto y la guardamos como ....... .js. A continuación, descargue el código Javascript terminado y colóquelo en esta página. Lo guardamos en la misma carpeta que el HTML. Ahora necesitas conectar el script Java a la página html. Para hacer esto, haga la entrada apropiada en el archivo HTML: