Sintaxis de JS
eugeniaperez.es
eugeniaperez.es
4 Inclusión de código JS
eugeniaperez.es
4 Inclusión de código JS
<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!!");
eugeniaperez.es
4 Inclusión de código JS
Principalmente el código JS puede ejecutarse:
<!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>
eugeniaperez.es
4 Inclusión de código JS
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.’)
}
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>
eugeniaperez.es
4 Etiqueta no script
En estos casos, se incluye un mensaje de aviso al usuario:
<noscript>
This page requires a JavaScript-enabled browser.
</noscript>
eugeniaperez.es
5 Sintaxis del lenguaje
Aunque sí en los métodos o variables
eugeniaperez.es
5 Sintaxis del lenguaje - Comentarios
Existen dos tipos de comentarios:
// 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!!");
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>");
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');
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");
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');
}
eugeniaperez.es
5 Sintaxis del lenguaje
Constantes
Variables
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 + ".");
eugeniaperez.es
5 Sintaxis del lenguaje
Variables
var number1 = 3;
var number2 = 1;
var result = number1 + number2;
...tampoco es necesario declarar las variables.
Sí recomendable
eugeniaperez.es
5 Sintaxis del lenguaje
Variables
var lastname=”Murakami”, age=50, job=”writer”;
var lastname=”Murakami,
age=50,
job=”writer”;
eugeniaperez.es
5 Sintaxis del lenguaje
Tipos de variables
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;
eugeniaperez.es
5 Sintaxis del lenguaje
Tipos de variables
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");
eugeniaperez.es
5 Sintaxis del lenguaje
Operadores
var totalPlayers = 11;
var x = 10;
var y = 5;
eugeniaperez.es
5 Sintaxis del lenguaje
Operadores
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
eugeniaperez.es
5 Sintaxis del lenguaje
Operadores 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 ||
eugeniaperez.es
5 Sintaxis del lenguaje
Operadores Matemáticos
eugeniaperez.es
5 Sintaxis del lenguaje
Operador Ternario
Operadores Relacionales
variablename=(condition)?value1:value2
voteable=(age<18)?"Too young":"Old enough";
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 =
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
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");
}
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";
}
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);
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);
eugeniaperez.es
5 Sintaxis del lenguaje
Funciones de JavaScript: Cadenas de texto
eugeniaperez.es
5 Sintaxis del lenguaje
Funciones de JavaScript: Arrays
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]
eugeniaperez.es
5 Sintaxis del lenguaje
Funciones de JavaScript: Numéricas
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
eugeniaperez.es
Sintaxis de JS I
eugeniaperez.es
5 Sintaxis del lenguaje
Definir funciones en JavaScript
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));
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
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>
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>
eugeniaperez.es
5 Sintaxis del lenguaje
Argumentos de funciones en JavaScript
var greet2 = function(name,age){
alert ('hola: '+name+" con edad "+age);
};
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>
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.
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);
}
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);
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.
eugeniaperez.es
Objetos nativos de JS
Se utilizan directamente, sin necesidad de declararlos.
Existen 3:
eugeniaperez.es
Objetos nativos de JS
Date:
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)
eugeniaperez.es
Objetos nativos de JS
eugeniaperez.es
Sintaxis de JS II
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.
eugeniaperez.es
Tipos de DOM
Se divide en 3 partes:
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...
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>
eugeniaperez.es
Tipos de DOM
Nodos:
eugeniaperez.es
Tipos de DOM
Nodos:
<p>Esta página es <strong>muy sencilla</strong></p>
Generaría:
eugeniaperez.es
Tipos de DOM
Los tipos de nodos más habituales son:
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:
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");
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:
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>
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>
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>
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);
eugeniaperez.es
Tipos de DOM
Crear Nodos
Crear y añadir a la página un nuevo elemento HTML:
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);
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>
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
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>
eugeniaperez.es
Tipos de DOM
Acceso a las propiedades CSS de un elemento
Si es compuesta, se modifica un poco su nombre:
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>
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>
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>
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
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>
eugeniaperez.es
Sintaxis de JS II
...Acordaros de que tenemos una entrega...
A.Entrega JS