Transcripciones
1. Introducción: habilidad bienvenida. Estudiantes de karité a otra clase increíble. Es un día hermoso afuera, y es otro día hermoso para aprender sobre JavaScript. ¿ Y de qué se trata esta clase? Bueno, manera
muy simplista. Se trata de una enfermera en el script Java, y todos hemos visto esas notas increíblemente molestas que en pantalla realmente horribles. Pero hay que aprender por lo usado. Entonces de esto se trata este costo. Vamos a estar hablando del método Java script note, que está disponible para nosotros en el proyecto de ventana mucho. Real va a estar hablando de confirma y promesa, y luego vamos a terminar esta clase construyendo nuestras propias alertas muy personalizadas. Bueno, mira, cuadro de
diálogo y tal vez te preocupes que estés pensando, Clyde, ni siquiera
sé cómo escribir script Java. No sé cómo funciona esto. Pánico. Vamos a estar pasando por él, palo por palo. Así que agarra un café. Tomaremos un Red Bull. Sea lo que sea que se adapte
a tu fantasía, motivate y te veré en el cross audio's oh
2. Alerta : crea un evento de onclick para un botón: Alertas para muchas interfaces y en el pasado, los mensajes se acaban de hacer usando la alerta nativa de JavaScript. Y tú y yo sabemos lo frustrante y feo Dale. Y uno de los problemas es que la función JavaScript de alerta nativa, es un objeto del sistema, y eso solo significa que no podemos manipular cómo se ve y literalmente viene directamente del navegador. Entonces para manipular las alertas, cómo se ven en el campo, tenemos que diseñar nuestro propio CSS en la retroiluminación. Entonces les voy a mostrar algunos ejemplos ahora de algunas alertas. Echemos un vistazo. Entonces aquí vamos. Tengo una página HTML simple que acaba de llamar alerta y en marcha. Entonces, empecemos ahora produciendo una página HTML. Y ahora podemos llamar a este ejemplo de alerta. Y puedes crear esta alerta de muchas maneras. Puedes crear botones, puedes hacer entradas, puedes hacer imágenes. Yo sólo voy a hacer una entrada aquí. Hazlo un botón que puedas hacerlo de muchas maneras. Entonces hagámoslo solo un botón. Y hagamos un onclick. Y es fuego una función que podemos llamar a lo que nos fue delicioso llamado Mostrar alerta. Y hagamos el valor de este insumo. Haga clic en Camino para ejecutar una alerta de JavaScript. Ahora lo único que queda por hacer es que definamos esta función, y eso es JavaScript XHR resto. Y JavaScript tiene que ser insertado entre las etiquetas de script que se ejecuta. Entonces pongamos esto en línea es un botón que creamos y de hecho, ticket, ¿qué esperas que suceda? Sí, este ancho, ¿qué tan fácil es eso? Acabas de ver cómo se impidió un botón con un evento de clic. Y en esta alerta está JavaScript. Eso es entrar en algunos ejemplos más.
3. Alert : escribe texto a la pantalla después de la alerta: Muy bien, entonces nos vamos a complicar cada vez más a medida que
vamos a decir ahora queremos dar click a un botón que se muestra alerta. Y al hacer clic en Aceptar en esa alerta, el texto se reemplaza en la pantalla con algo. ¿Cómo haríamos eso? Vámonos. Vamos a crear un documento HTML. Y de nuevo, vamos a crear un botón con un evento onclick. Solo llamemos a esta alerta. Alértame. Yo me amaba no está definido. De nuevo, tenemos que rock javascript. Javascript tiene que ser insertado dentro de las etiquetas de script. Tenemos que definir ahora la carga MI función. No te preocupes por la sintaxis alrededor de las funciones. breve vamos a enterarnos de eso. Ya verás, verás cómo encaja todo y cómo escribir una función. Ahora, después de hacer clic en Aceptar alerta de bienestar, ¿qué queremos que se ejecute debajo de ella? Recuérdalo con JavaScript, y en realidad vamos a ser el navegador a la pasa. Se inicia de arriba a abajo. Entonces una vez que el soluto esté hecho, va a ejecutar lo que hay debajo de él. Y digamos que queremos en la pantalla. Esto fue reemplazado por JavaScript. Esto se lleva a cabo cuento de JavaScript. Este intento y ejecutar este código, esperaría ver una alerta, no
esperaré ver un botón. Cuando tomemos el botón, deberíamos ver una alerta. Y después de la alerta deberíamos ver el texto puesto en la pantalla. Porque hemos usado documento. Documento es, Es un objeto global. Es casi, no es del todo el rey. Recuerda las ventanas el rey. Pero con debajo de la ventana tienes este gran objeto llamado documento. Y este documento es tu insignia de peso y siempre diciendo: ¿Estamos accediendo a un método llamado derecho? Que literalmente sólo pone, toma en esa página. Simple como ella. A ver cómo se ve eso. Días nuestro botón. Patégame por favor. Mi boleto es una alerta. ¿ Y qué pasa cuando hago clic en Aceptar? Se necesita lo que se reemplaza. Qué impresionante conjunto. Sigamos adelante.
4. Enlace ado de confirmación: la declaración condicional de la confirmación de la confirmación: Hemos visto alertas. Ahora veamos otra función JavaScript, una confirmación. Nuevamente, empecemos con una sencilla página HTML que sí tiene un botón. Esta vez en click, digamos obtener confirmación. Estoy seguro, que aún necesitamos definir en JavaScript. Entonces definamos ahora esta función de confirmación de obtener. Se metió en JavaScript dentro de las etiquetas de script. Tenemos que decirle a JavaScript que estamos definiendo una función con la palabra clave function. Y vamos a confirmar en el lector de pantalla que provienen de, bueno, es sólo una función de JavaScript. En estas funciones de JavaScript, solo
aprenderás como programa a lo largo del tiempo, solo
comenzarás a recordar lo que estas funciones nombra, pero esta se llama conflicto. Entonces no he codificado nada alrededor. Confirmar que esto está incorporado. Y solo preguntemos al usuario a la U12. Continuar nos debe dar el tipo y vamos a ver qué pasa. Entonces deberíamos ver un botón. Al hacer clic en el botón, debemos mostrarnos con un cuadro de diálogo de confirmación. Botón Confirmar. Ahora, déjame deshacerme de ese punto y coma. Poniendo JavaScript, esto es solo HTML es el botón de confirmación cuando nuestro boleto D12 continúe. Y literalmente me está preguntando OK o Cancelar. Pero ahora si hago clic en Aceptar o Cancelar y no pasa nada, intentemos averiguar cómo codificar algo. Si hago clic en Aceptar, ¿cómo haríamos eso? Volvamos al código. Tenemos este cuadro de diálogo de confirmación. Y lo que hace JavaScript es realmente podemos almacenar la variable ok., el resultado de donde el usuario hace clic en Aceptar o Cancelar en una variable. Y vamos a meternos en variables en la siguiente sección para mantenernos apretados a sólo significa un contenedor donde podamos almacenar información. Entonces vamos a guardarlo en una variable llamada decisión. Por lo que la decisión del usuario se va a almacenar a Penny y el valor neto dependerá de si han hecho clic en sí o en no. Y ahora puedo codificar algo. Vamos, vamos a codificar algo con una declaración if. Y otra vez, si las declaraciones en las que vamos a entrar más tarde. Solo quiero que sepas cómo podemos empezar a trabajar con este
tipo de eventos de JavaScript. Y antes de terminar de codificar aquí, recuerda cómo hemos pasado por los diferentes tipos de hijas en penes JavaScript, ¿por qué los tipos Donald son importantes? Este cuadro de diálogo de confirmación, si el usuario hace clic, sí, devuelve true. Y si el usuario hace clic conocido devuelve falso, esto es sólo nuestro JavaScript se construye esta función en su código. Entonces lo que podemos decir es que podemos decir si la decisión es verdadera, es documento, ¿verdad? El usuario quiere continuar. De lo contrario. Y esto es si la decisión es falsa, eso es putrefacción. El usuario está escalado y no quiere continuar. Espero que a pesar de que no entiendas completamente la sintaxis que se puede ver, se
puede especie de seguir lo que es que estoy tratando de hacer. Lo primero que hemos hecho es que hemos creado un botón. Y el botón no hace nada hasta que el usuario haga clic en él. Eso es lo que significa este onclick. Cuando OnClick como clics, nos net evento se despide. El analizador va a ver esta función, obtener confirmación y luego va a encontrar esta función. Se va a saber que es JavaScript. Porque lo hemos puesto en la etiqueta de guión. Se va a encontrar esa buena función de confirmación y ejecutada. Se va a decir, Ok, cool, lamer decisión igual a confirmar. ¿ Quieres continuar? ¿ Cuándo ve la confirmación? Sabe que esa es una función, así que la va a ejecutar. Y luego si el usuario hace clic en
sí, va a devolver un verdadero booleano. Y vamos a escribir esto a la pantalla. Y si se hace clic en estos, cancelar va a ser falso. Entonces esto no va a ser cierto. Y en esto se mostrará en la pantalla. Vamos a verlo en acción. Por lo que estos son botón de confirmación. Hacemos clic en él. Si quieres continuar con eso, di que no. Usuarios asustados y no quiere continuar. Perfecto, colillas. Refresca tu página. Vamos a intentar ir. Haga clic en el botón. El decir, está bien, estos quieren continuar. Eso funciona. Esperemos que, teniendo una sensación de esto, lo genial que es un increíble e intuitivo. Sigamos.
5. Indicación: Veamos ahora algunas indicaciones de JavaScript. Hemos mirado Alertas, hemos buscado unas conformaciones. Ahora, echemos un vistazo a las indicaciones. Otra vez. Empezamos con un documento HTML5. Y podemos hacer esto de muchas maneras. De nuevo, malicioso hacer una entrada por ahora, y vamos a hacer un desclic, hará función me prompt. Entonces tenemos nuestro botón, pero ahora cuando el navegador viene a ejecutar una función llamada prompt me, no
va a encontrar uno, razón por la cual butter write JavaScript function keyword. Lo hemos enfriado para pedirme. Y ahora vamos a emitir un prompt de JavaScript realmente no es difícil. Ya verás con el prompt de palabras clave, mensaje
erato, Meany, warthogs D have. Y entonces sí, solo puedes darle un poco de soporte de lugar falta poca pista. Se puede decir en número. Ya veremos cómo se ve esto. Déjame simplemente cerrar estas otras pestañas. Sigue olvidando que esto no es JavaScript para no seguir poniendo punto y coma al final. Esto es solo HTML. Por lo que me propongo peasy como nuestro botón. Haga clic en el botón. Cuántos warthogs y Yazid poco indicio que dijimos en número de agua. Ahora lejano octane y hago clic en Aceptar, no va a pasar nada porque no
le hemos dicho a JavaScript qué hacer sin valor de entrada. Recuerda, como que hicimos un poco de esto con la confirmación. Bueno, ¿cómo hacemos esto con pronta? Vamos, echemos un vistazo. Hagámoslo. Lo primero que tenemos que hacer es tener que estancar la decisión de usos en algo, en una variable. Hagámoslo. Digamos número, porque sabemos que el usuario va a insertar un número lambda es igual a cualquiera que los usos que metan. Hace ver hasta ahora. Y recuerdas cómo hablamos de literales de plantilla? Espero que lo hagas porque sí, vamos a ir a documentar, ¿verdad? Y vamos a usar literales de plantilla como dos guiones de Beck. Y vamos a decir que sí. Y cuando escribes una variable dentro de un literal de plantilla, tienes que usar el signo de dólar y los corchetes. Y lo hemos llamado número, número. Y ahora si guardo esto y luego entramos en nuestra hoja, Yana refresca, hagámoslo. Hagamos un prompt en número de warthogs. Digamos que tengo tres marcas de agua y hago clic en Aceptar. Tienes tres aguas es patés. Eso es mucho. Y ya ves cómo se inserta dinámicamente los tres en la página, esto es impresionante. De esto se trata JavaScript. Espero que te estés disfrutando tanto como yo. Sigamos.
6. Crea una alerta personalizada: Recuerda al principio dije que la función de alerta JavaScript es un objeto del sistema, lo que significa que no podemos cambiar su tierra. Entonces, ¿cómo conseguimos que aparezcan pestañas de alerta JavaScript realmente geniales? O no voy a usar plugins porque este curso se trata de enseñarte JavaScript. Y solo creemos uno. Vamos a crear uno nosotros mismos con vainilla, HTML, CSS, y JavaScript. Como siempre, empecemos con un documento HTML y creemos un botón. Y ahora vamos a crear una función onclick. Y digamos que yo. Y se puede ver a la derecha, tenemos un botoncito aquí, sígueme. Pero claro que no pasa nada cuando entramos. Ahora antes de entrar en el JavaScript, realidad
quiero crear cómo sería la alerta y cómo me gusta pensar en ello. Crea una etiqueta div, div que contiene toda nuestra alerta. Y luego dentro de esa etiqueta div, solo
quiero tener una calefacción. Diga que esto es un mensaje de advertencia. Y luego yo una vez un botón en el que el usuario puede hacer clic. De acuerdo, hagámoslo. Tengamos una etiqueta div y digamos que tengamos una identificación de eso. Este va a ser todo el tanque que contiene la alerta. Y yo quería golpear y vamos a tener otro y decía Eso es sólo el mensaje pasado mensaje de este mensaje matutino. Y entonces vamos a tener un botón. Misha dice gloses. Sí. No sé por qué. Cualquier cosa. Guarda eso. Simplemente se ve como gobbledygook en la página web es nuestro mensaje, es nuestro botón OK otra vez no hace nada. Ahora, vamos justo antes de que hagamos JavaScript ahora solo quiero darle estilo a este mensaje de advertencia Kitty. Y sé que esto no es una buena práctica, pero sólo voy a poner el estilo en la cabeza. No quiero crear hojas de estilo externas y todo eso ahora, solo
podemos hacerlo para conseguir equidad. Entonces, ¿qué debemos hacer primero? Hagamos todo el div. Por lo que esto es solo usar nuestras técnicas de estilo CSS estándar para identificar el ID. Y ahora podemos peinarlo juntos. Vamos a mostrarlo como un bloque. Se pone un color de fondo. Cincuenta y ocho, cincuenta ocho, cincuenta y ocho. Empezando a ver algunos resultados. Posición fija, borde, dos píxeles. Sólo mostrarte un poco de cómo esta cosa como estar maquillada. Pongámoslo en el mismo tiempo. Hagámoslo un poco más ancho. Pero caer a su inicio es simplemente empujarlo, levantar un poco más grande en. Esta no es la forma más ideal de hacer cosas que solo
estoy tratando de hacer el trabajo para sacudir un poco hacia arriba. Y ahora solo pongamos un poco de relleno. Y su alineación que lleva al mismo tipo. Se está poniendo. Me está consiguiendo, creo que quiero sentir la vibra. Ahora vamos a darle estilo a este mensaje de advertencia. ¿ Cómo lo llamamos? ¿El mensaje dorado? Hagámoslo un color blanco para que realmente podamos leerlo. ¿ Qué más necesitamos métodos? Marginal se ve terrible. Anjum arriba, margen, abajo. Ese debería ser nuestro botón de longitud, longitud. Ver Stine te dice el look de Stein mucho más grande. Y en el último día para darle estilo a este botón OK porque eso luce mesa. Vuelve a decir, lo que se ha llamado Ético fecha de regreso a él y se trata de lo que haces con eso. Hagamos un color de fondo. Es PDS. Y no
escucharíamos , tener exactamente fronteras cuadradas. No se ve tan bonito. En mi opinión. Bordes ligeramente redondeados. Probablemente ni siquiera lo veo, pero es mi sutil mejora en el diseño. Ahora podemos hacer un avivamiento fronterizo ya de un postor. Y el margen inferior necesita un poco de trabajo. Margen inferior. Y la otra cosa que quiero mostrar con mi ratón se cierne sobre el, vale, quería convertirme en un puntero. Entonces solo podría ayudarte ese puntero. Ahora en un hover sobre, se
convierte en un puntero. Entonces ya sabes, es una batalla. Enfriar. Hagámoslo un poco más ancho. Vamos a añadir un poco de relleno. Supongo que diré que se ve bien. Dije que eso se ve poderoso. Yo sólo tire de este inverso. Dije se ve como una bonita pestaña Alerta ID de onda en otro pop-up que vimos. Y puedes decidir que estas cosas serían como si acabara de hacer un trabajo realmente duro. Ahora agreguemos JavaScript. De nuevo, vamos a filmar fuera de guión. Sólo tienes que ir a la parte superior. Recuerda JavaScript tiene que estar dentro de las etiquetas de script. ¿ Y dónde debemos ponerlo? ¿ Y dónde debemos ponerlo como? Ponlo en la parte superior. Sí. Pongámoslo en la parte superior. Guión. Guión. Ocultemos toda esta caja de advertencia de confirmación. Por lo que en este momento tenemos bloquean menos display cisco ninguno. Y deberíamos ver que eso desaparezca. Pero cuando queremos, cuando hacemos clic en este botón, queremos verlo. Bueno, lo primero que necesitamos hacer es
empezar a crear una función para el botón de alas clicado, ¿verdad? Si miras hacia abajo, déjame simplemente desplazarme hacia abajo de nuevo hasta la parte inferior del código puedes ver este botón tiene una función que hemos llamado Leíame. Tenemos que definir ahora esa función en JavaScript. De lo contrario, no pasa nada, que es lo que está pasando aquí. Entonces empecemos a definir una función que me llamó. Función. ¿ Y qué queremos que suceda? Bueno, lo primero que queremos que suceda es que queremos mostrar un mensaje de alerta. Y para poder hacer eso, tenemos identificar esa etiqueta div completa que tiene la alerta que teníamos con una identificación de comodidad. Entonces llamémoslo el recuadro de confirmación o falta de una palabra mejor, documento. Mender en tu página web, JavaScript tiene un método incorporado llamado getElementById. Y llamamos a identificación. Entonces ahora lo tenemos. Entonces lo segundo que queremos hacer es, ya
sabes, cuando eso alerte apertura en el botón OK, queremos identificar el botón OK porque cuando se hace clic en el botón OK, queremos que aparezca ese modal, esa alerta desaparecerá. Entonces eso es lo segundo que queríamos. Tarde. Ok, botón igual documento, getElementsByClassName. Qué rápido terminó. Recordemos eso otra vez. Nosotros lo llamamos. Ahora si lo levantamos así, en
realidad va a volver. Cuando encuentras un elemento por nombre de clase, devuelve
lo que se denomina lista de nodos. Y es casi como un objeto similar a un arreglo. Entonces esto no es suficiente. Apenas tenemos que acceder al primer elemento de esa matriz, que es lo que eso está haciendo ahí. Ahora, ahora que tenemos este botón OK, lo que queremos hacer es que queremos definir un desclick. Significa que cuando el usuario hace clic en eso, está bien, por todo el cuadro de diálogo desaparece. Entonces hagámoslo. Y permítanme añadir comentarios aquí. Y pasamos por los comentarios. Este es el botón en el modal de alerta. Y ahora queremos ocultar el modal de alerta cuando se hace clic en un botón. Entonces hagámoslo. Entonces vamos a añadir un oyente de eventos. Al hacer click, OK, botón al hacer click. Y tenemos que definir de nuevo la función. Pero hagámoslo todo en un solo paso. Y verás más adelante en realidad no tenemos que escribir esta gran palabra clave es una forma más corta de hacerlo, que es nueva sintaxis. Te enseñaré eso más tarde. Yo solo quiero que entiendas qué es lo que estamos haciendo aquí. Entonces otro método incorporado dentro de los navegadores y JavaScript y el DOM es atributo enfermo. Literalmente puedes cambiar atributos y diferentes elementos en tu página. Entonces vamos a agarrar esa caja de confirmación, que hemos definido anteriormente. Y podemos ver un atributo. Y qué atributos hacen en un estado donde recordar queríamos que fuera exhibida. Ahora como se hace clic en ninguno o botón Knit, el atributo que queremos hacer el estilo es el primer argumento a este método. Y el segundo es lo que queremos cambiar. Y eso es mostrar a ninguno. flexible, ¿verdad? Entonces ahora hemos definido lo que sucede con el botón dentro del modal nerd, pero en realidad no hemos mostrado el modal de todos modos. Por lo que no podemos hacer nada con él. Bueno, pongámoslo aquí arriba y digamos show modal. Tenemos caja de confirmación, atributo S8. Queremos escoger el estilo y queremos exhibir. Bloque. Debería darle una jugada. ¿ Cómo debemos probar buenos trabajos del marisco. Hagamos clic en el botón. ¿ Qué salió mal? Y déjame era no está funcionando cuando otros Click Me. Entonces algo que no podemos Jake es si consolamos log, sí, podemos bloguear alto. Recibe el evento click está funcionando. Vamos sólo a la consola. Y vamos a hacer clic en el botón. Se puede ver que no pasa nada. Por lo que obviamente esta alerta me función como mapeo llamado cojín es por qué en el
me coloreado en Lech debe estar en cheque. efecto de comprobación funciona ahora. Y estas son altas y como la voy a querer. Está bien, genial. Déjame esconderme eso de inmediato. Eso refresca una página cuando hago clic aparece, hemos identificado este botón OK. Entonces cuando hago clic en Aceptar, va a ejecutar esta función que dice en un atributo sit para mostrar ninguno y desaparece. Entonces esto es realmente un ejemplo de cómo hemos creado una alerta desde cero, desde literalmente rayada en HTML, CSS, y un poco de JavaScript. Y literalmente hemos creado nuestra propia alerta diseñada a medida. Esto es impresionante. Y esto se va a sentar en el camino a ser impresionante, CUDA. Sigamos.
CM Code_Zone, !false | funny, because its true
