UNIVERSIDAD TÉCNICA
DE MANABÍ
Ingeniería y desarrollo
de aplicaciones
web
Unidad 2/Clase
Computación en el cliente
Elementos de JavaScript
Ing. Tatiana Cobeña M. MEng.
JavaScript y los navegadores
JavaScript y los navegadores
Cada navegador acepta una versión de JavaScript ligeramente diferente, que es un dialecto de
ECMAScript o no acepta ningún lenguaje de script en función del motor que utiliza.
¿ SOLUCIÓN ?
¡ No existe … !
Soluciones parciales
Debemos probar siempre un número razonable de navegadores.
Podemos incluir código para detectar el navegador y su versión.
Utilizar APIs implementadas de forma independiente de cada navegador como jQuery
Generalidades de JavaScript
Lenguaje Orientado a Objetos sin clases ni herencia
Lenguaje Orientado a Objetos basado en prototipos
Tiene un objeto denominado “Object” a partir del cual por clonación se obtienen los demás objetos.
Sólo se parece a Java en aspectos sintácticos, pero no en su semántica
Interpretado
Lenguaje dinámico. Los tipos se infieren en tiempo de ejecución.
Tiene objetos predefinidos
Window
Location
History
Document
Forms
Anchors
String
Math
Date
Navigator
Se pueden definir objetos por el programador
El lenguaje también soporta características de los lenguajes funcionales
Hay gran cantidad de API’s (Application Programming Interface) desarrolladas por terceros.
Elementos de JavaScript
Elementos básicos de JavaScript
– Objetos
– Expresiones
– Estructuras de control
– Funciones
– Arrays
– Eventos
• Elementos de una página HTML pueden causar un evento que ejecutará una acción
– Esa acción se ejecutará a través de una serie de sentencias JavaScript
– API’s (jQuery, API de HTML 5, …)
La etiqueta <script> </script>
La etiqueta <script> </script>
Sintaxis <script type="text/javascript">
//instrucciones JavaScript
</script>
¿Dónde se colocan los scripts?
en general, dentro de <head> ... </head>
si genera una salida, dentro de <body> ... </body>
si hace referencia a un elemento HTML, después de dicho elemento en algunos casos, en los
atributos de algunas etiquetas (eventos)
en un archivo externo
<script type="text/javascript" src="fuente.js"></script>
Objeto document
Representa el documento HTML en JavaScript
Este es uno de los objetos predefinidos
Contiene propiedades y métodos
Propiedades: anchors, lastModified, location,…
Métodos: clear(), close(), write(),…
document.write() es una llamada al método write() del objeto document que representa el
contenido HTML.
Se le pasa como argumento la cadena de texto a escribir en HTML en este caso
"<h1>¡Hola a todos!</h1>"
Para navegadores que no aceptan JavaScript resulta aconsejable escribir los scripts entre
comentarios
<script language=“JavaScript” type=“text/javascript”>
<!--
...instrucciones JavaScript entre comentarios HTML...
-->
</script>
También puede usarse las etiquetas <noscript> y </noscript>
<noscript>
Su página no acepta JavaScript. Vea
<a href=“no_JavaScript.html”>esta página</a>
</noscript>
Objetos predefinidos
JavaScript es sensible a mayúsculas/minúsculas (“case sensitive”). Es decir no es lo mismo una letra
minúscula que una mayúscula.
Objetos predefinidos en JavaScript
String: cada vez que se asigna una cadena de caracteres a una variable, se crea un objeto String
Math: se usa para efectuar cálculos matemáticos – Date: para el manejo de fechas y horas
Array: almacena un conjunto de valores en un vector o matriz
Boolean: almacena “true” o “false”.
navigator: informa sobre el navegador que se está usando.
document: es el documento HTML y tiene asociados elementos del documento (link, ancla,
formulario, …).
También puede haber objetos definidos por el usuario
Métodos comunes
Algunos métodos comunes de los objetos predefinidos
String: Array:
length(): longitud del string sort(): ordena los elementos
replace(): reemplaza un texto por otro concat(): concatena dos arrays
ToUpperCase ():pasa a mayúsculas
Date:
getDate(): Devuelve la fecha Math
round(): redondeo
getFullYear(): Devuelve el año.
max(), min(): valores máximo y
getMonth(): Devuelve el mes entre 0 y 11. mínimo
getDay(): Devuelve el día de la semana. sin(): función seno()
getHours(): Devuelve la hora PI: constante pi=3,141592653589793
getMinutes(): Devuelve el minuto
getSeconds(): Devuelve los segundos
Variables
Declaración y nombres de variables
Los nombres son sensibles a mayúsculas/minúsculas (case sensitive).
Las variables son globales a todo el programa, excepto las que se declaran con “var” dentro de
funciones.
Deben comenzar por una letra o guión bajo. No deben coincidir con las palabras reservadas de
JavaScript.
Se podrían definir como variables:
Nombre
_Opción15
mes3
Declaración:
Asignándole un valor: x = 42
Con la palabra reservada “var”: var x
O bien ambos: var x = 42
Comentarios
Comentarios en JavaScript: pueden ser de dos tipos
Una línea:
// comentario de una línea
Varias líneas:
/*
comentario de varias líneas
*/
Es opcional poner punto y coma (“;”) al finalizar las sentencias. Se puede poner o no. Aunque es
aconsejable.
Ejemplo de String
Se declara la variable nombre que es global
–Se utiliza para escribirla en el documento HTML
<html>
<body>
<script type="text/javascript">
var nombre = "Juan Manuel Cueva Lovelle“
document.write(nombre)
document.write("<h1>"+nombre+"</h1>")
</script>
<p>Este ejemplo define un objeto String y lo muestra</p>
<ol>
<li>Directamente</li>
<li>Como nivel h1</li>
</ol>
</body>
</html>
Objeto Math
<script type="text/javascript">
var pi = Math.PI
var e = Math.E
document.write("<h1>Pi="+pi+"</h1>")
document.write("<h2>Seno(Pi/4)="+Math.sin(pi/4.0)+"</h2>")
document.write("<h2>Coseno(Pi/4)="+Math.cos(pi/4.0)+"</h2>")
document.write("<h2>Tangente(Pi/4)="+Math.tan(pi/4.0)+"</h2>")
document.write("<h2>ArcoSeno(1)="+Math.asin(1)+"</h2>")
document.write("<h2>ArcoCoseno(1)="+Math.acos(1)+"</h2>")
document.write("<h2>ArcoTangente(1)="+Math.atan(1)+"</h2>")
document.write("<h1>e="+e+"</h1>")
document.write("<h2>log(e)="+Math.log(e)+"</h2>")
document.write("<h2>exp(1)="+Math.exp(1)+"</h2>")
document.write("<h2>pow(e,1)="+Math.pow(e,1)+"</h2>")
document.write("<h1>0<= valor aleatorio <1
="+Math.random()+"</h1>")
</script>
http://di002.edv.uniovi.es/~cueva/JavaScript/18Math.html
Bucles
Bucles o sentencias repetitivas. Son similares al lenguaje C. Excepto for-in que es similar a
Java o C#.
While Do … while
while (condición) { do {
//código //código
} }
while (condición)
For For in
for (inicialización; condición; incremento) { for (variable in object) {
//código //código
} }
Bucle while
Manejo de números enteros y bucle while
• También se usa el operador “+” para concatenar y el operador “++” para incrementar en una
unidad.
<script type="text/javascript">
//No son necesarios obligatoriamente los puntos y comas
var i = 0
while (i <= 5)
{
document.write("<p> El valor de i=" + i +"</p>")
i++
}
</script>
if y switch
Sentencias alternativa y multi-alternativa. Son similares al lenguaje C
if (condición){ switch (expresion){
//código para condición = true case etiqueta1:
} //código si la expresión = etiqueta1
else{ break
//código para condición = false case etiqueta2:
} //código si la expresión = etiqueta2
break
default:
//código si la expresión no es ninguna de las
//anteriores
}
Operadores
Son similares al lenguaje C. Excepto los operadores de cierre y de acceso a propiedades de los
objetos
La precedencia de los operadores es la misma que la del lenguaje C.
Clasificación y enumeración de los operadores
Aritméticos: +, -, *, /, %, ++, --
Asignación: =, +=, -=, *=, /=, %=
Comparación: ==, !=, >, <, >=, <=
Lógicos: &&, ||, !
Cierre: ()
Acceso a propiedades: . , [ ]
Constructor de objetos: new
Objeto navigator
Obtener características del navegador
<script type="text/javascript">
var browser = navigator.appName
var versionCompleta = navigator.appVersion
var version=parseFloat(versionCompleta)
document.write("<p> Nombre del navegador: "+ browser + "</p>" );
document.write(“<p> Versión del navegador: "+ version + " o superior</p>");
document.write("Detalle del navegador: "+ versionCompleta + "</p>");
</script>
Propiedades
Objetos y propiedades
Podemos acceder a las propiedades de un objeto:
nombreObjeto.nombrePropiedad
Las propiedades se definen asignándoles un valor
Ejemplo:
Dado el objeto miCoche, definimos las propiedades marca, modelo y año como sigue:
Se puede usar el operador punto (.) o el operador corchete ([ ]).
miCoche.marca = “Ford”; // miCoche[“marca”] = “Ford”
miCoche.modelo = “Focus”; // miCoche[“modelo”] = “Focus”
miCoche.año = 2000; // miCoche[“año”] = 2000
Funciones
Sintaxis de la construcción de una función
function mifunción(parámetro-1,parámetro-2,…)
{
//Código
}
Se puede usar la palabra reservada “return” para devolver el control a quién llamó la
función. Pero no hay que indicar nada en la declaración de la función.
Una función puede tener varios “return”.
Las funciones pueden ser recursivas
Una función puede pasarse como parámetro de otra función
Una función puede devolver como resultado otra función
prompt( )
Solicita una entrada por teclado
Puede tener un valor por defecto. En el ejemplo del factorial ese valor es “0”
También tiene un mensaje para explicar lo que se solicita por teclado
alert ( )
Envía un mensaje de alerta al navegador.
El mensaje es un String.
Se usa el operador “+” para concatenar y para transformar todos los elementos a un String.
Nuevos objetos
El programador puede crear nuevos objetos
Es posible definir nuevos objetos de varias formas diferentes:
Mediante inicialización de objetos. Dando el valor inicial del mismo por medio de la
enumeración de sus propiedades y métodos.
Mediante una función constructora y el operador “new”
Mediante la creación de una instancia del objeto genérico Object usando el operador
new. Posteriormente se definen las propiedades y métodos del nuevo objeto.
Inicialización de objetos
Consiste en asignarle a una variable un literal de objeto:
nomObj = { prop1: val1, prop2: val2, ..., propN: valN }
donde
nomObj es el nombre del nuevo objeto
prop1,...,propN son identificadores que representan las propiedades del objeto
val1,...,valN son los valores asignados a cada propiedad del objeto
Ejemplo:
personaObj={nombre:"Juan Manuel", apellidos:"Cueva Lovelle", edad:49, colorOjos="verdes"}
Si no vamos a volver a necesitar el objeto, no es necesario asignarle un nombre. Puede haber objetos anónimos.
Pero JavaScript debe interpretar el objeto cada vez que aparezca una referencia al mismo en el código (lento...)
<script type="text/javascript">
personaObj={nombre:"Juan Manuel", apellidos:"Cueva Lovelle", edad:49, colorOjos:"verdes"}
document.write(personaObj.nombre + " " +personaObj.apellidos+ " tiene " + personaObj.edad + " años"
+ " y sigue con los ojos "+ personaObj.colorOjos)
</script>
Constructoras
Creación de objetos con funciones constructoras
La creación de un objeto mediante una función constructora consiste en dos pasos:
1.definimos el perfil del objeto mediante una función constructora. El objeto “this” es el propio objeto.
2.creamos un objeto usando el operador “new”
function persona ( ID, nombre, edad, sexo ) {
this.ID = ID
this.nombre = nombre
this.edad = edad
this.sexo = sexo
}
Juan = new persona(“10123456A”,“Juan Manuel”,31,“H”);
Rosa = new persona(“09333444Q”,“Rosa Cueva”,28,“M”);
Uso de Object
<script type="text/javascript">
//función constructora y this
function persona(nombre,apellidos,edad,colorOjos)
{
this.nombre=nombre
this.apellidos=apellidos
this.edad=edad
this.colorOjos=colorOjos
}
//Creación de objetos con new
yo=new persona("Juan Manuel","Cueva Lovelle",49,"verdes")
document.write( yo.nombre + " tiene " + yo.edad + " años")
</script>
Uso de Object
<script type="text/javascript">
personaObj = new Object()
personaObj.nombre="Juan Manuel"
personaObj.apellidos="Cueva Lovelle"
personaObj.edad=49
personaObj.colorOjos="verdes"
document.write(personaObj.nombre + " " +personaObj.apellidos+
" tiene " + personaObj.edad + " años"
+ " y sigue con los ojos "+ personaObj.colorOjos)
</script>
UNIVERSIDAD TÉCNICA
DE MANABÍ
Gracias
Ing. Tatiana Cobeña M. MEng.
