Elementos de JavaScript

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”>


</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
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.
//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
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...)
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
//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
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.

Elementos de JavaScript

Cargado por

Copyright:

Formatos disponibles

Elementos de JavaScript

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Elementos de JavaScript

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD TÉCNICA

Ing. Tatiana Cobeña M. MEng.

 ¿Dónde se colocan los scripts?

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

 Este es uno de los objetos predefinidos

 Contiene propiedades y métodos

 Se le pasa como argumento la cadena de texto a escribir en HTML en este caso

<script language=“JavaScript” type=“text/javascript”>

 También puede usarse las etiquetas <noscript> y </noscript>

 Objetos predefinidos en JavaScript

 También puede haber objetos definidos por el usuario

for (inicialización; condición; incremento) { for (variable in object) {

if (condición){ switch (expresion){

miCoche.marca = “Ford”; // miCoche[“marca”] = “Ford”

 Solicita una entrada por teclado

 Envía un mensaje de alerta al navegador.

prop1,...,propN son identificadores que representan las propiedades del objeto

val1,...,valN son los valores asignados a cada propiedad del objeto

personaObj={nombre:"Juan Manuel", apellidos:"Cueva Lovelle", edad:49, colorOjos="verdes"}

function persona ( ID, nombre, edad, sexo ) {

Ing. Tatiana Cobeña M. MEng.

También podría gustarte