Fundamentos de JavaScript

INTRODUCCIN

Lenguaje de alto nivel, basado en objetos (no orientado a objetos), para la generacin de documentos web interactivos Respuesta a acciones de usuarios sin acceder a los servidores Lenguaje interpretado Manejo de eventos

SINTAXIS BSICA

Etiqueta <script> <script language= JavaScript> </script> Insercin de cdigo dentro de las etiquetas HTML <input name=nombre type=text onChange=validarNombre(this)> Ejemplo: 003.html

Elementos sintcticos

Identificadores Palabras reservadas Literales Variables Constantes Expresiones Comentarios Operadores Funciones Instrucciones

Identificadores

Nombres de variables, funciones, mtodos y objetos Combinacin de caracteres alfanumricos, y _, comenzando por una alfabtico o por _ Se excluyen las palabras reservadas

Algunas palabras reservadas

abstract boolean break byte case catch class const

continue

default

do

double

else

extends

false

final

finally

float

for

function

goto

if

implements

import

in

int

interface

labeled

long

native

new

null

package

private

protected

public

return

sort

static

super

switch

this

throw

throws

transient

true

try

typeof

true

try

typeof

var

void

while

with

Literales

Constantes representados por su valor Literales enteros (-12, 0, 100), (071, 0x7c6) Literales de punto flotante (12.4, -1e13, 3e-12) Literales Booleanos (true, false) Literales de Cadena (Hola mundo, Hola Mundo, Hola mundo, Hola mundo) Caracteres especiales (\b, \t, \n, \\, )

Variables

Nombre de una posicin de memoria Nombre de variables: reglas de nombres de identificadores Declaraciones: var n; var i, j, k; var saludo=hola,i =0; Lenguaje debilmente tipado

Tipos de las variables

number (-3, 3.14159) boolean (true, false) string (Hola, ) function (write) object (window, document) Variables globales Variables locales

mbito

Constantes

No hay constantes en el sentido en que las hay en otros lenguajes (Java, C++) Es responsabilidad del programador no modificarlas Generalmente son variables nombradas con maysculas

Expresiones

Sentencias que se evalan a un valor simple 4 x hola z + 5*y

Comentarios

Comentarios de lnea // este es un comentario de linea x = 3 +y; // este es otro Comentarios de bloque /* este es un comentario de bloque */

Operadores

Smbolos que representan el modo en que unas expresiones se combinan para producir otras

Funciones

Script que puede ser invocado por su nombre Evita que partes del cdigo JavaScript sea ejecutado cuando se carga una pgina Html Facilita reutilizacin de cdigo Ver 012.html

OPERADORES

Operadores de asignacin

Asignan un valor a una variable variable = expresion;

Versin larga x = x +y x=x-y x = x*y x = x/y

Versin corta x += y y -= y x*=y x/=y

OPERADORES

Operadores aritmticos
+, -, *, /, % Operadores de incremento x++ ++x x---x

Ver 015.htm

OPERADORES

Operadores de comparacin == != > < <= >=

OPERADORES

Operadores de cadena + (operador sobrecargado) concatena cadenas Hola + Mundo Ver 017.htm

OPERADORES

Operador condicional:
<expresion0> ?<expresion1> : <expresion2>

Operadores lgicos: && (Y lgico) || (O lgico) ! (Negacin lgica)

OPERADORES

Operador typeof

Describe el tipo de datos del operando que se le pasa Retorna:

number string boolean function object

Ver 021.htm

Precedencia de los operadores

ESTRUCTURAS DE CONTROL

Sentencias condicionales (if) if (condicion) { [ sentencias ] } Ver 023.htm y 024.htm

ESTRUCTURAS DE CONTROL

Sentencias condicionales (if/then) if (condicion) { [ sentencias ] } else { [ sentencias ] } Ver 025.htm

ESTRUCTURAS DE CONTROL

Sentencias repetitivas (for) for ([expr_inicial];[condicion];[avance]){ [ sentencias ] } Ver 027.htm 028.htm

ESTRUCTURAS DE CONTROL

Sentencias repetitivas (for in) for (propiedad IN objeto){ [ sentencias ] } Ver 029.htm

ESTRUCTURAS DE CONTROL

Sentencias repetitivas (while) while (condicion){ [ sentencias ] } Ver 030.htm, 031.htm

ESTRUCTURAS DE CONTROL

Sentencias repetitivas (dowhile) do { [ sentencias ] } while (condicion) Ver 032.htm

ESTRUCTURAS DE CONTROL

Sentencias repetitivas (break/continue)

Sentencia break, para salir de un ciclo sin evaluar condicin de salida Sentencia continue, para saltar a la evaluacin

Ver 034.htm

ESTRUCTURAS DE CONTROL

Sentencias with with (objeto) { [ sentencias ] } Ver 035.htm

ESTRUCTURAS DE CONTROL

Sentencias switch switch (dato) { case valor1: [sentencias] case valor2: [sentencias] case valorn: [sentencias] default: [sentencias] } Ver 036.htm

FUNCIONES

Secciones separadas de cdigo a las que se les ha dado un nombre Por medio del nombre se llama a la funcin cuantas veces se quiera Pueden recibir datos, llamados argumentos y devolver valores, llamados resultados

FUNCIONES

Creacin de funciones function nombre([argumento_1],.., [argumento_n]) { [sentencias] } Ver 039.html, 040.htm, 041.htm

FUNCIONES

Funciones propias del lenguaje

escape(caracter) %xx unescape(cadena) carcter parseInt(cadena, base) parseFloat(cadena) isNaN(valor) eval( expresion )

Ver 044.htm, 045.htm,046.htm

Procesamiento de Eventos con JavaScript

Modelo de Objetos JavaScript

Objetos Propiedades: Atributos que determinan el estado del objeto Mtodos: Funciones que puede realizar Objeto.propiedad / Objeto.metodo() Ejemplos Button: Propiedades value, name. Mtodo click Document: document.write

Modelo de Objetos JavaScript

JavaScript tiene objetos preconstruidos, con propiedades, mtodos y que responden a eventos Jerarqua basada en contenedores (contenedorcontenido) Dos grupos de objetos Objetos del navegador Objetos del lenguaje

OBJETOS DEL NAVEGADOR

window

history location document anchor applet area form image frame link plugin

OBJETOS DEL NAVEGADOR

form button checkbox fileUpload hidden option password radio reset select submit text textarea

Notacin

window.document.miformulario.areatexto Se puede ignorar la referencia a la ventana actual Notacin arreglo Document.forms[0].elements[0]

El objeto Window
Propiedades
closed defaultStatus frames history length name opener parent self status top window

Mtodos
alert(mensaje) blur clearInterval(id) clearTimeout(nombre ) close() confirm(mensaje) eval() focus() moveBy(x,y) moveTo(x,y) open(url,nombre caracteristicas))

El objeto Window

Caractersticas del mtodo open

toolbar =[yes,no,1,0] location = [yes,no,1,0] directories = [yes,no,1,0] status = [yes,no,1,0] menubar = [yes,no,1,0] scrollbars = [yes,no,1,0] resizabel = [yes,no,1,0] width = pixels height = pixels VER 058.HTM

El objeto Frame

Propiedades frames parent self top window

Mtodos

alert(mensaje) blur clearInterva(id) clearTimeout(nom bre) close() confirm(mensaje) eval() focus() moveBy(x,y) moveTo(x,y) open(url,nombre caracteristicas))

El objeto Location

Encapsula la URL de la pgina actual Propiedades hash, host, hostname, href, pathname, port, protocol Mtodos

eval(), reload(), replace(), replace(cadenaURL), toString(), valueOf()

El objeto History

Almacena los sitios por los que se ha estado navegando Propiedades

current, next, length, previous Mtodos back(), eval(), forward(), go(posicion), toString(), valueOf()

El objeto Navigator

Encapsula informacin sobre el navegador Propiedades appCodeName, appName, mimeType, plugins, userAgent Mtodos eval(), javaEnabled(), taintEnable(), toString(), valueOf() Ver 065.html

El objeto Document

Propiedades alinkColor, anchors, applets, bgColor, cookie, domain, embeds, fgColor, forms, images, lastModified, linkColor, links, location, referrer, title, vlinkColor Mtodos

clear(), close(), eval(), open(mime, replace), toString(), valueOf(), write(), writeln()

El objeto Link

Permite realizar enlaces externos al documento actual Propiedades

target, hash, host, hostname, href,pathname, port, protocol, search Mtodos eval(), toString(), valueOf

El objeto Link

Permite realizar enlaces externos al documento actual Propiedades

target, hash, host, hostname, href,pathname, port, protocol, search Mtodos eval(), toString(), valueOf

El objeto Anchor

Permite definir enlaces internos Propiedades href, target Mtodos eval(), valueOf()

El objeto Image

Propiedades boder, complete, heigtht, hspace, lowsrc, name, prototype, scr, vspace, width Mtodos

eval() , toString(), valueOf()

El objeto Form

Propiedades action, elements, encoding, method, target Mtodos eval(). reset(), submit(), toString(), valueOf()

Los objetos Text y Textarea

Propiedades defaultValue, name, value Mtodos blur(), eval(), focus(), select(), toString(), valueOf() Ver 072,html

Los objetos Button (Submit, Reset y Button)

Propiedades name, value Mtodos click(), eval(), toString(), valueOf() Ver 074.html

El objeto Checkbox

Propiedades checked, defaultChecked, name, value Mtodos click(), eval(), toString(), valueOf() Ver 076.html

El objeto Radio

Propiedades checked, defaultChecked, length, name, value Mtodos click(), eval(), toString(), valueOf() Ver 078.html

El objeto Select

Propiedades length, name, options, selectedIndex Propiedades de options[i]: defaultSelected, index, length, options, selected, selectedIndex, text, value Mtodos eval(), toString(), valueOf() Ver 081.html

El objeto Password

Propiedades defaultValue, name, value Mtodos blur(), eval(), focus(), select(), toString(), valueOf() Ver 083.html

OBJETOS DEL LENGUAJE

String Array Boolean Number Function Math Date

El objeto String

Propiedades
length

Mtodos
anchor(nombre), big(), blink(), charAt(index), eval(), fixed(), fontColor(color), fontSize(tamao), indexOf(cadena_buscada, indice), italics(), lastIndexOf(cadena_buscada, indice), link(url), small(), split(separador), strike(), sub(), substring(primeroindice, segundoindice), sup(), toLowerCase(), toString(), toUpperCase(), valueOf()

Ver 087.html

El objeto Array

NuevoArreglo = new Array(15); Propiedades length Mtodos join(separador), reverse(), sort(), eval, toString, valueOf() Ver 090.html, 092.html

El objeto Math

Propiedades E, LN2, LN10, LOG2E, LOG10E, PI, SQRT1_2, SQRT_2 abs(numero), acos(numero), asin(numero), ..., ceil(numero), cos(numero), ... floo(numero), ... etc. Ver 095.html , 095m.html

El objeto Date

Creacin: nuevoObjeto = new Date() nuevoObjeto = new Date(mes dia, ao) nuevoObjeto = new Date(mes dia, ao hh:mm:ss) nuevoObjeto = new Date(ao, mes, dia) nuevoObjeto = new Date(ao, mes, dia, hh, mm, ss)

El objeto Date

Mtodos:
getDate(), getDay(), getHours(), getMinutes(), getMonth(), getSeconds(), getTime(), getTimeZoneOffset(), getYear(), parse(fecha) (esttico), setDate(dia), setHours(horas), setMinutes(min), setMonth(mes), setSeconds(seg), setTime(fecha), setYear(), toGMTString(), tolocalString(), UTC(ao, mes, dia, hh, mm, ss), eval(), toString(), valueOf()

Ver 099.html

El objeto Boolean

NuevoBooleano = new Boolean(valor) Mtodos eval(), toString(), valueOf()

El objeto Number()

Propiedades MAX-VALUE, MIN_VALUE, NaN, NEGATIVE_INFINITY, POSITIVE_INFINITE, Mtodos

eval(), toString(), value()

El objeto Function

Permite crear funciones en tiempo de ejecucion nuevaFuncion = new Function( argumentos , sentencias)

EL MODELO DE EVENTOS DE JAVASCRIPT

OBJETO EVENTOS checkbox OnClick, onMouseMove, onMouseDown, onMouseUp link form frame OnClick, onMouseMove, onMouseDown, onMouseUp, onMouseOver onMouseOut OnSubmit, onMouseMove, onMouseDown, onMouseUp, onReset onMouseMove, onMouseDown, onMouseUp, onResize, onMove, onKeyDown, onKeyUp, onKeyPress onMouseMove, onMouseDown, onMouseUp, onAbort, onError

image

EL MODELO DE EVENTOS DE JAVASCRIPT

OBJETO text EVENTOS OnChange, onFocus, onBlur, onMouseMove, onMouseDown., onMouseUp, onSelect, onKeyDown, onKeyUp, onKeyPress OnChange, onFocus, onBlur, onMouseMove, onMouseDown, onMouseUp, onSelect, onKeyDown, onKeyUp, onKeyPress OnChange, onFocus, onBlur, onMouseMove, onMouseDown, onMouseUp OnClick, onMouseOver, onMouseOut OnLoad, onUnload, onMouseMove, onMouseDown, onMouseUp, onMove, onError

textarea

select area window

Ejemplos

onClick, 104.html onSubmit, onReset, 105.html onChange, 107.html onFocus, 109.html onBlur, 110.html onMouseOver, onMouseOut, 112.html onLoad, onUnload, 114.html