javascript - hosting miarrobajorbartu.webcindario.com/javascript.pdf · ie 8 supports jscript 6...
TRANSCRIPT
JAVASCRIPT1
INTRODUCCIÓN
Creado por Netscape para añadir interactividad a los documentos HTML. Apareció por primera vez en el producto de Netscape llamado Netscape Navigator 2.0.
Es un lenguaje interpretado (por el browser), embebido dentro del documento HTML.
La sintaxis es similar a la del C++ y Java, aunque bastante más relajada:
el “;” es recomendable, pero no obligatorio.
En junio de 1997 fue adoptado como un estándar ECMA, con el nombre de ECMAScript ( ECMA-262 ). Poco después también lo fue como un estándar ISO (16262 ).
JScript es la implementación de ECMAScript de Microsoft, muy similar al JavaScript de Netscape, pero con ciertas diferencias en el modelo de objetos del navegador que hacen a ambas versiones con frecuencia incompatibles. 2
VERSIONES
IE 9 soporta ECMAScript 5
IE 8 supports JScript 6 (which is equivalent to ECMAScript 3, JavaScript1.5 - more bug fixes over JScript 5)
IE 6-7 support JScript 5 (which is equivalent to ECMAScript 3, JavaScript 1.5)
The next version of Firefox will support JavaScript 1.9 (1.8 + To bedetermined)
Firefox 3.0 supports JavaScript 1.8 (1.7 + Generator Expressions + Expression Closures + misc.)
Firefox 2.0 supports JavaScript 1.7 (1.6 + Generator + Iterators + let + misc.)
Firefox 1.5 supports JavaScript 1.6 (1.5 + Array Extras + E4X + misc.)
Firefox 1.0 supports JavaScript 1.5 (ECMAScript 3 equivalent)
Opera supports a language that is equivalent to ECMAScript 3 + Gettersand Setters + misc.
Safari supports a language that is equivalent to ECMAScript 3 + Gettersand Setters + misc.
http://en.wikipedia.org/wiki/JavaScript#Versions 3
INSERTAR CÓDIGO JAVASCRIPT (I)
Dentro de la página utilizando la directiva <script>
<script language=“javascript”>(o <script type=“text/javascript”>)
<!--
alert("Hola mundo");
-->
</script>
Los símbolos de comentario se usan para ocultar el código javascript en
los navegadores que no lo soporten
En un fichero externo
<script type=“text/javascript” src=“mijavascript.js”></script>
4
INSERTAR CÓDIGO JAVASCRIPT (II)
Como valor de un atributo de tipo evento:
<body OnUnLoad="alert('Hasta Luego!')">
Como destino de un hiperenlace:
<a href="javascript:window.open(„hist.html', 'historia',
'width=600, height=500')">Un poco de historia </a>
5
SINTAXIS
No se tienen en cuenta los espacios en blanco y
las nuevas líneas.
Se distingue entre mayúsculas y minúsculas.
No se define el tipo de las variables.
No es obligatorio terminar cada sentencia con el
carácter ; pero si es recomendable.
Se pueden incluir comentarios
Una sola línea //comentario
Varias líneas /* comentarios */
6
VARIABLES (I)
Para declarar una variable se utiliza la palabra var(la declaración no es obligatoria, aunque si aconsejable).
var variable1 = 5;
var varibale2 = “hola”;
El nombre de la variable empieza por una letra, por el símbolo „_‟ o por el símbolo „$‟, y esta formado por caracteres alfanuméricos (es sensible al contexto).
var a, A; // Son variables diferentes.
JavaScript es un lenguaje de programación “no tipado”, lo que significa que la misma variable puede guardar diferentes tipos de datos a lo largo de la ejecución de la aplicación..
var i = 3; i = 5.5; i = “Juan”; // Sería valido. 7
VARIABLES (II)
No es obligatorio iniciar la variable al declararla.
var variable2;
El ámbito de la variable (scope) es la zona del
programa en la que se define la variable (global y
local).
En caso de colisión entre las variables globales y
locales, dentro de una función prevalecen las
variables locales.
8
VARIABLES (III)
Si una variable se declara fuera de cualquier función, automáticamente se transforma en variable global independientemente de si se define utilizando la palabra reservada var o no. Sin embargo, en el interior de una función, las variables declaradas mediante var se consideran locales y el resto se transforman también automáticamente en variables globales (al no estar definidas dentro de la función con la palabra reservada var, en realidad se esta modificando el valor de la variable global).
var mensaje = "gana la de fuera";
function muestraMensaje() {
var mensaje = "gana la de dentro";
alert(mensaje);
}
alert(mensaje);
muestraMensaje();
alert(mensaje);9
Con var:
gana la de fuera
gana la de dentro
gana la de fuera
Sin var:
gana la de fuera
gana la de dentro
gana la de dentro
TIPOS DE DATOS PRIMITIVOS (I)
undefined: variable no definidas o definidas pero no
inicializadas.
var var1; typeof var1; //devuelve undefined
null: tipo similar a undefined (null=undefined), se suele
utilizar para representar objetos que en ese momento no
existen.
var nombre= null;
boolean: true y false (convertibles a los valores 1 y 0).
Al convertir una variable numérica a boolean, 0 es false y
cualquier número distinto de 0 es true.
var var1 = true;
10
TIPOS DE DATOS PRIMITIVOS (II)
numérico: enteros y reales.
var num1=10;
var real1= 3.4;
Valores especiales:
infinity y –infinity: números demasiado grandes
alert( 3/0) //muestra infinity
NaN: Not a Number
var hola = “hola”; isNaN(hola); //true
parseInt(“hola”) //devuelve NaN
cadena de texto (string): delimitadas por comillas dobles o
simples.
var hola = “hola”;
11
FUNCIONES
isNaN(): devuelve true si el parámetro que se le pasa no es
un número.
toString(): permite convertir variables de cualquier tipo a
variables de cadena de texto.
var entero = 44444;
entero.toString();
parseInt() y parseFloat(): convertir los valores de las
variables en valores numéricos, entero o decimal.
parseInt(“hola”) //devuelve NaN
parseInt(“22”); //devuelve 22
12
TIPOS DE REFERENCIA (I)
Objetos: se crean mediante la palabra reservada new y el
nombre de la clase que se vá a instanciar.
var obj1 = new Object();
JavaScript define una clase para cada uno de los tipos
primitivos.
Boolean, Number y String
Almacenan los mismos valores de los tipos de datos
primitivos y añaden propiedades y métodos para
manipular sus valores.
La principal diferencia entre los tipos de datos es que los
datos primitivos se manipulan por valor y los tipos de
referencia se manipulan, como su propio nombre indica,
por referencia.13
TIPOS DE REFERENCIA (II)
Boolean var var1 = new Boolean(false);
no se utilizan objeto de tipo Boolean porque su comportamiento no es siempre idéntico al de los datos primitivos boolean ya que en una operación lógica, si el objeto existe se convierte a true, independientemente de su valor:
true && var1 //el resultado es true.
Number var n1 = new Number(16);
var n2 = new Number(3.141592);
valueOf(): para obtener el valor.
var n3 = n1.valueOf(); // n3 = 16
toFixed(): trunca el número de decimales de un número al valor indicado como parámetro.
var n4 = n2.toFixed(2); // n4 = 3.14
String var cadena = new String(“cadena”);14
FUNCIONES Y PROPIEDADES: CADENAS DE
TEXTO (I)
length, calcula la longitud de una cadena de texto (el número de caracteres que la forman). La propiedad length sólo está disponible en la clase String, por lo que en principio no debería poder utilizarse en un dato primitivo de tipo cadena de texto. Sin embargo, JavaScriptconvierte el tipo de dato primitivo al tipo de referencia String, obtiene el valor de la propiedad length y devuelve el resultado.
+, se emplea para concatenar varias cadenas de texto. Además del operador +, también se puede utilizar la función concat().
toUpperCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en mayúsculas.
toLowerCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en minúsculas.
charAt(posicion), obtiene el carácter que se encuentra en la posición indicada.
15
FUNCIONES Y PROPIEDADES: CADENAS DE
TEXTO (II)
indexOf(letra), calcula la primera posición en la que se encuentra el carácter indicado dentro de la cadena de texto. Si la cadena no contiene el carácter, la función devuelve el valor -1.
lastIndexOf(letra), calcula la última posición en la que se encuentra el carácter indicado dentro de la cadena de texto. Si la cadena no contiene el carácter, la función devuelve el valor -1.
substring(inicio, final), extrae una porción de una cadena de texto. El segundo parámetro es opcional. Si solo se indica el parámetro inicio, la función devuelve la parte de la cadena original correspondiente desde esa posición hasta el final.
split(separador), convierte una cadena de texto en un array de cadenas de texto. La función parte una cadena de texto dividiendo sus trozos a partir del carácter delimitador indicado.
16
OPERADOR
typeof: se emplea para determinar el tipo de dato
que almacena una variable (undefined, boolean, number,
string y object para los valores de referencia y para los valores de
tipo null).var num=7; typeof num; //number
instanceof: permite determinar la case concreta de un
objeto.
var var1= new String(“h”);
typeof var1; //devuelve object
var1 instanceof String; //devuelve true
17
OPERADORES
Aritméticos: ++, --, +, -, *, /, %(módulo, resto de la
división entera)
Lógicos: &&, ||, !
Relacionales: ==, !=, <, <=, >, >=, === (identidad),
!==var variable1 = 10;
var variable2 = "10";
variable1 == variable2; // devuelve true
variable1 === variable2; // devuelve false
Bit a bit (binarios): &, |, ^, ~, <<, >>
Asignación: =, +=, -=, *=, /=, %=, &=, |=
18
OBJETOS NATIVOS: ARRAY
Array son dinámicos (su tamaño puede cambiar en tiempo de ejecución) y heterogéneos (el tipo de sus elementos puede ser diferente).
Constructor: Array().
var vec1 = new Array(); vec1 = [ 4, 7, "hola", true];
var vec2 = new Array( 2, "Pepe", 13.56); vec2[3]=3;
Son dispersos: reserva espacio sólo para las posiciones ocupadas.
var v = new Array(); v[100]="Hola“; v[100000000]=2.8;
Propiedades:
length (índice del último elemento del array): ultimo = v.length;
19
FUNCIONES ARRAYS
concat(), se emplea para concatenar los elementos de varios arrays.
join(separador), es la función contraria a split(). Une todos los elementos de un array para formar una cadena de texto. Para unir los elementos se utiliza el carácter separador.
pop(), elimina el último elemento del array y lo devuelve. El array original se modifica y su longitud disminuye una unidad.
push(), añade un elemento al final del array. El array original se modifica y aumenta su longitud una unidad. También es posible añadir más de un elemento a la vez.
shift(), elimina el primer elemento del array y lo devuelve. El array original se modifica y su longitud disminuye una unidad.
unshift(), añade un elemento al principio del array. El array original se modifica y aumenta su longitud en una unidad. También es posible añadir más de un elemento a la vez.
reverse(), modifica un array colocando sus elementos en el orden inverso a su posición original.
20
OBJETOS NATIVOS: DATE
Date: permite obtener una representación de la fecha. var fecha = new Date(); //fecha actual
Constructores: Date(); //fecha actual
Date(milisegundos);
Date(año, mes, día);
Date(año, mes, día, hora, minuto, segundo);
Métodos: getTime(); //fecha en milisegundos.
getMonth(); //número del mes(0 para Enero y 11 para Diciembre).
getFullYear(); //año de la fecha como un número de 4 cifras.
getYear(); //año de la fecha como un número de 2 cifras.
getDate(); //número del día del mes.
getDay() ; //número del día de la semana (0 para Domingo, 1 para Lunes, …)
getHours(), getMinutes(), getSeconds(), getMilliseconds()
Cada método get() mostrado anteriormente tiene su correspondiente método set() que permite establecer el valor de cada una de las propiedades.
21
OBJETOS NATIVOS: MATH
Las funciones matemáticas están disponibles sólo
a partir del objeto Math.
Propiedades: E , LN10 , LN2 , LOG10E , LOG2E , PI , SQRT1_2 (1/√2) ,
SQRT2 (√2).
opera = Math.E * Math.PI / Math.SQRT2;
Métodos:
abs(num), ceil(num), exp(num), floor(num), log(num),
max(num1,num2), min(num1,num2), pow(basem,
expon), random(), round(num), sqrt(num), acos(num),
asin(num), atan(num), atan2(x,y), cos(num), sin(num),
tan(num).
opera = Math.cos(Math.acos(0)); 22
OBJETOS NATIVOS: FUNCTION
La clase Function raramente se utiliza de forma
explícita para crear funciones. Utilizada de esta
forma, se deben indicar todos los parámetros de
la función y sus instrucciones como parámetros al
instanciar la clase:
var miFuncion = new Function("a", "b", "return a+b;");
document.write(miFuncion(2,3));
23
ESTRUCTURAS DE CONTROL DE FLUJO
if (cond) { .. } else { .. }.
switch (valor){ case: .. }
while (cond) { .. }
do { .. } while (cond);
for ( valor inicial; cond; incr ) { .. }
for-in, para enumeraciones.
var test = new Object();
test.camp1 ="Campo uno";
test.camp2 ="Campo dos";
test.camp3 ="Campo tres";
var a;
for ( a in test )
document.write( a + " = " + test[a] + "<br>");
24
FUNCIONES (I)
Las funciones de JavaScript no suelen definirse mediante
la clase Function, sino que se crean mediante la palabra
reservada function:
function suma(a, b) {
return a+b;
}
El paso de parámetros es siempre por valor.
Devuelve valores a través de la sentencia return.
Las variables globales son accesibles desde otros frames.
25
FUNCIONES (II)
Si a una función se le pasan más parámetros que los que ha
definido, los parámetros sobrantes se ignoran. Si se pasan
menos parámetros que los que ha definido la función, al
resto de parámetros hasta completar el número correcto se
les asigna el valor undefined.
JavaScript proporciona una variable especial que contiene
todos los parámetros con los que se ha invocado a la
función. Se trata de un array que se llama “arguments” y
solamente está definido dentro de cualquier función.
El array “arguments” permite crear funciones con un
número variable de argumentos.
26
FUNCIONES (III)
Las funciones también se pueden crear mediante lo que se
conoce como "function literals" y que consiste en definir la
función con una expresión en la que el nombre de la función
es opcional.
Debido a esta última característica, también se conocen
como funciones anónimas. A continuación se muestra una
misma función definida mediante el método tradicional y
mediante una función anónima:
function suma(a, b) {
return a+b;
}
var miFuncion = function(a, b) { return a+b; }
document.write(miFuncion(2,3));
27