Java Script

Java Script
1. Introduccin a Java Script:
1.1 Declaracin de Hola Mundo
alert(Hola Mundo) aparece un cuadro del mensaje

console.log(Hola Mundo) Imprime el mensaje en la consola del
navegador
document.querySelector("body").innerHTML = "Hola Mundo"; Mostrar el
mensaje dentro del cuerpo de la pagina
1.2 Declaracin de variables:
var numero
numero = 50
var nombre = Branco Edinson Churampi Rosales
1.3 Clculos en Matemticos en JavaScript
<script>
var edad = 17
var aos_posteriores = 20
var edad_total = edad + aos_posteriores
console.log(edad_total)
</script>
<script>
var numero = 5;
var exponente = 2;
console.log(Math.pow(numero,exponente));
</script>
Mtodo Math
Method Description
abs(x) Returns the absolute value of x
acos(x) Returns the arccosine of x, in radians
asin(x) Returns the arcsine of x, in radians

atan(x) Returns the arctangent of x as a numeric
value between -PI/2 and PI/2 radians
atan2(y, x) Returns the arctangent of the quotient of its
arguments
ceil(x) Returns the value of x rounded up to its
nearest integer
cos(x) Returns the cosine of x (x is in radians)
exp(x) Returns the value of Ex
floor(x) Returns the value of x rounded down to its
nearest integer
log(x) Returns the natural logarithm (base E) of x
max(x, y, z, ..., n) Returns the number with the highest value
min(x, y, z, ..., n) Returns the number with the lowest value
pow(x, y) Returns the value of x to the power of y
random() Returns a random number between 0 and 1
round(x) Returns the value of x rounded to its nearest
integer
sin(x) Returns the sine of x (x is in radians)
sqrt(x) Returns the square root of x
tan(x) Returns the tangent of an angle
1.4 Funciones en String
<script>
var texto1 = 'Branco';

var texto2 = 'Churampi';
var concatenacion = texto1 + ' ' + texto2 ;

console.log(concatenacion)
console.log('El tamao del texto es ' + texto1.length);
console.log('La letra a esta en el ndice ' + texto1.indexOf('a'));
console.log('las letras que se encuentran desde el ndice 2 son: ' + texto1.substring(2));
console.log('las letras que se encuentran desde el ndice 2 al 3 son: ' +
texto1.substring(2,3));
console.log('las letra que se encuentra en el ndice 2 es: ' + texto1.charAt(2));
</script>
1.5 Condicionales
Condicional IF
If(condicion){
Codigo;
Else if(condicion){
Codigo;
}
Else{
Codigo;
}
}
Condicional WHILE
While(condicion){
Codigo;
}
Do{
Codigo;
}while(condicion)
Condicional FOR
For(var i = 5 ; i<10 ; i++){

Codigo;
}
For(variable; condicion; contador){

Codigo;
}
1.6 Seleccionar elementos del DOM
Seleccionar elemento segn su id y agregarle a una clase:
<!DOCTYPE HTML>
<meta charset = "UTF-8"/>
<html>
<head>
<style type="text/css">
.mi_clase{
background: #FF530D;
padding : 10px;
}
</style>
</head>
<body>
<div id="mi_id">
</div>
<script>
var div = document.getElementById("mi_id");
div.classList.add("mi_clase");
console.log(div)
</script>
</body>
</html>
Seleccionar elemento segn su clase y agregarle a un id:
Nota: Al realizar la seleccin por clase, se seleccionara a todas la etiquetas en esa

clase.
<!DOCTYPE HTML>
<html>
<head>
#mi_id{
padding : 10px;
}
</style>
</head>
<body>
<div class="mi_clase">
</div>
<p class="mi_clase">
</p>
<script>
var clase = document.getElementsByClassName("mi_clase");

console.log(clase)
</script>
</body>
</html>
Seleccionar elemento segn su etiqueta:
Nota: Al realizar la seleccin por etiqueta, se seleccionara a todas la etiquetas de

ese tipo.
<!DOCTYPE HTML>
<html>
<head>
#mi_id{
padding : 10px;
}
</style>
</head>
<body>
</div>
</p>
<script>
var etiqueta = document.getElementsByTagName("div");
console.log(etiqueta)
</script>
</body>
</html>
Seleccionar elemento segn selectores CSS (div, p , #id , .clases ):
Solo el primer elemento de la clase:
<!DOCTYPE HTML>
<html>
<head>
#mi_id{
padding : 10px;
}
</style>
</head>
<body>
</div>
</p>
<script>
var selector = document.querySelector(".mi_clase");
console.log(selector)
</script>
</body>
</html>
Todos los elementos de la clase:
<!DOCTYPE HTML>
<html>
<head>
#mi_id{
padding : 10px;
}
</style>
</head>
<body>
</div>
</p>
<script>
var selector = document.querySelectorAll(".mi_clase");
console.log(selector)
</script>
</body>
</html>
1.7 Eventos de JavaScript
Evento de button:
Eventos de BUTTON: onclick, ondblclick, onmousedown, onmouseup,

onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<input type="button" value= "Realice un Clic" onclick="Clic()"/>
<script>
function Clic(){
alert(":b");
}
</script>
</body>
</html>
Agregar evento a un objeto desde JavaScript:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<input type="button" value= "Realice un Clic" id="mi_boton"/>
<script>
document.getElementById("mi_boton").addEventListener("click",Clic,false);
function Clic(){
alert(":b")
}
</script>
</body>
</html>
Nota:
AddEventListener: declara el evento al objeto especificado y la funcin que
ejecutara, tambin el orden en el que lo hara.
Ejm:
addEventListener(evento, funcin, orden)
Elementos:
1. Evento: Se tiene que especificar el evento del objeto sin considerar la
palabra on.
2. Funcion: Se tiene que declarar la funcin que ejecutara.
3. Orden: se especifica True o False que declaran el orden a ejecutar
de los eventos desde javascript.
1.8 Arreglos en JS
Var arrego = [1,2,3,4,5,6];
Console.log(arreglo[ndice]);
Console.log(arreglo[1]);
Arreglo.push(12); ---- agrega un valor al final del arreglo

Arreglo.pop(); ---- elimina el ultimo valor del arreglo
Arreglo.unshift(2); ---- agrega un valor al inicio del arreglo
Arreglo.shift(); ---- elimina el primer valor del arreglo
Arreglo.lenght ---- da la longitud del arreglo
1.9 Funciones
Function nombre_funcion(argumento1,argumento2){
Cdigo;
}
1.10 Filtros en los Arrays
<script>
var numeros = [2,5,7,10,45]
var pares = numeros.filter(function(numero){
return numero % 2 == 0 //*--- Si el clculo devuelve verdadero, retorna el valor
});
console.log(pares)
</script>
1.11 Map en JS
Devuelve Un Nuevo Array De Un Array Calculado Por Cada Elemento
<script>
var numeros = [2,5,7,10,45]
var resultados = numeros.map(function(x){
return Math.pow(x,2);
});
console.log(resultados);
</script>
1.12 Uso de FOREACH
<script>
var numeros = [2,5,7,10,45]
numeros.forEach(function(elemento,indice,arreglo){
arreglo[indice] = Math.pow(elemento,2);
});
console.log(numeros)
</script>
1.13 Uso de funcin REDUCE
<script>
var saludo = ["h","o","l","a"]
var saludar =
saludo.reduce(function(valor_anterior_retornado,valor_actual,index,arreglo){
return valor_anterior_retornado + valor_actual
});
console.log(saludar)
var numeros = [1,5,10,25,9]
var suma =
numeros.reduce(function(valor_anterior_retornado,valor_actual,index,arreglo){
return valor_anterior_retornado + valor_actual
});
console.log(suma)
</script>
1.14 JSON(JavaScript Object Notation) en JavaScript
<script>
var clase_persona = {
nombre: "Branco",
apellido: "Churampi",
edad: 24,
ao_nacimiento : function() {
return 'NAcio el ao: ' + ( 2017 - this.edad );

}
};
console.log( clase_persona["nombre"] + " " + clase_persona.apellido + " " +

clase_persona.ao_nacimiento());
</script>
1.15 Declaracion de objetos en funciones JS
<script>
function alumno(nombres,apellidos){
this.nombres = nombres
this.apellidos = apellidos
this.nombre_completo = function(){
return this.nombres + " " + this.apellidos;
};
}
var jhoni = new alumno("Jhonatan","Churampi");
console.log(jhoni.nombre_completo());
</script>
1.16

Java Script

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Java Script

Caricato da

Copyright:

Formati disponibili

Java Script

1. Introduccin a Java Script:

1.1 Declaracin de Hola Mundo

alert(Hola Mundo) aparece un cuadro del mensaje

1.2 Declaracin de variables:

var nombre = Branco Edinson Churampi Rosales

1.3 Clculos en Matemticos en JavaScript

var edad_total = edad + aos_posteriores

asin(x) Returns the arcsine of x, in radians

1.4 Funciones en String

var texto1 = 'Branco';

var concatenacion = texto1 + ' ' + texto2 ;

For(var i = 5 ; i<10 ; i++){

For(variable; condicion; contador){

1.6 Seleccionar elementos del DOM

Seleccionar elemento segn su id y agregarle a una clase:

Seleccionar elemento segn su clase y agregarle a un id:

Nota: Al realizar la seleccin por clase, se seleccionara a todas la etiquetas en esa

var clase = document.getElementsByClassName("mi_clase");

Nota: Al realizar la seleccin por etiqueta, se seleccionara a todas la etiquetas de

Solo el primer elemento de la clase:

var selector = document.querySelector(".mi_clase");

Eventos de BUTTON: onclick, ondblclick, onmousedown, onmouseup,

<input type="button" value= "Realice un Clic" onclick="Clic()"/>

Agregar evento a un objeto desde JavaScript:

addEventListener(evento, funcin, orden)

Var arrego = [1,2,3,4,5,6];

Arreglo.push(12); ---- agrega un valor al final del arreglo

Arreglo.lenght ---- da la longitud del arreglo

var numeros = [2,5,7,10,45]

var pares = numeros.filter(function(numero){

return numero % 2 == 0 //*--- Si el clculo devuelve verdadero, retorna el valor

Devuelve Un Nuevo Array De Un Array Calculado Por Cada Elemento

var numeros = [2,5,7,10,45]

var resultados = numeros.map(function(x){

var numeros = [2,5,7,10,45]

1.13 Uso de funcin REDUCE

return valor_anterior_retornado + valor_actual

var numeros = [1,5,10,25,9]

return valor_anterior_retornado + valor_actual

1.14 JSON(JavaScript Object Notation) en JavaScript

return 'NAcio el ao: ' + ( 2017 - this.edad );

console.log( clase_persona["nombre"] + " " + clase_persona.apellido + " " +

1.15 Declaracion de objetos en funciones JS

return this.nombres + " " + this.apellidos;

var jhoni = new alumno("Jhonatan","Churampi");

Potrebbero piacerti anche