003JS人机交互_js003. my-优快云博客

10天完成javaweb学习正在持续手打更新中…

学习绪论

JS 作用：制作人机交互网页

分为几个主要学习的部分、学习JS我们是要让网页动起来、比如点击这个按钮，会发生…；鼠标移动到某个地方，会出现…反应

主要学习：

如何引入JS
如何去绑定链接
如何通过绑定的链接实现对HTML或CSS的更改

首先应学习JS的基础语法：按需求基础选择网站

JavaScript 教程

JavaScript 教程 - 菜鸟教程

JavaScript 基础 - 学习 Web 开发 | MDN

三种引用方式

三种引入方式优缺点与CSS的三种引入方式类似

元素内使用

<button onclick="alert('Hello, World!')">点击我</button>

引入简单，只对单个元素使用，不方便修改

嵌入式

内部JS：写在《/body》的下方或者《/body》之内

<!DOCTYPE html>
<html lang="en">
<head>
.....
</head>

<body>
......
</body>
//嵌入式
<script>
  alert("Hello,World!");
</script>

</html>

同理，可HTML和JS单对单避免代码空间的方法命名重叠、混乱等问题

文件引用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript</title>
</head>
<body>
</body>
<script src="[js文件地址]./JavaScript.js">
</script>

</html>

同理可一个JS文件操作多个网页

行为的绑定链接

JS的核心是让我们与网页交互，也就是让网页与我们关联的动起来！

那么如何通过行为链接绑定事件呢？

事件

常用的事件有哪些？

HTML Event

事件绑定

1. HTML属性绑定

直接在HTML元素中使用onclick、onmouseover等属性来绑定事件。这种方式简单直观，但不利于维护和扩展。

<button onclick="alert('Button clicked!')">Click Me</button>

直接绑定单个事件

2. DOM属性绑定

通过JavaScript直接设置元素的事件处理函数。这种方法可以动态地添加或移除事件处理程序。

<button id="myButton">Click Me</button>
<script>
    const button = document.getElementById('myButton');
    button.onclick = function() {
     
        alert('Button clicked!');
    };
</script>

一般是使用addEventListener方法绑定

这是推荐的方式，因为它允许为同一个元素绑定多个事件处理程序，并且不会覆盖已有的事件处理程序。

<button id="myButton">Click Me</button>
<script>
    const button = document.getElementById('myButton');
    button.addEventListener('click', function() {
     
        alert('Button clicked!');
    });
</script>