今日前端学习总结

0 阅读2分钟

今天主要学习了 HTML 结合 JavaScript 的基础内容,包括输入输出语法、用户输入案例以及变量的使用,以下是详细总结。

1. HTML 中的 JavaScript 输入输出语法

在 HTML 文件里嵌入 JavaScript 代码,可以实现不同形式的输入输出操作。示例代码如下:

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- js输入输出语法 -->
  <script>
    //1.文本输出内容
    document.write('你好')
    document.write('<h1>我是标题</h1>')
    //2.控制台打印输出给程序员
    console.log('看看对不对')
    console.log('日志')
    //3.输入语句
    prompt('请输入你的姓名:')
  </script>

</body>

</html>

  • 文本输出:使用 document.write() 方法可将内容直接输出到 HTML 页面上,还能输出 HTML 标签。
  • 控制台输出:借助 console.log() 方法,能将信息打印到浏览器的开发者工具控制台,方便程序员调试代码。
  • 输入语句prompt() 方法会弹出一个输入框,让用户输入信息。

2. 用户输入案例

下面是一个简单的获取用户输入姓名并输出的案例:

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    //1.用户输入
    //2.内部处理保存数据
    let name = prompt('请输入姓名')
    //3.打印输出
    document.write(name)
  </script>
</body>

</html>

该案例先通过 prompt() 方法获取用户输入的姓名,然后将其存储在变量 name 中,最后使用 document.write() 方法把姓名输出到页面上。

3. 变量的使用

在 JavaScript 中,变量用于存储数据,示例如下:

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    //1.声明一个年龄变量
    let age1
    //2.赋值(空格 = 空格)
    age1 = 18
    console.log(age1)
    //3.声明的同时直接赋值 变量的初始化
    let age2 = 18
    console.log(age2)

    //不建议一次声明多个变量,建议分开写
    let age3 = 18, uname = 'pink'
    console.log(age3, uname)
  </script>
</body>

</html>
  • 变量声明:使用 let 关键字声明变量,如 let age1

  • 变量赋值:可以先声明变量,之后再赋值,如 age1 = 18;也可以在声明变量时直接赋值,即变量的初始化,如 let age2 = 18

  • 一次声明多个变量:虽然可以一次声明多个变量,如 let age3 = 18, uname = 'pink',但不建议这样做,最好分开声明变量。

通过今天的学习,我对 HTML 中 JavaScript 的输入输出、用户输入处理以及变量的使用有了初步的了解,后续会进一步深入学习前端开发知识。