Fundamentos de JavaScript

INTRODUCCIÓN

 

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

SINTAXIS BÁSICA

Etiqueta <script> <script language= “JavaScript”> … </script> Inserción de código dentro de las etiquetas HTML <input name=“nombre” type=“text” onChange=“validarNombre(this)”> Ejemplo: 003.html

Elementos sintácticos           Identificadores Palabras reservadas Literales Variables Constantes Expresiones Comentarios Operadores Funciones Instrucciones .

métodos y objetos Combinación de caracteres alfanuméricos. y _. comenzando por una alfabético o por _ Se excluyen las palabras reservadas . funciones.Identificadores    Nombres de variables.

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 posición 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 mayúsculas

Expresiones      Sentencias que se evalúan a un valor simple 4 x “hola” z + 5*y .

Comentarios   Comentarios de línea // este es un comentario de linea x = 3 +y. // este es otro Comentarios de bloque /* este es un comentario de bloque */ .

Operadores  Símbolos que representan el modo en que unas expresiones se combinan para producir otras .

html .Funciones     Script que puede ser invocado por su nombre Evita que partes del código JavaScript sea ejecutado cuando se carga una página Html Facilita reutilización de código Ver 012.

Versión larga x = x +y x=x-y x = x*y x = x/y Versión corta x += y y -= y x*=y x/=y .OPERADORES  Operadores de asignación  Asignan un valor a una variable variable = expresion.

*.OPERADORES  Operadores aritméticos +. %  Operadores de incremento x++ ++x x---x  Ver 015. -. /.htm .

OPERADORES  Operadores de comparación == != > < <= >= .

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

OPERADORES  Operador condicional: <expresion0> ?<expresion1> : <expresion2>  Operadores lógicos: && (Y lógico) || (O lógico) ! (Negación lógica) .

htm  Precedencia de los operadores .OPERADORES  Operador typeof   Describe el tipo de datos del operando que se le pasa Retorna:      number string boolean function object  Ver 021.

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

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

htm .[condicion].htm 028.ESTRUCTURAS DE CONTROL   Sentencias repetitivas (for) for ([expr_inicial].[avance]){ [ sentencias ] } Ver 027.

htm .ESTRUCTURAS DE CONTROL   Sentencias repetitivas (for … in) for (propiedad IN objeto){ [ sentencias ] } Ver 029.

htm .htm.ESTRUCTURAS DE CONTROL   Sentencias repetitivas (while) while (condicion){ [ sentencias ] } Ver 030. 031.

htm .ESTRUCTURAS DE CONTROL   Sentencias repetitivas (do…while) do { [ sentencias ] } while (condicion) Ver 032.

para salir de un ciclo sin evaluar condición de salida Sentencia continue. para saltar a la evaluación  Ver 034.htm .ESTRUCTURAS DE CONTROL  Sentencias repetitivas (break/continue)   Sentencia break.

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.

FUNCIONES    Secciones separadas de código a las que se les ha dado un nombre Por medio del nombre se llama a la función cuantas veces se quiera Pueden recibir datos. llamados resultados . llamados argumentos y devolver valores.

..htm. 040. [argumento_n]) { [sentencias] } Ver 039.FUNCIONES   Creación de funciones function nombre([argumento_1]. 041.html..htm .

046.htm . base) parseFloat(cadena) isNaN(valor) eval( expresion )  Ver 044. 045.FUNCIONES  Funciones propias del lenguaje       escape(caracter)  %xx unescape(cadena) carácter parseInt(cadena.htm.htm.

Procesamiento de Eventos con JavaScript .

write .Modelo de Objetos JavaScript    Objetos  Propiedades: Atributos que determinan el estado del objeto  Métodos: Funciones que puede realizar Objeto. Método click  Document: document. name.propiedad / Objeto.metodo() Ejemplos  Button: Propiedades value.

Modelo de Objetos JavaScript    JavaScript tiene objetos preconstruidos. con propiedades. métodos y que responden a eventos Jerarquía 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 .

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

El objeto Window Propiedades •closed •defaultStatus •frames •history •length •name •opener •parent •self •status •top •window Métodos •alert(mensaje) •blur •clearInterval(id) •clearTimeout(nombre ) •close() •confirm(mensaje) •eval() •focus() •moveBy(x.nombre caracteristicas)) .y) •open(url.y) •moveTo(x.

no.1.1.no.0] directories = [yes.no.no.no.1.0] scrollbars = [yes.1.El objeto Window           Características del método open toolbar =[yes.0] menubar = [yes.0] resizabel = [yes.0] width = pixels height = pixels VER 058.0] location = [yes.1.no.HTM  .no.1.1.0] status = [yes.

y) •open(url.nombre caracteristicas)) .El objeto Frame  Propiedades •frames •parent •self •top •window  Métodos •alert(mensaje) •blur •clearInterva(id) •clearTimeout(nom bre) •close() •confirm(mensaje) •eval() •focus() •moveBy(x.y) •moveTo(x.

hostname. pathname. reload(). host. href.El objeto Location    Encapsula la URL de la página actual Propiedades hash. replace(). port. toString(). replace(cadenaURL). protocol Métodos   eval(). valueOf() .

length. next. previous Métodos back(). valueOf()   .El objeto History  Almacena los sitios por los que se ha estado navegando Propiedades   current. forward(). go(posicion). toString(). eval().

toString().html . taintEnable(). userAgent Métodos  eval().El objeto Navigator     Encapsula información sobre el navegador Propiedades  appCodeName. valueOf() Ver 065. appName. javaEnabled(). mimeType. plugins.

linkColor. domain. applets. forms. “replace”). close(). links. toString(). write(). referrer. bgColor. valueOf(). fgColor. anchors. cookie. images. open(mime. vlinkColor Métodos   clear(). lastModified. writeln() . title.El objeto Document   Propiedades alinkColor. location. embeds. eval().

pathname. host. hash. hostname. protocol. valueOf   .El objeto Link  Permite realizar enlaces externos al documento actual Propiedades   target. search Métodos eval(). port. href. toString().

href. protocol. hash. host. valueOf   . search Métodos eval(). toString(). hostname.pathname.El objeto Link  Permite realizar enlaces externos al documento actual Propiedades   target. port.

valueOf() .El objeto Anchor      Permite definir enlaces internos Propiedades href. target Métodos eval().

El objeto Image   Propiedades boder. heigtht. prototype. width Métodos   eval() . valueOf() . toString(). hspace. lowsrc. scr. complete. name. vspace.

valueOf() . submit(). toString(). target Métodos eval().El objeto Form     Propiedades action. encoding. elements. reset(). method.

valueOf() Ver 072.Los objetos Text y Textarea     Propiedades defaultValue. name. eval(). focus(). toString(). value Métodos blur(). select().html  .

html . value Métodos click(). toString(). Reset y Button)      Propiedades name. eval().Los objetos Button (Submit. valueOf() Ver 074.

El objeto Checkbox      Propiedades checked. value Métodos click(). defaultChecked. valueOf() Ver 076. name.html . eval(). toString().

valueOf() Ver 078.html . eval(). defaultChecked. name.El objeto Radio      Propiedades checked. value Métodos click(). toString(). length.

name.El objeto Select     Propiedades  length. options. toString(). index. text. length. selected. value Métodos  eval().html . selectedIndex. selectedIndex Propiedades de options[i]:  defaultSelected. options. valueOf() Ver 081.

eval(). focus(). toString(). select().El objeto Password     Propiedades defaultValue. valueOf() Ver 083. value Métodos blur(). name.html  .

OBJETOS DEL LENGUAJE        String Array Boolean Number Function Math Date .

indice). valueOf()  Ver 087. split(separador). charAt(index). toString(). fontColor(color).html . strike(). fontSize(tamaño). small(). substring(primeroindice.El objeto String   Propiedades length   Métodos anchor(nombre). indexOf(cadena_buscada. toLowerCase(). eval(). fixed(). link(url). blink(). segundoindice). sup(). indice). sub(). italics(). toUpperCase(). lastIndexOf(cadena_buscada. big().

092. eval. toString.html. valueOf() Ver 090. reverse().html  .El objeto Array      NuevoArreglo = new Array(15). Propiedades length Métodos join(separador). sort().

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

año hh:mm:ss”) nuevoObjeto = new Date(año. ss)   . mm. El objeto Date     Creación: nuevoObjeto = new Date() nuevoObjeto = new Date(“mes dia. dia. dia) nuevoObjeto = new Date(año. mes. hh. mes. año”) nuevoObjeto = new Date(“mes dia.

toString(). hh. getTimeZoneOffset(). getMonth(). setMonth(mes). eval(). getYear(). getDay(). UTC(año. El objeto Date   Métodos: getDate(). setMinutes(min). tolocalString().html . setYear(). ss). toGMTString(). mm. getMinutes(). dia. setTime(fecha). setHours(horas). getHours(). valueOf()  Ver 099. setSeconds(seg). parse(fecha) (estático). setDate(dia). mes. getSeconds(). getTime().

valueOf() . toString(). El objeto Boolean    NuevoBooleano = new Boolean(valor) Métodos eval().

NEGATIVE_INFINITY. POSITIVE_INFINITE. NaN. MIN_VALUE. value() . El objeto Number()   Propiedades MAX-VALUE. Métodos   eval(). toString().

El objeto Function   Permite crear funciones en tiempo de ejecucion nuevaFuncion = new Function( argumentos . sentencias) .

onMouseDown. onMove. onMouseUp link form frame OnClick. onMouseOver onMouseOut OnSubmit. onMouseDown. onMouseMove.EL MODELO DE EVENTOS DE JAVASCRIPT OBJETO EVENTOS checkbox OnClick. onAbort. onResize. onKeyDown. onMouseUp. onMouseUp. onMouseMove. onMouseMove. onMouseDown. onMouseDown. onKeyUp. onError image . onKeyPress onMouseMove. onMouseDown. onMouseUp. onMouseUp. onReset onMouseMove.

onMouseMove. onSelect. onUnload.EL MODELO DE EVENTOS DE JAVASCRIPT OBJETO text EVENTOS OnChange. onKeyUp. onBlur. onMouseUp. onKeyDown. onKeyDown. onFocus. onMouseDown. onMouseOver. onBlur. onError textarea select area window . onFocus.. onMouseDown. onMouseUp OnClick. onMouseOut OnLoad. onKeyUp. onMouseDown. onSelect. onMove. onMouseUp. onMouseMove. onBlur. onMouseDown. onMouseUp. onKeyPress OnChange. onMouseMove. onKeyPress OnChange. onMouseMove. onFocus.

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