JavaScript入门学习笔记（一）

最新推荐文章于 2025-06-15 09:38:41 发布

是小鱼儿哈

最新推荐文章于 2025-06-15 09:38:41 发布

阅读量1k

点赞数 12

分类专栏： JavaEE初阶前端学习文章标签： javascript 学习前端

本文链接：https://blog.youkuaiyun.com/weixin_61061381/article/details/126902146

版权

一、一些前置知识

1、JS 和 HTML 和 CSS 之间的关系

一、一些前置知识

1、JS 和 HTML 和 CSS 之间的关系

HTML: 网页的结构(骨)

CSS: 网页的表现(皮)

JavaScript: 网页的行为(魂)

HTML写出来的代码，就相当于是页面的框架，相当于是“骨”。
CSS 就是在 HTML 的基础上，进行装饰，相当于套了一层“皮”，使其页面变得好看。
但是此时的页面，仍是一个静态的！
当我们加入了JS之后，我们就相当于给网页赋予了灵魂。
所谓的灵魂，就是指的交互性。

其目的，就是让网页不再是一个纯粹静态的、干巴巴的、不动的一个东西了。
而是会和程序员进行一些交互。
就是我们在页面中进行操作，页面也给予我们一定的反馈。
所以，这个时候，彼此之间就会出现一个动态变换的过程

2、JS 的书写形式

🍑内嵌式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>
<body>
  <!-- // 内嵌型js，主要用于课堂代码演示, 
  js输出：alert弹出对话框（模态对话框，如果用户不点掉对话框，就无法操作页面其他内容|| -->
  <!-- console.log("") -->
  <!-- console是浏览器给JS提供的对象，就像java库提供System.out.println的打印功能 -->
   <script>
      console.log("这是一个console输出，输出在控制台，给程序员看，调试js代码的重要手段");
      alert("一个弹窗");
   </script>
 
</body>
</html>

🍑行内式

把js写到HTML元素的内部

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>
<body>
  <!-- // onclick是点击后才会执行，用户点几次，就执行几次，
   // 行内js -->
   <div onclick="alert('点了')">点我试试</div>
   <button onclick="alert('这是你通过按钮点击的结果')">这是一个按钮</button>
 
</body>
</html>