AnshiG
Bienvenidos a AnshiG.!!

Conectarse

Recuperar mi contraseña


Afiliados Elite


Normales
Kimi wa Petto TOP
Pagerank

Últimos temas
» Blog de Renders!
Dom Ene 03, 2016 2:36 pm por Sakura92

» Hemos vuelto!!
Dom Ene 03, 2016 2:31 pm por Sakura92

» Actualización FEBRERO 2015
Vie Feb 27, 2015 10:22 am por Sakura92

» Cosplay (Varios)
Lun Feb 23, 2015 10:42 am por Sakura92

» Cosplay (Varios)
Lun Feb 23, 2015 10:41 am por Sakura92

» Materias favoritas... y no tanto!
Jue Feb 12, 2015 10:47 am por Sakura92

» Que mascotas tienen, tuvieron y les gustaria tener?
Jue Feb 12, 2015 10:38 am por Sakura92

» Redes sociales
Jue Feb 12, 2015 10:09 am por Sakura92

» PS3: Juegos!
Jue Feb 12, 2015 10:03 am por Sakura92

» Consolas o PC?
Jue Feb 12, 2015 9:55 am por Sakura92

» BUSQUEDA DE STAFF
Mar Feb 10, 2015 7:18 pm por Sakura92

» Requisitos y Datos
Mar Feb 10, 2015 12:03 pm por Sakura92

» Limpieza de afiliados
Mar Feb 10, 2015 9:36 am por Sakura92

» Ola ke Ase?
Lun Dic 09, 2013 8:07 pm por Tetsumi

» Guia 7: Reglamento Administracion
Vie Nov 22, 2013 1:05 pm por Sakura92

» Ideas
Vie Nov 22, 2013 1:02 pm por Sakura92

» Puntos
Vie Nov 22, 2013 12:59 pm por Sakura92

» Reglamento Soporte
Vie Nov 22, 2013 12:58 pm por Sakura92

» Reglamento Tutoriales
Vie Nov 22, 2013 12:57 pm por Sakura92

» Reglamento Galerias
Vie Nov 22, 2013 12:57 pm por Sakura92

» Reglamento Recursos
Vie Nov 22, 2013 12:56 pm por Sakura92

» Reglamento Talleres y Pedidos
Vie Nov 22, 2013 12:56 pm por Sakura92

» Incumplimientos
Vie Nov 22, 2013 12:52 pm por Sakura92

» Wings of Freedom [Elite]
Lun Sep 30, 2013 2:28 pm por Invitado

» Yugi Oh! RPG [Élite]
Miér Ago 07, 2013 2:36 am por Invitado

» OMEGA NEW WORLD [Afiliación Élite ]
Miér Jul 31, 2013 6:08 pm por Invitado

» Creando Mundos [Élite]
Vie Jul 26, 2013 12:22 am por Invitado

» World´s Inuyasha RPG [Normal]
Miér Jul 24, 2013 11:46 pm por Invitado

» Fatal Liberty Rol [Élite]
Mar Jul 16, 2013 10:30 am por Invitado

» Fairy Tail Sekai || Re-Apertura! || Afiliación Elite
Miér Jul 03, 2013 1:50 am por Invitado

» Hi(: !
Lun Jul 01, 2013 3:47 am por #Re Sound

» Hola, Hola, ¿hay alguien ahi?
Lun Jul 01, 2013 3:37 am por #Re Sound

» Bleach: Shadow Of Seireitei [Cambio de dirección]
Sáb Jun 29, 2013 11:52 am por Invitado

» Volvi... nose si para siempre pero volvi xD
Vie Jun 28, 2013 9:08 am por Sakura92

» Me extravié en el cielo, ¿qué puedo hacer?
Vie Jun 28, 2013 8:55 am por Sakura92

» Roma Antiqua {Afiliación Normal}
Dom Jun 23, 2013 3:07 pm por Invitado

» Saint Seiya Cosmos Rebellion Rol [Afiliación Élite]
Dom Jun 16, 2013 12:13 am por Invitado

» Buck Tick Fans [Élite]
Jue Jun 13, 2013 1:49 am por Invitado

» End of Silence [Cambio de dirección y botones]
Vie Mayo 31, 2013 5:54 am por Invitado

» Campamento mestizo [Afiliación Elite]
Miér Mayo 29, 2013 6:11 pm por Invitado

» Render Universe - Elite
Dom Mayo 19, 2013 3:58 pm por Invitado

» Love orange and cyan (tutorial9
Jue Mayo 16, 2013 3:51 pm por Loki

» AVISO
Jue Mayo 16, 2013 8:49 am por Sakura92

» Code Geass: Endless Dark [Élite]
Miér Mayo 01, 2013 2:22 am por Invitado

» Creative Designs (normal)
Mar Abr 30, 2013 12:48 am por Invitado

» Ultimate Inazuma Rol -Cambio de banner-
Jue Abr 25, 2013 1:26 pm por Invitado

» Buenas...
Mar Abr 16, 2013 3:58 pm por Naggar

» Actualizacion de Abril
Mar Abr 16, 2013 2:00 pm por Sakura92

» Texuras y Png hechas por mi (Sueltas) - Actu 13/04
Lun Abr 15, 2013 8:16 am por Jotaro Kujo

» AVISO DE AUSENCIA TEMPORAL
Vie Abr 12, 2013 2:46 pm por Zec



Las imagenes e historias que se posteen en este foro son de sus respectivos dueños, cada uno tendra el link correspondiente a la pagina donde lo ubico su creador originalmente.Todo el materia ya se encuentra bajo licencia por favor si quieres tomar algo comunicarse con la administración del foro, o el dueño del post.
Creative Commons License
Crear
foro
Codigos CSS-HTML-JS

APRENDO EN...
Estudio en Eternal Designs Melody Graphics School ise-graficos

TOMO RECURSOS DE...

RESEÑAS...


Propiedades Basicas Javascript: Herramientas

Ver el tema anterior Ver el tema siguiente Ir abajo

Propiedades Basicas Javascript: Herramientas

Mensaje por Sakura92 el Sáb Abr 06, 2013 7:14 pm

TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE


#005 - Herramientas

Recuerda que este tuto es parte de una serie de tutos, en la que se asume que has leído el anterior. También recuerda que se asume que manejas más o menos bien el HTML y CSS.

Este tuto te instruirá sobre varias herramientas que JavaScript nos ofrece para facilitarnos la vida. La verdad es que tendría que haberlo explicado antes, pero soy así de vueltera y olvidadiza y no son conocimientos imprescindibles para aprender todo lo anterior xD
Cabe decir que como en la mayor parte de js, todo lo que se explica aquí es case-sensitive (es decir, que distingue mayúsculas de minúsculas).

1. Tipos de contenido en JS

Javascript diferencia varios tipos de contenidos: strings, números, arrays, elementos booleanos y objetos. Veamos a algunos de ellos:

Se llama string (cordel o hilo, aunque nunca lo vi traducido para JS) a una serie de contenidos escritos entre comillas, que serán leídos por el JS como texto plano. Dentro de los strings se puede escribir HTML (es lo que hacemos para las inserciones DOM, por ejemplo) pero es importante no emplear las mismas comillas que usas para rodear el string que las que usas dentro del HTML: si rodeas al string con comillas simples (') debes escribir el HTML con comillas dobles ("). Uses lo que uses, debes definir tu equipo desde un principio y usarlo siempre así, para evitarte problemas. Tampoco debes insertar enters en los strings, ni backslashes (\): si te ves obligado a insertar comillas que no deberías, o enters, o backslashes, recurre a esta tabla de equivalencias:
¿Qué necesitas?Lo que debes usar
"\"
'\'
Enter (linebreak)\n
\\\
Los números son... números. Interpretan su valor numérico. La cuestión aquí es que no se escriben entre comillas, y sirven para realizar cuentas numéricas.

Los elementos booleanos son elementos de valor verdadero o falso, sobre los cuales hablaremos un poco más en el próximo tuto. En cuanto a los Arrays y los Objetos,... los verán a continuación Wink

2. Variables

*se traga un buda y considera cómo demonios explicar esto*
Ok. A ver. ¿Recuerdan la primaria? ¿Ecuaciones? Bueno, esto es algo parecido: tenemos una x (o variable) que puede adoptar el valor que ustedes deseen o necesiten. Esto se escribe, por ejemplo, así:
var nombre = valor;
Por ejemplo:
var color = 'azul'; >> cuando el valor es un texto, va entre comillas
var x = 0; >> cuando el valor es un número, va simple
var n = true; >> también le podemos dar valores booleanos, sin comillas
A estas variables las puedes llamar sin necesidad de emplear comillas ni nada dentro del JavaScript, por ejemplo:
Esto haría que el nombre de usuario salga antes del #wrap del foro.
var nombreuser = 'Invitado';
$(nombreuser).insertBefore('#wrap');

Sin embargo, si quiero que salga en medio de un texto, tenemos que emplear algunos conectores: emplearemos comillas para rodear el texto y + para unir a los textos con la variable:
var nombreuser = 'Invitado';
$('Hola,'+ nombreuser +', ¿cómo vas?').insertBefore('#wrap');
También puedes crear arrays o conjuntos de variables:
var colores=new Array();
colores[0]='Azul';
colores[1]='Rojo';
colores[2]='Verde';
Y si quieres llamar a alguno de estos elementos dentro del array, los llamas como variables:
colores[2]
Otra cosa que puedes crear es objetos, que te permiten tener varios pares de datos en una sola variable:
var personaje={
nombre: 'Oyuki Buenaonda',
edad: '¿22?',
trabajo: 'ser genial'
};
Como verás, va entre llaves y cada par se separa con una coma simple. Luego, para llamar a cada dato, haces simplemente:
personaje.nombre
Todo esto puede parecerte una estupidez, pero esto realmente te puede servir para muchas cosas, por ejemplo cuando quieres saber cuántas veces alguien clickeó algo, o cual es el valor de algún elemento, etc., en especial si lo combinas con lo que viene a continuación.

3. Operadores

Los operadores nos permiten realizar operaciones de todo tipo con variables y otras cosas :3 Por ejemplo:
a = 1
b = 2
c = a+b

En este caso, el valor de c será 3. Si tenemos variables con valor de texto, en cambio:
a = 'Nel Silenzio'
b = 'Skaôi'
c = a+b

El valor de c será Nel SilenzioSkaôi (sin espacios, porque luego de Silenzio no puse un espacio).
Los operadores son varios y nos permiten jugar mucho. Asumid que a = 2 y b = 4:

OperadorInterpretaciónEjemplo
+Sumaa+b = 2+4 = 6
-Restaa-b = 2-4 = -2
*Productoa*b = 2*4 = 8
/Divisióna/b = 2/4 = 0.5
++Aumentar en 1a++ = 2+1 = 3
--Disminuir en 1a-- = 2-1 = 1
=Es igual aa == 2 (verdadero)
===Es exactamente igual aa === '2' (falso)
a === 2 (verdadero)
!=Es diferente aa != 3 (verdadero)
!==Es absolutamente diferente aa !== 3 (falso)
a !== '3' (verdadero)
> Es mayor que b > a (verdadero)
< Es menor que b < a (falso)
>= Es mayor o igual quea >= b (falso)
<= Es menor o igual quea <= b (verdadero)
&&Ya = 2 && b = 4 (verdadero)
a = 0 && b = 4 (falso)
||Oa = 2 || b = 4 (verdadero)
a = 0 || b = 4 (verdadero)
!Negación!(a = 2) (falso)
!(a = 0) (verdadero

4. Funciones

Las funciones realmente no vienen mucho a cuento con los operadores y las variables peeeeero en algún lado las tengo que explicar y son muy breves para ponerlas en otro lugar. Básicamente, son grupos de códigos JS que se ejecutarán cuando tú escribas su nombre.
Forma básica de la función:
function nombre() {
código;
}

Se ejecuta cuando colocas:
nombre()
Veamos un ejemplo práctico: supongamos que tengo una función que hace que #cajita se oculte. Llamaremos a esa función muestracajita porque somos shuer cool:
function muestracajita() {
$('#cajita').show(500);
}
Es importante que esto vaya FUERA del document-ready, porque sino se ejecutará por defecto al cargar la página. Ahora supongamos que queremos que #cajita se muestre cuando hagamos click en #shalala. El código sería, esta vez DENTRO del document-ready:
$('#shalala').click(muestracajita());

Sé que este tuto os puede parecer inútil, pero les aseguro que no lo es, para nada. De hecho, más adelante creo que haré un tuto de Posibles Aplicaciones de los Tutos xDD porque individualmente ninguno sirve, pero en conjunto se pueden hacer cosas divertidas.
Nos vemos en el próximo tuto Wink cualquier duda, recuerden dejar mensaje aquí mismo.

​​​​​​​​​​​​​​​​​​​​​​​​​​
avatar
Sakura92
Webmaster
Webmaster

Mensajes : 175
Puntos : 178942
Reputación : 2
Edad : 25

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.