Scribd
Cargar
66 vistas18 páginas

Javascript - Clase 3

El documento presenta un curso introductorio de Javascript dividido en 8 clases que cubren temas como sintaxis, funciones, objetos, integración con HTML, manipulación del DOM, eventos y formularios. Luego explica cómo agregar código Javascript a archivos HTML de forma interna o externa y describe métodos como console.log(), alert(), prompt() y confirm() para depurar e interactuar con el usuario. Finalmente introduce los objetos Window, Document, Location y History y sus propiedades para acceder a la ventana del navegador, documento, URL y historial.

Cargado por

ScribdAcc22
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
66 vistas18 páginas

Javascript - Clase 3

El documento presenta un curso introductorio de Javascript dividido en 8 clases que cubren temas como sintaxis, funciones, objetos, integración con HTML, manipulación del DOM, eventos y formularios. Luego explica cómo agregar código Javascript a archivos HTML de forma interna o externa y describe métodos como console.log(), alert(), prompt() y confirm() para depurar e interactuar con el usuario. Finalmente introduce los objetos Window, Document, Location y History y sus propiedades para acceder a la ventana del navegador, documento, URL y historial.

Cargado por

ScribdAcc22
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 18

Javascript

Programa del curso

◈ Clase 1: Introducción y sintaxis


◈ Clase 2: Funciones, arrays y objetos
◈ Clase 3: Javascript integrado a HTML
◈ Clase 4: DOM, selectores y elementos
◈ Clase 5: Eventos
◈ Clase 6: Formularios
◈ Clase 7: Ajax
◈ Clase 8: Ejercicio integrador
1.
Javascript
integrado a
HTML
Bienvenidos al browser
Agregar Javascript a un archivo HTML

Hay dos formas para agregar Javascript a un HTML:

1) Insertando nuestro código en la etiqueta <script>.


<body>
// Página HTML
<script>
// código Javascript
</script>
</body>

2) Vinculando a un archivo externo:

<body>
<script src="archivo.js"></script>
</body>
console.log()

Para debuggear Javascript en la consola del navegador utilizamos:

<body>
<script>
console.log(5 + 6);
</script>
</body>

Si Abrimos este html y luego la consola aparecerá:


alert()

El método alert nos permite mostrar un mensaje en la pantalla con un


botón para cerrarlo.

Este método se debe usar sólo para informar al usuario sin esperar
confirmación del mismo.

<head>
<script>
alert("ALERTA ROJA!");
</script>
</head>
prompt()

El método prompt nos permite interactuar con el usuario ya que le


podemos pedir que ingrese un valor.

<script>
var nombre = prompt("Ingrese su nombre");
</script>

La respuesta que el usuario ingrese, se guardará en la variable nombre.


confirm()

El método confirm nos permite mostrar un mensaje al usuario y obtener


un valor booleano (true/false) como respuesta.

var mayor = confirm("¿Sos mayor de edad?");

La respuesta que el usuario ingrese, en este caso true o false, se guardará


en la variable mayor.
2.
Objetos:
Window y
Document
Window y document - Diferencia

El objeto window es lo primero que se carga en el navegador.


El objeto window tiene propiedades como length, innerWidth, etc.

El objeto document representa a tu html, php u otro documento


que será cargado en el navegador. El document es cargado dentro
del objeto window y tiene propiedades como title, url, cookie, etc.
window - Propiedades

Para acceder a las propiedades de window usamos window.propiedad.

window.innerHeight // devuelve el alto de la ventana del navegador


window.innerWidth // devuelve el ancho de la ventana del navegador
window.open() // abre una nueva ventana
window.close() // cierra una ventana
….

Todos los métodos como alert, confirm, etc pertenecen a window.


Su notación es opcional, es decir, se puede hacer de las dos formas:

window.alert() = alert()
window.innerHeight = innerHeight
document - Propiedades

Para acceder a las propiedades de document utilizamos


window.document.propiedad ó más fácil document.propiedad

document.body // devuelve el body del html


document.readyState // Devuelve el status del loading del documento
document.write() // Escribe expresiones HTML con Javascript
document.title // Devuelve el titulo de la página
...
location

Location es un objeto que representa la URL.


Por medio de sus propiedades podemos acceder a las distintas partes de
la URL como también navegar a otro documento.

window.location = location

location = 'http://www.google.com'; //me redigirá a google.com


console.log("La URL actual es: "+ location.href)
location.host // retorna el nombre del host y el número de puerto.
location.pathname // muestra el path del recurso
location.search // muestra los parámetros del query string
history

El objeto history representa el historial de documentos visitados en la


actual sesión del browser.

history.length; //retorna la cantidad de ítems del historial


history.go(indice); //vuelve (-) ó avanza en el historial (+)
history.back(); //vuelve al documento anterior
history.forward(); //navega a la próxima URL
A practicar!

A practicar!
Práctica 1 - Integrar Javascript con HTML
Gracias!
Preguntas?

También podría gustarte