¿Qué es Javascript?

Javascript es un lenguaje de programación que permite a los creadores de paginas WEB insertar acciones en sus páginas. 

Javascript es un lenguaje que puede ser utilizado por profesionales y por aquellos que se inician en el desarrollo y diseño de sitios web.

Javascript no requiere grandes conocimientos de programación, ni programas de compilación ya que el lenguaje funciona del lado del cliente, los navegadores de internet son los encargados de interpretar estos códigos.

Javascript es un lenguaje con muchas posibilidades, puede ser utilizado para crear pequeños programas que luego se pueden insertar en una página web o en programas más grandes, orientados a objetos mucho más complejos.

Con Javascript se pueden crear diferentes efectos e interactuar con los usuarios de internet.


Este lenguaje posee varias características, entre ellas podemos mencionar que es un lenguaje basado en acciones que posee menos restricciones. Gran parte de la programación en este lenguaje está centrada en describir objetos, escribir funciones que respondan a movimientos del mouse, aperturas, utilización de teclas, cargas de páginas entre otros.

Al principio HTML solo permitía crear páginas estáticas donde se podía mostrar textos con estilos, pero no se podía  interactuar con los usuarios. En 1990 nació Javascript por la necesidad de permitir a los autores de sitio web crear páginas que permitieran una  mayor interaccion con los usuarios.

 Javascript se puede encontrar en Internet en los siguientes servicios:

• Correo
• Chat
• Buscadores de Información

También se pueden encontrar o crear códigos para insertarlos en las páginas como:

• Reloj
• Contadores de visitas
• Fechas
• Calculadoras
• Validadores de formularios
• Detectores de navegadores e idiomas

Para que estos dos lenguajes HTML y Javascript puedan convivir sin problemas entre ellos, se han de incluir unos delimitadores que separan las etiquetas HTML de las instrucciones Javascript. Estos delimitadores son las etiquetas <SCRIPT> y </SCRIPT>. Todo el código Javascript que  se ponga en la página ha de ser introducido entre estas dos etiquetas.

Asì entonces, el código javascript se inserta dentro de las etiquetas <body></body> de las páginas web. Generalmente se inserta entre las esriquetas <script></script>. También pueden estar ubicados en ficheros externos usando:

<script type="text/javascript" src="micodigo.js"></script>

Su sintaxis es similar a la usada en Java y C, al ser un lenguaje del lado del cliente este es interpretado por el navegador, no se necesita tener instalado ningún Framework.

• Variables: var = “Hola”, n=103
• Condiciones: if(i<10){ … }
• Ciclos: for(i; i<10; i++){ … }
• Arreglos: var miArreglo = new Array(“12”, “77”, “5”)
• Funciones: Ppopias del lenguaje y predefinidas por los usuarios
• Comentarios para una sola línea: // Comentarios
• Comentarios para varias lineas:
  /*
Comentarios
*/
• Permite la programación orientada a objetos: document.write("Hola");
• Las variables pueden ser definidas como: string, integer, flota, bolean simplemente utilizando “var”. Podemos usar “+” para concatenar cadenas y variables.

Javascript es soportado por la mayoría de los navegadores como Internet Explorer, Netscape, Opera, Mozilla Firefox , entre otros.

 Al surgir nuevos lenguajes como PHP del lado del servidor y Javascript del lado del cliente, surgió Ajax en acrónimo de (Asynchronous Javascript And XML). Estes es una técnica para crear aplicaciones web interactivas. Este lenguaje combina varias tecnologías:

• HTML y Hojas de Estilos CSS para generar estilos.
• Implementaciones ECMAScript, uno de ellos es el lenguaje Javascript.
• XMLHttpRequest es una de las funciones más importantes que incluye, que permite intercambiar datos asincrónicamente con el servidor web, puede ser mediante PHP, ASP, entre otros.

Aunque Javascript puede ser soportado en gran cantidad de navegadores los usuarios pueden elegir la opción de Activar/Desactivar el Javascript en los mismos.

Para usar correctamente el JavaScript en un navegador, es importante saber cómo funciona éste último a la hora de visualizar el diseño y la composición del texto plano modificado con códigos HTML.

Esta composición a partir del diseño especificado se realiza siempre secuencialmente, es decir, el navegador comienza desde la primera línea de la página y continua descendiendo hasta el final de la misma. Por ello el JavaScript sólo refleja código que ya se haya encontrado.

Existen dos formas fundamentales de ejecutar scripts en una página. La primera se trata de la ejecución directa de scripts, la segunda es una ejecución como respuesta a la acción de un usuario.

Codificar correctamente con HTML

Para codificar correctamente con HTML se utilizaran los elementos HTML llamados etiquetas.

Estas etiquetas se encuentran encerradas entre corchetes: < >


Por ejemplo, <h1> es la etiqueta de inicio para una fuente grande de encabezado. Al final del encabezado o título que estamos codificación, ponemos una etiqueta de cierre, que incluye una barra diagonal </ h1>.

Estas etiquetas incluyen la sección o el texto que desea dar formato. Piense en la etiqueta de apertura como un canal abierto. El código dentro de lo que se designa el flujo en ese canal. La etiqueta final cierra el canal y las cerraduras de la sección en el código.

Cursor personalizado.

Este es un código muy llamativo, que le da al cursor  una gran personalidad al cursor. Para páginas Web
se debe colocar este código en el head de la pagina, y ahí adentro se pega el código  y luego se cierra el head.

Para blogger, se puede pegar directamente en una entrada, desde la edición de HTML.
-----------------------------------------------------------------------------------
<style type="text/css">
    #outerCircleText {
        font-style: italic;
        font-weight: bold;
        font-family: 'verdana', arial;
        color: #F0BBAA;
    position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
    #outerCircleText div {position: relative;}
    #outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>


<script type="text/javascript">

;(function(){

var msg = "hola, bienvenido a truccos blogger, un espacio para aprender juntos"; //aquí se cambia el texto, este será el que siga al ratón

var size = 15;//tamaño de la letra
var circleY = 0.75; var circleX = 3;
var letter_spacing = 5;
var diameter = 5;
var rotation = 0.1;
var speed = 0.1;

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.408333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
 e = e || window.event;
 ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
 xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){
 if(init.nopy){
  o.style.top = (b || document.body).scrollTop + 'px';
  o.style.left = (b || document.body).scrollLeft + 'px';
 };
 currStep -= rotation;
 for (var d, i = n; i > -1; --i){
  d = document.getElementById('iemsg' + i).style;
  d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
  d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
 };
},

drag = function(){
 y[0] = Y[0] += (ymouse - Y[0]) * speed;
 x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
 for (var i = n; i > 0; --i){
  y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
  x[i] = X[i] += (x[i-1] - X[i]) * speed;
 };
 makecircle();
},

init = function(){
 if(!isNaN(window.pageYOffset)){
  ymouse += window.pageYOffset;
  xmouse += window.pageXOffset;
 } else init.nopy = true;
 for (var d, i = n; i > -1; --i){
  d = document.createElement('div'); d.id = 'iemsg' + i;
  d.style.height = d.style.width = a + 'px';
  d.appendChild(document.createTextNode(msg[i]));
  oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
 };
 o.appendChild(oi); document.body.appendChild(o);
 setInterval(drag, 25);
},
ascroll = function(){
 ymouse += window.pageYOffset;
 xmouse += window.pageXOffset;
 window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
 window.addEventListener('load', init, false);
 document.addEventListener('mouseover', mouse, false);
 document.addEventListener('mousemove', mouse, false);
  if (/Apple/.test(navigator.vendor))
   window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
 window.attachEvent('onload', init);
 document.attachEvent('onmousemove', mouse);
};
})();
</script>

------------------------------------------------------------------------------------

Fuegos artificiales

Este script me lo encontré  en la página http://lunaticos-desing.jimdo.com/codigos-html-2/ , y al probarlo en blogger, me dio la agradable sorpresa de que sí funciona.

Aquí el código:
--------------------------------------------------------------------------------------------------------------
<script type="text/javascript">
// <![CDATA[
var bits=200; // how many bits
var intensity=20; // how 'powerful' is the explosion (from 3 to 20 is best)
var speed=30; // how fast - smaller is faster
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93");
// blue red green purple cyan orange
/****************************
* Fireworks Effect *
* BY DARKOL & HABANNITA *
* HTTP://DARKOL.ES.TL *
* HTTP://HABANNITA.ES.TL *
* NO EDITES ABAJO DE AQUI *
****************************/
var dx, xpos, ypos, bangheight;
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var decay=new Array();
var colour=0;
var swide=800;
var shigh=600;
function write_fire() {
var b, s;
b=document.createElement("div");
s=b.style;
s.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();
b.appendChild(div("lg", 3, 4));
b.appendChild(div("tg", 2, 3));
for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1));
}
function div(id, w, h) {
var d=document.createElement("div");
d.style.position="absolute";
d.style.overflow="hidden";
d.style.width=w+"px";
d.style.height=h+"px";
d.setAttribute("id", id);
return (d);
}
function bang() {
var i, X, Y, Z, A=0;
for (i=0; i<bits; i++) {
X=Math.round(Xpos[i]);
Y=Math.round(Ypos[i]);
Z=document.getElementById("bg"+i).style;
if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) {
Z.left=X+"px";
Z.top=Y+"px";
}
if ((decay[i]-=1)>14) {
Z.width="3px";
Z.height="3px";
}
else if (decay[i]>7) {
Z.width="2px";
Z.height="2px";
}
else if (decay[i]>3) {
Z.width="1px";
Z.height="1px";
}
else if (++A) Z.visibility="hidden";
Xpos[i]+=dX[i];
Ypos[i]+=(dY[i]+=1.25/intensity);
}
if (A!=bits) setTimeout("bang()", speed);
}

function stepthrough() {
var i, Z;
var oldx=xpos;
var oldy=ypos;
xpos+=dx;
ypos-=4;
if (ypos<bangheight||xpos<0||xpos>=swide||ypos>=shigh) {
for (i=0; i<bits; i++) {
Xpos[i]=xpos;
Ypos[i]=ypos;
dY[i]=(Math.random()-0.5)*intensity;
dX[i]=(Math.random()-0.5)*(intensity-Math.abs(dY[i]))*1.25;
decay[i]=Math.floor((Math.random()*16)+16);
Z=document.getElementById("bg"+i).style;
Z.backgroundColor=colours[colour];
Z.visibility="visible";
}
bang();
launch();
}
document.getElementById("lg").style.left=xpos+"px";
document.getElementById("lg").style.top=ypos+"px";
document.getElementById("tg").style.left=oldx+"px";
document.getElementById("tg").style.top=oldy+"px";
}
function launch() {
colour=Math.floor(Math.random()*colours.length);
xpos=Math.round((0.5+Math.random())*swide*0.5);
ypos=shigh-5;
dx=(Math.random()-0.5)*4;
bangheight=Math.round((0.5+Math.random())*shigh*0.4);
document.getElementById("lg").style.backgroundColor=colours[colour];
document.getElementById("tg").style.backgroundColor=colours[colour];
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
window.onload=function() { if (document.getElementById) {
set_width();
write_fire();
launch();
setInterval('stepthrough()', speed);
}}
// ]]>
</script>
-----------------------------------------------------------------------------------
Y el resultado se está viendo en pantalla.

Tabla con bordes que flashean y cambian de color

Con este código se puede insertar una tabla cuyos bordes cambian de color:

<center><table id="myexample" style="BORDER-RIGHT: green 5px solid; BORDER-TOP: green 5px solid; BORDER-LEFT: green 5px solid; BORDER-BOTTOM: green 5px solid" width="280" align="center" border="0">
    <tbody>
        <tr>
            <td>
                <center>
              AQUI COLOCAS TU TEXTO
                </center>
                <br />
            </td>
        </tr>
    </tbody>
</table>
<script language="JavaScript1.2" type="text/javascript">
//<![CDATA[

//configure interval btw flash (1000=1 second)
var speed=500

function flashit(){
var crosstable=document.getElementById? document.getElementById("myexample") : document.all?

document.all.myexample : ""
if (crosstable){
if (crosstable.style.borderColor.indexOf("green")!=-1)
crosstable.style.borderColor="red"
else
crosstable.style.borderColor="green"

}
}
setInterval("flashit()", speed)
//-->
//]]>
</script> </center> 

Y este es el resultado:

MIS TRUCOS PARA BLOGGER

Codigos para evitar la copia de material

Estos Códigos no los he probado en este blog, pero ya los probé en otra pagina y si funcionan, en algún momento pueden servir. Estos scrips sirven para tratar de evitar la copia de material en una pagina.

Son tres scrips diferentes:

PARA EVITAR EL USO DE CLICK DERECHO:
 
<script language="Javascript">
<!-- Begin
document.oncontextmenu = function(){return false}

// End -->

</script>

 

PARA EVITAR LA SELECCION DE TEXTO.

<script type="text/javascript">
// IE Evitar seleccion de texto
document.onselectstart=function(){
if (event.srcElement.type != "text" && event.srcElement.type != "textarea" && event.srcElement.type != "password")
return false
else return true;
};
// FIREFOX Evitar seleccion de texto
if (window.sidebar){
document.onmousedown=function(e){
var obj=e.target;
if (obj.tagName.toUpperCase() == "INPUT" || obj.tagName.toUpperCase() == "TEXTAREA" || obj.tagName.toUpperCase() == "PASSWORD")
return true;
/*else if (obj.tagName=="BUTTON"){
return true;
}*/
else
return false;
}
}

// End -->

</script>

 

 
 PARA EVITAR QUE SE PUEDA ARRASTRAR Y SOLTAR
 
<script language="Javascript">
<!-- Begin
document.ondragstart = function(){return false}

// End -->

</script>

Cortar y pegar los scrips en el código HTML de la página que se quiere proteger.

Votaciones con mensajes

Para incluir una votación sobre X tema, y que al seleccionar una opción aparezca un mensaje, es algo divertido.

Cortar y pegar el siguiente código:

----------------------------------------------------------------------------------------------------------

<p style="text-align: center;">
    ¿Te gusta mi blog?
</p>

<center>
    <table>
        <tbody>
            <tr>
                <td style="text-align: center;">
                    Excelente blog<input onclick="alert(value)" name="radio" type="radio" value="Que buen gusto tienes. No olvides dejar un comentario." />
                </td>
            </tr>

            <tr>
                <td style="text-align: left;">
                    Regular <input onclick="alert(value)" name="radio" type="radio" value="Tienes toda la razón. Dame un consejo para mejorlo. Gracias por dejar tu comentario." />
                </td>
            </tr>

            <tr>
                <td>
                    Pésimo. No Regreso<input onclick="alert(value)" name="radio" type="radio" value="Vete de mi blog y no regreses (Es broma, Gracias,  tu opinión cuenta. No olvides dejar un comentario)" />
                </td>
            </tr>
        </tbody>
    </table>
</center>

--------------------------------------------------------------------------------------------------------------

Sustituir el texto en rojo por el texto deseado.

A aquí el resultado.

¿Te gusta mi blog?

Excelente blog

Regular

Pésimo. No Regreso