第五天的笔记

一、JavaScript 基础

1. JavaScript 引入方式

内联方式：直接在HTML元素的事件属性中编写
内部脚本：使用<script>标签
外部文件：通过src属性引入外部.js文件

<!-- 内联方式：当鼠标点击内容时，出现弹窗 -->
<p onclick="alert('点击事件')">点击我</p>

<!-- 内部脚本：控制台会出现内容 -->
<script>
  console.log("内部脚本");
</script>

<!-- 外部文件：可以在检查中找到源代码一页，打开即可查看 -->
<script src="outside.js"></script>

2. 控制台输出

使用console.log()在浏览器控制台输出信息：

console.log("这是控制台输出信息");

二、JavaScript 事件处理

鼠标悬停或点击此处查看事件效果

常用事件类型：

onclick - 点击事件
onfocus/onblur - 获得/失去焦点
onchange - 值改变事件
onmouseover/onmouseout - 鼠标悬停/移开

事件绑定方式：

// 通过DOM绑定事件
document.getElementById("myElement").onclick = function() {
  console.log("元素被点击");
};

// 输入框焦点事件
document.getElementById("inputField").onfocus = function() {
  console.log("输入框获得焦点");
};

三、表单验证

表单验证要点：

获取表单元素值：document.getElementById().value
验证输入是否为空
验证输入长度是否符合要求
验证特定格式（如密码复杂度）
显示错误信息
阻止无效表单提交

验证函数示例：

function validateForm() {
  // 获取用户名和密码
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  // 验证用户名
  if(username.length < 6 || username.length > 12) {
    document.getElementById("errorMsg").innerHTML = "用户名长度应为6-12位";
    return false;
  }

  // 验证密码
  if(password.length < 8) {
    document.getElementById("errorMsg").innerHTML = "密码长度至少8位";
    return false;
  }

  // 验证通过，提交表单
  document.getElementById("validateForm").submit();
}

实用验证函数：

// 检查字符串是否为空
function isEmpty(str) {
  return str == null || str.trim() === "";
}

// 检查长度是否在范围内
function isLengthValid(str, min, max) {
  return str.length >= min && str.length <= max;
}

四、DOM 操作

常用DOM方法：

document.getElementById() - 通过ID获取元素
document.getElementsByClassName() - 通过类名获取元素集合
document.getElementsByTagName() - 通过标签名获取元素集合
document.querySelector() - 通过CSS选择器获取第一个匹配元素
document.querySelectorAll() - 通过CSS选择器获取所有匹配元素

元素内容操作：

// 获取/设置元素内容
var content = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML = "新内容";

// 获取/设置元素值
var value = document.getElementById("input").value;
document.getElementById("input").value = "新值";

每个CSS文件对原始界面做美化的过程（home）

原始界面：

step1.css：页面外边距调整

/* 通用样式 */
* {
    margin:0; /* 设置外间距为0 */
    padding:0;/* 设置内间距为0 */
}

step2.css：页面内边距调整

.container {
    width: 80%;
    margin: 0 auto;
}

step3.css：设置为flex布局

.container-flex {
    display: flex;
    justify-content: space-between;
}

step4.css：设置导航栏

.nav li {
    display:inline-block;
    list-style: none;
    height: 60px;
    line-height: 60px;
    padding:0 40px;
}

step5.css：消去超链接下划线

.nav-link {
    color:#000000;
    text-decoration: none;
}

step6.css：对“个人网站”做突出标注
```
.set-title {
    font-weight: bold;
}
```

step7.css：对导航栏进行美化

.nav {
    background-color: white;
    height: 60px;
    border-bottom: 1px solid #e91c1f;
}

step8.css：对导航栏点击时的状态进行美化

.nav li:hover {
    border-bottom: 1px solid #de3712;
}
.nav-link:hover {
    color:#de3712;
}

step9.css：对页面主体内容进行美化设计

main {
    margin-top: 120px;
}
.bq {
    width:60%;
    margin:120px auto;
}
.intro {
    max-width: 500px;
    margin: 0 auto;
}
.avatar {
    float:left;
    width:100px;
    margin-right: 20px;
    border-radius: 50%;
}

step10.css：对页面主体内容进行美化设计

.name {
    margin-bottom: 12px;
}
.bio {
    color: gray;
}
.small {
    font-size: 12px;
    text-align: center;
    color: gray;
    margin-bottom: 8px;
}

step11.css：对最喜欢的一句话的内容美化

/* 引用区块的样式 */
blockquote {
    font-size: 23px; /* 设置字号为23px */
    font-style: italic; /* 设置文字倾斜 */
    color: #555555; /* 设置字体颜色为深灰色 */
    padding: 18px 30px 18px 75px; /* 设置内边距，顺序分别为上右下左 */
    border-left: 8px solid #78C0A8; /* 设置左侧边框为8px蓝色 */
    line-height: 1.6; /* 设置行高为1.6倍 */
    position: relative; /* 设置定位为相对定位 */
    background: #EDEDED; /* 设置背景色为浅灰色 */
}
/* 引用区块的左引号 */
blockquote::before {
    content: "\201C"; /* 设置内容为左引号 */
    color: #78C0A8; /* 设置颜色为蓝色 */
    font-size: 64px; /* 设置字号为64px */
    position: absolute; /* 设置绝对定位 */
    left: 10px; /* 设置距离左侧10px */
    top: -10px; /* 设置距离上方-10px */
}
/* 引用区块的右引号 */
blockquote::after {
    content: ''; /* 设置内容为空 */
}
/* 引用区块中的文字 */
blockquote span {
    display: block; /* 设置为块元素 */
    color: #333333; /* 设置字体颜色为黑色 */
    font-style: normal; /* 取消字体倾斜 */
    font-weight: bold; /* 设置字体加粗 */
    margin-top: 16px; /* 上方外边距为16px */
}

step12.css：对页面缩小时进行美化

/* 响应式 */
/* 当屏幕宽度小于或等于768px时，应用以下样式 */
@media (max-width: 768px) {
    .nav ul:last-child {
        display: none; /* 隐藏导航栏最后一个ul元素 */
    }
}
.container-flex ul:first-child {
    flex-grow: 1; /* 伸展剩余空间 */
    text-align: center; /* 文本居中 */
    /* 小于768时，后面三个导航会被隐藏，个人网站会往中间移 */
}
.bq {
    width: 100%; /* 设置宽度为100% */
}