CREAR UNA CAJA DE CÓDIGO

Caja contenedor de código html, css, js y php

En el siguiente ejercicio tenemos una caja para contener código, dentro de ella os dejaré el código.

Cómo crear una caja para insertar código sin utiliza codepen

1. Creamos un contenedor en html que llamaremos con el id cajaCode
2. Dentro de el cuatro botones, cuatro cajas de código y dentro de cada caja un div llamado (#codeHTML, #codeCSS , #codeJS, #codephp) dentro de estos div otros dos: uno con clase numeral y otro con el código class code
3. Con CSS le damos forma a la caja principal y las diferentes cajas.
4. Por ultimo con JQuery ocultaremos todas las cajas dejando visible la de #codeHTML
5. Pondremos a la escucha los botones indicandoles que cuando se haga click en uno de ellos este se haga visible y el resto se oculten.
6. Crearemos un for para cargar los números del div con clase numeral.

Tan solo tienes que copiar el código siguiente y copiar el tuyo en las cajas con clase code.

                 
 <CajaCodigo>
  <div id="cajaCode">
    
    <input class="tipoCode" type="button" value="html">
    <input class="tipoCode" type="button" value="css">
    <input class="tipoCode" type="button" value="JS">
    <input class="tipoCode" type="button" value="php">
    
    
    <div id="codeHTML">
         <div class="numeral"></div>
 
       <div class="code"><code><pre>
              
************html**********************               
       </pre></code></div>
    </div>
    
    <div id="codeCSS">
         <div class="numeral"></div>

         <div class="code"><code> <pre>
**********************css***************************
          </pre></code></div>
    </div>
    
    <div id="codeJS">
         <div class="numeral"></div> 
         <div class="code"><code><pre>
codeee*****************************************************
         
          
          </pre></code></div>
    </div>
    
    <div id="codephp">
         <div class="numeral"></div> 

  <div class="code"><code><pre>
code***********************
  </pre></code></div>   
      
      
  </div>
 </div>

 <script src="https://code.jquery.com/jquery-3.4.1.js"></script>


          

div#cajaCode{

background: darkslategrey;
border: 15px groove dimgrey;
width:80%;
height:250px;
border-radius:10px;
box-shadow: 5px 5px silver, 
  10px 10px darkgrey, 
  15px 15px grey ;  
}
.numeral{

padding-left:2px;


color:lightslategrey;
font-weight:bolder;
align-content:center;

width:20px;
height: 1900px;
}
.tipoCode{

margin-top:10px;
margin-left:18px;
margin-bottom:0px;
width:15%;
background:silver;

font-size:1.2em;
font-weight: bolder;
color:purple;
}
.tipoCode:hover{
background:darkgrey;
}
.code{
margin-left: 5%;
}
#codeHTML, #codeCSS , #codeJS, #codephp {
width:90%;
height:150px;
margin: 10px auto;
padding:20px;

display: grid;
grid-template-columns: 25px 1fr;
background:black;
color:whitesmoke;

overflow-x: auto;
overflow-y: auto;
white-space: nowrap;


}

@media(max-width: 600px) {

 div#caja{
 width:90%;
 }
 #codeHTML, #codeCSS , #codeJS, #codephp {
 width:80%;
 }
 .code{
 margin-left: 10%;
 }
 input[value='html']{
 width:20%;
 }
}


             

CajaCode();

/*Con esta funcion creamos cajas de código, nuestra caja tiene 
tres botones uno para mostrar el jS/JQ , html y php pomndremos todas las páginas ocultas
cuando pulsemos cada boton saltará una página. hemos creado una funcion llamada numeral
para cargar un div con numeros a la izquierda*/
function CajaCode(){
  /************ocultamos todos los div menos el de html***************/
      $("#codeCSS  , #codeJS, #codephp").hide();
       
      /**ponemos a la escula los botones y le indicamos que se haga visible el nuestro
      ocultando el resto**/
      $("input[value='css']").click(function(){ 
            $("#codeCSS").show();
            $(" #codeHTML , #codeJS, #codephp").hide(); 
      });
      $("#cajaCode input[value='css']").click(function(){ 
            $("#codeCSS").show();
            $(" #codeHTML , #codeJS, #codephp").hide(); 
      });
      $("#cajaCode input[value='html']").click(function(){ 
            $("#codeHTML").show();
            $(" #codeCSS , #codeJS , #codephp").hide(); 
      });
      $("#cajaCode input[value='JS']").click(function(){ 
            $("#codeJS").show();
            $(" #codeCSS , #codeHTML , #codephp").hide(); 
      });
      $("#cajaCode input[value='php']").click(function(){ 
            $("#codephp").show();
            $(" #codeCSS , #codeHTML , #codeJS").hide(); 
      });

/**********creamos un for para llenar el div numeral con numeros de 1 a 100*************/
      $(".numeral").html(C);
      function C(){
         
        let texto="";
        
        for(let i = 1; i<100; i++){
          
          texto += i+"<br>";
          
        }
      return texto;
 
}

}
            
             
             

***************si tienes php cargalo aquí***********************
     

Eventos JQUERY

OBJETO EVENTO

Un evento es un objeto para java script y como tal tiene sus propiedades y métodos:

Propiedades

• target: nos regresa el elemento del DOM que dispara nuestro evento.
• clientX: es el punto x donde nos encontramos.
• clientY: es el punto y donde nos encontramos.
• data: Dato trasmitido al evento utilizando la función bind().

Métodos

• sotpPropagation: Evitará la propagación de eventos por el resto de objetos situados en el mismo lugar. Por ejemplo si le decimos que se desencadene el evento tras hacer click en la imagen debemos de tener en cuanta que la imagen pertenece a body que a su vez pertenece al document que a su vez pertenece al html. Tu puedes haber generado un evento para el documento y otro para la imagen. En el siguiente código la imagen responderia al click del body y al click de la imagen.

  $(document).click(function(){
    alert("Body");
  });
  $("img").click(function(){
    alert("Imagen");
  });

  
  El mismo código utilizando stopPrapagation() solo responderá a la imagen:

  $(document).click(function(){
    alert("Body");
  });
  $("img").click(function(e){
    e.stopPropagation();
    alert("Imagen");
  });

  
  
• preventDefault: Detiene el comportamiento determinado del elemento. Imagina que tu tienes un botón con una etiqueta <a> dentro, si tu haces doble click por defecto te llevara a la dirección que tenga en el atributo href, utilizando preventDefault evitará que al hacer doble click te redireciona.
• which: Nos regresa un número entero que representa un número unicode que representa la tecla presionada por un keypress

En el siguiente ejercicio utilizamos las propiedades clientX y clientY para ver en que punto de la pagina haces click.

En el siguiente ejemplo creamos una imagen svg con un circulo que seguira el raton. Cuando arrastremos el ratón dentro del svg el circulo irá tras nuestro ratón.

Ejemplo del uso del método stopPropagation, para evitar propagación de eventos

Eventos

Un evento es un desencadenante de una acción (cargarse la pagina, salir de la página, hacer click en un punto, mover el ratón, pasar el ratón por un objeto, pulsar intro...). Una acción es lo que ocurre una vez sucede el evento.

Podemos traducir evento algo que hace un objeto(página, ratón, teclado,formulario) y acción como la qué es lo que pasa cuando luego.

Ejm Cuando hagamos click en una etiqueta a nos llevará a otro pagina. En este caso el evento es hacer click y el evento desencadenado es ir a la pagina xxx.

Los eventos pueden ser de varios tipos:

• Eventos de ratón:
  • click
  • dbclick
  • mousedown
  • mouseup
  • mouseover
  • mousemove
  • mouseenter
  • mouseeleave
• Eventos de teclado:
  • keypress
  • keydown
• Eventos de documento o ventana:
  • load
  • resize
  • scroll
  • unload
• Eventos de formulario:
  • submit
  • reset
  • change
  • focus
  • blur

Eventos JQuery

Podemos utilizar los evento en jquery de dos formas:

1. Pasarle una función por parámetros al evento.

   $("div").click(myfuncion);
   fuction myfuncion(){...code...}

2. Crear una función anónima: $("div").click(function(){....code....});

Ejemplo de eventos con Jquery

EVENTOS JQUERY CON FUNCIÓN toggle() Y hover()

Utilizaremos estas funciones para realizar acciones con los eventos hover y click.

Función hover( cursorInside , cursorOut )

La función hover() desencadenará una acción cuando entre el cursor en el elemento y otra cuando salga de él.

Función toggle()

Lo utilizaremos para trabajar con el evento click, con el aparecerá y desaparecerá nuestro elemento cada vez que hagamos click. Se puede utilizar si queremos hacer una etiqueta <details> personalizada.

Ejemplo de menú con toggle:

Ejemplo de details con imagen personalizada utilizando la función toggle

Funciones next(), bind() on()

next("objeto")

La función next("objeto") nos ayudará a apuntar al próximo objeto que determinemos dentro del actual. Por ejemplo Si le decimos $("article").next("p") apuntará a la primera etiqueta p de cada articulo.

bind("desencadenanteEvento", data, open)

La función bind está en desuso actualmente utilizaremos .on("eventos", acción).

Si deseamos que un obejeto responda a dos o mas eventos (click, hover..) y al responder a ellos desencadene la misma función podemos utilizar bind().

Hasta el momento teniamos que hacer lo siguiente: $("p").click(funcionA).hover(funcionA)

Con bing lo podemos hacer bind("click hover", data, miFuncion)

data será un dato o variable con un dato que le pasamos a nuestra variable

.on("evento/os", funciónAcciónDesencadenada)

En los eventos podemos poner tantos eventos como deseemos que desencadenen nuestra acción, para ello los nombraremos separados con espcacios:

Ejm de múltiples eventos

.on("click dbclick scroll", funciónAcciónDesencadenada)

Ejemplo de eventos con diferentes funciones:

$('.h2').on({ click:hacerclick, mouseover: hacerhover});

function hacerclick(e) {
    e.preventDefault();
    console.log('has hecho click');
}
function hacerhover() {
    console.log('pasó el ratón');
}
                                    

Delegación de eventos

La delegación de eventos es una propiedad del objeto evento que nos puede resultar muy util para identificar el elemento del DOM que dispara el evento y sus atributos. Saviendo este dato podremos solicitar su modificación posterior mente.

En este ejemplo utilizamos la funcion .on() y le indicamos en primer lugar el elemento padre desde el que deseamos empezar la búsqueda $("ElementoPadre") y dentro de la función on le pasaremos por parámetros, los eventos desencadenantes de la acción, el hijo que debe identificarnos y por ultimo acción que desencadena.

$("ElementoPadre").on("eventos","ElementoHijo", function(){ $(this).attr("id") });

En el siguiente ejemplo nos regresará por consola la propiedad class de cada objeto del DOM por el que pasemos el ratón.

$("*").hover(function(e){console.log(e.target.className);});

Ejemplo de función next()

See the Pen función next() de JQ by CVDGP (@cvdgp) on CodePen.

Ejemplo de función .on("evento/s", acción):

En el siguiente ejemplo crearemos dos imágenes, cuando hagamos click o carguemos la página copiara la ruta de la imagen1 y se la dará a la imagen 2, poniendola visible (Show), cuando pasemos el ratón por la imágen 2 esta desaparecerá, utilizaremos el método stopPropagation() del objeto evento para evitar que se propague en otro objetos como el body: