SlideShare una empresa de Scribd logo
1 de 20
JAVASCRIPT

NOMBRE: Castillo Vera Carmen María
Curso: 6° ´´ Informática´´
QUE ES JAVA SCRINTP
       JavaScript es un lenguaje de
  programación interpretado, dialecto del
  estándar ECMAScript. Se define como
      orientado a objetos,3 basado en
prototipos, imperativo, débilmente tipiado
 y dinámico. Se utiliza principalmente en
su forma del lado del cliente (client-side),
implementado como parte de un navegador
web permitiendo mejoras en la interfaz de
usuario y páginas web dinámicas, en bases
 de datos locales al navegador...4 aunque
 existe una forma de JavaScript del lado
  del servidor (Server-side JavaScript o
                  SSJS).
Historia JavaScript?

JavaScript nació con la necesidad de
 permitir a los autores de sitio web
     crear páginas que permitan
intercambiar con los usuarios, ya que
 se necesitaba crear webs de mayor
 complejidad. El HTML solo permitía
  crear páginas estáticas donde se
  podía mostrar textos con estilos,
 pero se necesitaba interactuar con
 los usuarios. En los años de 1990,
Netscape creo Livescript; las primeras
       versiones de este lenguaje fueron
principalmente dedicadas a pequeños grupos de
 diseñadores Web que no necesitaban utilizar
un compilador, o sin ninguna experiencia en la
  programación orientada a objetos. A medida
 que estuvieron disponibles nuevas versiones
 de este lenguaje incluían nuevos componentes
    que dan gran potencial al lenguaje, pero
lamentablemente esta versión solo funcionaba
  en la última versión del Navigator en aquel
                   momento.
En diciembre de 1995, Netscape y Sun
Microsystems (el creador del lenguaje Java)
 luego de unirse objetivo de desarrollar el
  proyecto en conjunto, reintroducen este
 lenguaje con el nombre de Javascript. En
       respuesta a la popularidad de
   Javascript, Microsoft lanzo su propio
    lenguaje de programación a base de
 script, VBScript (una pequeña versión de
               Visual Basic).
USO DE JAVASCRIPT

  En segundo lugar, no está del todo
 claro que un exceso de JavaScript
  dificulte de alguna manera el buen
posicionamiento. Sin embargo, parece
 ser que este exceso de JavaScript
puede ser un problema para los robots
  de los buscadores, y estos pueden
   salir de nuestra página antes de
              indexarla.
Como práctica sana recomendamos ubicar el
       código JavaScript en un archivo
independiente y hacer referencia a este desde
  las páginas HTML que lo necesiten para su
  ejecución. El archivo debe tener extensión
                      ".js"
Ejemplo de uso de eval

var string1 = "foo";
var string2 = "bar";
var funcName = string1 + string2;

function foobar(){
  alert( 'Hello World' );
}
 eval( funcName + '()' ); // Hello World
Propiedades de JavaScript

toUpperCase(), transforma todos los caracteres de la
cadena a sus correspondientes caracteres en
mayúsculas:
var mensaje1 = "Hola";
var mensaje2 = mensaje1.toUpperCase(); //
mensaje2 = "HOLA«
toLowerCase(), transforma todos los caracteres de la cadena a
sus correspondientes caracteres en minúsculas:
var mensaje1 = "HolA";
var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola«
charAt(posicion), obtiene el carácter que se encuentra en la
posición indicada:
var mensaje = "Hola";
var letra = mensaje.charAt(0); // letra = H
letra = mensaje.charAt(2); // letra = l
indexOf(caracter), calcula la posición en la que se encuentra
el carácter indicado dentro de la cadena de texto. Si el carácter
     se incluye varias veces dentro de la cadena de texto, se
  devuelve su primera posición empezando a buscar desde la
   izquierda. Si la cadena no contiene el carácter, la función
                       devuelve el valor -1:
                      var mensaje = "Hola";
      var posicion = mensaje.indexOf('a'); // posicion = 3
       posicion = mensaje.indexOf('b'); // posicion = -1
Su función análoga es lastIndexOf():
lastIndexOf(caracter), 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:
var mensaje = "Hola";
var posicion = mensaje.lastIndexOf('a'); // posicion = 3
posicion = mensaje.lastIndexOf('b'); // posicion = -1
La función lastIndexOf() comienza su búsqueda desde el final
de la cadena hacia el principio, aunque la posición devuelta es
la correcta empezando a contar desde el principio de la
palabra.
Propiedades básicas



    JavaScript dispone de numerosas
 propiedades y funciones que facilitan la
programación de aplicaciones que manejan
 formularios. En primer lugar, cuando se
carga una página web, el navegador crea
automáticamente un array llamado forms
 y que contiene la referencia a todos los
        formularios de la página.
Type: indica el tipo de elemento que se trata.
Para los elementos de tipo <input> (text,
button, checkbox, etc.) coincide con el valor
de su atributo type. Para las listas
desplegables normales (elemento <select>) su
valor es select-one, lo que permite
diferenciarlas de las listas que permiten
seleccionar varios elementos a la vez y cuyo
tipo es select-multiple. Por último, en los
elementos de tipo <textarea>, el valor de type
es textarea.
■
Form: es una referencia directa al formulario
al que pertenece el elemento. Así, para
acceder al formulario de un elemento, se puede
utilizar
document.getElementById("id_del_elemento").f
orm

■ Name: obtiene el valor del atributo name de
XHTML. Solamente se puede leer su valor, por
lo que no se puede modificar.
Value: permite leer y modificar el valor del
atributo value de XHTML. Para los campos de
texto (<input type="text"> y <textarea>)
obtiene el texto que ha escrito el usuario.
Para los botones obtiene el texto que se
muestra en el botón. Para los elementos
checkbox y radiobutton no es muy útil, como
se verá más adelante
 Por último, los eventos más utilizados en el
manejo de los formularios son los siguientes:

Onclick: evento que se produce cuando se
pincha con el ratón sobre un elemento.
Normalmente se utiliza con cualquiera de los
tipos de botones que permite definir XHTML
(<input type="button">, <input
type="submit">, <input type="image">).
onchange: evento que se produce cuando el
usuario cambia el valor de un elemento de
texto (<input type="text"> o <textarea>).
También se produce cuando el usuario
selecciona una opción en una lista desplegable
(<select>). Sin embargo, el evento sólo se
produce si después de realizar el cambio, el
usuario pasa al siguiente campo del
formulario, lo que técnicamente se conoce
como que "el otro campo de formulario ha
perdido el foco".
onfocus: evento que se produce cuando el
usuario selecciona un elemento del formulario.

onblur: evento complementario de onfocus, ya
que se produce cuando el usuario ha
deseleccionado un elemento por haber
seleccionado otro elemento del formulario.
Técnicamente, se dice que el elemento anterior
"ha perdido el foco".
JavaScript para formularios

Más contenido relacionado

La actualidad más candente (13)

Java Script BáSico Ajax
Java Script BáSico AjaxJava Script BáSico Ajax
Java Script BáSico Ajax
 
Java script
Java scriptJava script
Java script
 
Javascript
JavascriptJavascript
Javascript
 
jQuery - 01 Conceptos básicos de java script
jQuery - 01 Conceptos básicos de java scriptjQuery - 01 Conceptos básicos de java script
jQuery - 01 Conceptos básicos de java script
 
2 1 sintaxis_php
2 1 sintaxis_php2 1 sintaxis_php
2 1 sintaxis_php
 
2 2 estructuras_decontrolphp
2 2 estructuras_decontrolphp2 2 estructuras_decontrolphp
2 2 estructuras_decontrolphp
 
2 5 funciones_php
2 5 funciones_php2 5 funciones_php
2 5 funciones_php
 
Javascript
JavascriptJavascript
Javascript
 
Introduccion A Php
Introduccion A PhpIntroduccion A Php
Introduccion A Php
 
Introduccion al java script
Introduccion al java scriptIntroduccion al java script
Introduccion al java script
 
Manual+php+básico
Manual+php+básicoManual+php+básico
Manual+php+básico
 
Servicios web Extendido_error perl
Servicios web Extendido_error perlServicios web Extendido_error perl
Servicios web Extendido_error perl
 
PHP MYSQL - FIEI-UNFV Clase 01
PHP MYSQL - FIEI-UNFV Clase 01PHP MYSQL - FIEI-UNFV Clase 01
PHP MYSQL - FIEI-UNFV Clase 01
 

Similar a JavaScript para formularios (20)

Josue
JosueJosue
Josue
 
Todo Javascript para canibales
Todo Javascript para canibalesTodo Javascript para canibales
Todo Javascript para canibales
 
Javascript de Canibales
Javascript de CanibalesJavascript de Canibales
Javascript de Canibales
 
Java Script de canibaless
Java Script de canibalessJava Script de canibaless
Java Script de canibaless
 
Guía JavaScript
Guía JavaScriptGuía JavaScript
Guía JavaScript
 
Javascript
JavascriptJavascript
Javascript
 
Javascript
JavascriptJavascript
Javascript
 
Javascript
JavascriptJavascript
Javascript
 
Javascript
JavascriptJavascript
Javascript
 
Javascript
JavascriptJavascript
Javascript
 
Javascript
JavascriptJavascript
Javascript
 
Java script operaciones
Java script operacionesJava script operaciones
Java script operaciones
 
Diseño web clase03
Diseño web clase03Diseño web clase03
Diseño web clase03
 
Microsoft Expression Web
Microsoft Expression WebMicrosoft Expression Web
Microsoft Expression Web
 
01 Ext Js Introduccion
01 Ext Js   Introduccion01 Ext Js   Introduccion
01 Ext Js Introduccion
 
Guiacursophp sql
Guiacursophp sqlGuiacursophp sql
Guiacursophp sql
 
Curso introduccionphp sql
Curso introduccionphp sqlCurso introduccionphp sql
Curso introduccionphp sql
 
Mootools Y Otros Frameworks JS
Mootools Y Otros Frameworks JSMootools Y Otros Frameworks JS
Mootools Y Otros Frameworks JS
 
Clase2
Clase2Clase2
Clase2
 
Samuel bailon sanchez
Samuel bailon sanchezSamuel bailon sanchez
Samuel bailon sanchez
 

JavaScript para formularios

  • 1. JAVASCRIPT NOMBRE: Castillo Vera Carmen María Curso: 6° ´´ Informática´´
  • 2. QUE ES JAVA SCRINTP JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos,3 basado en prototipos, imperativo, débilmente tipiado y dinámico. Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas, en bases de datos locales al navegador...4 aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS).
  • 3. Historia JavaScript? JavaScript nació con la necesidad de permitir a los autores de sitio web crear páginas que permitan intercambiar con los usuarios, ya que se necesitaba crear webs de mayor complejidad. El HTML solo permitía crear páginas estáticas donde se podía mostrar textos con estilos, pero se necesitaba interactuar con los usuarios. En los años de 1990,
  • 4. Netscape creo Livescript; las primeras versiones de este lenguaje fueron principalmente dedicadas a pequeños grupos de diseñadores Web que no necesitaban utilizar un compilador, o sin ninguna experiencia en la programación orientada a objetos. A medida que estuvieron disponibles nuevas versiones de este lenguaje incluían nuevos componentes que dan gran potencial al lenguaje, pero lamentablemente esta versión solo funcionaba en la última versión del Navigator en aquel momento.
  • 5. En diciembre de 1995, Netscape y Sun Microsystems (el creador del lenguaje Java) luego de unirse objetivo de desarrollar el proyecto en conjunto, reintroducen este lenguaje con el nombre de Javascript. En respuesta a la popularidad de Javascript, Microsoft lanzo su propio lenguaje de programación a base de script, VBScript (una pequeña versión de Visual Basic).
  • 6. USO DE JAVASCRIPT En segundo lugar, no está del todo claro que un exceso de JavaScript dificulte de alguna manera el buen posicionamiento. Sin embargo, parece ser que este exceso de JavaScript puede ser un problema para los robots de los buscadores, y estos pueden salir de nuestra página antes de indexarla.
  • 7. Como práctica sana recomendamos ubicar el código JavaScript en un archivo independiente y hacer referencia a este desde las páginas HTML que lo necesiten para su ejecución. El archivo debe tener extensión ".js"
  • 8. Ejemplo de uso de eval var string1 = "foo"; var string2 = "bar"; var funcName = string1 + string2; function foobar(){ alert( 'Hello World' ); } eval( funcName + '()' ); // Hello World
  • 9. Propiedades de JavaScript toUpperCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en mayúsculas: var mensaje1 = "Hola"; var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA«
  • 10. toLowerCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en minúsculas: var mensaje1 = "HolA"; var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola«
  • 11. charAt(posicion), obtiene el carácter que se encuentra en la posición indicada: var mensaje = "Hola"; var letra = mensaje.charAt(0); // letra = H letra = mensaje.charAt(2); // letra = l
  • 12. indexOf(caracter), calcula la posición en la que se encuentra el carácter indicado dentro de la cadena de texto. Si el carácter se incluye varias veces dentro de la cadena de texto, se devuelve su primera posición empezando a buscar desde la izquierda. Si la cadena no contiene el carácter, la función devuelve el valor -1: var mensaje = "Hola"; var posicion = mensaje.indexOf('a'); // posicion = 3 posicion = mensaje.indexOf('b'); // posicion = -1
  • 13. Su función análoga es lastIndexOf(): lastIndexOf(caracter), 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: var mensaje = "Hola"; var posicion = mensaje.lastIndexOf('a'); // posicion = 3 posicion = mensaje.lastIndexOf('b'); // posicion = -1 La función lastIndexOf() comienza su búsqueda desde el final de la cadena hacia el principio, aunque la posición devuelta es la correcta empezando a contar desde el principio de la palabra.
  • 14. Propiedades básicas JavaScript dispone de numerosas propiedades y funciones que facilitan la programación de aplicaciones que manejan formularios. En primer lugar, cuando se carga una página web, el navegador crea automáticamente un array llamado forms y que contiene la referencia a todos los formularios de la página.
  • 15. Type: indica el tipo de elemento que se trata. Para los elementos de tipo <input> (text, button, checkbox, etc.) coincide con el valor de su atributo type. Para las listas desplegables normales (elemento <select>) su valor es select-one, lo que permite diferenciarlas de las listas que permiten seleccionar varios elementos a la vez y cuyo tipo es select-multiple. Por último, en los elementos de tipo <textarea>, el valor de type es textarea. ■
  • 16. Form: es una referencia directa al formulario al que pertenece el elemento. Así, para acceder al formulario de un elemento, se puede utilizar document.getElementById("id_del_elemento").f orm ■ Name: obtiene el valor del atributo name de XHTML. Solamente se puede leer su valor, por lo que no se puede modificar.
  • 17. Value: permite leer y modificar el valor del atributo value de XHTML. Para los campos de texto (<input type="text"> y <textarea>) obtiene el texto que ha escrito el usuario. Para los botones obtiene el texto que se muestra en el botón. Para los elementos checkbox y radiobutton no es muy útil, como se verá más adelante Por último, los eventos más utilizados en el manejo de los formularios son los siguientes: Onclick: evento que se produce cuando se pincha con el ratón sobre un elemento. Normalmente se utiliza con cualquiera de los tipos de botones que permite definir XHTML (<input type="button">, <input type="submit">, <input type="image">).
  • 18. onchange: evento que se produce cuando el usuario cambia el valor de un elemento de texto (<input type="text"> o <textarea>). También se produce cuando el usuario selecciona una opción en una lista desplegable (<select>). Sin embargo, el evento sólo se produce si después de realizar el cambio, el usuario pasa al siguiente campo del formulario, lo que técnicamente se conoce como que "el otro campo de formulario ha perdido el foco".
  • 19. onfocus: evento que se produce cuando el usuario selecciona un elemento del formulario. onblur: evento complementario de onfocus, ya que se produce cuando el usuario ha deseleccionado un elemento por haber seleccionado otro elemento del formulario. Técnicamente, se dice que el elemento anterior "ha perdido el foco".