SlideShare a Scribd company logo
1 of 6
¿Qué puede hacer JavaScript?
˂!DOCTYPE html ˃
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can show hidden HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click
Me!</button>
</body>
</html>
Puede mostrar elementos HTML ocultos
• ˂!DOCTYPE html ˃
• <html>
• <body>
• <h2>What Can JavaScript Do?</h2>
• <p id="demo">JavaScript can hide HTML elements.</p>
• <button type="button"
onclick="document.getElementById('demo').style.display='none'">Click
Me!</button>
• </body>
• </html>
Puede mostrar elementos HTML ocultos
Cambia el estilo a las letras
• ˂!DOCTYPE html ˃
• <html>
• <body>
• <h2>What Can JavaScript Do?</h2>
• <p id="demo">JavaScript can change the style of an HTML element.</p>
• <button type="button"
onclick="document.getElementById('demo').style.fontSize='35px'">Click
Me!</button>
• </body>
• </html>
Puede cambiar los valores de los atributos de
Html
• ˂!DOCTYPE html ˃
• <html>
• <body>
• <h2>What Can JavaScript Do?</h2>
• <p>JavaScript can change HTML attribute values.</p>
• <p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>
• <button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the
light</button>
• <img id="myImage" src="pic_bulboff.gif" style="width:100px">
• <button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the
light</button>
• </body>
• </html>
Puede cambiar un contenido
• ˂!DOCTYPE html ˃
• <html>
• <body>
• <h2>What Can JavaScript Do?</h2>
• <p id="demo">JavaScript can change HTML content.</p>
• <button type="button"
onclick='document.getElementById("demo").innerHTML = "Hello
JavaScript!"'>Click Me!</button>
• </body>
• </html>

More Related Content

Similar to ejemplos programación JS en l.HTML .pptx

Similar to ejemplos programación JS en l.HTML .pptx (14)

Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Html
HtmlHtml
Html
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Crea una pagina web
Crea una  pagina webCrea una  pagina web
Crea una pagina web
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Introducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGRIntroducción a HTML5 y CSS3 AWGR
Introducción a HTML5 y CSS3 AWGR
 
Tema 3 - Introducción a HTML
Tema 3 - Introducción a HTMLTema 3 - Introducción a HTML
Tema 3 - Introducción a HTML
 
Ajax
AjaxAjax
Ajax
 
Como hacer una página web fácil
Como hacer una página web fácilComo hacer una página web fácil
Como hacer una página web fácil
 
Clase 6 twig
Clase 6 twigClase 6 twig
Clase 6 twig
 
Presentación CSS y HTML en Gummurcia
Presentación CSS y HTML en GummurciaPresentación CSS y HTML en Gummurcia
Presentación CSS y HTML en Gummurcia
 

Recently uploaded

Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Juan Martín Martín
 
Biografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdfBiografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdfGruberACaraballo
 
Diapositivas de animales reptiles secundaria
Diapositivas de animales reptiles secundariaDiapositivas de animales reptiles secundaria
Diapositivas de animales reptiles secundariaAlejandraFelizDidier
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Katherine Concepcion Gonzalez
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxiemerc2024
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docxEliaHernndez7
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSYadi Campos
 
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIASISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIAFabiolaGarcia751855
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICAÁngel Encinas
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxFernando Solis
 
Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024IES Vicent Andres Estelles
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxYadi Campos
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioELIASAURELIOCHAVEZCA1
 
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSSEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSYadi Campos
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptAlberto Rubio
 
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...jlorentemartos
 
Revista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfRevista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfapunteshistoriamarmo
 

Recently uploaded (20)

Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024
 
Biografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdfBiografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdf
 
Tema 11. Dinámica de la hidrosfera 2024
Tema 11.  Dinámica de la hidrosfera 2024Tema 11.  Dinámica de la hidrosfera 2024
Tema 11. Dinámica de la hidrosfera 2024
 
Diapositivas de animales reptiles secundaria
Diapositivas de animales reptiles secundariaDiapositivas de animales reptiles secundaria
Diapositivas de animales reptiles secundaria
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
 
Sesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronósticoSesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronóstico
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
 
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIASISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
 
Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literario
 
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSSEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
 
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
 
Revista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfRevista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdf
 

ejemplos programación JS en l.HTML .pptx

  • 1.
  • 2. ¿Qué puede hacer JavaScript? ˂!DOCTYPE html ˃ <html> <body> <h2>What Can JavaScript Do?</h2> <p>JavaScript can show hidden HTML elements.</p> <p id="demo" style="display:none">Hello JavaScript!</p> <button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button> </body> </html> Puede mostrar elementos HTML ocultos
  • 3. • ˂!DOCTYPE html ˃ • <html> • <body> • <h2>What Can JavaScript Do?</h2> • <p id="demo">JavaScript can hide HTML elements.</p> • <button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button> • </body> • </html> Puede mostrar elementos HTML ocultos
  • 4. Cambia el estilo a las letras • ˂!DOCTYPE html ˃ • <html> • <body> • <h2>What Can JavaScript Do?</h2> • <p id="demo">JavaScript can change the style of an HTML element.</p> • <button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button> • </body> • </html>
  • 5. Puede cambiar los valores de los atributos de Html • ˂!DOCTYPE html ˃ • <html> • <body> • <h2>What Can JavaScript Do?</h2> • <p>JavaScript can change HTML attribute values.</p> • <p>In this case JavaScript changes the value of the src (source) attribute of an image.</p> • <button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button> • <img id="myImage" src="pic_bulboff.gif" style="width:100px"> • <button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button> • </body> • </html>
  • 6. Puede cambiar un contenido • ˂!DOCTYPE html ˃ • <html> • <body> • <h2>What Can JavaScript Do?</h2> • <p id="demo">JavaScript can change HTML content.</p> • <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button> • </body> • </html>