UT2 Desarrollo de apps mediante lenguajes de script

Sintaxis de JS

eugeniaperez.es

ut 2: lenguajes de scripting

 

eugeniaperez.es

4 Inclusión de código JS

ut 2: lenguajes de scripting

 

eugeniaperez.es

4 Inclusión de código JS

  • Scripts externos (ex1, ex2). Pueden ir en el head o en el body. Normalmente el código es más mantenible si se extrae a un fichero externo.

 

 

 

 

<html>
    <head>    
        <script type="text/javascript" src="js/ex2.js" ></script>
    </head>
    <body>
        <div>Página con el primer script</div>
    </body>
</html>
alert("Testing my first snippet.Hello everybody!!");

ut 2: lenguajes de scripting

 

eugeniaperez.es

4 Inclusión de código JS

 

Principalmente el código JS puede ejecutarse:

  • Scripts inmediatos (ex3, ex4): se ejecutan nada más cargar la página. Deben ir al final del body para incrementar la velocidad de carga.

 

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <title>DW :: Client-side dev :: Primer script</title>
        <meta charset="UTF-8">   
    </head>
    <body>
        <div>Página con el primer script</div>
	<script type="text/javascript" src="js/ex2.js" ></script>
    </body>
</html>

ut 2 lenguajes de scripting

 

eugeniaperez.es

4 Inclusión de código JS

  • Scripts diferidos (ex5): se cargan con la página pero no se ejecutan hasta que el usuario lleva a cabo una acción (pulsa un botón, etc). Van dentro del body:
  •  
  • Esta opción está desaconsejada pues ensucia innecesariamente el código HTML de la página y complica su mantenimiento.

 

 

 

 

<p onclick=”alert(‘Testing my first snippet.’)”>Hello 4vientos!</p>
<p onclick=”greet()”>Hello 4vientos!</p>
...
function greet(){
    alert(‘Testing my first snippet.’)
}

ut 2: lenguajes de scripting

 

eugeniaperez.es

4 Inclusión de código JS

Como se ha observado, el código Javascript debe ir entre las etiquetas <script></script>. Además es necesario incluir el atributo type de la etiqueta <script>. Este atributo es un estándar para identificar los diferentes contenidos, denominados tipos MIME (para Javascript text/JavaScript).

 

 

 

 

<script type="text/javascript">
...
</script>

ut 2: lenguajes de scripting

 

eugeniaperez.es

4 Etiqueta no script

  • Algunos navegadores no disponen de soporte completo de JavaScript
  • Otros navegadores permiten bloquearlo parcialmente 
  • Incluso algunos usuarios bloquean completamente el uso de JavaScript porque creen que así navegan de forma más segura.

En estos casos, se incluye un mensaje de aviso al usuario:

 

 

 

 

<noscript>
    This page requires a JavaScript-enabled browser.
</noscript>

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje

  • No se tienen en cuenta los espacios en blanco.
  • Se distinguen las mayúsculas y minúsculas.
  • No se define el tipo de las variables: al crear una variable, no es necesario indicar el tipo de dato que almacenará.
  • No es necesario terminar cada sentencia con el carácter de punto y coma (;), aunque se recomienda hacerlo.

 

 

 

 

 

Aunque sí en los métodos o variables

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje - Comentarios

Existen dos tipos de comentarios:

  • Los comentarios de una sola línea se definen añadiendo dos barras oblicuas (//) al principio de la línea.
  •  Los de varias se encierran entre los símbolos /* */.

 

 

 

 

 

// showing a test message with a comment in a single line
alert("Hello everybody!! ");

/* 
  Showing another message
  With a multiple-line comment
*/
alert("Hello again!!");

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje - Mostrar texto

La instrucción document.writeln permite a JavaScript mostrar el texto en el documento web. Es posible incluir etiquetas HTML dentro (ex6):

 

 

 

 

 

document.writeln("<h1>Probando a incluir texto</h1>");
document.writeln("<p>Desde código Javascript</p>");

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje - Mostrar texto

Alert (ex7)

Muestra un mensaje por pantalla en una ventana emergente, siendo la aceptación del mismo la única acción posible por parte del usuario.

 

 

 

 

 

 

alert('any message here');
alert('Any message here\nAnother line');

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje - Mostrar texto

Prompt (ex6)

Muestra un cuadro de texto en el que el usuario puede introducir información.

Es posible recoger el valor introducido desde el código. También es posible establecer un valor por defecto para el resultado (el segundo parámetro) de manera opcional.

 

 

 

 

 

 

 

var nombre = prompt("Introduzca su nombre"); 
var bebida = prompt("Bebida favorita","sidra"); 

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje - Mostrar texto

Confirm (ex8)

Muestra un mensaje de confirmación para el cual habrá dos posibles acciones.

 

 

 

 

 

 

 

 

var confirma = confirm('¿Seguro que desea borrar este elemento');

if (confirma) {
    alert('Se ha borrado el elemento');
}

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Constantes 

  • mediante const

Variables

  • mediante var

 

 

 

 

const PI = 3.14159; 
var number1 = 3;
var number2 = 1;
var result = number1 + number2;

En JavaScript no es obligatorio inicializar las variables.

const a = 7;
document.writeln("a es " + a + ".");

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Variables

  • case-sensitive
  • empezar con una letra, con un $ o bien con _.

 

 

 

 

var number1 = 3;
var number2 = 1;
var result = number1 + number2;

...tampoco es necesario declarar las variables.

Sí recomendable

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Variables

  • Es posible declararlas en una línea:

 

  • Es lo mismo que:

 

 

 

 

var lastname=”Murakami”, age=50, job=”writer”;
var lastname=”Murakami,
age=50,
job=”writer”;

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Tipos de variables

  • Numéricas:

 

  • Cadenas de texto:

 

  • Booleanos:

 

var result = 16;
var total = 234.65; 
var message1 = “Hi, welcome to Cuatrovientos!”;
var message2 = “Hope you guys like Javascript.”;
var finalMessage = message1 + message2;
var hasErrors = false;

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Tipos de variables

  • Arrays:

 

var months = new Array(12);
months[0] = “January”; 
var february = months[1]; 
var months = ["January","February","March","April","May","June",
"July","August","September","October","November","December"]
var months = new Array ("January","February","March","April","May",
"June","July","August","September","October","November","December");

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Operadores

  • Asignación:
  • Operadores  matemáticos "acortados"
var totalPlayers = 11;
var x = 10;
var y = 5;

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Operadores

  • Incremento y decremento 

 

 

  • Influye el orden:
var number = 1;
number++; // In this case it’s the same like ++number
alert(number); // print 2
var number1 = 1;
var number2 = number1++; 
number1 = 1;
number2 = ++number1; 

number2 vale 1

number2 vale 2

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Operadores Lógicos

  • Negación

 

  • AND y OR lógicos:
var hasErrors = true;
alert(!hasErrors); // Imprime false
var isTheLast = true;
var hasErrors = false;
var result = isTheLast && hasErrors; // result = false
isTheLast = true;
hasErrors = true;
result = isTheLast && hasErrors; // result = true

               And &&

           Or ||

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Operadores Matemáticos

 

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Operador Ternario

 

 

Operadores Relacionales

 

variablename=(condition)?value1:value2 
voteable=(age<18)?"Too young":"Old enough";

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Prioridad de operadores

Orden     Operador
1                 () Paréntesis
2                 Multiplicación: *, División: /, Módulo: %
3                 Adición/Concatenación: +, Substracción: - 
4                 ==, <, >,<=, >=, <>, !=, !>, !<
5                 NOT
6                 AND
7                BETWEEN, IN, LIKE, OR
8                 =

 

 

 

 

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Estructuras de control de flujo

Estructura if

 

 

 

 

 

if(condition) {
    //code to be executed if condition is true
 }
var showMsg = true;
var total = 0;

if(showMsg && total == 0){
     alert("Hello all 2º DAM!");
}

//Concatenamos varias condiciones

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Estructuras de control de flujo

Estructura if-else

 

 

 

 

 

if (age <12) {
  alert ("You're too young");
} else if (age <19) {
  alert ("Ups! You're a teenager…");
} else if (age <35) {
  alert ("Wow! You're still young");
} else {
  alert ("It’s time to take care of yourself a bit more");
}

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Estructuras de control de flujo

Estructura switch

 

 

 

 

 

var day2Print = function(){
	var x;
	var day=new Date().getDay();
		switch (day)
		{
			case 0:
			  x="Today it's Sunday";
			  break;
			case 1:
			  x="Today it's Monday";
			  break;
			case 2:
			  x="Today it's Tuesday";
			  break;
			...
			default:
			  x="Looking forward to the Weekend";
		}

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Estructuras de control de flujo

Estructura for .. in

 

 

 

 

 

  var i = 0;
  var msg= "";
  var msg2= "";
  var cities = ["Pamplona", "Estella", "Tudela","Olite", "Baztán","Burlada","Tafalla"];

  for (i in cities){
     msg = msg +" "+cities[i];
     msg2 = msg2 +" "+i;
  }

  alert(msg);
  alert(msg2);

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Estructuras de control de flujo

Estructura for

 

 

Estructura while                   Estructura do... while

 

var foo = "I am a programmer. I control your life…";
for(var i = 0; i < 5; i++) {
    alert(i+" – "+foo);
}
var result = 0;
var number = 100;
var i = 0;
while(i <= number) {
  result += i;
  i++;
}
alert(result);
do {
  code block to be executed;
} while(condition);
var result = 0;
var number = 100;
var i = 0;
do {
  result += i;
  i++;
} while  (i <= number)
alert(result);

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Funciones de JavaScript: Cadenas de texto

  • length
  • + : concatenación -> concat()
  • toUpperCase / toLowerCase
  • charAt(pos)
  • indexOf(char) / lastIndexOf(char)
  • substring(init, end)
  • split(":")

 

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Funciones de JavaScript: Arrays

  • length
  • concat()
  • join(" ")
  • pop() / push(num) -  elimina último elemento / añade final
  • shift() / unshift() - elimina primer elemento / inserta ppo
  • reverse()

 

var array1 = [1, 2, 3];
var array2 = array.concat(4, 5, 6); // array2 = [1, 2, 3, 4, 5, 6]
var array1 = [1, 2, 3];
array.reverse(); // array = [3, 2, 1]

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Funciones de JavaScript: Numéricas

  • NaN
  • Infinity
  • toFixed(decimales)
  • parseInt() / parseFloat() 

 

var num1 = 0; 
var num2 = 0;
if (isNaN(num1 / num2)){
    alert("No se permite la división entre 0")
} else {
    alert("El resultado es "+ num1 / num2)
}
var input = prompt("Enter a value: ");
var inputParsed = parseInt(input); //Si se convierte una cadena da NaN

ut 2: lenguajes de scripting

 

eugeniaperez.es

Sintaxis de JS I

  • Descarga los apuntes de JS. ->
    • Hemos repasado hasta la página 27.
  • Realiza las actividades 1-18.
    • Soluciones en el aula
  •  
  •  
  •  

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Definir funciones  en JavaScript

  • Reutilización de código
  • Mejora el mantenimiento de las aplicaciones

 

 

var addition = function(a, b){
  return a + b;
};

alert(addition(3, 5));
alert(addition(10, 7));
function addition(a, b) {
  return a + b;
}

alert(addition(3, 5));
alert(addition(10, 7));

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Definir funciones  en JavaScript

 

 

<!DOCTYPE html>
<html>
<head>
<script>
  function greet()
  {
    alert("Hello Cuatrovientos!");
  }
</script>
</head>

<body>
  <button onclick="greet()">Greeting</button>
</body>
</html>
<body>
  <button onclick="greet()">Greeting</button>
  <script type="text/javascript" src="js/ex2.js">
  </script>
</body>
function greet()
{
  alert("Hello Cuatrovientos!");
}

js/ex2.js

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Definir funciones  en JavaScript

 

 

function greet(){
    alert('hola, qué tal');
}

var greet2 = function(nombre,edad){
    alert ('hola: '+nombre+" con edad "+edad);
};

var calc = function(a, b){
  return a + b;
};

var add = function(a, b){
  toString(a + b);
};

var toString = function(cad){
    alert(cad);
};
<body>
  <button onclick="greet2('mikel',25)">Greeting</button>
  <button onclick="add(3,8)">Addition</button>
  <script type="text/javascript" src="js/ex2.js">
  </script>
</body>

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Definir funciones  en JavaScript

 

 

var operands = function(){
    var n1 = parseInt(prompt('Introduce el primer operando'));
    var n2 = parseInt(prompt('Introduce el segundo operando'));
    
    var result= n1+n2;
    
    toString(result);
};

function toString(num){
    alert("El resultado de la suma es: "+num);
}
<body>
  <button onclick="operands()">Addition</button>
  <script type="text/javascript" src="js/ex2.js">
  </script>
</body>

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Argumentos de funciones  en JavaScript

  • Número de argumentos pasado e indicado coincidentes
  • El orden SÍ importa
  • No se debe utilizar un número excesivo de argumentos
  • El nombre no tiene que coincidir

 

var greet2 = function(name,age){
    alert ('hola: '+name+" con edad "+age);
};

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Argumentos de funciones  en JavaScript

 

<p>Click the button to call a function with arguments and displays the result</p>

<button onclick="alert(calculateTotalPrice(650))">Let's calculate!</button>

<script>
var calculateTotalPrice = function(price) {
  var taxes= 1.16;
  var deliveryExpenses = 10;
  var total = ( price * taxes) + deliveryExpenses;
  return total;
};
</script>

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Ámbito de las variables: global y local

 

<script>

function createMessage() {
  var message= "The pure and simple truth is rarely pure and never simple";
}
createMessage();
alert(message);

</script>

Local: dentro de la función

solo tenemos alcance a la variable

desde su ámbito, o interiores.

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Ámbito de las variables

Variable global, que está definida en cualquier punto del programa.

 

var message= "The pure and simple truth is rarely pure and never simple"; 

function createMessage() {
  alert(message);
}

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Ámbito de las variables

Por lo tanto, si las variables se declaran dentro de la función son locales, las que no han sido definidas con var se transforman en globales. 

 

function createMessage() {
       message = "The pure and simple truth is rarely pure and never simple";
}
createMessage();
alert(message);

ut 2: lenguajes de scripting

 

eugeniaperez.es

5 Sintaxis del lenguaje 

Ámbito de las variables

El ámbito de una variable debe ser el mínimo posible. Si una variable solo es necesaria dentro de una función, no tiene sentido declararla como global.

 

ut 2: lenguajes de scripting

 

eugeniaperez.es

Objetos nativos de JS

Se utilizan directamente, sin necesidad de declararlos.

Existen 3:

  • Nativos (Object, Number, Boolean, String, etc)
  • De navegador (window, document, forms, etc)
  • Definidos por el usuario

 

ut 2: lenguajes de scripting

 

eugeniaperez.es

Objetos nativos de JS

Date:

 

 

  • getTime() / getMonth() /getFullYear() / getYear() 
  • getDate()
  • getDay() 
  • getHours()/getMinutes()/ getSeconds()/ getMilliseconds() 

 

var d = new Date();
var d = new Date(2013, 5, 1);  // 1 de Junio de 2013 (00:00:00)
var fecha = new Date(2013, 5, 1, 19, 29, 39);  // 1 de Junio de 2013 (19:29:39)

ut 2: lenguajes de scripting

 

eugeniaperez.es

Objetos nativos de JS

  • Nativos: String, Math, Number -> pág. 32
  • Navegador: Window, Document, Location, Screen, Navigator, History -> pág. 36​ 

 

 

 

 

ut 2: lenguajes de scripting

 

eugeniaperez.es

Sintaxis de JS II

  • Repasa por encima los objetos de JS: pág. 31-45
  • Revisa las actividades 19-21 de los apuntes.
    • Soluciones subidas al aula
  •  
  • Entrega->A. EntregaJS
    • 29 Septiembre 23:30
  •  
  •  

ut 2: lenguajes de scripting

 

eugeniaperez.es

DOM (Document Object Model)

Permite a los programadores web acceder y manipular las páginas HTML .

Nos proporciona una API para acceder y modificar el contenido, estructura y estilo de los elementos HTML.

DOM se ha convertido en una utilidad disponible para la mayoría de lenguajes de programación (Java, PHP, JavaScript) y cuyas únicas diferencias se encuentran

en la forma de implementarlo.

 

 

 

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

Se divide en 3 partes:

  • Núcleo del DOM
  • XML DOM
  • HTML DOM (en el que nos vamos a centrar)

 

 

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

DOM transforma todos los documentos HTML 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.

 

 

Moviendo un elemento en

otra posición en el 

DOM...

 

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

Nodos:

 

 

<html>
<head>
   <meta charset="UTF-8"/>
   <title>Página sencilla</title>
</head>
 
<body>
   <p>Esta página es <strong>muy sencilla</strong></p>
</body>
</html>

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

Nodos:

 

 

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

Nodos:

 

 

<p>Esta página es <strong>muy sencilla</strong></p>

Generaría:

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

Los tipos de nodos más habituales son:

  • Document, nodo raíz del que derivan todos los demás.
  • Element, representa cada una de las etiquetas HTML. Se trata del nodo que puede contener atributos y del que pueden derivar otros nodos.
  • Attr, atributos de las etiquetas HTML, atributo=valor.
  • Text, nodo que contiene el texto.
  • DocumentType, indica la representación del DTD de la página. Define la estructura y sintaxis XML. 

 

 

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

Lo interesante del árbol de nodos DOM, es que ofrece una manera cómoda y rápida de acceder a los distintos elementos de una página HTML de una manera programática. DOM proporciona dos métodos alternativos para acceder a un nodo específico:

  • acceso a través de sus nodos padre. 
  • acceso directo.

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

getElementsByTagName()

Elementos de la página XHTML cuya etiqueta sea igual que el parámetro que se le pasa a la función.

 

Nodo a partir del cual se realiza la búsqueda de los elementos. En este caso, como se quieren obtener todos los párrafos de la página, se utiliza el valor document.

var parrafos = document.getElementsByTagName("p");

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

La función devuelve un array con todos los nodos que cumplen la condición de que su etiqueta coincide con el parámetro proporcionado. De este modo, se puede obtener el primer párrafo de la página de la siguiente manera:

 

var primerParrafo = parrafos[0];
for(var i=0; i<parrafos.length; i++) {
  var parrafo = parrafos[i];
}

O recorrer todos párrafos de la página:

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

getElementsByName()

Busca los elementos cuyo atributo name sea igual al parámetro proporcionado. En el siguiente ejemplo, se obtiene los input con el nombre indicado:

 

First Name: <input name="fname" type="text" value="Ana"><br />
First Name: <input name="fname" type="text" value="Sara">

<script type="text/javascript">
     var inputs = document.getElementsByName("fname");
     alert(inputs[0].value);
</script>

ut 2: lenguajes de scripting

 

  Tipos de DOM 

getElementById()

Devuelve el elemento HTML cuyo atributo id coincide con el parámetro indicado en la función. Como el atributo id debe ser único para cada elemento de una misma página, la función devuelve únicamente el nodo deseado.

 

<div id="cabecera">
    <a href="/" id="logo">Logo</a>
</div>

<script type="text/javascript">
    var cabecera = document.getElementById("cabecera");
    alert(cabecera.innerHTML);
    var logo = document.getElementById("logo");
    alert(logo.innerHTML);
    alert(logo.textContent);
</script>

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

Ejemplo de uso del DOM

 

 

<!DOCTYPE html>
<html><head></head>
<body>
  <p>Example that shows how useful can be the DOM!</p>
  <div id="main">
    <p>This example demonstrates the <b>getElementsByTagName</b> method</p>
    <p>Another paragraph...</p>
  </div>
  <script>
    var x=document.getElementById("main");
    var parrafos=x.getElementsByTagName("p");
    document.write('First paragraph inside "main" is ' + parrafos[0].innerHTML);
  </script>
</body>
</html>

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

Acceder a nodos hijos

Para recuperar el primer y el último hijo se puede utilizar:

 

 

 

O comprobar el número de nodos hijo:

var doc = document.documentElement;
var obj_head = doc.children[0];
alert(obj_head.innerHTML);
var obj_body = doc.children[1];
alert(obj_body.children[0].innerHTML);
alert(doc.children.length);

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

Crear Nodos

Crear y añadir a la página un nuevo elemento HTML:

  1. Creación de un nodo de tipo Element.
  2. Creación de un nodo de tipo Text.
  3. Añadir el nodo Text como nodo hijo del nodo Element.
  4. Añadir el nodo Element a la página, en forma de nodo hijo del nodo correspondiente al lugar en el que se quiere insertar el elemento.

 

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

Crear Nodos

 

 

// Crear nodo de tipo Element
var parrafo = document.createElement(“p”);
 
// Crear nodo de tipo Text
var contenido = document.createTextNode(“Hola Mundo!”);
// Añadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);
 
// Añadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

Eliminar Nodos

En este caso, solamente es necesario utilizar la función removeChild():

 

 

var parrafo = document.getElementById(“provisional”);
parrafo.parentNode.removeChild(parrafo);
<p id=”provisional”>...</p>

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

Acceso a los atributos de un elemento

 

 

 

var enlace = document.getElementById("enlace");
alert(enlace.href); // muestra http://www...com
 
<a id="enlace" href="http://www...com">Enlace</a>

alert(enlace.id); // muestra enlace

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

Acceso a las propiedades CSS de un elemento

Se debe utilizar el atributo style:

 

 

 

Si es compuesta, se modifica un poco su nombre:

 

var imagen = document.getElementById("imagen");
alert(imagen.style.margin);
 
<img id="imagen" style="margin:0; border:0;" src="logo.png" />
var parrafo = document.getElementById("parrafo");
alert(parrafo.style.fontWeight);  // muestra “bold”

<p id="parrafo" style="font-weight: bold;">Hola</p>

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

Acceso a las propiedades CSS de un elemento

Si es compuesta, se modifica un poco su nombre:

  • font-weight se transforma en fontWeight
  • line-height se transforma en lineHeight
  • border-top-style se transforma en borderTopStyle
  • list-style-image se transforma en listStyleImage

 

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

Modificar contenido HTML:

Mediante la propiedad innerHTML: 

 

 

<p id="p1">Hello World!</p>

<script>
  document.getElementById("p1").innerHTML="Hello class!";
</script>

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

Modificar atributo HTML:

Para modificar un atributo simplemente accedemos al atributo:

 

 

<img id="image" src="white.gif">

<script>
  document.getElementById("image").src="black.jpg";
</script>

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

Modificar estilo de un elemento HTML:

Para modificar el estilo se utiliza sytle:

 

 

<p id="p2">Hello everybody!</p>

<script>
  document.getElementById("p2").style.color="blue";
</script>

<p>The paragraph above was changed by a script.</p>

ut 2: lenguajes de scripting

 

  Tipos de DOM 

Modificar estilo de un elemento HTML:

Con setAttribute:

 

 

//Modifico el valor del id del párrafo
var valorId = p2.getAttribute("id");
p2.setAttribute("id","parrafoTexto");
alert(p2.id);

// Establezco un valor en href del enlace 
document.getElementById("enlace").setAttribute("href", "http://www.w3schools.com");

// Recupero el enlace anterior
var x = document.getElementById("enlace");  

// Si el elemento tiene atributo target (es donde se abre el vínculo) se
// abra en otra ventana
if (x.hasAttribute("target")) {       
    x.setAttribute("target", "_blank");
}

Añade el atributo target="_self" al enlace

ut 2: lenguajes de scripting

 

eugeniaperez.es

  Tipos de DOM 

Modificar los estilos de un elemento:

Se utiliza className a través del selector CSS:

 

 

Por lo que se crea el estilo hidden:

 

var link= document.getElementById("enlace");
link.className = "hidden";
<style type="text/css">
   .hidden { display: none; }
</style>

ut 2: lenguajes de scripting

 

eugeniaperez.es

Sintaxis de JS II

  • Realiza las actividades 22-29 de los apuntes.
    • Soluciones en el aula
  • Haz el Test: T3. JavaScript I
  •  

...Acordaros de que tenemos una entrega...

  •  
  •  

A.Entrega JS

UT2.B

By eugenia_perez