Javascript

Javascript
Índice
• Introducción
• Javascript
• <script>
• Métodos
• Funciones
Introducción
¿Qué es Javascript?
• Es un lenguaje interpretado, es un lenguaje Script.
• Extiende las capacidades de las páginas Web
• El código está integrado en el HTML
• Se interpreta en el ordenador que recibe el HTML, no se compila
• Ejecución dinámica: Los programas y funciones no se chequean hasta que
se ejecutan
• Trabaja con los elementos del HTML
• No se declaran los tipos de variables
• Se ejecuta en el cliente,
• Muy utilizado para validación de datos y efectos en las páginas de Web
¿Qué se puede hacer con JavaScript?
• Chequear Formularios
– Comprobar que se han rellenado correctamente
antes de enviarlos y que el servidor de erro
• Realizar cálculos simples
• Hacer interactiva una página web
• Juegos
• ...
Incorporación a HTML
• La incorporación se hace con la etiqueta SCRIPT
<script>
Código en JavaScript
</script>
Ocultamiento de guiones
• Algunos navegadores no soportan scripts, por lo que
ignorarán la marca <SCRIPT>, pero no el contenido
• Solución: ocultarlo como comentario
<script language="JavaScript">
<!– Ocultar guion
Programa en JavaScript
// fin de ocultamiento -->

</script>
ejemplo
<html>
<head>
<title>Pagina con JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write("<p>Hola mundo!</p>");
document.write(" <p>¿Como estas <br/> " +
" <i>tú</i>?</p> ");
</script>
<p>Aquí hay algo de texto estático.</p>
</body>
</html>
Jerarquía
Objetos del navegador
Objeto de javascript Etiqueta HTML
window
document <body>
form <form>
button <input type=“button”
link <a href=“ “>
…
La TAG <SCRIPT> </SCRIPT>
• Sintaxis
<SCRIPT type="text/javascript" src="fuente.js"></SCRIPT>
• Atributo SRC: fichero código fuente

<SCRIPT type="text/javascript">
function valor_abs(form) {
var num = eval(form.expr.value)
if (num >= 0)
form.result.value = num
else
num = -num
form.result.value = num
}
</SCRIPT>
Un Simple Script
<html>
<head> <title>First JavaScript Page</title> </head>
<body>
<h1>First JavaScript Page</h1>

</script>
</body>
</html>
JavaScript embebido
<html>
<head>
<title>First JavaScript Program</title>
</head>
<body>
<script language=“JavaScript” src=“tu_archivo.js”></script>
</body>
</html>
• Una etiqueta <script> se puede colocar dentro

de <head> o <body> en un documento HTML .
JavaScript Source File
<script language=“JavaScript”
src=“tu_archivo.js”></script>
• SRC – especifica la ubicación de un script externo

• TYPE – especifica el tipo de lenguaje script
• LANGUAGE – especifica el lenguaje script
• TYPE y LANGUAGE tiene similar función, se suele
usar LANGUAGE para especificar el lenguaje usado en
el script
14
Confusión JavaScript
JavaScript Java
Interpretado por el ordenador del Compilado en el servidor antes de
lado cliente ejecutar en el equipo cliente
Enlace dinámico, las referencias a Enlace estático, los objetos
objetos se comprueban en tiempo referenciados deben existir en
de ejecución tiempo de compilación
No hay necesidad de declarar los Los tipos de datos deben declararse
tipos de datos
El código esta embebido en HTML El código no esta integrado en HTML
Limitado por la funcionalidad del Las aplicaciones Java son
navegador independientes
Puede acceder a los objetos del Java no tiene acceso a los objetos
navegador del navegador
método alert()
<head>
<script language=“JavaScript”>
alert(“Una alerta se ha lanzado por JavaScript”);
</script>
</head>
• Es uno de los métodos más fáciles de usar entre,

alert(), prompt() y confirm().
• Se puede utilizar para mostrar información textual
(simple y concisa).
• El usuario puede hacer clic en "OK" para cerrarla.
método confirm()
<head>
confirm(“¿Eres mayor de edad?”);
</script>
</head>
• Este cuadro se utiliza para dar al usuario la opción de

Aceptar o Cancelar.
• Es muy similar al método "alert() "
Método promt()
<head>
prompt(“¿Cuál es tu código de estudiante?”);
prompt(“¿Cuál es tu nombre?”,”Sin nombre”);
</script>
</head>
• Esta es la única que permite al usuario escribir en su

respuesta a la pregunta específica.
• Se puede dar un valor por defecto para evitar mostrar
"indefinido".
Tres métodos
alert("This is an Alert method");
confirm("Are you OK?");
prompt("What is your name?");
prompt("How old are you?","20");
</script>
Variables
<head>
Declaración de Variable
var id;
id = prompt(“¿Cuál es tu código?”);
alert(id);
name = prompt(“¿Cuál es tu nombre?”,”Sin nombre”);
alert(name);
</script>
</head>
• Debemos usar "var", ya que es más fácil hacer

un seguimiento de las variables.
ejemplo
<html>
<head>
<title>Data Types and Variables</title>
</head>
<body>
var x, y;
x= 1024;
y=x; x = “cadena";
document.write("<p>y = " + y + "</p>");
document.write("<p>x = " + x + "</p>");
</script>
</body>
</html>
Operadores de comparación
• Usado para comparar dos valores numéricos
Operator Name Description Example

== Equal Realiza la conversión antes de verificar la igualdad “5” == 5
=== Strictly equal No realiza la conversion antes de la evaluación “5” === 5
!= Not equal “true” cuando ambos operandos no son iguales 4 != 2
!== Strictly not equal No realiza la conversion antes de la evaluación 5 !== “5”
> Greater than “true” if left operand is greater than right operand 2>5
< Less than “true” if left operand is less than right operand 3<5
>= Greater than or “true” if left operand is greater than or equal to the 5 >= 2
equal right operand
<= Less than or “true” if left operand is less than or equal to the 5 <= 2
equal right operand
Operadores de comparación
var currentWord=“75”;
var currentValue=75;
var outcome1=(currentWord == currentValue);
var outcome2=(currentWord === currentValue);
alert(“outcome1: “ + outcome1 + “ : outcome2: “ + outcome2);
</script>
Función typeof
La siguientes instrucciones son true:
Array
• Una array contiene un conjunto de datos
representados por un único nombre de variable.
• Son representados por el objeto Array.
• Ejemplo:
myArray = new Array (5)
Tenemos myArray [0,1,2,3,4].
Array Ejemplo
Car = new Array(3);
Car[0] = “Ford”;
Car[1] = “Toyota”;
Car[2] = “Honda”;
document.write(Car[0] + “<br>”);
</script>
Array Ejemplo
Partición de strings: split y join
“if/if…else”
var chr;
chr = prompt(“Please enter a character : “,” ”);
if (chr >= ‘A’){
if (chr <= ‘Z’)
alert(“Uppercase”);
else if (chr >= ‘a’){
alert(“Lowercase”);
}
}
</script>
“for/in”
var book;
var booklist = new Array(“Chinese”, “English”, “Jap”);
for (var counter in booklist) {
book += booklist[counter] + “ “;
}
alert(book);
</script>
Funciones: definición
• La definición establece qué es lo que hace la función
function nombre_de_funcion( parámetros, argumentos ) {
bloque de comandos
}
Ejemplo
function despNombre( nombre ) {
document.write( "<hr>tu nombre es: <b>" );
document.write( nombre )
document.write( "</b><hr>" );
}
Retorno de resultados
• En los entornos de programación, a las funciones que
no retornan resultados se les llama "procedimientos"
• Si retornan resultados son "funciones"
function cubo( numero ) {

return numero * numero * numero;
}
Funciones: definición en el encabezado
• En general el código de Java puede ir en cualquier
parte
• Si va a generar texto para la página, el código debe
estar donde debe generar el texto
• Se recomienda poner la definición de las funciones en
el encabezado
Funciones: invocación (ponerlas a trabajar)
• Para hacer que las funciones hagan su trabajo, se les
invoca desde el programa
• despNombre( "Luis" );
• Si devuelven resultado, pueden formar parte de una

expresión
• a=cubo( 4 )+1;
Funciones: un ejemplo
<html><head><title>Ejemplo</title>

</script>
</head>
Funciones: un ejemplo (cont)
<body>
<!– ocultar
var res=prueba( "10 + 10" );
document.write( res );
//deja de ocultar -->
</script>
</body>
</html>
Eventos
• Señales generadas cuando ocurren acciones específicas
• Brindan la base para la interactividad
• Se disparan en el visualizador por acciones del usuario
(principalmente)
• Se pueden construir acciones que reacciones a los
eventos
Eventos
Eventos
• Ejemplos de eventos:
• blur: Cuando el usuario hace click fuera de un campo en un
formulario
• click: Cuando el usuario hace click en una liga o en un elemento de
un formulario
• change: Cuando el usuario cambia el valor de un campo
• focus: Cuando se activa el foco en una entrada
• load: Cuando se carga una página del navegador
Eventos
• Más ejemplos
• mouseover: Cuando el cursor (ratón) pasa por encima de
una liga
• select: Cuando el usuario selecciona un campo de un
elemento en un formulario
• submit: Cuando el usuario envía un formulario
• unload: Cuando un usuario abandona una página (para
cerrar la ventana o cambiar de página)
Eventos
Eventos: manejadores
• Los manejadores de eventos son las instrucciones
que se ejecutan cuando ocurre un evento
• <MARCA ATRIBUTOS manejador="Programa JavaScript">
• Poniendo funciones:
• <input type="text" onChange="checaCampo(this)">
• Poniendo varias instrucciones
• <input type="text" onChange="
if( parseInt(this.value) <= 5 ) {
alert( 'Ponga un número mayor que 5.' );
}
">
Eventos: palabra clave "this"
• Hace referencia al objeto que produjo el evento
Eventos: onLoad y onUnload
• <html>
<head><title>Ejemplo</title></head>
<body
onLoad="alert('Bienvenido!');"
onUnload="alert('Adios!');">
<h1>Página efusiva</h1>
</body>
</html>
Eventos: Guacamole
• onUnload="
window.open(
'maliciosa.html' );"
Eventos: onMouseOver
• <a href="#"
onMouseOver="document.the_image.src='stuff/js_on.gif';
"
onMouseOut="document.the_image.src='stuff/js_off.gif';"
>
<img src="stuff/js_des.gif" name="the_image"
border="0"></a>
Posición de objetos y capas
• Podemos definir objetos y asignarles atributos de
posición y capas (entre otras cosas)
• Se utiliza la marca <div>
• <div id="mono">
<img src="monito.gif">
</div>
Ejemplo • <html><head><title>Capas y Posicion</title>
<style type="text/css">
#aaron {position: absolute;
left: 8px; top: 300px;
width: 79px; height: 73px;
z-index: 3;}
#desk {position: absolute;
left:8px; top: 324px;
width: 10px; height: 73px;
z-index: -1;}
</style>
</head>
Ejemplo (cont)
• <body bgcolor="#aaaaaa" text="#4444ff">
<h1>Capas y posicion</h1>
<div id="aaron">
<img src="aaron.gif">
</div>
<div id="desk">
<img src="desk.gif">
</div>
</body>
</html>

Javascript

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Javascript

Загружено:

Авторское право:

Доступные форматы

Javascript

• Hacer interactiva una página web

// fin de ocultamiento -->

<SCRIPT type="text/javascript" src="fuente.js"></SCRIPT>

• Atributo SRC: fichero código fuente

• Una etiqueta <script> se puede colocar dentro

• SRC – especifica la ubicación de un script externo

• Es uno de los métodos más fáciles de usar entre,

• Este cuadro se utiliza para dar al usuario la opción de

• Esta es la única que permite al usuario escribir en su

• Debemos usar "var", ya que es más fácil hacer

Operator Name Description Example

function cubo( numero ) {

• Si devuelven resultado, pueden formar parte de una

Вам также может понравиться