详细介绍：【Java Web学习 | 第七篇】JavaScript(1) 基础知识1

个人主页: Hygge_Code
个人格言: “既然选择了远方，便不顾风雨兼程”

在这里插入图片描述

文章目录

JavaScript 核心语法解析

一、JavaScript 书写位置与基础语法

1. 三种书写位置‍

JavaScript 代码在 HTML 中主要有三种存在形式，各有适用场景：

（1）内部 JavaScript

直接在 HTML 中用 <script> 标签包裹代码，推荐放在 </body> 上方（确保 HTML 元素加载完成）。

<!-- 内部 JS 示例 -->
  <script>
    // 页面弹出警示框
    alert('你好JS')
  </script>
（2）外部 JavaScript

将代码写在 .js 文件中，通过 src 属性引入，适合多页面复用。

<!-- 外部引入 JS 文件 -->
<script src="01-my.js"> // 注意：此处不能写代码 </script>
（3）内联 JavaScript

直接写在 HTML 标签的事件属性中（如 onclick），了解即可。

<!-- 内联 JavaScript 示例 -->
<button onclick="alert('逗你玩呢~')">点击试试</button>

2. 基础语法规则

  • 结束符 ;：可写可不写，建议保持一致（要么全加，要么全不加）。
  • 代码执行顺序：默认按 HTML 文档流顺序执行；alert() 和 prompt() 会优先执行（阻塞后续代码）。

3. 输入输出语法

JavaScript 提供了多种与用户交互的方式：

语法作用示例
document.write('内容')向页面输出内容（支持 HTML 标签）document.write('<h1>我是标题</h1>')
alert('内容')弹出警告对话框alert('警告！')
console.log('内容')控制台打印（调试用）console.log('调试信息')
prompt('提示语')弹出输入框，返回用户输入的字符串prompt('请输入年龄:')
confirm('内容')弹出确认框，返回布尔值（确定为 true）confirm('确定删除？')

代码示例：

// 文档输出内容
document.write("你好啊")
document.write('我是输出内容')
document.write('<h1>我是标题</h1>')
// 控制台打印
console.log('看看对不对')
// 输入语句
prompt('请输入你的年龄:')

二、变量、数组与常量

1. 变量声明（let）

变量是存储数据的容器，用 let 声明（现代开发推荐，替代旧的 var）。

  旧版本 var 的一些问题：
  1. 可以先使用再声明(不合理)
  2. var声明过的变量可以重复声明(不合理)
  3. 比如变量提升、全局变量、没有块级作用域等等

语法与规则：

// 声明并赋值
let age = 18;
let username = '立夏';
// 同时声明多个变量
let num1 = 10, num2 = 20;
  • 命名规则：由字母、数字、_、$ 组成，不能以数字开头，区分大小写，遵循小驼峰命名法（如 userName）。
  • 注意：let 不允许重复声明同一变量；未赋值的变量默认值为 undefined。

2. 数组（存储多个数据）

数组用于存储有序数据集合，支持多种数据类型混合。

语法与操作：

声明语法：let 数组名 = [数据1，数据2，…,数据n]
1.数组索引号从0开始
2.数组可以存储任意类型的数据
3.数组名.length 可以获取数组的长度

// 声明数组
let arr = ["夏至未至", "林七夜", 11, "一笑奈何"];
// 访问元素（索引从 0 开始）
console.log(arr[0]); // 输出：夏至未至
// 获取数组长度
console.log(arr.length); // 输出：4

3. 常量（const）

常量用于存储不可修改的值，声明时必须赋值。
语法：const 变量名 = 值

const PI = 3.14;
console.log(PI); // 输出：3.14
// PI = 3.1415; // 报错：常量不能修改

三、数据类型与检测

JavaScript 是弱类型语言，变量类型由赋值决定，分为基本数据类型和引用数据类型。

1. 基本数据类型

类型描述示例
number数字（整数、小数、NaN）100、3.14、NaN
string字符串（单/双引号或反引号包裹）'hello'、"world"、`hi`
boolean布尔值true、false
undefined未赋值的变量let a;（a 为 undefined）
null空值（主动赋值）let obj = null;

代码示例：

// 数字型
console.log(1 + 1); // 2
console.log("今夏" - 2); // NaN（无效运算）
// 字符串型
let str1 = "都不重要";
let str2 = '奈何';
console.log('这位是"微微"'); // 单引号内嵌套双引号
console.log("你好啊，'立夏'"); // 双引号内嵌套单引号
console.log('你好啊，\'林七夜\''); // 转义符输出单引号
// 布尔型
let isCool = true;
console.log(3 > 4); // false
// undefined 与 null
let num;
console.log(num); // undefined
let obj = null;
console.log(obj); // null
console.log(undefined + 1); // NaN
console.log(null + 1); // 1（null 可视为 0）

2. 字符串拼接与模版字符串

  • 字符串拼接：用 + 连接字符串或变量。

    console.log("你好啊" + "七夜"); // 输出：你好啊七夜

  • 模版字符串：用 ` 包裹，${变量} 插入变量 【非常重要！！！】

    let age1 = 2;
document.write(`我今年${age1}岁了`); // 输出：我今年2岁了

3. 数据类型检测（typeof）

用 typeof 关键字检测变量类型：

let num4 = 10;
console.log(typeof num4); // number
let str4 = "忽而今夏";
console.log(typeof str4); // string
let flag = false;
console.log(typeof flag); // boolean
let obj1 = null;
console.log(typeof obj1); // object（特殊处理）

四、类型转换

由于 prompt、表单等获取的数据默认是字符串，常需转换为数字进行运算。

1. 隐式转换（自动转换）

系统根据运算符自动转换：

  • + 两边有字符串时，转为字符串拼接；
  • -、*、/ 等算术运算符转为数字运算；
  • + 作为正号时，可将字符串转为数字。
console.log("pink" + 1); // pink1（拼接）
console.log(2 - "2"); // 0（转数字运算）
console.log(+"123"); // 123（字符串转数字）
console.log(+"11" + 11); // 22（转换后相加）

2. 显式转换（手动转换）

方法作用示例
Number(数据)转为数字型Number("123") → 123
parseInt(数据)转为整数（忽略小数和非数字字符）parseInt("12.34px") → 12
parseFloat(数据)转为浮点数parseFloat("12.34px") → 12.34

代码示例：

// 处理用户输入的薪水（字符串转数字）
let sal1 = prompt("输入你的薪水1");
console.log(Number(sal1) + 100); // 转换后相加
let sal2 = Number(prompt("输入你的薪水2"));
console.log(sal2 + 100);
let sal3 = +prompt("输入你的薪水3"); // 隐式转换
console.log(sal3 + 100);

五、html、CSS、JavaScript综合小案例

代码示例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>基础综合案例1</title>
          <style>
            h1 {
            text-align: center;
            }
            table {
            /* 合并相邻边框 */
            border-collapse: collapse;
            text-align: center;
            }
            table,
            tr,
            th {
            margin: 0 auto;
            width: 700px;
            height: 50px;
            border: 1px solid black;
            }
            img {
            height: 500px;
            filter: blur(2px);
            }
          </style>
        </head>
        <body>
        <h1>订单确认</h1>
          <script>
            let price = +prompt("请输入价格")
            let num = +prompt("请输入商品数量")
            let address = prompt("请输入地址")
            let total = price * num
            // 模版字符串的应用
            document.write(`
            <table cellspacing="0">
              <tr>
              <th>商品名称</th>
              <th>商品价格</th>
              <th>商品数量</th>
              <th>总价</th>
              <th>收货地址</th>
              </tr>
              <tr>
              <th>小米青春版</th>
              <th>${price}元</th>
              <th>${num}</th>
              <th>${total}</th>
              <th>${address}林七夜收</th>
              </tr>
            </table>
            `)
          </script>
            <img src="../HTML+CSS学习/picture/巫.jpg" alt="">
          </body>
        </html>

显示效果

在这里插入图片描述

总结

本文通过代码示例，讲解了 JavaScript 的核心基础：

  • 书写位置：内部、外部、内联（推荐外部和内部）；
  • 输入输出：document.write、alert、console.log、prompt 等；
  • 变量与常量：let 声明变量，const 声明常量；
  • 数据类型：5 种基本类型及检测方法 typeof；
  • 类型转换：隐式转换和显式转换（解决字符串运算问题）。

如果我的内容对你有帮助，请 点赞 ， 评论 ， 收藏 。创作不易，大家的支持就是我坚持下去的动力！
在这里插入图片描述

posted @ 2025-12-13 14:18  yangykaifa  阅读(1)  评论(0)    收藏  举报