Download
curso de javascript y dhtml n.
Skip this Video
Loading SlideShow in 5 Seconds..
CURSO DE JAVASCRIPT Y DHTML PowerPoint Presentation
Download Presentation
CURSO DE JAVASCRIPT Y DHTML

CURSO DE JAVASCRIPT Y DHTML

144 Views Download Presentation
Download Presentation

CURSO DE JAVASCRIPT Y DHTML

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. CURSO DE JAVASCRIPT Y DHTML Sergio Jiménez Celorrio Departamento Ingeniería Informática - UC3M

  2. CURSO DE JAVASCRIPT Y DHTML ¿Para qué nos sirve este curso? • Dotar a las páginas web de “Inteligencia” • Almacenar y recuperar información del usuario • Comprobar formularios • Aumentar interacción del usuario con la WEB • Captar Eventos del ratón y del teclado • Realizar Pequeñas animaciones • Definir reglas de estilo • Crear sitios WEB donde todas las páginas mantengan una apariencia común

  3. CURSO DE JAVASCRIPT Y DHTML Estructura del Curso • Introducción • JavaScript • el DOM y las Hojas de Estilo (CSS) • DHTML • Proyectos DHTML

  4. Introducción Sergio Jiménez Celorrio Departamento Ingeniería Informática - UC3M

  5. Introducción¿Qué es JavaScript? • No es Java • Es un lenguaje de programación de Scripts en el ‘Client-Side’ • Otros VBScript

  6. Introducción¿Qué es DHTML? • No es un lenguaje de programación • No es una aplicación • Es una metodología de trabajo: • DHTML = JS + DOM + CSS • JS (JavaScript) lenguaje de programación de Scripts • DOM (Documet Object Model) estructura de los objetos de los objetos de un documento WEB • CSS (Hojas de Estilo) lenguaje de definición del aspecto de los objetos de un documento WEB

  7. JAVASCRIPT Sergio Jiménez Celorrio Departamento Ingeniería Informática - UC3M

  8. JavaScriptHerramientas de Trabajo • Editores de Texto Plano • NotePad • EditPlus • Editores de JS Profesionales • DreamWeaver • Antechinus

  9. JavaScriptJavaScrit en una página WEB(1) <HTML> <HEAD> <TITLE> Mi primer Script </TITLE> <SCRIPT LANGUAGE="JavaScript"> </SCRIPT> </HEAD> <BODY> <P> Este página contiene un script vacío </P> </BODY> </HTML>

  10. JavaScript JavaScrit en una página WEB(2) <HTML> <HEAD> <TITLE> Mi primer Script </TITLE> <SCRIPT LANGUAGE="JavaScript"> alert("¡Hola JavaScript!"); </SCRIPT> </HEAD> <BODY> <P> Esta página contiene mi primer script </P> </BODY> </HTML>

  11. JavaScript JavaScrit en una página WEB(3) <HTML> <HEAD> <TITLE>Mi primer Script</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- alert("¡Hola JavaScript!"); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene mi primer script </P> </BODY> </HTML>

  12. JavaScript Detección de errores • Cambiar alert por Alert

  13. JavaScriptVariables • Declaración • Asignación

  14. JavaScript – Variables Declaración e Asignación(1) <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var v1; // declaración v1=10; // asignación alert(v1); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  15. JavaScript – VariablesDeclaración y Asignación (2) <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var v1=10; // declaración y asignación alert(v1); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  16. JavaScript – VariablesDeclaración y Asignación (3) <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var v1, v2; // declarar más de una variable v1=10; v2=20; alert(v1); alert(v2); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  17. JavaScript – Variables Declaración y Asignación(4) <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- v1=10; // declaración implícita alert(v1); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  18. JavaScript- VariablesNombres de las variables • Nombres Incorrectos • No pueden empezar por números • Pueden contener: • Numeros, ej var total2004; • Letras, ej var total; • El caracter ‘_’ (underscore ) ej var total_2004; • No pueden contener: • Símbolos: ‘;’ ‘,’ ‘.’ • Letras acentuadas ni caracteres locales tipo ñ,ç • Espacios en blanco • Palabras reservadas

  19. JavaScript – VariablesTipos de Variables • Cadenas: • var producto= “Tetrabrick Leche 1L”; • Números • Var precio=1; • Var precio= 0.65; • Booleanos • var enstock=true; • Nulas • var producto=null; • Indefinidas

  20. JavaScript – Variables –Tipos de VariablesCadenas • Asignación • Se guarda entre Comillas simples o dobles • Operaciones • Concatenación ‘+’

  21. JavaScript – Variables –Tipos de Variables - CadenasEjemplo <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var producto, marca, micadena; producto="Brick Leche 1L"; // asignación marca='Pascual'; micadena=producto+", "+marca; // concatenación alert(micadena); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  22. JavaScript – Variables –Tipos de Variables - CadenasSecuencias de Escape

  23. JavaScript – Variables –Tipos de Variables - CadenasSecuencias de Escape <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var producto, marca, micadena; producto="Brick Leche 1L"; marca='\"Pascual\"'; //Escape de las comillas micadena=producto+"\n "+marca; //Escape del retorno de carro alert(micadena); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  24. JavaScript – Variables –Tipos de VariablesNúmeros • Asignación • Operaciones • Infinito y Nan

  25. JavaScript – Variables –Tipos de Variables - Números Asignación <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var numero1, numero2, numero3, numero4, numero5; numero1=10; // entero numero2=10.0; // real numero3=1E1; // notación científica numero4=0xA; // hexadecimal numero5=012; // octal alert(numero1+"\n"+numero2+"\n"+numero3+"\n"+numero4+"\n"+numero5); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  26. JavaScript – Variables –Tipos de Variables- NúmerosOperaciones • Suma +, += • Resta –, -= • Multiplicación *, *= • División /, /= • Incremento ++ • Decremento –

  27. JavaScript – Variables –Tipos de Variables- NúmerosEjemplo <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var precio_leche, precio_croisant, precio_desayuno1, precio_desayuno2; precio_leche = 0.65; precio_croisant =0.85; precio_desayuno1=precio_leche +precio_croisant; precio_desayuno2=0; // estas 3 líneas son equivalentes a la anterior precio_desayuno2+= precio_leche; precio_desayuno2+= precio_croisant; alert("El precio del desayuno es: "+precio_desayuno1+"\n"+"El precio del desayuno es: "+precio_desayuno2); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  28. JavaScript – Variables –Tipos de Variables- NúmerosNaN e Infinity <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var numero1, numero2; numero1="hola" numero1=numero1*3; // not a number alert("valor de numero1 "+numero1); numero2=100/0; // Infinity alert("valor de numero2 "+numero2); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  29. JavaScript – Variables –Tipos de VariablesBooleanos • Asignación • Operadores • Comparadores • < • >= • < • <= • == • !== • Operadores lógicos • AND: && • OR: || • NOT: !

  30. JavaScript – Variables –Tipos de Variables – BooleanosEjemplo Comparaciones <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var condicion1, condicion2, condicion3; condicion1= true; condicion2= (3>5); condicion3= (3==3); alert("condicion1 vale: "+condicion1+"\ncondicion2 vale: "+condicion2+"\ncondicion3 vale: "+condicion3); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  31. JavaScript – Variables –Tipos de Variables – BooleanosEjemplo Operadores Lógicos <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var verdadero,falso; verdadero=true; falso=false; alert("verdadero AND falso: "+ (verdadero&&falso)); // falso alert("verdadero OR falso: "+ (verdadero||falso)); // verdadero alert("NOT verdadero: "+ (!verdadero)); // falso //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  32. JavaScript – Variables –Tipos de VariablesVariables Nulas <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var nueva_variable; nueva_variable=null; alert(nueva_variable); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  33. JavaScript – Variables – Tipos de VariablesVariables Indefinidas <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var nueva_variable; alert(nueva_variable); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  34. JavaScript – VariablesTipos de Variables • Obtener el tipo de una variable • typeof(variable) • Cambio de tipo : • conversión implícita • conversión explícita (Recomendable)

  35. JavaScript – Variables – Tipos de Variables Obtener el tipo <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var variable1,variable2,variable3,variable4,variable5; variable1="diez"; // cadena variable2=10; // numero variable3=true; // booleano variable4=null; // nula alert("la variable1 es de tipo: "+typeof(variable1)+"\n"+"la variable2 es de tipo: "+typeof(variable2)+"\n"+"la variable3 es de tipo: "+typeof(variable3)+"\n"+"la variable4 es de tipo: "+typeof(variable4)+"\n"+"la variable5 es de tipo: "+typeof(variable5)); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  36. JavaScript – Variables –Tipos de VariablesCambios de tipos • Obtener el tipo de una variable • Cambio de tipo : • conversión implícita • conversión explícita (Recomendable)

  37. JavaScript – Variables –Tipos de VariablesConversión implicita(1) <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var mivariable; mivariable="cadena"; alert("mi variable es de tipo: "+typeof(mivariable)); mivariable=1234; // conversión implícita alert("mi variable es de tipo: "+typeof(mivariable)); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  38. JavaScript – Variables –Tipos de VariablesConversión implicita(2) <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var mivariable; mivariable="1234"; alert("mi variable es de tipo: "+typeof(mivariable)); mivariable=mivariable*1; //Conversión Implícita alert("mi variable es de tipo: "+typeof(mivariable)); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  39. JavaScript – Variables –Tipos de VariablesConversión implicita(3) <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var mivariable; mivariable=1234; alert("mi variable es de tipo: "+typeof(mivariable)); mivariable=mivariable+""; alert("mi variable es de tipo: "+typeof(mivariable)); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  40. JavaScript – Variables –Tipos de VariablesConversión explícita(1) <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var mivariable; mivariable="1234"; alert("mi variable es de tipo: "+typeof(mivariable)); mivariable=parseInt(mivariable); //Conversión Explícita alert("mi variable es de tipo: "+typeof(mivariable)); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  41. JavaScript – Variables –Tipos de VariablesConversión explícita(2) <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var mivariable; mivariable="1234.5"; alert("mi variable es de tipo: "+typeof(mivariable)); mivariable=parseFloat(mivariable); alert("mi variable es de tipo: "+typeof(mivariable)); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  42. JavaScript – Variables –Tipos de VariablesConversión explícita(3) <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var mivariable; mivariable=1234.5; alert("mi variable es de tipo: "+typeof(mivariable)); mivariable=mivariable.toString(); alert("mi variable es de tipo: "+typeof(mivariable)); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  43. JavaScript – Control de FlujoCondicionales • IF • Switch

  44. JavaScript – Control de Flujo- CondicionalesIF If (condición) then { expresión1; expresión2; … expresión n; } else{ expresión1; expresión2; … expresión m; }

  45. JavaScript – Control de Flujo- Condicionales- IF Ejemplo (1) <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var clave = "cursoUC3M"; var respuesta; respuesta=prompt("Introduzca la clave", ""); if (respuesta == clave) { alert("¡Hola usuario autorizado!"); }else{ alert("¡usuario no autorizado!"); } //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  46. JavaScript – Control de Flujo- Condicionales- IF Ejemplo (2) <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var ideal; var estatura; var peso; var sexo; estatura=prompt("Introduzca su estatura en cm (P.EJ: 175)", ""); peso=prompt("Introduzca su peso en Kg (P.EJ: 83)", ""); sexo=prompt("Introduzca su sexo (Hombre o Mujer)", ""); if (sexo == "Hombre") //si es hombre ideal = estatura - 100; else //si es Mujer ideal = estatura - 110;

  47. JavaScript – Control de Flujo- Condicionales- IF Ejemplo (2) if (peso < ideal) //si el peso real es más bajo que el ideal alert("Está usted bastante delgado"); else //sino aún hay otras dos posibilidades { if (peso == ideal) //en su peso alert("Su peso actual es el idóneo"); else alert("Sufre usted cierto sobrepeso"); } //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

  48. JavaScript – Control de Flujo –CondicionalesSwitch switch (variable) { case valor1: expresion1; expresion2; … break; case valor2: expresion1; expresion2; … break; case valor3: expresion1; expresion2; … break; case default: expresion1; expresion2; … }

  49. JavaScript – Control de Flujo –Condicionales-SwitchEjemplo <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var respuesta; respuesta=prompt("Introduzca su idioma (Español, Inglés, Francés, Italiano)", ""); switch (respuesta) { case "Español": alert("Buenos días"); break; case "Francés": alert("Bon jour"); break; case "Inglés": alert("Good morning"); break;

  50. JavaScript – Control de Flujo –Condicionales-SwitchEjemplo case "Italiano": alert("Bon jorno"); break; default: alert("Ha introducido mal el idioma"); } //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>