Scribd
Cargar
6 vistas

Lenguaje JavaScript

java script lenguaje

Cargado por

Quicho
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
6 vistas

Lenguaje JavaScript

java script lenguaje

Cargado por

Quicho
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 13

Lenguaje JavaScript

Lenguaje de Programación
JavaScript
JavaScript es una de las múltiples aplicaciones que han surgido para
extender las capacidades del lenguaje HTML.

Es un lenguaje Script orientado a documento.

Las funciones de JavaScript son un conjunto de sentencias que especifica al


programa las operaciones a realizar. Son útiles para evitar las repetición de
líneas y modular el código. Para trabajar con ellas hay que desarrollarlas y
llamarlas cuando lo necesitamos.
JavaScript - DOM
Cuando se carga una página HTML en el navegador, el mismo crea lo que
se conoce como un DOM (Modelo de objeto de documento).

Document

HTML

head body

id
title h1
class
JavaScript - ¿Qué puede hacer?
• Cambiar todos los elementos HTML de la página.
• Cambiar todos los atributos HTML de la página.
• Cambiar todos los estilos CSS de la página.
• Eliminar elementos y atributos HTML existentes
• Agregar nuevos elementos y atributos HTML
• Reaccionar a todos los eventos HTML existentes en la página.
• Crear nuevos eventos HTML en la página.
JavaScript – Ubicación de código JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Código JavaScript <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>

</script>
</head>
<body>
Código JavaScript
<script>

</script>
</body>
</html>
JavaScript – formas de obtener un elemento HTML
• Elements by id
• Elements by tag name
• Elements by class name
• Elements by CSS selectors
• Elements by HTML object collections
JavaScript – como cambiar el contenido HTML

Para modificar el contenido de un elemento HTML, lo realizamos mediante la


propiedad “innerHTML”.
Ejemplo:

document.getElementById("texto").innerHTML = ”Hola, Me llamo”;


JavaScript – como cambiar el valor de un atributo

Para modificar el atributo de un elemento HTML, lo realizamos mediante la


propiedad “setAttribute”.
Ejemplo:
<img src="IMG_01.jpg" alt="No habilitado" width="150px">
document.getElementById("imagen").src = "IMG_02.jpg";
document.getElementById("texto").setAttribute("name", "datos");
JavaScript – como cambiar una hoja de estilo

Para cambiar una hoja de estilo, debemos colocar un identificador a la hoja


de estilo y modificar su atributo href.
Ejemplo:

document.getElementById("estilo").href = "hoja.css";
JavaScript – cargar otro documento html
Para cargar otro archivo html dentro un elemento html debemos especificar como un
object.
Ejemplo:
document.getElementById("contenido").innerHTML = '<object type="text/
html" data="Pagina.html" ></object>';
JavaScript – crear elementos html
Para crear un elemento html, primero debemos crear el elemento y luego crear el
contenido y por utlimo unir el elemento con el contenido.
Ejemplo:

const elem = document.createElement("p");


const contElem = document.createTextNode("Hola soy un texto creado desde Java
Script");
elem.appendChild(contElem);
JavaScript – eliminar elementos html
Para eliminar un elemento html, primero debemos obtener el elemento padre y luego
obtener el elemento a eliminar y por ultimo indicar que queremos eliminar ese
elemento del padre.
Ejemplo:

const padre = document.getElementById("contenido");


const hijo = document.getElementById("texto");

padre.removeChild(hijo);
JavaScript – function
Para crear una función en JavaScript debemos utilizar la palabra reservada
“function” seguido del nombre de la función.
Ejemplo:

function changeStyle(){
document.getElementById("estilo").href = "hoja.css";
}

También podría gustarte