Introducción a Javascript Client-side

HTML Y XHTML

HTML (HyperText Markup Language): Es un estándar que sirve de referencia para la elaboración de páginas web.

XHTML (eXtensible HyperText Markup Language): XHTML es básicamente HTML expresado como XML válido

Lenguaje de etiquetas HTML

<!DOCTYPE HTML>
 <html>
   <head>
     <title>Pereirajs</title>
   </head>
   <body>
    <h2> Pereirajs </h2>
     <p> Ejemplo html </p>
   </body>
 </html>

Ejemplo1

¿HTML y Javascript?

¿Cómo incluir javascript dentro de un documento html? 

<!DOCTYPE HTML>
 <html>
   <head>
     <title>Pereirajs</title>

     <script type="text/javascript">
        alert("Javascript dentro de el documento");
     </script>

   </head>
   <body>
    <h2> Pereirajs </h2>
     <p> Ejemplo cómo incluir javascript en un documento html </p>
   </body>
 </html>

Ejemplo2

¿HTML y Javascript?

¿Cómo incluir javascript dentro de un documento html? 

<!DOCTYPE HTML>
  <html>
   <head>
     <title>Pereirajs</title>

    <script type="text/javascript" src="codigo.js"></script>

   </head>
   <body>
    <h2> Pereirajs </h2>
     <p> Ejemplo cómo incluir javascript en un documento html </p>
   </body>
 </html>
      
      alert("Javascript desde otro archivo");

Ejemplo3

¿HTML y Javascript? 

<!DOCTYPE HTML>
 <html>
   <head>
     <title>Pereirajs</title>
   </head>
   <body>
    <h2> Pereirajs </h2>
     <p> Ejemplo cómo incluir javascript en un documento html </p>
     <button onClick = "alert('Saludos!! :P')" > Saludar </button>
   </body>
 </html>

Ejemplo4

DOM

Dom (Document Object Model): Permite la manipulación de documentos XHTML como si fuera documentos XML

DOM: Árbol de nodos

DOM transforma un documento XHTML en un conjunto de elementos llamados nodos, que están interconectados y que representan los contenidos de las páginas web y las relaciones entre ellos

      
<!DOCTYPE html ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Página sencilla</title>
</head>

<body>
<p>Esta página es <strong>muy sencilla</strong></p>
</body>
</html>"

sli

Manipulación del DOM

Acceso directo a los nodos: getElementsByTagName(), getElementsByName(), getElementById()

Creación y eliminación de nodos: document.createElement("ELEMENT"), ELEMENT.appendChild(ELEMENT),removeChild()

Acceso directo a atributos

Ejemplo5

Referencia:

http://librosweb.es/javascript/

Gracias.

← →

/