Day01学习笔记

今天学习的内容是前端语言串讲，前端通常指的是构建网页和应用程序用户界面（UI）的技术。前端开发涉及使用一种或多种前端编程语言和框架来实现网站和应用程序的外观和交互。

课上内容

01 前端语言介绍
- HTML（超文本标记语言）：HTML 是用于创建网页结构和内容的标记语言。通过使用不同的 HTML 元素和标签，可以构建页面的文本、图像、链接等元素。
- CSS（层叠样式表）：CSS 是用于样式化网页的样式表语言。通过 CSS，可以定义页面的布局、颜色、字体等外观方面的样式。
- JavaScript：JavaScript 是一种用于添加交互性和动态功能的脚本语言。它能够处理用户输入、操作 DOM（文档对象模型）、发送网络请求等。

02 前端语言的协作配合

关于前端语言的协作配合可以通过下面这个例子来看：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buttontest</title>
    <style>
        #changeColorBtn {
            background-color: #123456;
            color: #ffffff;
            padding: 10px 20px;
            border: none;
            margin-top: 20px;
            cursor: pointer;
        }

        #changeColorBtn:hover {
            background-color: black;
        }
    </style>
</head>

<body>
    <button id="changeColorBtn">Click me to change my color</button>
    <script>
        const button = document.getElementById("changeColorBtn");

        button.addEventListener("click", function () {
            const randomColor = getRandomColor();
            button.style.backgroundColor = randomColor;
        });

        function getRandomColor() {
            const letters = "0123456789ABCDEF";
            let color = "#";
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
    </script>
</body>

</html>

这个例子实现了一个鼠标点击随机变色的按钮

使用HTML定义了一个id为changeColorBtn的按钮，内容为Click me to change color。

使用CSS来进行按钮的样式管理,通过id选择器，设置id为changeColorBtn的元素的属性和伪类选择器，设置鼠标悬浮时id为changeColorBtn的元素的属性。

使用JavaScript来添加点击事件，首先是使用getElementById函数找到按钮元素赋给变量button，使用addEventListener给button添加点击事件，当点击按钮时就会执行function()，function调用getRandomColor函数获取随机颜色设置为button的背景颜色

从这个例子可以看出前端语言之间的协作与各司其职，我们用html构建网页的骨架，组件。用css将其样式变好看，用js给网页添加用户交互。

HTML、CSS、JavaScript这三种前端语言的协作方式：

分离关注点：HTML、CSS 和 JavaScript 三者各自负责不同方面的功能。HTML 负责网页结构，CSS 负责外观样式，JavaScript 负责交互和动态功能。这种分离关注点的设计模式使得代码更具可维护性和可扩展性
互动效果：HTML 和 CSS 为 JavaScript 提供了操作的对象，通过文档对象模型（DOM），JavaScript 可以选择和修改 HTML 元素的内容和样式，实现动态效果和交互功能。
事件驱动：JavaScript 可以通过事件监听器捕获用户操作，比如点击按钮、键盘输入等。当事件触发时，JavaScript 可以执行相应的操作，修改页面内容或样式，实现网页的交互效果。

总体而言，HTML、CSS 和 JavaScript 三种前端语言的协作配合，使得我们可以构建出功能完整、样式美观、交互丰富的现代化网页和应用程序。

Day01学习笔记

Day01学习笔记

课上内容

01 前端语言介绍

02 前端语言的协作配合

HTML、CSS、JavaScript这三种前端语言的协作方式：