JavaWeb（2）——HTML、CSS、JS 快速入门-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaWeb（2）——HTML、CSS、JS 快速入门。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、JavaScript 结构 💬

什么是BOM，什么是DOM？👭

BOM（浏览器对象模型 👨‍💻）：

DOM（文档对象模型 🏡）：

总结下来就是 🌱 ：

二、JavaScript 书写位置 🐟

三、JavaScript 注释 🔥

四、JavaScript 输入输出语法 🤖

五、JavaScript 变量 💎

六、JavaScript 变量命名 ✨

七、JavaScript 数据类型 🙎

注意事项：📝

八、JavaScript 数据类型转换 💼

一、JavaScript 结构 💬

JavaScript | MDN (mozilla.org)

一个完整的JavaScript实现由3个不同部分组成：核心（ECMAScript）、文档对象模型（DOM）和浏览器对象模型（BOM），如图所示。

JavaWeb（2）——HTML、CSS、JS 快速入门,前端,编程,前端,javascript,html,css

ECMAscript更像一个规定，规定了各个浏览器怎么样去执行JavaScript的语法，因为我们知道JavaScript是运行在浏览器上的脚本语言！有了规定，但是我们还缺少与页面中各个元素交互的方式，此时下面的DOM诞生了！浏览器中的ECMAScript添加了与DOM的接口，可以通过脚本改变网页的内容、结构和样式。

JavaWeb（2）——HTML、CSS、JS 快速入门,前端,编程,前端,javascript,html,css

什么是BOM，什么是DOM？👭

当我们在编写 JavaScript 代码时，BOM（浏览器对象模型）和 DOM（文档对象模型）是两个重要的概念。BOM 提供了一组对象来与浏览器窗口进行交互，而 DOM 则提供了一组对象来操纵网页上的元素。

BOM（浏览器对象模型 👨‍💻）：

BOM 用于与浏览器窗口进行交互的一组对象。它提供了一些方法和属性，可以让我们控制浏览器行为。以下是几个常用的 BOM 对象和示例用法：

window 对象： window 对象是 BOM 的顶层对象，代表整个浏览器窗口。我们可以使用它来访问和操作浏览器的各种功能和属性。示例用法：

window.alert("Hello World!"); // 弹出警告框

let width = window.innerWidth; // 获取浏览器窗口的宽度
location 对象： location 对象提供了与当前页面 URL 相关的信息和方法。示例用法：

let url = location.href; // 获取当前页面的 URL

location.reload(); // 重新加载当前页面
navigator 对象： navigator 对象提供了关于浏览器的信息，如浏览器类型、版本等。示例用法：

let browserName = navigator.userAgent; // 获取浏览器的用户代理信息

let isOnline = navigator.onLine; // 检查浏览器是否在线

DOM（文档对象模型 🏡）：

JavaWeb（2）——HTML、CSS、JS 快速入门,前端,编程,前端,javascript,html,css

这段代码可以用DOM绘制成一个节点层次图，如图所示。

JavaWeb（2）——HTML、CSS、JS 快速入门,前端,编程,前端,javascript,html,css

DOM将整个页面规划成由节点层次构成的文档，从而使开发者对文档的内容和结构有很好的控制，可以很方便地删除、添加和替换节点。DOM 是用于操纵网页上的元素的一组对象。它把网页表示为一个树状结构，每个 HTML 元素都是 DOM 中的一个节点。以下是几个常用的 DOM 对象和示例用法：

document 对象： document 对象代表整个 HTML 文档，我们可以使用它来访问和操作网页上的元素。示例用法：

let element = document.getElementById("myElement"); // 获取指定 id 的元素

let title = document.title; // 获取页面标题
element 对象： element 对象代表 HTML 元素，我们可以使用它来操纵元素的属性和内容。示例用法：

element.style.color = "red"; // 修改元素的样式

let text = element.innerText; // 获取元素的文本内容
event 对象： event 对象包含了与事件相关的信息和方法，例如鼠标点击、键盘按下等事件。示例用法：

element.addEventListener("click", function(event) { console.log("Clicked!"); }); // 添加点击事件监听器

<!-- 声明文档类型为 HTML。 -->
<!DOCTYPE html>
<!-- 指定 HTML 文档的语言为英文。 -->
<html lang="en">
<head>
  <!-- 设置文档的字符编码为 UTF-8，确保可以正确显示各种字符。 -->
  <meta charset="UTF-8">
  <!-- 设置浏览器使用最新版本的渲染引擎来解析页面。-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 设置视口的宽度为设备宽度，并且初始缩放比例为 1.0。-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 设置页面的标题为 "Document"。 -->
  <title>Document</title>
  <!-- 开始 CSS 样式的设置 -->
  <style>
    /* 定义一个名为 "box" 的 CSS 类，设置其宽度为 20 像素，高度为 30 像素。 */
    .box {
      width: 20px;
      height: 30px;
    }
  </style>
</head>

<body>
  <!-- 创建一个带有 "box" 类的 <div> 元素，内容为 "123" -->
  <div class="box">123</div>
  <div class="box">abc</div>
  <!-- 创建一个具有 "nav" id 的 <p> 元素，内容为 "导航栏" -->
  <p id="nav">导航栏</p>
  <!-- 创建一个具有 "nav" 类的无序列表 <ul> 元素 -->
  <ul class="nav">
    <!-- 在无序列表中创建一个列表项，内容为 "测试1" -->
    <li>测试1</li>
    <li>测试2</li>
    <li>测试3</li>
  </ul>
  <script>
    // 1. 获取匹配的第一个元素
    // 使用 document.querySelector() 方法选择第一个 <div> 元素，并将其存储在名为 box 的变量中。
    const box = document.querySelector('div')
    // 使用 document.querySelector() 方法选择类名为 "box" 的元素，并将其存储在名为 box1 的变量中
    const box1 = document.querySelector('.box')
    console.log(box)
    console.log("box 123 是："+ box)
    console.log("box abc 是："+ box1)
    // 使用 document.querySelector() 方法选择具有 "nav" id 的元素，并将其存储在名为 nav 的变量中。
    const nav = document.querySelector('#nav')
    console.log(nav)
    nav.style.color = 'red'
    // 1. 我要获取第一个小 ulli
    // 使用 document.querySelector() 方法选择第一个子元素为 <li> 的 <ul> 元素，并将其存储在名为 li 的变量中。
    const li = document.querySelector('ul li:first-child')
    console.log(li)
    // 2. 选择所有的小li
    // 使用 document.querySelectorAll() 方法选择所有子元素为 <li> 的 <ul> 元素，并将它们存储在名为 lis 的变量中。
    const lis = document.querySelectorAll('ul li')
    console.log(lis)

    // 1.获取元素
    // 使用 document.querySelectorAll() 方法选择类名为 "nav" 的元素内部的所有 <li> 元素，并将它们存储在名为 lis1 的变量中。
    const lis1 = document.querySelectorAll('.nav li')
    console.log(lis1)
    for (let i = 0; i < lis1.length; i++) {
      // 循环遍历 lis1 数组中的每个元素，并将其打印到控制台。
      console.log(lis1[i]) // 每一个小li对象
    }
    // 使用 document.querySelectorAll() 方法选择具有 "nav" id 的元素，并将其存储在名为 p 的变量中。
    const p = document.querySelectorAll('#nav')
    console.log(p)
    // 将 p 数组中第一个元素的文本颜色设置为红色。
    p[0].style.color = 'red'
  </script>
</body>
</html>

JavaWeb（2）——HTML、CSS、JS 快速入门,前端,编程,前端,javascript,html,css

总结下来就是 🌱 ：

JavaWeb（2）——HTML、CSS、JS 快速入门,前端,编程,前端,javascript,html,css

二、JavaScript 书写位置 🐟

JavaWeb（2）——HTML、CSS、JS 快速入门,前端,编程,前端,javascript,html,css

JS的书写位置跟CSS一样有三种

1. 内部 JavaScrip：直接写在html文件里，用script标签包住规范：script标签写在上面。

<!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>JS-内部书写</title>
</head>

<body>
  <!-- 内部js -->
  <script>
    // 页面弹出警示框
    alert('你好，js~')
  </script>
</body>
</html>

JavaWeb（2）——HTML、CSS、JS 快速入门,前端,编程,前端,javascript,html,css

2. 外部 JavaScript：代码写在以.js结尾的文件里语法：通过script标签，引入到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>JS-外部书写</title>
</head>

<body>
  <script src="./js/my.js">
    // 中间不要写内容
  </script>
</body>
</html>

3. 内联 JavaScript：

JavaWeb（2）——HTML、CSS、JS 快速入门,前端,编程,前端,javascript,html,css

三、JavaScript 注释 🔥

JavaWeb（2）——HTML、CSS、JS 快速入门,前端,编程,前端,javascript,html,css

四、JavaScript 输入输出语法 🤖

<!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>
  <script>
    // 1. 文档输出内容
    document.write('我是div标签')
    document.write('<h1>我是标题</h1>')
    // 2. 控制台打印输出 给 程序员
    console.log('看看对不对')
    console.log('日志')
    // 3. 输入语句
    prompt('请输入您的年龄：')

l   let user = prompt("请输入你的用户名：")
    if (!! user){ // 将输入的信息转换为布尔值
        let ok = confirm("你输入的用户名为：\n" + user + "\n 请确认 。");
        if (ok){
            alert("欢迎你：\n" + user )
        }
        else{
            user = prompt("请重新输入你的用户名：")
            alert("欢迎你：\n" + user )
        }
    }else {
        user = prompt("请输入你的用户名：")
    }
  </script>
</body>
</html>

JavaWeb（2）——HTML、CSS、JS 快速入门,前端,编程,前端,javascript,html,css

<!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>
  <script>
    // 输出用户名案例
    // 1. 用户输入
    // prompt('请输入姓名')
    // 2. 内部处理保存数据
    let uname = prompt('请输入姓名')
    // 3. 打印输出
    document.write(uname)
  </script>
</body>
</html>

JavaWeb（2）——HTML、CSS、JS 快速入门,前端,编程,前端,javascript,html,css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 页面弹出警示框
    alert('你好，js~')
    let user = prompt("请输入你的用户名：")
    if (!! user){ // 将输入的信息转换为布尔值
        let ok = confirm("你输入的用户名为：\n" + user + "\n 请确认 。");
        if (ok){
            alert("欢迎你：\n" + user )
        }
        else{
            user = prompt("请重新输入你的用户名：")
            alert("欢迎你：\n" + user )
        }
    }else {
        user = prompt("请输入你的用户名：")
    }
</script>
</body>
</html>

JavaWeb（2）——HTML、CSS、JS 快速入门,前端,编程,前端,javascript,html,css

JavaScript 代码执行顺序：按HTML文档流顺序执行JavaScript代码

alert() 和 prompt() 它们会跳过页面渲染先被执行

五、JavaScript 变量 💎

JavaWeb（2）——HTML、CSS、JS 快速入门,前端,编程,前端,javascript,html,css

<!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>
  <script>
    var num
    console.log(num)
    num = 10
    console.log(num)
    var num = 20
    console.log(num)
    num = 10
    console.log(num)
    let num1 = 22
    console.log(num1)
  </script>
</body>
</html>

JavaWeb（2）——HTML、CSS、JS 快速入门,前端,编程,前端,javascript,html,css