Curso gratis de Angular y C# .Net Core

En este curso me enfocare a combinar estas dos grandiosas tecnologías (Angular y .Net Core), crearemos un chat con lo cual aprenderemos a crear componentes en angular que se conecten a un webservice hecho en C# .Net Core.

Este curso esta en progreso, puedes seguirlo suscribiendote a mi canal aquí: canal de hdeleon.net en youtube

Para este curso necesitamos tener instalado Visual studio 2017+ y nodejs.

1.- Creación del proyecto

2.- Creación de componentes en angular

3.- Invocación de componentes, directiva ngFor

4.- Conexión a base de datos con Entity Framework

5.- Solicitudes HTTP en Angular

6.- Servicios en Angular

7.- Observables en Angular

8.- Solicitudes Post en .Net Core

9.- Solicitudes Post en Angular

2.- Variables y Funciones – Curso Básico de #javascript #2

En este capítulo aprenderemos la forma en que se hacen las variables y las funciones en javascript.

Al igual que en la mayoría de lenguajes de programación, en javascript, podemos hacer uso de variables y funciones, pero con ciertas curiosidades que lo hacen flexible, tan flexible, que podemos guardar una función en una variable; es una de las fuertes ventajas que tenemos con javascript, pero antes vamos a ver que son las variables.

Variables

Las variables está formada por un espacio de memoria y un identificar, en este espacio de memoria podemos guardar información, y para obtener esta información le ponemos un identificador.

Javascript es un lenguaje no tipado, es decir es un lenguaje flexible con los tipos de datos, una variable en javascript puede guardar un numero como un carácter, un objeto o una función sin la necesidad de darle un tipo de dato al iniciar. Esta flexibilidad nos permite programar más rápidamente, pero, no por ello es que sea la forma más formal de hacer las cosas, ya que como podemos hacer cosas rápidamente, podemos hacer cosas mal, esto lo podemos notar al momento de realizar operaciones matemáticas y cosas de modelo de negocio.

Primero vamos a ver su sintaxis viendo el siguiente código:

var variable="";
var variable19891=212121;
var $_1212asas=1.111;
unaVariableSinVarAlinicio=":)"

Una variable en javascript, debe comenzar por un carácter letra (aeiou…abc…) o guion bajo (_) o el símbolo de moneda ($), seguido por estos mismos caracteres o números; una variable no puede tener un numero al inicio, solo los caracteres antes descritos. Una variable en javascript puede tener la palabra var al inicio de esta o no puede tenerla, por estándar es mejor ponerla, aunque no es necesaria. También podemos observar que no en todas las lineas esta el punto y coma al final (;) este no es necesario solo se utiliza por estándar o por estética.

Ahora vamos a ver lo que son las funciones.

Funciones

Una función es un grupo de instrucciones que realizan un proceso. Las funciones pueden recibir datos de entrada, pueden dar datos de salida, o simplemente no regresar ni recibir nada. Veamos tres ejemplos de funcion en javascript:

function nombreFuncion(){

}
function funcionDatosDeEntrada(variable){

}
function $_f1(){
  return 1;
}

Como podemos observar la sintaxis en javascript para nombrar una función es la misma que la de una variable y para crear una función esta inicia por la palabra function seguida de su nombre, paréntesis, y si es que recibe datos de entrada entre estos paréntesis los nombramos (con la sintaxis de variable, ya que son variables), seguido de los paréntesis van llave de abertura y cerradura ({}) y dentro de estas llaves el código de la función; si es que regresa algún dato de salida, dentro de las llaves ({}) la palabra return seguida del valor.

Ejercicio

Ya que vimos la teoría, vamos a comenzar con un pequeño ejercicio en el cual veremos uno de los potenciales de javascript, como guardar funciones en las variables.

Creamos un archivo de nombre funcionEnVariable.html y en el pegamos el siguiente código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Funcion en Variable</title>

    	<script>
			//funcion que muestra un mensaje
			function muestraMensaje(funcion){

				alert(funcion());
			}
			//en esta variable guardamos una funcion, asi de simple.
			var variableFuncion=function(){ return "hola mundo";};

                        //ejecutamos la función muestraMensaje enviando la variable que guarda nuestra funcion como parametro
			muestraMensaje(variableFuncion)

        </script>
    </head>

    <body>
    </body>
</html>

Ejecutamos nuestro archivo con el navegador que sea de su agrado, y veremos que se despliegan un mensaje que dice «hola mundo». Como podemos observar en el código javascript, lo que tenemos es una función llamada muestraMensaje() que recibe un parámetro. En la linea siguiente creamos una variable de nombre variableFuncion pero a esta le asignamos un valor de función anónima (estas funciones se llaman así por que no tienen nombre, y sirven para hacer cosas demasiado dinámicas, un ejemplo son los callbacks de jquery). En la linea siguiente ejecutamos la función muestraMensaje() enviando como parámetro nuestra variable, y ya dentro de esta función utilizamos la función de javascript alert() la cual muestra un mensaje en una ventana de alerta; pero si observamos bien la función anónima se ejecuta hasta dentro la función muestraMensaje(), de esta manera estamos viendo como javascript permite guardar funciones dentro de variables y de igual forma, enviarlas por parámetro a una segunda función y ejecutarse dentro de esta.

Mas adelante veremos mas potencial de javascript respecto a variables y funciones, y una manera simple de comprender la flexibilidad con la que cuenta este lenguaje de programación.

Para ver el código ejecutándose den clic aquí.

Ir al Capitulo Siguiente (3.- Estructuras de Control).

Ir al  Capitulo Anterior (1.- Introducción a Javascript).

1.- Introducción a Javascript – Curso Básico de #Javascript #1

Javascript es un lenguaje de programación interpretado, es decir, que no ocupa compilarse, es un lenguaje que a pesar no ser Orientado a Objetos cien por ciento, es un potente lenguaje con el cual podemos realizar cosas grandiosas en los sistemas o páginas web.

El lenguaje es fácil de utilizar, ya que es débilmente tipado, sus variables no tienen tipo inmediato, por lo cual podemos crear scripts rápidamente.

Una de las ventajas en el aprendizaje de javascript es que no se necesita de instalar compiladores, ni configurar nada, basta con tener un navegador web y un editor de texto y comenzar a codificar.

Para ello podemos utilizar cualquier navegador para verificar las cosas que vamos ir haciendo, y a su vez son libres de tomar cualquier editor para ello, pueden utilizar desde block de notas, aptana, dreamweaver, sublime etc etc. Este no es ningún problema ya que en este curso solo veremos javascript sin ir más allá a un lenguaje de servidor (php, asp, jsp).

Comenzaremos con lo primero, como comienzo a poner código de javascript. Crearemos un archivo de nombre introduccion.html que contendrá el siguiente código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>introducción</title>

    </head>

    <body>
    </body>
</html>

Ahora para comenzar a introducir código de javascript vamos a poner lo siguiente dentro de la etiqueta <head>:


<script>
alert("Hola mundo")

</script>

Para que nuestro script completo quede así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>introducción</title>
 
       <script>
        document.writeln("Hola Mundo!")
       </script>
 
    </head>
 
    <body>
    </body>
</html>

Ahora damos doble clic a nuestro archivo que creamos, en caso de que ningún navegador lo abra podemos abrir primero el navegador y después arrastrar el archivo a este, eso será suficiente para ejecutarlo.

Cuando el navegador abre el script, nos mostrara algo parecido a esto:

Lo que en realidad estamos haciendo, es especificarle al navegador mediante las etiquetas <script></script> que lo que este dentro de ellas es código javascript, y lo que hace document.writeln() es escribir el texto en el navegador (después veremos más sobre el objeto document).

Existen otras 2 maneras para ejecutar código javascript, una la veremos más adelante en el capítulo de eventos, pero por ahora veamos la otra manera que es quizá la más utilizada y consiste en hacer un archivo con extensión .js y ahí poner nuestro código javascript, y después hacer referencia a este archivo desde nuestro script.

Para ello creamos un archivo de nombre pato.js en la misma ruta que nuestro archivo antes creado.

En este archivo agregamos el siguiente código:

document.writeln("Hola pato");

A continuación vamos a el archivo introducción.js y agregamos el siguiente código enseguida del anterior (ósea entre las etiquetas <head></head> pero después del anterior código creado):

<script src="pato.js" language="javascript" type="application/javascript"></script>

Y nos debe quedar nuestro archivo introducción.html así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>introducción</title>
		<script>
        document.writeln("Hola Mundo!")
        </script>
    	<script src="pato.js" language="javascript" type="application/javascript"></script>
    </head>

    <body>
    </body>
</html>

Ejecutamos nuestro archivo introducción.js en el navegador (o arrastramos) y debemos obtener lo siguiente:

hola mundo hola pato

De esta manera utilizando la etiqueta <script> pero especificando mediante su atributo src un archivo de extención js (.js) asignamos todo el código de dicho archivo a nuestro script, de esta manera podemos organizar mejor nuestro código, y no tener todo el código en un archivo. Los otros atributos de la etiqueta <script> (type y language) se utilizan por estándar, ya que al nacer javascript  (por el año de 1995) existían otros lenguajes parecidos y el navegador necesitaba saber cual es el que interpretaría, aunque hoy en día javascript ya tomo dominio total.

Para ver el código en ejecución den clic aquí.

Ir al Capitulo Siguiente (2.- Variables y Funciones).