miércoles, 3 de febrero de 2016

Métodos String

Los métodos string nos ayudan a trabajar con textos.
Del contenido del capítulo JS String Methods W3Schools.

Ejercicio 1. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Métodos String</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
</head>
<body>
<h2>El método <i>indexOf()</i> devuelve la primera posición del primer carácter de un string dentro de otro string.</h2>
<p id="p1">Por favor, localiza dónde está "localiza".</p>
<button onclick="myFunction()">Púlsame</button>
<p id="demo">Mostrar el resultado aquí</p>
<script>
function myFunction(){
var txt=document.getElementById("p1").innerHTML;
var pos=txt.indexOf("localiza");
document.getElementById("demo").innerHTML= pos;
}
</script>
</body>
</html>

Ejercicio 2.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Métodos String</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
</head>
<body>
<h2>El método <i>lastIndexOf()</i> devuelve la última posición del primer carácter de un string dentro de otro string.</h2>
<p id="p1">Por favor, localiza dónde está "localiza".</p>
<button onclick="myFunction()">Púlsame</button>
<p id="demo">Mostrar el resultado aquí</p>
<script>
function myFunction(){
var txt=document.getElementById("p1").innerHTML;
var pos=txt.lastIndexOf("localiza");
document.getElementById("demo").innerHTML= pos;
}
</script>
</body>
</html>

Ejercicio 3. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Métodos String</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
</head>
<body>
<h2>El método <i>search()</i> busca la posición del primer carácter de un string dentro de otro.</h2>
<p id="p1">Por favor, localiza dónde está "localiza".</p>
<button onclick="myFunction()">Púlsame</button>
<p id="demo">Mostrar aquí el resultado</p>
<script>
function myFunction(){
var txt=document.getElementById("p1").innerHTML;
var pos = txt.search("localiza");
document.getElementById("demo").innerHTML=pos;
}
</script>
</body>
</html>

Ejercicio 4. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Métodos String</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
</head>
<body>
<h2>El método <i>slice()</i>, extrae una porción de string y lo muestra como otro string.</h2>
<p>Primer parámetro: <b>posición inicial</b></p>
<p>Segundo parámetro: <b>posición final</b> (no incluida en la extracción)</p>
<p id="demo"></p>
<script>
var str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.slice(7,13);
</script>
</body>
</html>

Ejercicio 5.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Métodos String</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
</head>
<body>
<h2>Cuando el parámetro es negativo se cuenta desde el final.</h2>
<p id="demo"></p>
<script>
var str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.slice(-12,-6);
</script>
</body>
</html>

Ejercicio 6. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Métodos String</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
</head>
<body>
<h2>Si no hay segundo parámetro, se extrae hasta el final.</h2>
<p id="demo"></p>
<script>
var str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.slice(7);
</script>
</body>
</html>

Ejercicio 7. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Métodos String</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
</head>
<body>
<h2>O contando desde el final...</h2>
<p id="demo"></p>
<script>
var str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.slice(-12);
</script>
</body>
</html>

Ejercicio 8.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Métodos String</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
</head>
<body>
<h2>El método <i>substring()</i> es muy parecido al <i>slice()</i>.</h2>
<p>La única diferencia es que <i>substring()</i> no admite parámetros negativos.</p>
<p id="demo"></p>
<script>
var str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substring(7,13);
</script>
</body>
</html>

Ejercicio 9. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Métodos String</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
</head>
<body>
<h2>El método <i>substr()</i> es similar al <i>slice()</i>.</h2>
<p>La diferencia es que el segundo parámetro indica la longitud, no la posición.</p>
<p id="demo"></p>
<script>
var str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(7,6); //empieza en la posición 7 y cuenta con seis caracteres
</script>
</body>
</html>

Ejercicio 10. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Métodos String</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
</head>
<body>
<h2>El método <i>replace()</i> reemplaza el string del primer parámetro por el segundo.</h2>
<p>Reemplazar "Microsoft" con "W3Schools" en el siguiente párrafo:</p>
<button onclick="myFunction()">Púlsame</button>
<p id="demo">Por favor, visite Microsoft!</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace("Microsoft","W3Schools");
    document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

Ejercicio 11.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Métodos String</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
</head>
<body>
<h2>El método <i>str.replace()</i> para todas las coincidencias.</h2>
<p>Reemplazar "Microsoft" con "W3Schools" siempre que sea posible.</p>
<button onclick="myFunction()">Púlsame</button>
<p id="demo">Por favor, visite Microsoft y todos los stands de Microsoft.</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace(/Microsoft/g,"W3Schools");
    document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

Ejercicio 12. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Métodos String</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
</head>
<body>
<h2>Convertir a mayúsculas.</h2>
<p>El método <i>toUpperCase()</i>.</p>
<button onclick="myFunction()">Púlsame</button>
<p id="demo">¡Hola Mundo!</p>
<script>
function myFunction() {
    var text = document.getElementById("demo").innerHTML;
    document.getElementById("demo").innerHTML = text.toUpperCase();
}
</script>
</body>
</html>

Ejercicio 13. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Métodos String</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
</head>
<body>
<h2>Convertir a minúsculas.</h2>
<p>El método <i>toLowerCase()</i>.</p>
<button onclick="myFunction()">Púlsame</button>
<p id="demo">¡Hola Mundo!</p>
<script>
function myFunction() {
    var text = document.getElementById("demo").innerHTML;
    document.getElementById("demo").innerHTML = text.toLowerCase();
}
</script>
</body>
</html>

Ejercicio 14.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Métodos String</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
</head>
<body>
<h2>El método <i>concat()</i> une dos o más strings.</h2>
<p id="demo"></p>
<script>
var text1 = "¡Hola";
var text2 = "Mundo!";
document.getElementById("demo").innerHTML = text1.concat(" ",text2);
</script>
</body>
</html>

Ejercicio 15. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Métodos String</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
</head>
<body>
<h2>El método <i>charAt()</i> extrae el carácter en la posición especificada en el parámetro</h2>
<p id="demo"></p>
<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str.charAt(0);
</script>
</body>
</html>

Ejercicio 16. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Métodos String</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
</head>
<body>
<h2>El método <i>charCodeAt()</i> devuelve el código unicode de la posición especificada.</h2>
<p id="demo"></p>
<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str.charCodeAt(0);
</script>
</body>
</html>

Ejercicio 17.
Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Métodos String</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
</head>
<body>
<h2>Convertir <i>string</i> en array con el método <i>split()</i>.</h2>

 <button onclick="myFunction()">Púlsame</button>

 <p id="demo"></p>

 <script>
function myFunction() {
    var str = "a,b,c,d,e,f";
    var arr = str.split(",");
    document.getElementById("demo").innerHTML = arr[0];
}
</script>
</body>
</html>

Ejercicio 18. Este es el código exacto del documento que se muestra:
<!DOCTYPE html>
<html>
<head>
<title>Métodos String</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
</head>
<body>
<h2>Método <i>split()</i> sin contenido en el separador.</h2>
<p id="demo"></p>
<script>
var str = "BIENVENIDO";
var arr = str.split("");
var text = "";
var i;
for (i = 0; i < arr.length; i++) {
    text += arr[i] + "<br>"
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Publicado por en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)