Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <nav id="navbar">
  <header>Documentación Java</header>
  <ul>
    <li><a class="nav-link" href="#Introduction">Introduction</a></li>
    <li>
      <a class="nav-link" href="#What_you_should_already_know"
        >What you should already know</a
      >
    </li>
    <li>
      <a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a>
    </li>
    <li><a class="nav-link" href="#Hello_world">Hello world</a></li>
    <li><a class="nav-link" href="#Variables">Variables</a></li>
    <li>
      <a class="nav-link" href="#Declaring_variables">Declaring variables</a>
    </li>
    <li><a class="nav-link" href="#Variable_scope">Variable scope</a></li>
    <li><a class="nav-link" href="#Global_variables">Global variables</a></li>
    <li><a class="nav-link" href="#Constants">Constants</a></li>
    <li><a class="nav-link" href="#Data_types">Data types</a></li>
    <li>
      <a class="nav-link" href="#if...else_statement"> if...else statement</a>
    </li>
    <li><a class="nav-link" href="#while_statement"> while statement </a></li>
    <li>
      <a class="nav-link" href="#Function_declarations"
        >Function declarations</a
      >
    </li>
    <li><a class="nav-link" href="#Reference">Reference</a></li>
  </ul>
</nav>
<main id="main-doc">
  <section class="main-section" id="Introduction">
    <header >Introduction</header>
    <article>
      <p>
       Java es una tecnología que se usa para el desarrollo de aplicaciones que convierten a la Web en un elemento más interesante y útil. Java no es lo mismo que javascript, que se trata de una tecnología sencilla que se usa para crear páginas web y solamente se ejecuta en el explorador.

      <p>
       Java le permite jugar, cargar fotografías, chatear en línea, realizar visitas virtuales y utilizar servicios como, por ejemplo, cursos en línea, servicios bancarios en línea y mapas interactivos. Si no dispone de Java, muchas aplicaciones y sitios web no funcionarán.
      </p>
      <ul>
        <li>
        La sintaxis de Java se deriva en gran medida de C++. Pero a diferencia de este, que combina la sintaxis para programación genérica, estructurada y orientada a objetos, Java fue construido desde el principio para ser completamente orientado a objetos. Todo en Java es un objeto (salvo algunas excepciones), y todo en Java reside en alguna clase (recordemos que una clase es un molde a partir del cual pueden crearse varios objetos).
        </li>
        <li>
        Java del lado del servidor amplía el lenguaje central al proporcionar objetos
          relevante para ejecutar JavaScript en un servidor. Por ejemplo, del lado del servidor
          Las extensiones permiten que una aplicación se comunique con una base de datos,
          proporcionar continuidad de información de una invocación a otra de
          la aplicación, o realizar manipulaciones de archivos en un servidor.
        </li>
      </ul>
    </article>
  </section>
  <section class="main-section" id="What_you_should_already_know">
    <header>What you should already know</header>
    <article>
      <p>Esta guía asume que usted tiene los siguientes antecedentes básicos:</p>

      <ul>
        <li>
          Sólida comprensión de la programación orientada a objetos.
        </li>
        <li>Conocimiento de los patrones de concurrencia en Java.</li>
        <li>
         Estar familiarizado con Swing, SWT, AWT y adaptarlo a los requisitos del proyecto
        </li>
        <li>
         Ofrecer un código Java legible
        </li>
      </ul>
    </article>
  </section>
  <section class="main-section" id="JavaScript_and_Java">
    <header>JavaScript and Java</header>
    <article>
      <p>
       JavaScript y Java son similares en algunos aspectos pero fundamentalmente diferentes
        en algunos otros. El lenguaje JavaScript se parece a Java pero no tiene
        El tipado estático de Java y la verificación de tipo fuerte. JavaScript sigue la mayoría
        Sintaxis de expresiones Java, convenciones de nomenclatura y flujo de control básico
        construcciones que fue la razón por la que se cambió el nombre de LiveScript a
        JavaScript.
      </p>

      <p>
       En contraste con el sistema de clases en tiempo de compilación de Java construido por
        declaraciones, JavaScript admite un sistema de tiempo de ejecución basado en un pequeño
        número de tipos de datos que representan valores numéricos, booleanos y de cadena.
        JavaScript tiene un modelo de objetos basado en prototipos en lugar del más común
        modelo de objetos basado en clases. El modelo basado en prototipos proporciona dinámica
        herencia; es decir, lo que se hereda puede variar para objetos individuales.
        JavaScript también admite funciones sin ningún declarativo especial
        requisitos Las funciones pueden ser propiedades de los objetos, ejecutándose como
        métodos vagamente escritos.
      </p>
      <p>
      JavaScript es un lenguaje de forma muy libre en comparación con Java. Tu no
        tiene que declarar todas las variables, clases y métodos. Usted no tiene que
        preocuparse por si los métodos son públicos, privados o protegidos, y
        no es necesario implementar interfaces. Variables, parámetros y
        los tipos de retorno de función no se escriben explícitamente.
      </p>
    </article>
  </section>
  <section class="main-section" id="Hello_world">
    <header>Hello World</header>
    <article>
      Para comenzar a escribir Java, abra el Bloc de notas y escriba su
      primer código Java "Hola mundo":
      <code
        >public class HolaMundo {

	public static void main(String[] args) {		
		System.out.println("Hola Mundo");
	}

}
      </code>

  
    </article>
  </section>
  <section class="main-section" id="Variables">
    <header>Variables</header>
    <p>
    Utiliza variables como nombres simbólicos para valores en su aplicación. Él
      los nombres de las variables, llamados identificadores, se ajustan a ciertas reglas.
    </p>
    <p>
    Los identificadores nombran variables, funciones, clases y objetos; cualquier cosa que el programador necesite identificar o usar.
En Java, un identificador comienza con una letra, un subrayado (_) o un símbolo de dólar ($). Los siguientes caracteres pueden ser letras o dígitos. Se distinguen las mayúsculas de las minúsculas y no hay longitud máxima.

Serían identificadores válidos:

    identificador
    nombre_usuario
    Nombre_Usuario
    _variable_del_sistema
    $transaccion
y su uso sería, por ejemplo:

    int contador_principal;
    char _lista_de_ficheros;
    float $cantidad_en_Ptas;
    </p>
    <p>
     Sólo hay un par de secuencias con otros caracteres que pueden aparecer en el código Java; son los separadores simples, que van a definir la forma y función del código. Los separadores admitidos en Java son:
() - paréntesis. Para contener listas de parámetros en la definición y llamada a métodos. También se utiliza para definir precedencia en expresiones, contener expresiones para control de flujo y rodear las conversiones de tipo.

{} - llaves. Para contener los valores de matrices inicializadas automáticamente. También se utiliza para definir un bloque de código, para clases, métodos y ámbitos locales.

[] - corchetes. Para declarar tipos matriz. También se utiliza cuando se referencian valores de matriz.

; - punto y coma. Separa sentencias.

, - coma. Separa identificadores consecutivos en una declaración de variables. También se utiliza para encadenar sentencias dentro de una sentencia for.

. - punto. Para separar nombres de paquete de subpaquetes y clases. También se utiliza para separar una variable o método de una variable de referencia.
    </p>
  </section>
  <section class="main-section" id="Declaring_variables">
    <header>Declaring variables</header>
    <article>
     Puede declarar una variable de tres maneras:
      <p>
        Variables de tipo entero. Por ejemplo, <code> int x= 42.</code> esta sintaxis
        se puede utilizar para declarar variables locales y globales.
      </p>
      <p>
      Variables de tipo real. Por ejemplo, <code>double x = 42.</code> 
       
      </p>
      <p>
        Variables de tipo cadena. Por ejemplo,<code> String  y = "n".</code> 
       
      </p>
    </article>
  </section>
  <section class="main-section" id="Variable_scope">
    <header> Variable scope </header>
    <article>
      <p>
        
Cuando declaras una variable fuera de cualquier función, se llama
        variable global, porque está disponible para cualquier otro código en el
        documento actual. Cuando declaras una variable dentro de una función, es
        llamada variable local, porque solo está disponible dentro de ese
        función.
      </p>

      <p>
       . Variables miembro (Ámbito a nivel de clase)
Estas variables deben declararse dentro de la clase (fuera de cualquier método). Se puede acceder directamente a ellas en cualquier parte de la clase. Echemos un vistazo a un ejemplo:
      </p>
      <code>public class Test
{
    //Todas las variables definidas directamente dentro de una clase
    //son variables miembro
    int a;
    private String b;
    void method1() {....}
    int method2() {....}
    char c;
}</code>
      <p>
      Podemos declarar variables de clase en cualquier lugar de la clase, pero fuera de los métodos.
El acceso especificado de las variables miembro no afecta el alcance de ellas dentro de una clase.
        Variables locales (Ámbito a nivel de método)
Las variables declaradas dentro de un método tienen alcance a nivel de método y no se puede acceder fuera del método.
      </p>

      <code
        >public class Test
{
    void method1() 
    {
       // Variable local (ámbito a nivel de método)
       int x;
    }
}</code
      >
    </article>
  </section>
  <section class="main-section" id="Global_variables">
    <header> Global Variables</header>
    <article>
      <p>
       Una variable global es aquella que se define fuera del cuerpo de cualquier función, normalmente al principio del programa, después de la definición de los archivos de biblioteca (#include), de la definición de constantes simbólicas y antes de cualquier función.
      </p>

      <p>
       Toda variable declarada fuera de las funciones tiene ámbito global, es decir, puede ser accedida desde cualquier parte del programa. El siguiente código muestra un ejemplo de esta situación.

int number;
int function() 
{
    number++;
    return number;
}

int main(int argc, char *argv[]) 
{
    number = 0;
    function();
    return 0;
}
      </p>
    </article>
  </section>
  <section class="main-section" id="Constants">
    <header>Constants</header>
    <article>
      <p>
       Una constante desde el punto de vista de la programación es un dato cuyo valor no cambia durante la ejecución del programa, en otras palabras, una vez que a una constante se le asigna un valor, este no podrá ser modificado y permanecerá así durante toda la ejecución del programa.
      </p>

      <code>double PI = 3.14;</code>
      <p>
        Una constante corresponde a una longitud fija de un área reservada en la memoria principal del ordenador, donde el programa almacena valores fijos.
      </p>

      <p>
        ¿Cuáles son los tipos de constantes?:
Las constantes se clasifican en constantes de tipo serie y constantes numéricas. Las constantes numéricas pueden, a su vez, ser constantes enteras, de coma flotante y decimales.
      </p>

      <p>
       No puede declarar una constante con el mismo nombre que una función o
        variable en el mismo ámbito.
      </p>

 
    </article>
  </section>
  <section class="main-section" id="Data_types">
    <header>Data types</header>
    <article>
      <p>los diferentes tipos de datos en java:</p>
      <ul>
        <li>
          <p>Seis tipos de datos que son primitivos:</p>
          <ul>
            <li>Boolean. verdadero y falso.</li>
            <li>
              null. Una palabra clave especial que denota un valor nulo.
            </li>
            <li>undefined. Una propiedad de nivel superior cuyo valor no está definido.</li>
            <li>int. 42 o double 3.14159.</li>
            <li>String. "Howdy"</li>
           
          </ul>
        </li>

        <li>y Object</li>
      </ul>
   Aunque estos tipos de datos son una cantidad relativamente pequeña, le permiten
      para realizar funciones útiles con sus aplicaciones. Objetos y funciones
      son los otros elementos fundamentales en el lenguaje. Tu puedes pensar en
      objetos como contenedores con nombre para valores y funciones como procedimientos que
      su aplicación puede realizar.
    </article>
  </section>
  <section class="main-section" id="if...else_statement">
    <header> if...else statement </header>
    <article>
     Utilice la sentencia if para ejecutar una sentencia si se cumple una condición lógica.
      verdadero. Use la cláusula else opcional para ejecutar una declaración si la condición
      Es falso. Una sentencia if tiene el siguiente aspecto:

      <code>if (condition) { statement_1; } else { statement_2; }</code>
     condición puede ser cualquier expresión que se evalúe como verdadera o falsa. Ver
      Booleano para una explicación de lo que se evalúa como verdadero y falso. Si
      la condición se evalúa como verdadera, se ejecuta la declaración_1; de lo contrario,
      se ejecuta la sentencia_2. declaración_1 y declaración_2 pueden ser cualquier declaración,
      incluyendo más sentencias if anidadas.
      <p>
        También puede componer las declaraciones usando else if para tener múltiples
        condiciones probadas en secuencia, como sigue:
      </p>
      <code
        >if (condition_1) { statement_1; } else if (condition_2) { statement_2;
        } else if (condition_n) { statement_n; } else { statement_last; }
      </code>
     En el caso de condiciones múltiples, sólo la primera condición lógica que
      se evalúa como verdadero se ejecutará. Para ejecutar varias sentencias, agrupe
      dentro de una instrucción de bloque ({ ... }) . En general, es una buena práctica
      usar siempre sentencias de bloque, especialmente al anidar sentencias if:

      <code
        >if (condition) { statement_1_runs_if_condition_is_true;
        statement_2_runs_if_condition_is_true; } else {
        statement_3_runs_if_condition_is_false;
        statement_4_runs_if_condition_is_false; }</code
      >
     Es recomendable no utilizar asignaciones simples en una expresión condicional,
      porque la asignación se puede confundir con la igualdad al mirar por encima
      el código. Por ejemplo, no use el siguiente código:
      <code>if (x = y) { /* statements here */ }</code> Si necesita usar un
      asignación en una expresión condicional, una práctica común es poner
      paréntesis adicionales alrededor de la tarea. Por ejemplo:

      <code>if ((x = y)) { /* statements here */ }</code>
    </article>
  </section>
  <section class="main-section" id="while_statement">
    <header> while statement</header>
    <article>
     Una sentencia while ejecuta sus sentencias siempre que se cumpla una condición específica
      se evalúa como verdadero. Una instrucción while tiene el siguiente aspecto:

      <code>while (condition) statement</code> Si la condición se vuelve falsa,
      sentencia dentro del ciclo deja de ejecutarse y el control pasa al
      instrucción que sigue al bucle.

      <p>
  
La prueba de condición ocurre antes de que se ejecute la declaración en el bucle. Si
        la condición devuelve verdadero, la declaración se ejecuta y la condición es
        probado de nuevo. Si la condición devuelve falso, la ejecución se detiene y
        el control se pasa a la sentencia que sigue a while.
      </p>

      <p>
        
Para ejecutar varias sentencias, use una sentencia de bloque ({ ... }) para agrupar
        esas declaraciones.
      </p>

      Ejemplo:

      <p>El siguiente bucle while itera siempre que n sea menor que tres:</p>

      <code>int n = 0; int x = 0; while (n &lt; 3) { n++; x += n; }</code>
      <p>
     Con cada iteración, el ciclo incrementa n y agrega ese valor a x.
        Por lo tanto, x y n toman los siguientes valores:
      </p>

      <ul>
        <li>Después de la primera pasada: n = 1 y x = 1</li>
        <li>Después del segundo pase: n = 2 y x = 3</li>
        <li>Después del tercer pase: n = 3 y x = 6</li>
      </ul>
      <p>
        Después de completar el tercer paso, la condición n &lt; 3 ya no es
        verdadero, por lo que el ciclo termina.
      </p>
    </article>
  </section>
  <section class="main-section" id="Function_declarations">
    <header>Function declarations</header>
    <article>
    Una definición de función (también llamada declaración de función o función
      instrucción) consta de la palabra clave de función, seguida de:

      <ul>
        <li>El nmbre de la función.</li>
        <li>
          Una lista de argumentos para la función, entre paréntesis y
          separado por comas.
        </li>
        <li>
         Las declaraciones de Java que definen la función, encerradas en curly
          soportes, { }.
        </li>
      </ul>
      <p>
       Por ejemplo, el siguiente código define una función simple llamada cuadrado:
      </p>

      <code>Public Int square(number) { return number * number; }</code>
      <p>
     El cuadrado de la función toma un argumento, llamado número. La función
        consiste en una declaración que dice devolver el argumento de la
        función (es decir, número) multiplicada por sí misma. La declaración de devolución
        especifica el valor devuelto por la función.
      </p>
      <code>return number * number;</code>
      <p>
       Los parámetros primitivos (como un número) se pasan a las funciones mediante
        valor; el valor se pasa a la función, pero si la función cambia
        el valor del parámetro, este cambio no se refleja globalmente o en
        la función de llamada.
      </p>
    </article>
  </section>
  <section class="main-section" id="Reference">
    <header>Reference</header>
    <article>
      <ul>
        <li>
          Toda la documentación de esta página está tomada de
          <a
            href="https://es.wikipedia.org/wiki/Java_(lenguaje_de_programaci%C3%B3n)#Orientado_a_objetos"
            target="_blank"
            >MDN</a
          >
        </li>
      </ul>
    </article>
  </section>
</main>
              
            
!

CSS

              
                html,
body {
  min-width: 290px;
  color: #4d4e53;
  background-color: #ffffff;
  font-family: 'Open Sans', Arial, sans-serif;
  line-height: 1.5;
}

#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;

  border-color: rgba(0, 22, 22, 0.4);
 
}

header {
  color: black;
  margin: 10px;
  text-align: center;
  font-size: 1.8em;
  font-weight: thin;
}

#main-doc header {
  text-align: left;
  margin: 0px;
}

#navbar ul {
  height: 88%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbar li {
  color: #4d4e53;
  border-top: 1px solid;
  list-style: none;
  position: relative;
  width: 100%;
}

#navbar a {
  display: block;
  padding: 10px 30px;
  color: #4d4e53;
  text-decoration: none;
  cursor: pointer;
}

#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;
}

section article {
  color: #4d4e53;
  margin: 15px;
  font-size: 0.96em;
}

section li {
  margin: 15px 0px 0px 20px;
}

code {
  display: block;
  text-align: left;
  white-space: pre-line;
  position: relative;
  word-break: normal;
  word-wrap: normal;
  line-height: 2;
  background-color: #f7f7f7;
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
}

@media only screen and (max-width: 815px) {
  /* For mobile phones: */
  #navbar ul {
    border: 1px solid;
    height: 207px;
  }

  #navbar {
    background-color: white;
    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 275px;
    border: none;
    z-index: 1;
    border-bottom: 2px solid;
  }

  #main-doc {
    position: relative;
    margin-left: 0px;
    margin-top: 270px;
  }
}

@media only screen and (max-width: 400px) {
  #main-doc {
    margin-left: -10px;
  }

  code {
    margin-left: -20px;
    width: 100%;
    padding: 15px;
    padding-left: 10px;
    padding-right: 45px;
    min-width: 233px;
  }
}

              
            
!

JS

              
                // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

              
            
!
999px

Console