1 / 208

CURSO DE JAVASCRIPT Y DHTML

CURSO DE JAVASCRIPT Y DHTML. Sergio Jiménez Celorrio Departamento Ingeniería Informática - UC3M. 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

leyna
Download Presentation

CURSO DE JAVASCRIPT Y DHTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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>

More Related