Conectarse
Pagerank
Últimos temas
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.
Codigos CSS-HTML-JS
APRENDO EN...
TOMO RECURSOS DE...
RESEÑAS...
Propiedades Basicas Javascript: Herramientas
AnshiG :: OurHobbies :: Diseño Web :: Tutoriales :: Javascript
Página 1 de 1.
Propiedades Basicas Javascript: Herramientas
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 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
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í:
A estas variables las puedes llamar sin necesidad de emplear comillas ni nada dentro del JavaScript, por ejemplo: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
También puedes crear arrays o conjuntos de variables: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');
Y si quieres llamar a alguno de estos elementos dentro del array, los llamas como variables:var colores=new Array();
colores[0]='Azul';
colores[1]='Rojo';
colores[2]='Verde';
Otra cosa que puedes crear es objetos, que te permiten tener varios pares de datos en una sola variable:colores[2]
Como verás, va entre llaves y cada par se separa con una coma simple. Luego, para llamar a cada dato, haces simplemente:var personaje={
nombre: 'Oyuki Buenaonda',
edad: '¿22?',
trabajo: 'ser genial'
};
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.personaje.nombre
3. Operadores
Los operadores nos permiten realizar operaciones de todo tipo con variables y otras cosas :3 Por ejemplo:
Los operadores son varios y nos permiten jugar mucho. Asumid que a = 2 y b = 4: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).
Operador | Interpretación | Ejemplo |
+ | Suma | a+b = 2+4 = 6 |
- | Resta | a-b = 2-4 = -2 |
* | Producto | a*b = 2*4 = 8 |
/ | División | a/b = 2/4 = 0.5 |
++ | Aumentar en 1 | a++ = 2+1 = 3 |
-- | Disminuir en 1 | a-- = 2-1 = 1 |
= | Es igual a | a == 2 (verdadero) |
=== | Es exactamente igual a | a === '2' (falso) a === 2 (verdadero) |
!= | Es diferente a | a != 3 (verdadero) |
!== | Es absolutamente diferente a | a !== 3 (falso) a !== '3' (verdadero) |
> | Es mayor que | b > a (verdadero) |
< | Es menor que | b < a (falso) |
>= | Es mayor o igual que | a >= b (falso) |
<= | Es menor o igual que | a <= b (verdadero) |
&& | Y | a = 2 && b = 4 (verdadero) a = 0 && b = 4 (falso) |
|| | O | a = 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.
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:Forma básica de la función:
function nombre() {
código;
}
Se ejecuta cuando colocas:
nombre()
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:function muestracajita() {
$('#cajita').show(500);
}
$('#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 cualquier duda, recuerden dejar mensaje aquí mismo.
Sakura92- Webmaster
- Mensajes : 175
Puntos : 411042
Reputación : 2
Edad : 31
Temas similares
» Propiedades Basicas Javascript: Efectos
» Propiedades Basicas Javascript: Eventos
» Propiedades Basicas Javascript: Introduccion
» Propiedades Basicas Javascript: Modificaciones Via DOM
» Propiedades Basicas Javascript: Funciones Booleanas
» Propiedades Basicas Javascript: Eventos
» Propiedades Basicas Javascript: Introduccion
» Propiedades Basicas Javascript: Modificaciones Via DOM
» Propiedades Basicas Javascript: Funciones Booleanas
AnshiG :: OurHobbies :: Diseño Web :: Tutoriales :: Javascript
Página 1 de 1.
Permisos de este foro:
No puedes responder a temas en este foro.
|
|
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