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#”)


Escribir en javascript en el código de html

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

document.write("JavaScript en html");

</script>


Escribir en código de la página html

document.write( “Versión de JScript en Internet Explorer: “+

ScriptEngineMajorVersion() + "." + ScriptEngineMinorVersion() );


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>  <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>  <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


formulario web con nombre JSOperadores.aspx


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>  <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


formulario web con nombre JSOperadoresA.aspx


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);


} else { opPendiente=true;


} op=operador; nuevoDigito=true; } function borra() {

document. calc. visor.value=stack=0;

opPendiente=false; nuevoDigito=true; }

<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>  <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>

manejo de javascript c#

Documents