Manejo de Javascript c#
-
Upload
ernesto-velasco-iberri -
Category
Documents
-
view
95 -
download
3
Transcript of Manejo de Javascript c#
MANEJO DE JAVASCRIPT
Introducción
JavaScript es un lenguaje de programación creado por Netscape
Objetivo: Integrarse en HTML y facilitar la creación de páginas interactivas
El código JavaScript no necesita ser compilado, es el propio navegador el que se
encarga de interpetarlo
Con JavaScript se pueden desarrollar programa que se ejecuten en el navegador con el
objetivo de efectuar determinadas operaciones in acceder al servidor web.
Características
No tipado
Basado en objetos
JavaScript No es Java
Pocos navegadores no disponen de soporte de JavaScript
Control de visualización y contenido de los documentos html
Control de objetos del browser
Interactividad mediante formularios html
Interactividad con el usuario
Lectura y escritura de cookies
Terminación de instrucciones
o El final de una sentencia en JS se indica con punto y coma
o Su uso no es obligatorio cuando cada línea contiene una única sentencia JS
o Necesario cuando en una misma línea existen varias sentencias o cuando una
sentencia ocupa varias líneas
o No existe límite en cuanto a longitud
Ubicación del código
El código JS se puede colocar en cualquier lugar del documento HTML, aunque lo más
usual es encontrarlo en la sección <HEAD> y, en ocasiones, en la sección <BODY>
JS ignora los espacios, tabuladores y líneas en blanco que aparezcan en sentencias
JS ES UN LENGUAJE CASE SENSITIVE
COMENTARIOS.
o Comentarios de una sola línea: //
o Comentarios de bloque: /* … */
Los bloques de instrucciones JS se agrupan bajo llaves:
function FncInformacion()
{
var varAlumno=”NOMBREALUMNO”;
var varMateria=”NOMBREMATERIA”;
alert(varAlumno+ “cursa la materia ”+varMateria);
}
Nombre de identificadores
El primer carácter debe ser siempre una letra, guión subrayado _ ó símbolo del dólar $
Los demás caracteres pueden ser, letras, números, el guión de subrayado, o símbolo
de dólar, sin espacios entre ellos
JS es CASE SENSITIVE
El nombre no puede coincidir con una palabra reservada del lenguaje
Tampoco se deben definir identificadores que empiecen por dos subrayados ya que la
implementación interna de JS regularmente usa esta notación
Tipos de datos
Datos numéricos
o No hay distinción entre valores enteros y de coma flotante
o Enteros octales, hexadecimales y de coma flotante
o Infinity, -Infinity para valores numéricos que sobrepasan los límites de JS
o NaN para operaciones que esperan devolver un valor numérico y esto no
ocurre
o Definición de constantes numéricas
Cadenas de texto
o El texto se delimita mediante comillas dobles o simples y pueden contener
cualquier carácter
o Como norma: las comillas simples se utilizarán dentro de textos encerrados
entre comillas dobles, y viceversa
o Las cadenas de texto pueden concatenarse entre sí, con valores numéricos y/o
booleanos
Operador suma +
o Determinar la longitud de cadena: length
o Obtener subcadenas:
substring(inicio,fin);
substr(inicio,long);
o Obtener el carácter que ocupa la posición n: charAt(n);
o Encontrar posición de la primer ocurrencia de una subcadena de una cadena:
Método indexOf(Subcadena). Si no la encuentra devuelve el valor -1
o La última ocurrencia: lastIndexOf(subcadena)
Valores booleanos
o Valores true y false
o Utilizados generalmente para resultados en operaciones
Valores nulos
o null indica la inexistencia de valor
o No es lo mismo que cero
Declaración de variables
La palabra clave que declara una variable en JS es
o var nombreVariable
JS no tipado, es decir no se declaran tipos de datos
Mútiple declaración de variables separadas por comas
A las variables se les pueden asignar valores iniciales cuando se declaran
Uso de JavaScript en HTML
JavaScript puede ser embebido en un documento HTML de dos maneras
o Como funciones y sentencias usando elementos:
<script language=“javascript” type=“text/javascript”> ... … … </script>
o Como manejadores de eventos usando eventos HTML
Para definir el inicio de código se escribirá una de las sentencias:
Sintaxis
<script language="JavaScript"> ... </script> <script language="JavaScript1.3"> ... </script> <script language=“javascript” type=“text/javascript”> ... </script>
Ejemplo
<html><body> <script language=“javascript” type=“text/javascript”> document.write("Visual Studio .NET”); </script> </body></html>
document.write() El navegador dispone de un objeto document, el cual, además de otros métodos y
propiedades, proporciona el método write() para escribir cadenas en la ventana del
navegador
Sintaxis: document.write(cadena);
EJERCICIO 1
Crear un Sitio Web llamado WebJavaScript
Crear una Formulario Web con nombre PgJavaScript.aspx
Escribir un letrero en html : Manejo de texto con html
Ejecuta la página en el explorador y visualiza lo que imprime
Escribir un letrero en VC# con Response. Write: Manejo de letreros
con VC#
o Doble Click sobre la página de diseño, abrirá un método
llamado Page_Load
o Escribir en el método, utilice Response.Write(“Manejo de
letreros con VC#”)
Ejecuta la página en el explorador y visualiza lo que imprime
Escribir en javascript en el código de html
<script language="javascript" type="text/javascript">
document.write("JavaScript en html");
</script>
Ejecuta la página en el explorador y visualiza lo que imprime
Escribir en código de la página html
document.write( “Versión de JScript en Internet Explorer: “+
ScriptEngineMajorVersion() + "." + ScriptEngineMinorVersion() );
Ejecuta la página en el explorador y visualiza lo que imprime
EJERCICIO 2
USO DE VARIABLES, IDENTIFICADORES, CONSTANTES JS
1. En el sitio web WebJavaScript, creado anteriormente, crear un nuevo
formulario web con nombre JSIdentificadores.aspx
2. Crear el siguiente formulario
Especificaciones:
Combinar código HTML con JavaScript.
El título tiene fondo azul y texto blanco.
El segundo titular tiene color verde.
El encabezamiento de la primera tabla tiene fondo azul claro.
El encabezamiento de la segunda tabla tiene fondo verde claro.
LOS VALORES NUMÉRICOS Y CADENAS SE DECLARAN CON var
Los valores de los numéricos tienen color azul.
Los valores de la cadena tienen color rojo.
El siguiente es el código del ejercicio anterior, favor de solamente comparar o
ayudarse de él para la realización del ejercicio
<html> <head> <title>Práctica 1 - JavaScript</title> <script language=“javascript” type=“text/javascript”> var AI="<font color=blue>", AF="</font>"; // Inicio y Fin de color de fuente azul. var RI="<font color=red>", RF="</font>"; // Inicio y Fin de color de fuente rojo. var entero=45; var octal=045; var hexadecimal=0x45; var flotante=45.45e+45; var masInfinito=Infinity; var menosInfinito=-Infinity; var maxValor=Number.MAX_VALUE; var minValor=Number.MIN_VALUE; var cadena="En un lugar de la Mancha de cuyo nombre no quiero acordarme..."; var booleano=true; var nulo=null; </script> </head> <body> <center> <h1 style="background:blue; color:white;"> Práctica con Javascript </h1> <h2><font color=green>Variables, identificadres, constantes JS, algunos métodos de cadenas</font></h2> </center> <hr align=center> <table border=2 align=center width=70%> <tr><td align=center bgcolor=lightblue><br><b>DISTINTOS VALORES NUMÉRICOS</b><br></td></tr> <tr><td><ul> <!-- Código JavaScript que completa al HTML --> <script language=“javascript” type=“text/javascript”> document.write("<tr><td bgcolor=#c0c0c0><li>Entero con valor 45: "+ AI + entero + AF + "</td></tr>"); document.write("<tr><td><li>Octal con valor 045: "+ AI + octal +AF + "</td></tr>"); document.write("<tr><td bgcolor=#c0c0c0><li>Hexadecimal con valor 0x45: "+ AI + hexadecimal + AF + "</td></tr>"); document.write("<tr><td><li>Coma flotante con valor 45.45e+45: " + AI + flotante + AF + "</td></tr>"); document.write("<tr><td bgcolor=#c0c0c0><li>Constante Más Infinito: "+ AI + masInfinito + AF + "</td></tr>"); document.write("<tr><td><li>Constante Menos Infinito: "+ AI + menosInfinito + AF + "</td></tr>"); document.write("<tr><td bgcolor=#c0c0c0><li>Constante Máximo valor: "+ AI + maxValor + AF + "</td></tr>"); document.write("<tr><td><li>Constante Mínimo valor: "+ AI + minValor + AF + "</td></tr>"); document.write("<tr><td bgcolor=#c0c0c0><li>Cadena de texto: "+ AI + cadena + AF + "</td></tr>"); document.write("<tr><td><li>Valor Booleano verdadero: "+ AI + booleano + AF + "</td></tr>"); document.write("<tr><td bgcolor=#c0c0c0><li>Valor Nulo: "+ AI + nulo + AF + "</td></tr>"); </script> </ul></td></tr> </table> <p> <table border=2 align=center width=70%> <tr><td align=center bgcolor=lightgreen><br><b>TRABAJANDO CON CADENAS DE TEXTO</b><br></td></tr> <tr><td><ul> <script language=“javascript” type=“text/javascript”> document.write("<tr><td bgcolor=#c0c0c0><li>Cadena de texto: "+ RI + cadena + RF + "</td></tr>"); document.write("<tr><td><li>Longitud de la cadena: "+ RI + cadena.length + RF + "</td></tr>"); document.write("<tr><td bgcolor=#c0c0c0><li>Subcadena con SUBSTRING desde la posición 5 a la 8:" + RI + cadena.substring(5, 8) + RF + "</td></tr>"); document.write("<tr><td><li>Subcadena con SUBSTR desde la posición 5 a la 8:" + RI + cadena.substr(5, 3) + RF + "</td></tr>"); document.write("<tr><td bgcolor=#c0c0c0><li>¿Está la subcadena QUIJOTE?: "+ RI + cadena.indexOf("QUIJOTE") + RF + "</td></tr>"); document.write("<tr><td><li>¿Está la subcadena ancha?: "+ RI + cadena.indexOf("ancha") + RF + "</td></tr>"); document.write("<tr><td bgcolor=#c0c0c0><li>Tipo de la variable cadena: "+ RI + typeof cadena + RF + "</td></tr>"); </script> </ul></td></tr> </table> <hr align=center> <!-- Para navegadores que no soportan JavaScript --> <noscript> <center> <font size=+2>ATENCIÓN: Su navegador no soporta JavaScript.</font> <hr align=center>
<br><p><br><p> <font color=red> Si está usando Netscape Navigator, puede activarlo en Edición - Preferencias - Avanzado. </font> </center> </noscript> <br><p> <u>Especificaciones:</u> <font size=-1> <ul> <li><i>Combinar código HTML con JavaScript.</i> <li><i> El título tiene fondo azul y texto blanco.</i> <li><i>El segundo titular tiene color verde.</i> <li><i>El encabezamiento de la primera tabla tiene fondo azul claro.</i> <li><i>Los valores de los numéricos tienen color azul.</i> <li><i>El encabezamiento de la segunda tabla tiene fondo verde claro.</i> <li><i>Los valores de la cadena tienen color rojo.</i> </ul> </font> </body> </html>
Existen secuencias de escape
Ámbito de variables Global o local
Global. Definidas fuera del ámbito de una función, a las que se puede acceder desde
cualquier parte del código
Locales. Las definidas dentro del ámbito de una función y sólo accesibles desde su
ámbito local.
Ejemplo
Operadores Operadores aritméticos
Operadores lógicos
Operadores de comparación
Operador condicional
Operadores de bit
Operadores de asignación
Otros operadores
Operadores aritméticos
Operadores lógicos
Operadores de comparación
Reglas de igualdad
Con el operador == considerar las reglas de comparación siguientes:
o Si uno de los valores es null y el otro undefined se devuelve true
o Si los tipos de los dos valores a comparar difieren, se intenta convertir uno de ellos
al tipo de otro
Si uno es numérico y el otro cadena, se convierte la cadena a numérico
Si uno es numérico y el otro booleano, true se convierte a 1 y false a 0
Si uno es un objeto y el otro es un número o cadena, se convierte el objeto
a su equivalente primitivo
Operadores bit
Operadores de asignación
Operador typeof
Operador unario que devuelve, en forma de cadena de texto, el tipo del objeto nombrado
Posibles valores devueltos: number, string, boolean, objecto, function, undefined
new
Objetos y arrays no se pueden crear directamente dando valor a la variable
El operador new permite crear estos objetos
Sintaxis: new constructor()
Ejemplo:
o var fecha = new Date();
o var meses = new Array();
delete
Este operador borra el array especificado o deja indefinido el objeto
Ejemplo:
my.fecha = new Date(); //Objeto fecha
my.fiesta = my.fecha //Referencia al objeto
delete my.fecha; //undefined
document.write(my.fiesta) //Correcto
Funciones Conjunto de sentencias JS que realizan alguna tarea específica y, opcionalmente,
devuelven un valor
Elementos de una función:
o El identificador de función: function
o El nombre de la función
o La lista de argumentos
o Conjunto de sentencias que la definen
Definición de funciones
o Las funciones pueden definirse en cualquier parte de la página html
o Por lo general en la sección <head>
Sintaxis
function NombreFuncion (par1, par2,…)
{
[return expresión:]
}
function elevar (num, exp) {
var resul=1;
for (var i=0; i<exp; i++)
resul *= num;
return resul;
}
Evento onclick() A los elementos de un formulario, Ejemplo: botones, se les puede asociar para
interaccionar con el usuario.
Se dispara cuando el ratón hace click sobre el objeto
Sintaxis
<input type=button name= btnFncHtml onclick ="miFuncion();">
EJERCICIO 3
1. En el sitio web WebJavaScript, creado anteriormente, crear un nuevo
formulario web con nombre JSOperadores.aspx
2. Crear el siguiente formulario
3. Para poder realizar las operaciones requiere de una función de
JavaScript llamada eval
4.
5. Especificaciones
Los posibles errores, tales como 5 + [EXE], no se contemplarán.
La tecla de BORRAR pondrá el visor sin contenido.
El resultado de la operación sólo se visualizará al pulsar [EXE]
Las sucesivas operaciones +, -, ..., se visualizarán como expresión. Ej.: 5+2-3/4...
El siguiente es el código del ejercicio anterior, favor de solamente comparar o ayudarse de él para la realización del ejercicio <html> <head> <title>Práctica - JavaScript</title> <style type="text/css"> td {font-family:courier;} </style>
<script language=“javascript” type=“text/javascript”> function disp(digito) { var tecla=(digito=='CLR') ? document.calc.visor.value="" : document.calc.visor.value += digito; } function total() {
document.calc.visor.value=eval(document.calc.visor.value);
} </script> </head> <body> <center> <h1 style="background:blue; color:white;"> Práctica 2 con Javascript </h1> <h2><font color=green>CALCULADORA DIGITAL<br>Básica</font></h2> </center> <hr align=center>
<form name= calc >
<table bgcolor=aliceblue border=2 align=center> <tr>
<td colspan=5 align=right><input type=text name= visor value=""></td>
</tr> <tr> <td><input type=button name=b7 value=" 7 " onclick="disp(7);"></td> <td><input type=button name=b8 value=" 8 " onclick="disp(8);"></td> <td><input type=button name=b9 value=" 9 " onclick="disp(9);"></td> <td colspan=2><input type=button name=bC value="BORRAR" onclick="disp('CLR');"></td> </tr> <tr> <td><input type=button name=b4 value=" 4 " onclick="disp(4);"></td> <td><input type=button name=b5 value=" 5 " onclick="disp(5);"></td> <td><input type=button name=b6 value=" 6 " onclick="disp(6);"></td> <td><input type=button name=bMult value=" * " onclick="disp('*');"></td> <td><input type=button name=bDiv value=" / " onclick="disp('/');"></td> </tr> <tr> <td><input type=button name=b1 value=" 1 " onclick="disp(1);"></td> <td><input type=button name=b2 value=" 2 " onclick="disp(2);"></td> <td><input type=button name=b3 value=" 3 " onclick="disp(3);"></td> <td><input type=button name=bMas value=" + " onclick="disp('+');"></td> <td><input type=button name=bMenos value=" - " onclick="disp('-');"></td> </tr> <tr> <td><input type=button name=b0 value=" 0 " onclick="disp(0);"></td> <td><input type=button name=bPunto value=" . " onclick="disp('.');"></td> <td><input type=button name=bExe value="EXE" onclick="total();"></td> <td><input type=button name=bExp value=" ^ " onclick="disp('^');"></td> <td><input type=button name=bMod value="MOD" onclick="disp('%');"></td> </tr> </table> </form> <hr align=center> <!-- Para navegadores que no soportan JavaScript --> <noscript>
<center> <font size=+2>ATENCIÓN: Su navegador no soporta JavaScript.</font> <hr align=center> <br><p><br><p> <font color=red> Si está usando Netscape Navigator, puede activarlo en Edición - Preferencias - Avanzado. </font> </center> </noscript> <br><p> <u>Especificaciones:</u> <font size=-1> <ul> <li><i>Los posibles errores, tales como 5 + [EXE], no se contemplarán.</i> <li><i>La tecla de BORRAR pondrá el visor sin contenido.</i> <li><i>El resultado de la operación sólo se visualizará al pulsar [EXE]</i> <li><i>Las sucesivas operaciones +, -, ..., se visualizarán como expresión. Ej.: 5+2-3/4...</i> </ul> </font> </body> </html>
EJERCICIO 4
1. En el sitio web WebJavaScript, creado anteriormente, crear un nuevo
formulario web con nombre JSOperadoresA.aspx
2. Crear el siguiente formulario
3. Especificaciones
Los posibles errores, tales como 5 + [EXE], no se contemplarán.
La tecla de BORRAR pondrá el visor sin contenido.
El resultado de la operación sólo se visualizará al pulsar [EXE]
Las sucesivas operaciones +, -, ..., se visualizarán como expresión. Ej.: 5+2-3/4...
La tecla BORRAR pondrá el visor con el valor cero.
Cada vez que se pulse una operación, los siguiente dígitos reemplazarán a los
existentes en el visor.
Implementar la funcionalidad de X^Y.
El siguiente es el código del ejercicio anterior, favor de solamente comparar o
ayudarse de él para la realización del ejercicio
<html> <head> <title>Práctica 2b - JavaScript</title> <style type="text/css"> input {font-family:courier;} </style>
<script language=“javascript” type=“text/javascript”> /* ---------------------------------------------- --- Variables Globales --- ---------------------------------------------- */ var stack=0; // Pila de las operaciones en curso. var nuevoDigito=true; // Flag que indica si se espera nuevo dígito. var opPendiente=false; // Flag que indica si hay operación en curso. var op='+'; // Último operador introducido. function disp(digito) { if (!nuevoDigito) {
document.calc.visor.value=document. calc. visor.value+digito;
} else {
stack=parseFloat(document. calc. visor.value);
document. calc. visor.value=digito;
nuevoDigito=false; } } function oper(operador) { if (opPendiente) { opera(operador);
stack=parseFloat(document. calc. visor.value);
} else { opPendiente=true;
stack=parseFloat(document. calc. visor.value);
} op=operador; nuevoDigito=true; } function borra() {
document. calc. visor.value=stack=0;
opPendiente=false; nuevoDigito=true; }
function total() {
var valorActual=parseFloat(document. calc. visor.value);
opera(op); stack=0; opPendiente=false; nuevoDigito=true; } function opera(operador) {
var valorActual=parseFloat(document. calc. visor.value);
switch (operador) { case 'EXP':
document. calc. visor.value=elevar(stack, valorActual);
break; default:
document. calc. visor.value=eval(stack + operador + valorActual);
} } function elevar(num, exp) { var resul=1; for (var i=0; i<exp; i++) resul *= num; return parseFloat(resul); } </script> </head> <body> <center> <h1 style="background:blue; color:white;"> Práctica 2b con Javascript </h1> <h2><font color=green>CALCULADORA DIGITAL<br>Completa</font></h2> </center> <hr align=center>
<form name= calc >
<table bgcolor=aliceblue border=2 align=center> <tr>
<td colspan=5 align=right><input type=text name= visor size=25 value="0"></td>
</tr> <tr> <td><input type=button name=b7 value=" 7 " onclick="disp(7);"></td> <td><input type=button name=b8 value=" 8 " onclick="disp(8);"></td> <td><input type=button name=b9 value=" 9 " onclick="disp(9);"></td> <td colspan=2><input type=button name=bC value="BORRAR" onclick="borra();"></td> </tr> <tr> <td><input type=button name=b4 value=" 4 " onclick="disp(4);"></td> <td><input type=button name=b5 value=" 5 " onclick="disp(5);"></td> <td><input type=button name=b6 value=" 6 " onclick="disp(6);"></td> <td><input type=button name=bMult value=" * " onclick="oper('*');"></td> <td><input type=button name=bDiv value=" / " onclick="oper('/');"></td> </tr> <tr> <td><input type=button name=b1 value=" 1 " onclick="disp(1);"></td> <td><input type=button name=b2 value=" 2 " onclick="disp(2);"></td> <td><input type=button name=b3 value=" 3 " onclick="disp(3);"></td> <td><input type=button name=bMas value=" + " onclick="oper('+');"></td> <td><input type=button name=bMenos value=" - " onclick="oper('-');"></td> </tr> <tr> <td><input type=button name=b0 value=" 0 " onclick="disp(0);"></td> <td><input type=button name=bPunto value=" . " onclick="disp('.');"></td>
<td><input type=button name=bExe value="EXE" onclick="total();"></td> <td><input type=button name=bExp value="X^Y" onclick="oper('EXP');"></td> <td><input type=button name=bMod value="MOD" onclick="oper('%');"></td> </tr> </table> </form> <hr align=center> <!-- Para navegadores que no soportan JavaScript --> <noscript> <center> <font size=+2>ATENCIÓN: Su navegador no soporta JavaScript.</font> <hr align=center> <br><p><br><p> <font color=red> Si está usando Netscape Navigator, puede activarlo en Edición - Preferencias - Avanzado. </font> </center> </noscript> <br><p> <u>Especificaciones (versión básica):</u> <font size=-1> <ul> <li>Los posibles errores, tales como 5 + [EXE], no se contemplarán. <li>La tecla de BORRAR pondrá el visor sin contenido. <li>El resultado de la operación sólo se visualizará al pulsar [EXE] <li>Las sucesivas operaciones +, -, ..., se visualizarán como expresión. Ej.: 5+2-3/4... </ul> </font> <hr color=red> <u>Nuevas especificaciones (versión completa):</u> <font size=-1> <ul> <li>La tecla BORRAR pondrá el visor con el valor cero. <li>Cada vez que se pulse una operación, los siguiente dígitos reemplazarán a los existentes en el visor. <li>Implementar la funcionalidad de X^Y. </ul> </font> </body> </html>