【Java Web学习 | 第七篇】JavaScript(1) 基础知识1

🌈 个人主页: Hygge_Code
🔥 热门专栏:从0开始学习Java | Linux学习| 计算机网络
💫 个人格言: "既然选择了远方，便不顾风雨兼程"

文章目录

• [JavaScript 核心语法解析](#JavaScript 核心语法解析)
• • [一、JavaScript 书写位置与基础语法🥝](#一、JavaScript 书写位置与基础语法🥝)
  • • [1. 三种书写位置🐦‍🔥](#1. 三种书写位置🐦‍🔥)
    • • [（1）内部 JavaScript](#（1）内部 JavaScript)
      • [（2）外部 JavaScript](#（2）外部 JavaScript)
      • [（3）内联 JavaScript](#（3）内联 JavaScript)
    • [2. 基础语法规则](#2. 基础语法规则)
    • [3. 输入输出语法](#3. 输入输出语法)
  • 二、变量、数组与常量🥝
  • • [1. 变量声明（`let`）](#1. 变量声明（let）)
    • [2. 数组（存储多个数据）](#2. 数组（存储多个数据）)
    • [3. 常量（`const`）](#3. 常量（const）)
  • 三、数据类型与检测🍂
  • • [1. 基本数据类型](#1. 基本数据类型)
    • [2. 字符串拼接与模版字符串](#2. 字符串拼接与模版字符串)
    • [3. 数据类型检测（`typeof`）](#3. 数据类型检测（typeof）)
  • 四、类型转换👏
  • • [1. 隐式转换（自动转换）](#1. 隐式转换（自动转换）)
    • [2. 显式转换（手动转换）](#2. 显式转换（手动转换）)
  • 五、html、CSS、JavaScript综合小案例🍂
  • • 代码示例
    • 显示效果
  • 总结

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；
• 类型转换：隐式转换和显式转换（解决字符串运算问题）。

---

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