JAVASCRIPT

PROGRAMACION DE LADO DEL CLIENTE

¿Qué es JavaScript?

JavaScript es un lenguaje de programación que los

desarrolladores utilizan para hacer páginas web
interactivas. Desde actualizar fuentes de redes
sociales a mostrar animaciones y mapas
interactivos, las funciones de JavaScript pueden
mejorar la experiencia del usuario de un sitio web.
Como lenguaje de scripting del lado del servidor, se
trata de una de las principales tecnologías de la
World Wide Web. Por ejemplo, al navegar por
Internet, en cualquier momento en el que vea un
carrusel de imágenes, un menú desplegable “click-
to-show” (clic para mostrar), o cambien de manera
dinámica los elementos de color en una página web,
estará viendo los efectos de JavaScript.
 ¿Cómo funciona JavaScript?
Todos los lenguajes de programación funcionan mediante la traducción de sintaxis similar a la del inglés a
código de máquina, que posteriormente el sistema operativo se encarga de ejecutar. JavaScript se clasifica
principalmente como un lenguaje de scripting o interpretado. El código JavaScript es interpretado, es decir,
directamente traducido a código de lenguaje de máquina subyacente mediante un motor de JavaScript. En el
caso de otros lenguajes de programación, un compilador se encarga de compilar todo el código en código de
máquina en un paso diferente. En consecuencia, todos los lenguajes de scripts son lenguajes de
programación, pero no todos los lenguajes de programación son lenguajes de scripts.
•HTML es el lenguaje de marcado que usamos para
estructurar y dar significado a nuestro contenido web, por
ejemplo, definiendo párrafos, encabezados y tablas de
datos, o insertando imágenes y videos en la página.

•CSS es un lenguaje de reglas de estilo que usamos para

aplicar estilo a nuestro contenido HTML, por ejemplo,
establecer colores de fondo y tipos de letra, y distribuir
nuestro contenido en múltiples columnas.

•JavaScript es un lenguaje de secuencias de comandos que

te permite crear contenido de actualización dinámica,
controlar multimedia, animar imágenes y prácticamente
todo lo demás. (Está bien, no todo, pero es sorprendente lo
que puedes lograr con unas pocas líneas de código
JavaScript).
PASO 1.

Las tres capas se superponen muy bien. Tomemos una

etiqueta de texto simple como ejemplo. Podemos marcarla
usando HTML para darle estructura y propósito:
<p>Player 1: Chris</p>

                       
PASO 2.

Luego, podemos agregar algo de CSS a la mezcla para que

se vea bien:
p { font-family: 'helvetica neue', helvetica, sans-serif;
                       
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
border: 2px solid rgba(0,0,200,0.6);
background: rgba(0,0,200,0.3);
color: rgba(0,0,200,0.6);
box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
border-radius: 10px;
padding: 3px 10px;
display: inline-block;
cursor: pointer; }
PASO 3.

Y finalmente, podemos agregar algo de JavaScript para

implementar un comportamiento dinámico:
                       
EJEMPLO 1
Sangría y presentación
La sangría en la programación informática, es una manera de estructurar el código para
hacerlo más legible. Las instrucciones son priorizadas en varios niveles y espacios de usos o
lengüetas para desplazar a la derecha y crear una jerarquía. Un ejemplo de código sangrado:
Comentarios

Los comentarios son anotaciones realizadas por el desarrollador para explicar el

funcionamiento de un script, una instrucción o incluso un grupo de instrucciones. Los
comentarios no interfieren con la ejecución de un script.

Hay dos tipos de comentarios: los de fin de línea y los multilínea.

Javascript externo

Es posible, y conveniente escribir el código

JavaScript en un archivo externo con la
extensión. Js. Este archivo se llama desde la
página web mediante el elemento <script> y
su atributo src que contiene la dirección URL
del archivo. js.
 VARIABLES
Una variable es un espacio de almacenamiento, para guardar cualquier
tipo de dato o cadena de caracteres, además de un valor numérico o
estructuras específicas.

Características:
• Solo puede contener caracteres alfanuméricos.
• Letras de la A – Z a – z
• Números del 0 al 9
• Guion Bajo (_)
• Signo ($)
• No usar palabras reservadas, por ejemplo var, time, date.
 VARIABLES

JavaScript es un lenguaje sensible en las

denominaciones, hace diferencia entre Mayúsculas y
Minúsculas, ejemplo:

var miVariable;
var mivariable;
var MIVARIABLE;
 VARIABLES

Para signar un valor a una variable lo hacemos

utilizando el signo = seguido del valor numérico o de
un texto escrito entre comillas o apostrofes, ejemplo

var miVariable=5;
var mivariable=10.12;
var MIVARIABLE=‘juan Hernández’;
 VARIABLES

JavaScript es un lenguaje de tipado dinámicamente.

Esto significa, generalmente, que cualquier declaración de variables se hace con

la palabra clave var independientemente de su contenido.

En Javascript, nuestras variables son tipadas dinámicamente, lo que significa

que puedes asignarle texto primero y luego borrarlo y poner un número
cualquiera y sin restricciones.
 VARIABLES

El tipo numérico (número): representa cualquier número, ya sea un

entero, un número negativo, en notación científica, etc.
Para asignar un tipo numérico a una variable, sólo tienes que escribir el
número var numero = 5; Al igual que muchos lenguajes, JavaScript
reconoce varios formatos para los números, como por ejemplo escribir
var numero = 5.5 o en notación científica var número = 3.65 e5, o
escribir el número hexadecimal, var numero= 0x391
 VARIABLES

Cadenas de caracteres (alias string): Este tipo representa

texto. Puede asignarse de dos maneras diferentes.
var text1 = "Mi primer texto" / / Con comillas
var text2 = 'Mi segundo mensaje' / / Con apóstrofos
Es importante tener en cuenta que si escribes:
miVariable var = '2', el tipo de esta variable es cadena de
caracteres y no un tipo numérico.
 VARIABLES

Booleanos (booleano): son un tipo particular de que se tratará

más adelante. Mientras tanto, en pocas palabras, un tipo
booleano permite dos estados verdadero o falso. Estos dos
estados se puede escribir como sigue:

var EsVerdadero = true;

var EsFalso = false;
OPERADORES ARITMÉTICOS
 OPERADORES ARITMÉTICOS
Estos son la base para todos los cálculos
y son cinco.

El último operador, módulo, es

simplemente el resto de una división. Por
ejemplo, si se divide 5 entre 2 se tiene
resto 1, que es el módulo
 OPERADORES ARITMÉTICOS
Algunos cálculos
sencillos
var resultado = 3 + 2;
alert (resultado); / / Muestra ?
Así que puedes hacer cálculos con dos
números, es bueno, pero con dos
variables que contienen números en sí es
más útil:
var número1=3, número2 = 2,
resultado; resultado = numero1 *
numero2;
alert (resultado); / / Muestra: ?
 OPERADORES ARITMÉTICOS
Podemos ir aún más lejos al escribirlo como cálculos con operadores múltiples y
variables:

var divisor = 3, resultado1, resultado2, resultado3;

resultado1 = (16 + 8) / 2 - 2;
resultado2 = resultado1 / divisor;
resultado3 = resultado1 % divisor;
alerta (resultado2) / / Resultado de la división: ?