Javascript Basico – Guia de diapositivas – Generalidades

View Github Repository Open presentation in a new window

solaning-2015

See all presentation from solaning-2015

Javascript Basico – Guia de diapositivas – Generalidades

0 1

javascritp-julio-2015

On Github solaning-2015 / javascritp-julio-2015

Javascript Basico

Instructor Jose Luis Yacelly Ramos / @yacel100

Martes, 7 de julio del 2015

Guia de diapositivas

Generalidades e historia Herramientas Repaso de HTML Estructura del lenguaje Variables, declaraciones, y expresiones Tipos de datos Operadores

Generalidades

JavaScript es un lenguaje de programación, utilizado comunmente como parte de los navegadores web, este permite crear interacción con el usuario, controlar la navegación, manejar comunicación asincrona , y alterar el contenido del documento presentado . Fuente: http://es.wikipedia.org/wiki/JavaScript

historia

  • Historia El lenguaje fue inventado por Brendan Eich en la empresa Netscape Communications, que es la que desarrolló los primeros navegadores web comerciales.
  • Apareció por primera vez en el producto de Netscape llamado Netscape Navigator 2.0.
  • Tradicionalmente, se venía utilizando en páginas web HTML, para realizar tareas y operaciones en el marco de la aplicación únicamente cliente, sin acceso a funciones del servidor.
  • JavaScript se ejecuta en el agente de usuario al mismo tiempo que las sentencias van descargándose junto con el código HTML.
guerra de los navegadores: ver video

Diseño web

contenido

presentación

comportamiento

Layout engines - Rendering engine

JavaScript engines

Hello world en el navegador

						alert('Hello world');

Hello world en la consola

							console.log('Hello world');

Ejecución del código

Interpretación en una página web

Interpretación en una página web (I)

<!doctype html>
							<html>
							    <head></head>
							    <body>
							        <script>
							            alert('Hello world')
							        </script>
							    </body>
							</html>

Interpretación en una página web (II)

<!doctype html>
							<html>
							    <head></head>
							    <body>
							        <script src="ejemplo.js"></script>
							    </body>
							</html>
// ejemplo.js
							alert('Hello world')

Ejecución del código

Interpretación con firebug

Ejecución del código

Interpretación en terminal (node.js)

Fuente: http://geekytheory.com/node-js-primeros-pasos-y-hola-mundo/

herramientas

Editores de texto

  • Notepad++
  • Blog de Notas
  • Gedit
  • Sublime Text (Recomendado)

herramientas

navegadores

herramientas

Terminal

  • NODE.js(Recomendado)

Repaso de HTML

<!doctype html>
							<html>
							    <head></head>
							    <body>
							    <h1>bienvenidos</h1>
							        <p>Esto es un parrafo
							        </p>
							        	
							        <script>
							            alert('Hello world');
							        </script>
							        
							    </body>
							</html>
Guia de HTML5 se encuentra en el dropbox 
					<!DOCTYPE html >
					<html>
					<head>
					  <title>Mi primera página</title>
					</head>

					<body>

					<!-- Menú de navegación del sitio -->
					<nav>
					<ul >
					  <li><a href="#">Página principal</a>
					  <li><a href="#">pagina 2</a>
					</ul>
					</nav>
					<!-- Contenido principal -->
					<h1>Mi primera página con estilo</h1>
					<p>¡Bienvenido a mi primera página con estilo!
					<!-- Firma y fecha de la página, ¡sólo por cortesía! -->
					<address>Creada el 7 de julio de 2015<br>
					  por mí mismo.</address>
					</body>
					</html>

En realidad, no es necesario escribir el código: puedes copiarlo y pegarlo directamente en un editor.

Pagina con Estilo

					<!DOCTYPE html>
					<html>
					<head>
					  <title>Mi primera página</title>
					  <style type="text/css">
					  body {
					    color: purple;
					    background-color: #d8da3d }
					  </style>
					</head>

					<body>
					[etc.]

solo las letras que esta en color rojo puedes copiarlo y pegarlo directamente en un editor.

Referencia: ver el ejemplo completo Libro HTML: Se encuentra en el dropbox

Estructura del lenguaje

  • Comentarios
  • Literales
  • Identificadores
  • Palabras reservadas
  • Punto y coma (;)

Comentarios

Existen dos tipos de comentarios:

// comentario simple
/* comentario
						de varias
						lineas */

Literales

Números enteros: 192 Números flotantes: 1.4 Cadenas de texto: "Hola mundo", 'Hola mundo' Valores lógicos: true, false Expresiones regulares /[A-Za-z]/ Valor nulo: null Valor indefinido: undefined

Identificadores

Los identificadores en javascript comienzan con una letra, una barra baja (_), o un caracter de dolar ($).

Seguidos por letras, números, barras bajas, y caracteres de dolar

Ejemplos

var contador;
var _indice;
var $indice;
var $__$__$;

Palabras reservadas

abstract else instanceof super boolean enum int switch break export interface synchronized byte extends let this case false long throw

Mas palabras reservadas

debugger goto protected var default if public void delete implements return volatile do import short while double in static with

Todavía mas palabras reservadas

debugger goto protected var default if public void delete implements return volatile do import short while double in static with

Punto y coma (;)

Es posible el uso del caracter (;) para la separación de sentencias, sin embargo, esta tambien puede omitirse si estos están en diferentes lineas

Los interpretes de JavaScript, tratan a los fines de linea como final de una sentencia, si y solo si, la siguiente sentencia no puede interpretarse como continuación de la anterior.

Pueden verse varios criterios para tomar una decisión.

Mas información: Semicolons in JavaScript are optional

Variables,

declaraciones,

y expresiones

Tipos de datos Condicionales Iteradores Captura de excepciones

Tipos de datos

Existen dos categorias:

Tipos primitivos:

Números Cadenas de texto Valores lógicos

Tipos objeto:

Objetos Arreglos Funciones

Números

Ejemplos:

  12 // número entero en base decimal.
0345 // número entero en base octal.
0xFF // número entero en base hexadecimal.

3.141592654 // número decimal.
.234955     // número decimal.
6.023e23    // número decimal en notación exponencial.

operadores númericos

Ejemplo:

                	
                	  var a=12; var b=20;
                	console.log(a+b);

Number

Number es la representación de tipo objeto de un tipo númerico.

Math

Math es el objeto que concentra multiples constantes y funciones matematicas.

ejemplos con MATH

						
							var a = 11.2020202;
							var b = Math.round(a);
							console.log(a);
							console.log(b);

Date

Date es el objeto utilizado para la representación de fechas.

Internamente, esta representación es un número que representa una cuenta de los milisegundos transcurridos desde la fecha: 1 de enero de 1970.

Pueden verse mas sobre los sistema de tiempo en: http://en.wikipedia.org/wiki/System_time

ejemplos de date

						
							var ahora = new Date();
							var a = new Date("October 13, 2014 11:13:00");
							var b = new Date(99,5,24,11,33,0);
							var c = ahora.toDateString();

operadores

Referencia: http://www.w3schools.com/jsref/jsref_operators.asp

operadores aritméticos

Operador Símbolo Acción

Suma

+

Suma dos operandos

Resta

-

Reste el segundo operando del primero

Multiplicación

*

Multiplica los dos operandos División

/

Divide el primer operando por el segundo Resto (módulo)

%

Facilita el resto de la división entre dos operandos

operadores aritméticos

Los operadores aritméticos son binarios o unitarios. Los operadores unitarios modifican el valor al que se aplican y son:

Operador Símbolo Acción

Incremento

++

Incrementa una unidad

Disminución

--

Disminución

Menos unitario

-

Vuelve negativo un número

operadores de asignación

variable=variable operador expresión

pueden cambiarse en:

variable operador = expresión

es decir, se tiene la siguiente tabla:

Escritura compacta Escritura equivalente x += y x = x + y x -= y x = x - y x *= y x = x * y x /= y x = x / y x %= y x = x % y

operadores de Comparación

Operador Acción > Mayor que >= Mayor o igual < Menor que <= Menor o igual == Igual != Distinto

operadores Lógicos

Los operadores lógicos son (el NOT es un operador unitario):

Operador Símbolo Significado AND & AND lógico OR | OR lógico AND && AND valoración OR | | OR valoración XOR ^ OR exclusivo NOT ! Negación

Las tablas de verdad correspondientes son:

X Y X&&Y X| |Y X^Y !X 0 0 0 0 0 1 0 1 0 1 1 1 1 0 1 1 0 0 1 1 0 0 1 0
referencia:

Cadenas de texto

Puede utilizarse las comillas simples o las comillas dobles como delimitadores validos para la declaración de una variable tipo cadena de texto.

Ejemplos:

var a='cadena de texto'
var b="cadena de texto"
var c='aqui un "ejemplito"'
var d="un ejemplo 'mas'"

Procesamiento de cadenas (I)

Una cadena puede verse como un arreglo de caracteres inmutable.

Ejemplos:

var a='cadena de texto'
console.log(a[5]) // a

Funciones de cadena

var s = "hello, world"
s.charAt(0)          // => "h"
s.charAt(s.length-1) // => "d"
s.substring(1,4)     // => "ell"
s.indexOf("l")       // => 2
s.lastIndexOf("l")   // => 10
s.split(", ")        // => ["hello", "world"]
s.replace("h", "H")  // => "Hello, world"
s.toUpperCase()      // => "HELLO, WORLD"

Escapadores

\O          The NULL character
\b          Backspace
\t          Horizontal tab
\n          Newline
\v          Vertical tab
\f          Form feed
\r          Carriage return
\"          Double quote
\'          Apostrophe or single quote
\\          Backslash
\x[XX]      The Latin-1
\u[XXXX]    The Unicode character
referencia: unicode character table

Valores logicos

var a=true
var b=false

Son valores falsos los siguientes:

undefined null 0 -0 NaN ''

String

String es la representación de tipo objeto de una cadena.

Boolean

Boolean es la representación de tipo objeto de una variable lógica.

valor nulo y valor indefinido

Representan la ausencia de un valor en una variable o en el retorno de una funcion.

var a=null;
var b=undefined;
var b1 = "myVar";//definido 
var b2;//undefinido

valor Nan

Representan que no es un numero legalmente (Not a Number.

var a=isNaN(123);//false
var b=isNaN("2005/12/12");//true
var c=isNaN("hola");//true

Condicionales

Las condicionales estan definidas de la misma forma que en el lenguaje de programación Java.

if else if switch

if

if(expresion){
    sentencias
}
if(expresion){
    sentencias
}else{
    sentencias
}

else if

if(expresion){
    sentencias
}else if{
    sentencias
}else{
    sentencias
}

ejemplos

	var n = 12;	
	if (n >= 0)
  {
    console.log("Numero mayor a 0");
  }
  else
  {
  	console.log("Numero menor a 0");
  }

switch

switch(expresion){
    case 1:
        sentencias
        break
    case n:
        sentencias
        break
    default:
        sentencias
}

ejemplos

					var valor = 1;
					switch (valor) {
    case 1: console.log('uno');
            break;
    case 2: console.log('dos');
            break;
    case 3: console.log('tres');
            break;
    case 4: console.log('cuatro');
            break;
    case 5: console.log('cinco');
            break;
    default:console.log('Ingreso un valor que no esta comprendido entre 1 y 5.');
  }