1. Objeto String (String)
2. Objeto numérico
3. Matriz de JavaScript (matriz)
4. JavaScript booleano [observe la diferencia entre el objeto booleano y el valor booleano]
1. Crea un objeto boolena
1.1 Asignación directa
Var boo1 = falso;
1.2 Crea un objeto booleano a través del constructor
Crear un objeto booleano a través del constructor puede ser
Número 0 - falso no 0 - verdadero
Cadena "" --- falso no "" - verdadero
nulo --- falso
NaN --- falso
Objeto 【Objeto booleano】 - verdadero
P.ej:
var b1=new Boolean(0);
var b2=new Boolean(-1);
var b3=new Boolean("");
var b4=new Boolean(null);
var b5=new Boolean(NaN);
var b6=new Boolean("false");
var b11= Boolean(0);
var b22= Boolean(-1);
var b33= Boolean("");
var b44= Boolean(null);
var b55= Boolean(NaN);
var b66= Boolean("false");
document.write("<h1>0 为布尔值 "+ b1 +"Boolean对象</h1>");
document.write("<h1>1 为布尔值 "+ b2 +"Boolean对象</h1>");
document.write("<h1>空字符串是布尔值 "+ b3 + "Boolean对象</h1>");
document.write("<h1>null 是布尔值 "+ b4+ "Boolean对象</h1>");
document.write("<h1>NaN 是布尔值 "+ b5 +"Boolean对象</h1>");
document.write("<h1>字符串'false' 是布尔值"+ b6 +"Boolean对象</h1>");
document.write("<h1>0 为布尔值 "+ b11 +"boolean值</h1>");
document.write("<h1>1 为布尔值 "+ b22 +"boolean值</h1>");
document.write("<h1>空字符串是布尔值 "+ b33 + "boolean值</h1>");
document.write("<h1>null 是布尔值 "+ b44+ "boolean值</h1>");
document.write("<h1>NaN 是布尔值 "+ b55 +"boolean值</h1>");
document.write("<h1>字符串'false' 是布尔值"+ b66 +"boolean值</h1>");
valueOf()返回 Boolean 对象的原始值。boolean数据值Nota:
1. La creación del objeto Boolena es el objeto Booleano obtenido por new Boolean (), y el valor original del booleano obtenido por valueOf ().
2. Tanto si es un objeto Boolen como si no, siempre que sea un objeto, se convertirá en un valor booleano y debe ser verdadero en la condición de juicio de la instrucción if. Obtenga el valor de los datos booleanos en el objeto Boolen a través del método valueOf () proporcionado por el objeto Boolen.
5. Fecha de JavaScript
1. Crea un objeto de fecha
new Date (); // Hora actual del sistema
Por ejemplo: obtenga la hora actual del sistema
var date=new Date();
document.write(date); Thu Nov 19 2020 11:01:14 GMT + 0800 (hora estándar de China)
2.new Date (milisegundos) // Devuelve el número de milisegundos desde el 1 de enero de 1970
P.ej:
var date2=new Date(10000);
document.write("<h1>"+date2+"</h1>");3.nueva fecha (dateString)
P.ej:
var date3=new Date("2018/12/1 12:29:30");
document.write("<h1>"+date3+"</h1>");4.nueva fecha (año, mes, día, horas, minutos, segundos, milisegundos)
P.ej:
var date4 = new Date(2021,month+1,21,18,10);5. Métodos habituales de fecha
getTime () devuelve el número de milisegundos desde el 1 de enero de 1970.
getFullYear () Obtener el año
getMonth () para obtener el mes [contando desde 0, estamos usando +1]
getDate () Obtiene el número de días del mes
getDay () Obtiene el día de la semana
getHours () Obtiene el número de horas
getMinutes () Obtiene el número de minutos
getSeconds () Obtiene el número de segundos
setFullYear (a, m, d) Establece una fecha específica.
setMonth () establece el mes [contando desde 0, estamos usando -1]
setDate () establece el número de días del mes
setDay () Establece el día de la semana
setHours () establece el número de horas
setMinutes () establece el número de minutos
setSeconds () establece el número de segundos
setTime () establece el número de milisegundos, obtiene el número de milisegundos establecido desde el 1 de enero de 1970, vuelve a dar la fecha y la hora
P.ej:
// getTime () devuelve el número de milisegundos desde el 1 de enero de 1970.
document.write ("<h1>" + date.getTime () + "</h1>");
// getFullYear () Obtiene el año
document.write ("<h1>" + date.getFullYear () + "</h1>");
// getMonth () Obtiene el mes [contando desde 0, estamos usando +1]
document.write ("<h1>" + (date.getMonth () + 1) + "</h1>");
// getDate () Obtiene el número de días del mes
document.write ("<h1>" + fecha.getDate () + "</h1>");
// getDay () Obtiene el día de la semana
document.write ("<h1>" + fecha.getDay () + "</h1>");
// getHours () Obtiene el número de horas
document.write ("<h1>" + date.getHours () + "</h1>");
// getMinutes () Obtiene el número de minutos
document.write ("<h1>" + date.getMinutes () + "</h1>");
// getSeconds () Obtiene el número de segundos
document.write ("<h1>" + date.getSeconds () + "</h1>");
// setFullYear () Establece una fecha específica.
// [El mes comienza desde 0, lo que estamos configurando es -1]
date.setFullYear (2019,10,20); []
date.setHours (12);
date.setMinutes (12);
date.setSeconds (12);
// setTime establece el número de milisegundos,
// Obtenga el número de milisegundos establecido desde el 1 de enero de 1970 para volver a dar la hora y la fecha
date.setTime (10000)
document.write ("<h1>" + fecha + "</h1>");
Cómo mostrar un reloj en una página web.
function startTime(){
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.write(h+":"+m+":"+s);
today = setTimeout(function(){startTime()},500);
}
function checkTime(i){
if(i < 10){
i = "0"+i;
}
return i;
}
Compara dos fechas
El objeto de fecha también se puede utilizar para comparar dos fechas.
El siguiente código compara la fecha actual con el 14 de enero de 2100:
var x=new Date();
x.setFullYear(2100,0,14);//设置一个时间用来比较
var today = new Date(); //得到当天的时间日期
if (x>today){
alert("今天是2100年1月14日之前");
}else{
alert("今天是2100年1月14日之后");
}6.Matemáticas de JavaScript (算数)
La función del objeto Math es realizar tareas aritméticas comunes.
Valor calculado [valor constante]
Math.E - constante natural, una constante en matemáticas , es un decimal infinito no recurrente y un número trascendental , su valor es aproximadamente 2.718281828459045. Math.PI ------ Pi
Método aritmético
max () devuelve el mayor de los dos números dados
min () devuelve el menor de los dos números dados
random () devuelve un número aleatorio entre 0 y 1.
round () el entero más cercano, preste atención a los números negativos
P.ej:
document.write("<h1>自然常数=="+Math.E+"</h1>");
document.write("<h1>圆周率=="+Math.PI+"</h1>");
document.write("<h1>平方根=="+Math.sqrt(9)+"</h1>");
document.write("<h1>立方根=="+Math.cbrt(8)+"</h1>");
document.write("<h1>次幂=="+Math.pow(2,3)+"</h1>");
document.write("<h1>随机数=="+Math.random()+"</h1>");
document.write("<h1>最为接近的整数=="+Math.round(-12.6)+"</h1>");
document.write("<h1>最大数=="+Math.max(12,34,8)+"</h1>");
document.write("<h1>最小数=="+Math.min(12,34,8)+"</h1>");7. Objeto JavaScript RegExp
RegExp: abreviatura de expresión regular.
RegExp es un formato utilizado para recuperar y juzgar datos de texto. Se utiliza a menudo al realizar la verificación de datos.
Crear formato:
var patt=new RegExp(pattern,modifiers);
var patt=/pattern/modifiers; 【不推荐使用】Nota: Cuando se usa el constructor para crear un objeto regular, se requieren reglas de escape de caracteres regulares (precedidas por una barra invertida \) .
var re = new RegExp ("\\ d +");
Método de operación común de RegExp:
1. El método test () busca el valor especificado por la cadena y devuelve verdadero o falso según el resultado.
P.ej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//1.test()方法搜索字符串指定的值，根据结果并返回真或假
var reg1=new RegExp(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/);
var phoneNum="100000";
var res1=reg1.test(phoneNum);
document.write("<h1>"+res1+"</h1>");
//2.exec("被查找的数据值") 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
var reg2=new RegExp("134");
var text1="hello13474682774world";
var res2=reg2.exec(text1);
if(res2==null){
document.write("<h1>不存在</h1>");
}else{
document.write("<h1>存在,结果是=="+res2+"</h1>");
}
</script>
</head>
<body>
</body>
</html>Elementos en Javascript
- Variable 【var】
- Operación, expresión [1. Tarea 2. Aritmética {++, -} 3. Comparación {===} 4. Lógica 5. typeof]
- Declaración [1. Estructura de secuencia 2. Estructura de selección {switch {... break}} 3. Bucle {for / in} 4 .....]
- Función {método} 【función】
- tipo de datos
- Objeto [1. Objeto integrado 2. DOM 3 BOM]
Conversión de tipo JavaScript --- conversión de tipo de datos
1. Mediante el uso de funciones de JavaScript como: toString ()
2. Conversión automática a través del propio JavaScript Por ejemplo: var num1 = 100; var res = num1 + ”hola”;
1. Convierte un número en una cadena
//1.全局方法 String() 可以将数字转换为字符串。
var num1=100;
//var str1=new String(num1); //String Object
var str1=String(num1); //String value
document.write("<h1>str1==="+str1+",type=="+typeof str1+"</h1>");
//document.write("<h1>str1 length==="+str1.length+"</h1>");
//2.Number 方法 toString() 也是有同样的效果。
var str2=num1.toString(); //String value
document.write("<h1>str2==="+str2+",type=="+typeof str2+"</h1>");
//3.toFixed(小数的位数)把数字转换为字符串，结果的小数点后有指定位数的数字。
var str3=num1.toFixed(0);
document.write("<h1>str3==="+str3+",type=="+typeof str3+"</h1>");
//4.+""
var str4=num1+"";
document.write("<h1>str4==="+str4+",type=="+typeof str4+"</h1>"); 2. Convierta una cadena que contenga un valor numérico en un número.
var str1="25";
//1.全局方法 Number() 可以将字符串转换为数字。
var num1=new Number(str1); //Number Object
var num1=Number(str1); //Number value
document.write("<h1>num1==="+num1+",type=="+typeof num1+"</h1>");
//2.包含数字值的字符串*1
var num2=str1*1; //Number value
document.write("<h1>num2==="+num2+",type=="+typeof num2+"</h1>");
//3.一元运算符 +
var num3= +str1; //Number value
document.write("<h1>num3==="+num3+",type=="+typeof num3+"</h1>");3. Convierta el valor booleano en una cadena
//1、全局方法 String() 可以将布尔值转换为字符串。
var boo1=true;
//var str1=new String(boo1);
var str1= String(boo1);
document.write("<h1>str1==="+str1+",type=="+typeof str1+"</h1>");
//2.Boolean 方法 toString() 也有相同的效果。
var str2=boo1.toString();
document.write("<h1>str2==="+str2+",type=="+typeof str2+"</h1>");4. Convierta la cadena a booleana
//1.空字符串被转换成false
var str1="";
//var boo1=new Boolean(str1); //Boolean Object
var boo1=Boolean(str1); //Boolean vaue
document.write("<h1>boo1==="+boo1+",type=="+typeof boo1+"</h1>");
//2.非空字符串被转换成true
var str2="asgsde";
//var boo2=new Boolean(str2); //Boolean Object
var boo2=Boolean(str2); //Boolean vaue
document.write("<h1>boo2==="+boo2+",type=="+typeof boo2+"</h1>");
//注意:值为false的字符串被转换成boolean值为true值，因为值为false的字符串也是非空字符串
var str3="false";
var boo3=Boolean(str3); //Boolean vaue
document.write("<h1>boo3==="+boo3+",type=="+typeof boo3+"</h1>");5. Convierta números en valores booleanos
//1.数字0被转换成false
var num1=0;
//var boo1=new Boolean(num1); //Boolean Object
var boo1=Boolean(num1); //Boolean vaue
document.write("<h1>boo1==="+boo1+",type=="+typeof boo1+"</h1>");
//2.非0数字被转换成true
var num2=123;
//var boo1=new Boolean(num1); //Boolean Object
var boo2=Boolean(num2); //Boolean value
document.write("<h1>boo2==="+boo2+",type=="+typeof boo2+"</h1>");6. Convierta valores booleanos en números
var boo1=true; //true 被转换成数字1
//var num1=new Number(boo1);
var num1=Number(boo1);
document.write("<h1>num1==="+num1+",type=="+typeof num1+"</h1>");
var boo2=false; //false 被转换成数字0
//var num2=new Number(boo2);
var num2=Number(boo2);
document.write("<h1>num2==="+num2+",type=="+typeof num2+"</h1>");
//乘1【*1】
var num3=boo1*1;
document.write("<h1>num3==="+num3+",type=="+typeof num3+"</h1>");
var num4=boo2*1;
document.write("<h1>num4==="+num4+",type=="+typeof num4+"</h1>");7. Convertir fechas en números
var date1=new Date();
//var num1=new Number(date1);
var num1= Number(date1);
document.write("<h1>num1==="+num1+",type=="+typeof num1+"</h1>");
//注意:日期被转换成数字以后是从1970-1-1到当前日期的毫秒数
//日期方法 getTime() 也有相同的效果。
var num2= date1.getTime();
document.write("<h1>num2==="+num2+",type=="+typeof num2+"</h1>");8. Convierte números en fechas
//将数字转换为日期
var num1=1605844538320;
//var date1=new Date(num1); //Object
var date1=Date(num1); //string
document.write("<h1>date1==="+date1+",type=="+typeof date1+"</h1>");Nota: Si el número es el número de año | mes | días | horas, minutos y segundos, entonces podemos usar el método setXXXX () proporcionado por el objeto Date
9. Convierta la fecha en una cadena.
//全局方法 String() 可以将日期转换为字符串。
var date1=new Date();
//var str1=new String(date1);
var str1=String(date1);
document.write("<h1>str1==="+str1+",type=="+typeof str1+"</h1>");
//Date 方法 toString() 也有相同的效果。
var str2=date1.toString();
document.write("<h1>str2==="+str2+",type=="+typeof str2+"</h1>");10. Convierta la cadena a la fecha
var str1="2020-11-20 12:11:30";
var date1=new Date(str1);
document.write("<h1>date1==="+date1+",type=="+typeof date1+"</h1>");Nota: La cadena contiene datos de cadena que se ajustan al formato de fecha y hora.
7. Objetos DOM
DOM - Modelo de objeto de documento [Modelo de objeto de documento]
Cuando se carga una página web, el navegador crea el modelo de objeto de documento de la página.
El modelo HTML DOM está estructurado como un árbol de objetos
Archivo HTML
<html>
<head>
<title>My title</title>
</head>
<body>
<a href=””>My link</a>
<h1>My header</h1>
</body>
</html>1. Funciones que DOM puede completar
1. JavaScript puede cambiar todos los elementos HTML de la página.
2. JavaScript puede cambiar todos los atributos HTML de la página.
3. JavaScript puede cambiar todos los estilos CSS de la página.
4. JavaScript puede reaccionar a todos los eventos de la página.
2. Encuentra elementos HTML
Para hacer esto, primero debe encontrar el elemento. Hay tres maneras de hacer esto:
2.1. G etElementById ( valor del atributo id ); buscar elemento HTML por id
Por ejemplo :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//getElementById(id属性值);通过 id 查找 HTML 元素
function testByID(){
var p1=document.getElementById("p1");
//p1--[object HTMLParagraphElement]; DOM对象
p1.style.fontSize="50px";
var p2=document.getElementById("p2");
//p2--[object HTMLParagraphElement] DOM对象
p2.style.color="red";
//当id属性值相同时,只能得到第一个元素
var p3=document.getElementById("p3");
//p3---[object HTMLParagraphElement] DOM对象
p3.style.fontSize="50px";
p3.style.color="red";
}
</script>
</head>
<body>
<p id="p1">p元素测试getElementById(id属性值)</p>
<p id="p2">p元素测试getElementById(id属性值)</p>
<p id="p3">p元素测试getElementById(id属性值)</p>
<p id="p3">p元素测试getElementById(id属性值)</p>
<input type="button" value="测试getElementById(id属性值)"
onclick="testByID();">
</body>
</html>2.2 getElementsByTagName ( nombre de etiqueta ) buscar elementos HTML por nombre de etiqueta
P.ej:
//getElementsByTagName(标签名)通过标签名查找 HTML 元素
function testByTagName(){
/*
var p=document.getElementsByTagName("p");
//p---[object HTMLCollection] DOM对象的集合---数组
//typeof p---object 数组也是对象所以typeof p值才会是object
//p[5]---[object HTMLParagraphElement] DOM对象
var size=5;
for(var i=0;i<p.length;i++){
var fonts=size*i+size;
p[i].style.fontSize=fonts+"px";
}
*/
//当元素在html文件中只有一个的时候，
//通过getElementsByTagName方法得到的结果依然是数组
var h2=document.getElementsByTagName("h2");
//alert(h2); [object HTMLCollection] DOM对象的集合---数组
if(h2.length==1){
h2[0].style.color="blue";
}
}
2.3 getElementsByClassName (valor de atributo de clase) buscar elementos HTML por nombre de clase
P.ej:
function testByClassName(){
var p1= document.getElementsByClassName("p1");
//alert(p1); //[object HTMLCollection]
for(var i=0;i<p1.length;i++){
p1[i].style.color="red";
}
var h= document.getElementsByClassName("h");
//alert(h); //[object HTMLCollection]
for(var i=0;i<h.length;i++){
h[i].style.color="blue";
}
}3. JavaScript puede cambiar todos los elementos HTML de la página [contenido de texto de los elementos]
propiedad innerHTML: cambia el contenido de texto de los elementos HTML en la página
Por ejemplo :
function testinnerHTML(){
var text1=document.getElementById("text1");
var h1=document.getElementsByTagName("h1")[0];
//h1--[object HTMLHeadingElement] Dom对象
var textvalue=text1.value;
h1.innerHTML=textvalue;
//h1.innerHTML=text1.value;
//h1.innerHTML=document.getElementById("text1").value;
//注意:innerHTML中设置的字符串内容中有html标记，那么这个被包含的html标记会被解释运行。
}propiedad innerText: cambia el contenido del texto de los elementos HTML en la página
P.ej:
function testinnerText(){
var text1=document.getElementById("text1");
var h1=document.getElementsByTagName("h1")[0];
//h1--[object HTMLHeadingElement] Dom对象
var textvalue=text1.value;
h1.innerText=textvalue;
//注意:innerText中设置的字符串内容中有html标记，那么这个被包含的html标记会被作为字符串输出。
}4. JavaScript puede cambiar todos los atributos HTML de la página.
Los atributos están disponibles en html y css.
El atributo en Html --- es para explicarle al navegador que se pasa información adicional cuando se ejecuta el marcado html.
A menudo aparece en la etiqueta de apertura de html, si hay varios espacios separados por espacios.
P.ej:
<img> </img> - <img />
<img src = ”” ancho = ”” alto = ”” />
src = ”” width = ”” height = ”” ---- atributo en la etiqueta Html
Los atributos en css se utilizan para cambiar el estilo de los elementos html.
1. Pase el atributo de estilo en el elemento de inicio html
P.ej:
<div style = ”ancho: 100 px; alto: 100 px”> </div>
style --- es un atributo html
width: 100px; height: 100px ---- propiedad css
2. En el elemento <style> y en el archivo ".css"
Selector{
Propiedades en css
}
Controle el formato de los atributos HTML :
objeto dom. Nombre de atributo html específico = valor de atributo correspondiente al nombre de atributo;
P.ej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function testattribute(){
//dom对象.具体的html属性名称=属性名称对应的属性值；
var imgdoc=document.getElementsByTagName("img")[0];
//alert(imgdoc); [object HTMLImageElement]
imgdoc.src="imgs/avatar2.png";
//imgdoc---dom对象
//src--具体的html属性名称
//"imgs/avatar2.png"---属性名称对应的属性值;
}
</script>
</head>
<body>
<img src="imgs/avatar.png" />
<input type="button" value="控制html属性" onclick="testattribute();">
</body>
</html>5. JavaScript puede cambiar todos los estilos CSS de la página.
dom object.style Nombre de atributo css específico = valor de atributo correspondiente al nombre de atributo;
P.ej
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function testCss(){
//dom对象.style.具体的css属性名称=属性名称对应的属性值；
var imgdoc=document.getElementsByTagName("img")[0];
var button=document.getElementById("but1");
var hdoc=document.getElementsByTagName("h1")[0];
//alert(hdoc.innerText);
//alert(hdoc.innerHTML);
var buttext=button.value;
//alert(buttext);
if(buttext=="隐藏"){
button.value="显示";
imgdoc.style.display="none";
}
if(buttext=="显示"){
button.value="隐藏";
imgdoc.style.display="block";
}
}
</script>
</head>
<body>
<h1>hello<a href="#">test</a></h1>
<img src="imgs/avatar.png" />
<input id="but1" type="button" value="隐藏" onclick="testCss();">
</body>
</html>