JavaScript es uno de los 3 lenguajes que los desarrolladores web deben aprender:
Clasificación de objetos en JavaScript
JavaScript puede generar datos de diferentes formas:
Visualización de código (el teclado controla el movimiento del div)
Introducción
JavaScript es el lenguaje de programación de la Web. Todas las páginas HTML modernas utilizan JavaScript. (¡¡¡Muy poderoso !!!) Ahora los populares JQuery y Vue son bibliotecas de clases en JavaScript.
Características de JS
- lenguaje interpretado : terminado de ejecutar directamente sin compilación
--JavaScript es un lenguaje de programación ligero . Similar a la estructura de sintaxis de C y Java
--Basado en prototipos , orientado a objetos , JavaScript es un código de programación que se puede insertar en páginas HTML
--JavaScript es un lenguaje de programación de tipo de lenguaje débil
JavaScript es uno de los 3 lenguajes que los desarrolladores web deben aprender:
- HTML define el contenido de las páginas web
- CSS describe el diseño de una página web
- Comportamiento de la página de JavaScript
-
JavaScript es comportamiento, CSS es rendimiento
Clasificación de objetos en JavaScript
Objetos incorporados
Los objetos definidos por los estándares ES se pueden utilizar en cualquier implementación ES
例如 ：Número de cadena matemática Objeto de función booleana
Objeto anfitrión
El objeto proporcionado por el entorno de ejecución de js. Principalmente BOM, DOM
Objeto personalizado
Objetos creados por desarrolladores
JavaScript puede generar datos de diferentes formas:
- Utilice window.alert () para que aparezca un cuadro de advertencia.
- Utilice el método document.write () para escribir el contenido en el documento HTML.
- Utilice innerHTML para escribir en elementos HTML.
- Utilice console.log () para escribir en la consola del navegador.
Eventos comunes de JavaScript
En HTML, el código JavaScript debe ubicarse entre las etiquetas <script> y </script>.
Los eventos HTML son cosas que le suceden a los elementos HTML. Cuando se utiliza JavaScript en páginas HTML, JavaScript puede activar estos eventos.
El evento de procesamiento principal es "encontrar el objeto" -encontrar el elemento correspondiente en la página HTML, "crear el objeto" -enlazar el evento para el elemento encontrado;
| evento | descripción |
|---|---|
| onchange | Cambios en elementos HTML |
| al hacer clic | El usuario hace clic en el elemento HTML |
| el ratón por encima | El usuario mueve el mouse sobre un elemento HTML |
| onmouseout | El usuario quita el mouse de un elemento HTML |
| onkeydown | El usuario presiona una tecla del teclado |
| onload | El navegador ha terminado de cargar la página. |
Visualización de código (el teclado controla el movimiento del div)
<html>
<head>
<meta charset="utf-8" />
<title>键盘移动div</title>
<style type="text/css">
/*
*定义box1的显示效果
*/
#box1{
width: 100px;
height: 100px;
background-color: darkred;
position: absolute;
}
</style>
<script type="text/javascript">
/*
*使div根据不同方向移动
*/
window.onload = function(){
document.onkeydown = function(event){ //绑定函数，event是事件对象
event=event || window.event;
console.log(event.keyCode);
switch(event.keyCode){
case 37 :
//alert("向左");
box1.style.left=box1.offsetLeft -10 +"px";
break;
case 39 :
//alert("向右");
box1.style.left=box1.offsetLeft +10 +"px";
break;
case 38 :
//alert("向上");
box1.style.top=box1.offsetTop -10 +"px";
break;
case 40 :
//alert("向下");
box1.style.top=box1.offsetTop +10 +"px";
break;
}
};
};
</script>
</head>
<body>
<div id="box1">
</div>
</body>
</html>Si este blog es útil para usted, recuerde dejar un mensaje + me gusta.