Métodos básicos

INICIO

1.The alert() Method

Haga clic en el botón para mostrar un cuadro de alerta. 

CODE

<div class="bloke-metodo">
<h2>1.The alert() Method</h2>
<p>Haga clic en el botón para mostrar un cuadro de alerta.
<button onclick="myAlert()">myAlert</button><br></p>

<script>
function myAlert() {
  alert("En esta página mostramos los métodos básicos de JavaScript");
}
</script>

2.Método confirm()

método confirm( ):A través del método confirm( ) se activa un cuadro de diálogo que contiene los botones Aceptar y Cancelar.
Cuando el usuario pulsa el botón Aceptar, este método devuelve el valor true; Cancelar devuelve el valor false.
Con ayuda de este método el usuario puede decidir sobre preguntas concretas e influir de ese modo directamente en la página.



CODE

<div class="bloke-metodo">
<h2>2.Método confirm()</h2>
<p><strong>método confirm( ):</strong>A través del método confirm( ) se activa un cuadro de diálogo que contiene los
botones Aceptar y Cancelar. <br/>Cuando el usuario pulsa el botón Aceptar, este método
devuelve el valor true; Cancelar devuelve el valor false. <br/>Con ayuda de este método el usuario
puede decidir sobre preguntas concretas e influir de ese modo directamente en la página.</p>
<button id="boton" onclick="myFunction1()">confirmar</button><br><br>

<p id="demo"></p>

<script>

function myFunction1() {
  let text1 = "Operación Aprobada: Proceden las Operaciones";
  let text2 = "Operación Cancelada: Proceden otras operaciones";
  document.getElementById("boton").style.display ="none";
  if (confirm(text1) == true) {
		document.getElementById("demo").innerHTML = text1;
	  	 const list = document.getElementById("demo").classList; 
		 list.add("myStyle");     
  } 
	else {
		document.getElementById("demo").innerHTML = text2;	
  }
}

</script>
</div>

3.The Window Object: The open() Method

The open() Method Método window-open Abre una nueva ventana con enlace dado a una página

Haga clic en el botón para abrir una nueva ventana del navegador. 

CODE

  <div class="bloke-metodo">
    <h2>3.The Window Object: The open() Method</h2>
    <p>The open() Method<strong> Método window-open</strong> Abre una nueva ventana con enlace dado a una página<br><br>
    Haga clic en el botón para abrir una nueva ventana del navegador.
      <button onclick="window.open('https://www.w3schools.com');" >Abrir-enlace</button>
    </p>
    </div>

4.The addEventListener() Method

Al hacer "Click" en cualquier lugar del documento visualizamos: "Hello World!" "Hello World!".

  <div class="bloke-metodo">
    <h2>4.The addEventListener() Method</h2>
    <p>Al hacer "Click" en cualquier lugar del documento visualizamos: "Hello World!" "Hello World!".</p>
   
    <p id="demo2"></p>

    <script>
    document.addEventListener("click", myFunction);
    function myFunction() {
      document.getElementById("demo2").innerHTML = "Hello World";
    }
    </script>
    </div>

5.Las propiedades de ancho interno/externo y altura interna/externa de la pantalla

  <div class="bloke-metodo">
    <h2>5.Las propiedades de ancho interno/externo y altura interna/externa de la pantalla</h2>
    
    <p id="demo4"></p>
    
    <script>
    let w = window.innerWidth;
    let h = window.innerHeight;
    
    let j = window.outerWidth;
    let k = window.outerHeight;
    document.getElementById("demo4").innerHTML = "Ancho interno: "+"   " + w+"px" +"  --   "+ "Alto interno:"+  "  "+ h+"px"+"<br>Ancho externo: "+"   " + j+"px" +"  --  "+ "Alto externo:"+  "  "+ k+"px";
    
    </script>
    </div>

6.Creacion de elementos

    <div class="bloke-metodo">
      <h2>6.Creacion de elementos</h2>
      <button onclick="myFunction()">crear</button>
      <div id="miElemento"></div>
      <div class="clean"></div>

      <script>
      
      function myFunction() {
        document.getElementById("miElemento").style.display = "block";
        let crear = prompt("Please enter", "vas a crear un elemento");
        if (crear != null) {
          document.getElementById("miElemento").innerHTML =
          "Enhora Buena " + crear + "! Cómo etás?";
        }
      }
      
      </script>
    
    </div>

7.Los métodos createAttribute () y setAttributeNode ()

Crea un atributo de clase en la etiqueta h4

Haga clic en "Agregar" para crear un atributo de clase y agregarlo al primer elemento h4.


    <div class="bloke-metodo">
      <h2>7.Los métodos createAttribute () y setAttributeNode ()</h2>
      <h4>Crea un atributo de clase en la etiqueta h4</h4>
      <p>Haga clic en "Agregar" para crear un atributo de clase y agregarlo al primer elemento h4.</p>
      
      <button onclick="myFunctionAttribute()">cambio-attribute</button>
      
      <script>
      function myFunctionAttribute() {
      // Create a class attribute:
      const att = document.createAttribute("class");
      
      // Set a value of the class attribute
      att.value = "democlass";
      
      // Add the class attribute to the first h1;
      document.getElementsByTagName("h4")[0].setAttributeNode(att);
      }
      </script>
    
    </div>

8.The createElement() Method

Crea un elemento p con algún texto :

    <div class="bloke-metodo">
      <h2>8.The createElement() Method</h2>

      <p>Crea un elemento p con algún texto :</p>
    
      <script>
     // Create element:
     const createParrafo = document.createElement("p");
      createParrafo.innerText = "Este es un párrafo Creado con createElement";
      
      // Append to body:
      document.body.appendChild(createParrafo);
    
      </script>
    
    </div>

9.El método document.getElementsByName: Nos informa del tipo de campo de la etiqueta

First Name:

First Name:

The tag name of the first element with the name "fname" is:

    <div class="bloke-metodo">

      <h2>9.El método document.getElementsByName: Nos informa del tipo de campo de la etiqueta</h2>
      <p>First Name: <input name="fname" type="text" value="Michael"></p>
      <p>First Name: <input name="fname" type="text" value="Doug"></p>   
      <p>The tag name of the first element with the name "fname" is:</p>
      
      <p id="demo7"></p>
      
      <script>
      let elements3 = document.getElementsByName("fname");
      document.getElementById("demo7").innerHTML = elements3[0].tagName;
    
      </script>
    
    </div>

Ejemplo de onmouseover()

Pasa el ratón por encima del enlace UTERRA.COM    y podrás ver un mensaje.

CODE

<h1>onmouseover</h1>

Pasa el ratón por encima del enlace 
<a href="http://www.sonymage.net" 
ONMOUSEOVER="javascript:alert('Estas en UTERRA.COM ¿que tal estas?');return true">UTERRA.COM</a> 
   y <strong></strong>podrás ver un mensaje</strong>.