HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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 < 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 < 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>
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;
}
}
// !! 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.
Also see: Tab Triggers