JavaScript para desarrolladores de WordPress: aprendiendo los elementos básicos

JavaScript se desarrolló hace más de 20 años en Netscape y durante un período, a mediados de la década de 1990, se consideró un obstáculo para una red estandarizada. ¡Mira lo lejos que he llegado desde entonces! JavaScript ahora se usa en el 93.6% de todos los sitios web del mundo. Automatic incluso ha desarrollado recientemente un cliente de escritorio para WordPress.com, 100% JavaScript. Los sitios y aplicaciones enteros solo se pueden crear con herramientas de JavaScript, como Angular y React. La web se mueve cada vez más rápido a una vida más animada. WordPress no renunciará al viejo PHP pronto, pero actualmente hay un cambio significativo en JavaScript y los desarrolladores deben mantenerse al día.
Entonces, en esta serie de cinco partes, le presentaré JavaScript para los desarrolladores de WordPress y abrirá los ojos en el mundo de JavaScript y lo que significa WordPress. A lo largo de esta serie, aprenderá los elementos básicos, pero supongo que ya tiene conocimiento práctico sobre HTML y CSS. Si necesita ayuda con estos bloques, eche un vistazo a nuestra serie de desarrollo de WordPress. ¿Te has perdido un tutorial en nuestra serie JavaScript para desarrolladores de WordPress? Puede mantenerse al día con las cinco publicaciones aquí:
JavaScript para desarrolladores de WordPress: aprendiendo los elementos básicos
JavaScript para desarrolladores de WordPress: nociones introductorias con objetos
JavaScript para WordPress Developers: nociones introductorias con JQuey
JavaScript para desarrolladores de WordPress: JavaScript se carga en WordPress
JavaScript para desarrolladores de WordPress: usando AJAX
Los conceptos básicos de las buenas noticias sobre JavaScript es que gran parte está del lado del cliente y está incorporada en su navegador. Esto significa que puede comenzar sin ninguna configuración especial. Todo lo que necesita es un archivo HTML. ¡Un simple horario para crear ese archivo HTML ahora! Todo lo que necesitamos es un cuadro HTML 5 básico y una etiqueta de script dentro de él. Así es como debería verse: la idea 05DBD8F7B16506174ED92CBD8B7B79E01 está cargada
JavaScript se puede vincular a nuestro documento de fuentes externas o se puede colocar en línea, al igual que CSS. Estemos satisfechos por el momento con el método en línea. Analizaremos cómo incluir JavaScript de archivos más adelante en este artículo.
Al escribir JavaScript en línea, debe incluir el código en las etiquetas de script, como lo hice en el ejemplo anterior. Lo primero que aprenderemos es cómo mostrar algunos datos para que podamos ver lo que hacemos. Vamos a empezar. Alertar un cuadro de alerta es una molesta ventana emergente que contiene un mensaje y un botón que le permite cerrar la ventana emergente. Tiene algunos usos legítimos, pero puede ser familiar, especialmente por los anuncios de spam y otros engaños.
El cuadro de alerta

Alertar a veces puede ser una forma rápida de solucionar algo en su código. Hay muchos métodos mejores, pero por el momento alerta es una de las soluciones más rápidas y está bien para nuestros propósitos.
Simplemente ingrese alerta (‘escriba cualquier mensaje aquí’) en las etiquetas de las Escrituras y recarga la página. Grabación en la consola Una forma más flexible de mostrar datos es registrarlos en la consola. Si ha usado HTML, CSS y PHP, sus posibilidades son ver la consola. Se puede encontrar en la sección de la herramienta de desarrollador de cada navegador. Consola JavaScript Chrome
Perdí mal el código antes de usar alertas (‘mensaje’). Debido a que las alertas no son una función JavaScript, la consola me dio el error anterior. JavaScript registrará errores y otros mensajes en su consola, pero puede usarlo para sus propias necesidades.

Use console.log (‘Escribe cualquier cosa aquí’) en un texto de revista en la consola. Como verá más adelante, también puede grabar matrices y objetos, lo que lo hace mucho más flexible que alerta.
Datos de registro en la consola
Escribir en el documento que JavaScript también puede colocar contenida en la estructura HTML usando document.write. No creo que haya usado este método, porque hay mejores formas de cambiar el HTML en el código JavaScript, pero lo usaremos en algunos ejemplos para evitar la complejidad innecesaria. Así es como funciona:

Cargue la idea 05DBD8F7B16506174ED92CBD8B797E01
Los elementos básicos de JavaScript JavaScript, como muchos otros idiomas, se basan en conceptos como variables, funciones y objetos. En este artículo, nos centramos en variables, funciones y cómo escribir JavaScript. Le recomiendo que se dé el tiempo que necesite comprender estos conceptos, ¡porque se usan en cualquier lenguaje de programación, no solo en JavaScript!
Agregar JavaScript a nuestra página ya le hemos mostrado cómo escribir JavaScript en línea, pero hay otros modos y otras consideraciones. Puede agregar JavaScript a la sección HTML o . La mayor parte del código JavaScript es necesario solo después de que se haya cargado la página. Por esta razón, es común poner la mayor cantidad de código posible antes de cerrar la sección : hace que las páginas se carguen mucho más rápido. También es una buena idea separar el código JavaScript de su página como lo hacemos con CSS. Puede escribir el código en uno o más archivos externos y luego puede conectarlos a la página. Esto también se puede hacer en las secciones de cabeza o cuerpo utilizando una etiqueta de script con un atributo SRC. La idea 05DBD8F7B16506174ED92CBD8B7B7B7A01 está cargada.
Las variables variables le permiten almacenar un valor que se utilizará más adelante. Gran parte de la programación es la escritura del código reutilizable, las variables son conceptos que hacen que esto sea posible. Supongamos que crea una página de bienvenida para usuarios conectados. Eliminemos algunos fragmentos de texto aleatorios que podrían usarse en esta página:
Cargue la idea 05DBD8F7B16506174ED92CBD8B797E01
Como puede ver, mi nombre se usa bastante. Podemos crear una variable y atribuir un valor (mi nombre) y usar esa variable más adelante.
Cargue la idea 05DBD8F7B16506174ED92CBD8B797E01
En un caso simple como este, el valor no es inmediatamente obvio, es solo una línea adicional. En una situación de la vida real, esto no solo puede salvarle docenas de líneas, sino que es útil más allá del reemplazo. En una aplicación real, el valor de la variable de nombre se tomaría de la base de datos. Si John se conecta, verá “Hola John”, mientras que Jane verá “Hola Jane”. Antes de seguir adelante, para memorizar parte de la sintaxis. Cuando cree una variable, escriba la palabra clave VAR, seguido del nombre con el que desea consultar la variable, seguido del signo igual y el valor de la variable. Si un valor es una cadena, debe cotizarla. Si es un número, debe escribirlo sin cotizaciones. Finalmente, termine la línea con una coma y una coma. Cuando usamos una variable en una fila, usamos la concatenación. Un signo más se concatena (agregar) una variable en la cadena. El formato general es: “alguna cadena” + variable + “otra cadena”. Antes de seguir adelante, quiero mencionar algo sobre la palabra clave lima, punto y coma. Desde un punto de vista técnico, la lima de palabra clave no es necesaria para definir una variable. Si lo omite, creará una variable global a la que se puede acceder desde cualquier lugar. Por lo general, esta no es una buena idea, porque obtendrá un código confundido. Por el momento, agregue la cal antes de todas las variables.
El punto y la coma no es necesario. Solo es necesario si escribe dos declaraciones en la misma línea.
Cargue la idea 05DBD8F7B16506174ED92CBD8B797E01
Prefiero agregar una coma y una coma después de cada línea para evitar confusiones y mantener una sintaxis estándar. También será útil al aprender PHP, donde necesita usar el punto y una coma. Funciones Las funciones son otra forma de escribir un código reutilizable. Usemos una analogía para comprender por qué hay funciones. Supongamos que le gustó la Guía de utilidad para WordPress multisitio y se refiere a ella regularmente. No puede recordar la URL, por lo que lo que hace todo el tiempo es acceder al blog WPMU Dev, buscar “multisites” y hacer clic en uno de los resultados. Un día estás cansado y creas una marca. Ahora puede hacer clic en la marca para obtener el mismo resultado. Sobre eso es una función. Agregue un conjunto complejo de tareas y luego realice esas tareas con un comando simple. La diferencia entre una función y una marca es que una marca es un orden rápido para la solución. La marca en realidad no va a la página de búsqueda, sino que simplemente recuerda la URL por usted. Una función realmente realizaría todos los pasos por separado. Veamos un ejemplo en el que tenemos que usar mucho nombre de usuario Twitter. Cargue la idea 05DBD8F7B16506174ED92CBD8B797E01
Tenga en cuenta que hay mucha repetición, usamos mucho nombre “@” +. Creemos una función que realice esta concatenación para nosotros, aquí está el código final:
Cargue la idea 05DBD8F7B16506174ED92CBD8B797E01
Dios, acabo de empeorar las cosas, ¿verdad?Aprenderemos sobre algunas formas de hacerlo mucho más corto en la siguiente sección cuando descubramos la matriz.Por ahora, centrémonos en cómo usar funciones.En primer lugar, creamos una función utilizando la función de palabras clave, seguida del nombre de la función.Cada nombre de la función es seguido por soportes redondos que contienen parámetros, si los hay.Luego incluimos el contenido de la función en aparatos ortopédicos.
Un parámetro es un valor transmitido a la función. La función puede usar ese valor para producir resultados diferentes. Necesitamos un parámetro aquí para producir el nombre de usuario final. En mi caso, el valor del parámetro sería “Danielpataki” y produciría “@danielpataki”. Si muestro un tweet de WPMU Dev, el nombre sería “WPMudev” y produciría “@WPMudev” al final. Una función puede usar document.write o console.log métodos de los que hablamos, pero también puede devolver un valor. Devolver un valor le permitirá usarlo donde quiera. Cuando use una función, deberá ingresar su nombre, seguido de corchetes con cualquier parámetro que desee enviar a la función. Las funciones pueden ser desalentadoras al principio, pasemos por el código de línea de línea para ver lo que está sucediendo. En la línea 1 definí la función. El nombre de la función es “Twitter_Username” y acepta un parámetro que llamé “Twitter_Name”. Twitter_name es la forma en que nos referimos a este valor dentro de la función. Dependiendo de, simplemente damos un signo @ con Twitter_Name y devuelve la cadena resultante. Nada sucede cuando define una función, JavaScript solo “lo sabe” para que pueda usarla más tarde. En la línea 6, definí un nombre con el valor “Danielpataki”. En la línea 7, escribo algún texto en el documento HTML y luego llamo a nuestra función. Di un nombre a la función. El valor del nombre es “Danielpataki”, la función recibirá este valor.
Volvamos a la posición.Dije que el primer parámetro debería llamarse “Twitter_Username”, por lo que en la función el valor “Twitter_Username” ahora es “Danielpataki”.Al final, este valor se devuelve y, por lo tanto, se acumula con el resto del texto.Tomemos un segundo enfoque para comprender las funciones, para asegurarnos de que comprenda cómo funcionan.Las variables similares a las funciones: son como si reemplace los datos de un lugar a otro, solo tiene que darse cuenta de cuál es el valor de todos.La función devolverá un valor una vez que haga su trabajo.Necesitamos averiguar qué valor será.Aquí hay una forma generalizada de escribir nuestro código: Cargue la idea 05DBD8F7B16506174ED92CBD8B79E01
Mirando nuestra función, vemos que la línea final es el nombre de usuario de retorno; . Perfecto, ahora tenemos que descubrir cuál es el nombre de usuario del nombre de usuario porque esto es lo que se mostrará al final. Justo arriba, vemos la línea de nombre de usuario var = “@” + twitter_name; . Por lo tanto, sabemos que el nombre de usuario, que es el valor final devuelto, comienza con una señal para seguir el valor de otra variable: Twitter_Name. Encontremos el valor de esta variable. La variable Twitter_Name se define por nuestra función misma: es el primer parámetro de nuestra función. Esto significa que tenemos que devolver donde usamos la función y mirar el primer parámetro que transmitimos. Utilizamos la función de la siguiente manera: Twitter_Username (nombre), por lo que debemos encontrar el valor de la variable de nombre. Esta es la variable que definimos en la línea 6, el valor es “Danielpataki”. Por lo tanto, cambiamos nuestra función. El valor “Danielpataki” se transmite a nuestra función donde se llama Twitter_Name. Se crea una nueva variable llamada nombre de usuario que concisa un letrero con Twitter_Name y finalmente la devuelve, dándonos @Danielpataki. Las funciones de múltiples parámetros pueden tener varios parámetros que pueden ayudar a reducir la redundancia en nuestro código: todo se trata de observar modelos. Tenga en cuenta que cada tweet se ve así:
[texto de tweet] – [nombre de usuario] . Podríamos crear una función para tomar el tweet de texto como el primer parámetro y el nombre de usuario como el segundo y eso produce el resultado: la idea 05DBD8F7B1650174ED92CBD8B79E01 está cargada.
¡Eso parece mucho más limpio! Pase la prueba como el primer parámetro y el nombre como el segundo. La función de ellos es entonces y devuelve el resultado. Hay dos cosas a tener en cuenta aquí. En primer lugar, no tiene que crear una variable para devolver. Puede devolver la cadena concisa sin asignarla a una variable. En segundo lugar, ya no tenemos una función para producir nombres de usuario, por lo que tuvimos que volver a cambiar nuestra línea inicial a ‘Su usuario de Twitter es @’ + nombre. Funciones dentro de las funciones que a menudo verá una función utilizada en otra. En nuestro ejemplo, creamos un nombre de usuario dentro de la función, pero también usamos el nombre de usuario fuera de nuestra función. Esta es una gran situación para crear otra función. Una función será responsable de transformar nombres simples en los nombres de usuario de Twitter. La segunda característica será responsable de mostrar tweets, utilizando la primera función para generar nombre de usuario, eche un vistazo: cargar 05DBD8F7B16506174ED92CBD8B7B79E01
Ahora tenemos una función llamada Twitter_UserName que toma una cadena y pone la señal AT antes. Se usa en la línea 10 para mostrar el nombre de usuario y también como tweet. Tenga en cuenta que también cambiamos la función del tweet para usar document.write, haciendo que nuestro cuerpo de cuerpo sea aún más limpio. Las matrices de matriz son partes importantes de todos los lenguajes de programación. Contienen varios valores dentro de ellos. Puede pasar fácilmente por estos valores o realizar otras operaciones en ellos. Para crear una matriz que contenga el número de calorías consumidas en los últimos 7 días.

Cargue la idea 05DBD8F7B16506174ED92CBD8B797E01
Una matriz está envuelta entre los soportes rectos, los valores están separados por comas.Los valores pueden ser de cualquier tipo de datos: cadenas, números enteros, otras matrices, objetos, etc.Para ver por qué las matrices son tan fuertes, continuemos nuestro ejemplo de tweets.Esencialmente, mostramos una colección de tweets, almacenemos esos tweets en una matriz: la idea 05DBD8F7B1650174ED92CBD8B7B7B7B7E01 está cargada.
Ahora podemos usar la función del mapa incorporado de JavaScript a ITRate (viajar cada miembro) de la matriz.Reescribamos todo nuestro ejemplo de tweets en vista de esto:
Cargue la idea 05DBD8F7B16506174ED92CBD8B797E01
La función del mapa pasa por todos los miembros de una pintura. La función toma un parámetro, una función, que recibe dos argumentos. El primer argumento es el valor del miembro actual de la matriz, el segundo es la clave: un valor numérico que representa el orden del miembro de la matriz dentro de la matriz. En nuestro ejemplo no usamos este valor. El primer argumento de la función del mapa es una función, pero no sigue la misma convención que antes, no tiene nombre. Esto se llama función anónima. No tiene nombre, no se define por separado en otro lugar, se crea ad-hoc cuando es necesario, generalmente como parámetros para otras funciones. Todo lo que hace nuestra función anónima es transmitir el texto de tweet a la función de tweet que ya escribí. El nombre se ha tomado desde que inicialmente definí la variable de nombre. Manejo de las pinturas que ya he visto cómo puedes pasar por los miembros de una matriz, pero ¿qué pasa con la matriz misma? Las matrices tienen una serie de funciones que puede usar para eliminar, agregar y tomar datos de ellas. Push es uno de uso común que puede agregar un nuevo valor al final de una pintura, aquí está la idea 05DBD8F7B16506174ED92CBD8B7B797E01
POP elimina y devuelve el último elemento de cualquier matriz de datos. El siguiente ejemplo muestra cómo la función POP toma el elemento y cómo se elimina ese elemento de la matriz.
Cargue la idea 05DBD8F7B16506174ED92CBD8B797E01
Para obtener más funciones de matriz, eche un vistazo al recurso W3Schools conectado.Qué poner en el cargo la pregunta que puede tener es qué poner en el cargo.Durante este tutorial creé bastante.La función del tweet comenzó al contener solo el texto, luego agregué el elemento
y finalmente agregué document.write.Entonces, siempre debemos agregar todo, ¿dónde sabemos cuándo parar?También podríamos crear una función para eliminar todos nuestros tweets con una simple llamada de función: Cargue la idea 05DBD8F7B16506174ED92CBD8B7B79E01
A medida que avance, aprenderá algunas pautas, sabrá qué hacer y qué hacer, pero eventualmente depende de las necesidades de su aplicación. Por ejemplo, la inclusión del marcado como
no es excelente. La función de tweet debe poder mostrar el texto y el autor de un tweet. Agregar marcado hace que la función sea menos flexible, porque solo podemos usarla en las listas. El último ejemplo anterior también es un ejemplo clásico de código malo y confundido. Pasamos la matriz de los tweets a la función, pero el nombre utilizado dentro de la función se define fuera de la función. El flujo de datos es difícil de seguir, especialmente si extrapola esto a una base de código más grande. Concéntrese en los elementos básicos por ahora, no se moleste demasiado por la forma correcta de hacer las cosas. Su tarea ahora es familiarizarse con la sintaxis y comprender los ejemplos en los que trabajé. Comience a escribir el código lo antes posible. Comarás muchos y muchos errores, ¡pero está bien! Si alguien te critica porque los hiciste, ¡no olvides que alguna vez fueron principiantes y cometieron los mismos errores, ¿estás en ellos! En la próxima lección de esta serie, mejoraremos el ejemplo de tweets utilizando objetos que generalmente se usan en JavaScript y son extremadamente útiles al escribir código. Una vez que envolvimos la cabeza alrededor de los objetos, podemos comenzar a mirar a JQuey para hacer todo tipo de cosas buenas. ¿Encontraste este tutorial útil? ¿Por qué quieres aprender JavaScript en el desarrollo de WordPress? ¿De qué quieres saber más? Háganos saber en los comentarios a continuación.
Etiquetas:
Javascript