Html Y Javascript

4,874 views

Published on

Published in: Business
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
4,874
On SlideShare
0
From Embeds
0
Number of Embeds
58
Actions
Shares
0
Downloads
0
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Html Y Javascript

  1. 1. Ing. Eric Huiza Pereyra .Net Senior Developer QUADREM The Global eMarket Place www.quadrem.com
  2. 2. <ul><li>HTML. </li></ul><ul><li>JavaScript. </li></ul>
  3. 3. <ul><li>Hyper Text Markup Language . </li></ul><ul><li>Lenguaje basado en texto utilizado para la definición de hipertexto. </li></ul><ul><li>Utilizado para la definicion de formatos. </li></ul><ul><li>Problemas en su uso por diferentes navegadores. </li></ul>
  4. 4. <ul><li>Estructura de un documento HTML. </li></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li><p> </li></ul></ul><ul><ul><li>Mi Primera página Web. </li></ul></ul><ul><ul><li></p> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>
  5. 5. <ul><li>Etiqueta HTML. </li></ul><ul><ul><li>Establece el inicio y fin de un documento HTML. </li></ul></ul><ul><ul><ul><li><html> </li></ul></ul></ul><ul><ul><ul><li>…… </li></ul></ul></ul><ul><ul><ul><li></html> </li></ul></ul></ul><ul><li>Etiqueta Body. </li></ul><ul><ul><li>Establece el contenido de la pagina Web. </li></ul></ul><ul><ul><ul><li><html> </li></ul></ul></ul><ul><ul><ul><li><body> </li></ul></ul></ul><ul><ul><ul><li>…… . </li></ul></ul></ul><ul><ul><ul><li></body> </li></ul></ul></ul><ul><ul><ul><li></html> </li></ul></ul></ul>
  6. 6. <ul><li>Etiqueta Header. </li></ul><ul><ul><li>Se utiliza para colocar referencias a la pagina Web, meta tags, y el titulo. </li></ul></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><header> </li></ul></ul><ul><ul><li><title>Mi Primera Página Web</title> </li></ul></ul><ul><ul><li><LINK href=&quot;Styles.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot;> </li></ul></ul><ul><ul><li><script language=”javascript” src=”menú.js”></script> </li></ul></ul><ul><ul><li></header> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li>… .. </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>
  7. 7. <ul><li>Etiquetas H1, H2, H3, H4, H5 </li></ul><ul><ul><li><h1>Mi Primera página Web.</h1> </li></ul></ul><ul><li>Etiqueta P </li></ul><ul><ul><li><p> </li></ul></ul><ul><ul><li>Este es mi primer párrafo de texto </li></ul></ul><ul><ul><li>en una pagina web. </li></ul></ul><ul><ul><li></p> </li></ul></ul><ul><li>Etiqueta A </li></ul><ul><ul><li><a href=&quot;javascript:functionJS();&quot;>Link a una funcion javascript</a> </li></ul></ul><ul><ul><li><a href=&quot;http://www.google.com&quot;>Link a otra pagina web.</a> </li></ul></ul><ul><ul><li><a href=&quot;C:Archivo.pdf&quot;>Link a un archivo pdf</a> </li></ul></ul>
  8. 8. <ul><li>Etiqueta IMG </li></ul><ul><ul><li><img src=&quot;C:Imagen01.jpg&quot; alt=&quot;Imagen 01&quot; /> </li></ul></ul><ul><li><img src=&quot;ileServerc$Imagen01.jpg&quot; alt=&quot;Imagen 01&quot; /> </li></ul><ul><li><img src=&quot;http://misitioweb/imagener/Imagen01.jpg&quot; alt=&quot;Imagen 01&quot; /> </li></ul><ul><li>Etiqueta HR </li></ul><ul><li> <p>Primer Parrafo.</p> </li></ul><ul><li><hr /> </li></ul><ul><li><p>Segnudo Parrafo.</p> </li></ul><ul><li>Etiqueta BR </li></ul><ul><ul><li><p>Primer Parrafo.</p> </li></ul></ul><ul><ul><li><br /> </li></ul></ul><ul><ul><li><p>Segnudo Parrafo.</p> </li></ul></ul>
  9. 9. <ul><li>Etiqueta DIV </li></ul><ul><li><div> </li></ul><ul><li><p>Parrafo 1</p> </li></ul><ul><li><hr /> </li></ul><ul><li><p>Parrafo 2</p> </li></ul><ul><li></div> </li></ul><ul><li><br /> </li></ul><ul><li><div> </li></ul><ul><li><p>Parrafo 3</p> </li></ul><ul><li><hr /> </li></ul><ul><li><p>Parrafo 4</p> </li></ul><ul><li></div> </li></ul><ul><li>Etiqueta SPAN </li></ul><ul><ul><li><span>Etiqueta 1</span> </li></ul></ul>
  10. 10. <ul><li>Etiqueta Table </li></ul><ul><ul><li><table width=“100%” border=“1”> </li></ul></ul><ul><ul><li>… . </li></ul></ul><ul><ul><li></table> </li></ul></ul><ul><li>Etiqueta TR </li></ul><ul><ul><li><table> </li></ul></ul><ul><ul><li><tr>….</tr> </li></ul></ul><ul><ul><li></table> </li></ul></ul>
  11. 11. <ul><li>Etiqueta TD </li></ul><ul><ul><li><table> </li></ul></ul><ul><ul><ul><li><tr> </li></ul></ul></ul><ul><ul><ul><ul><li><td>Celda 1</td> </li></ul></ul></ul></ul><ul><ul><ul><li></tr> </li></ul></ul></ul><ul><ul><li></table> </li></ul></ul><ul><li>Etiqueta TH </li></ul><ul><ul><li><table> </li></ul></ul><ul><ul><ul><li><tr> </li></ul></ul></ul><ul><ul><ul><ul><li><th>Titulo</th> </li></ul></ul></ul></ul><ul><ul><ul><li></tr> </li></ul></ul></ul><ul><ul><li></table> </li></ul></ul>
  12. 12. <ul><li>Permiten ingresar información por el usuario. </li></ul><ul><ul><li>GET. </li></ul></ul><ul><ul><li>POST. </li></ul></ul><ul><li>Los principales controles son. </li></ul><ul><ul><li><input type=“text”> </li></ul></ul><ul><ul><li><input type=“button”> </li></ul></ul><ul><ul><li><input type=“submit”> </li></ul></ul><ul><ul><li><input type=“checkbox”> </li></ul></ul><ul><ul><li><input type=“radiobutton”> </li></ul></ul><ul><ul><li><input type=“hidden”>. </li></ul></ul><ul><ul><li><select>, <textarea> </li></ul></ul><ul><ul><li>… . </li></ul></ul>
  13. 13. <ul><li>Las paginas Web que solo cuentan con HTML son páginas estáticas con poco contenido y poca interacción con el usuario. </li></ul><ul><li>JavaScript es un lenguaje interpretado que se ejecuta en el navegador o en algún motor de ejecución de scripts. </li></ul><ul><li>No es estándar en todos los navegadores. </li></ul>
  14. 14. <ul><li>Declaración de variables. </li></ul><ul><ul><li>Las variables no necesitan ser declaradas, pero por buenas practicas deberían serlo. </li></ul></ul><ul><ul><ul><li>var _numero1; </li></ul></ul></ul><ul><ul><ul><li>var _numero2; </li></ul></ul></ul><ul><li>Construcciones de decisión. </li></ul><ul><ul><li>De la misma forma que otros lenguajes de programación con sintaxis derivada de C, soporta las estructuras de decisión if, switch y el operador ternario. </li></ul></ul>
  15. 15. <ul><li>Construcciones de iteración. </li></ul><ul><ul><li>Soporta las estructuras for, while, do while y for in. </li></ul></ul><ul><li>Depuración. </li></ul><ul><ul><li>Activación de la instrucción debugger. </li></ul></ul><ul><li>Creación de funciones. </li></ul><ul><ul><li>Se crean funciones de la misma forma que en C, pero no se especifican tipos. </li></ul></ul>
  16. 16. <ul><li>Acceso a objetos de la pagina Web. </li></ul><ul><ul><li>A través del modelo de objetos de documentos DOM, podemos acceder a los objetos y controles de una pagina web a través de JavaScript. </li></ul></ul><ul><ul><li>Permite una fuerte interacción con el usuario. </li></ul></ul>
  17. 17. <ul><li><script type=&quot;text/javascript&quot; language=&quot;javascript&quot;> </li></ul><ul><li>var _operacion = '+'; </li></ul><ul><li>var _numero1 = 1000; </li></ul><ul><li>var _numero2 = 100; </li></ul><ul><li>var _result; </li></ul><ul><li>switch (_operacion) </li></ul><ul><li>{ </li></ul><ul><li>case '+': </li></ul><ul><li>_result = _numero1 + _numero2; </li></ul><ul><li>break; </li></ul><ul><li>case '-': </li></ul><ul><li>_result = _numero1 - _numero2; </li></ul><ul><li>break; </li></ul><ul><li>case '*': </li></ul><ul><li>_result = _numero1 * _numero2; </li></ul><ul><li>break; </li></ul><ul><li>case '/': </li></ul><ul><li>_result = _numero1 / _numero2; </li></ul><ul><li>break; </li></ul><ul><li>} </li></ul><ul><li>var _isvalid = _result > 0?true:false; </li></ul><ul><li>if (_isvalid) </li></ul><ul><li>alert(_result); </li></ul><ul><li></script> </li></ul>

×