从零开始搞定 JavaScript：引入方式与基础语法全揭秘！

本文链接：https://blog.youkuaiyun.com/weixin_66592566/article/details/144023927

全文目录：

开篇语

哈喽，各位小伙伴们，你们好呀，我是喵手。运营社区：C站/掘金/腾讯云/阿里云/华为云/51CTO；欢迎大家常来逛逛

今天我要给大家分享一些自己日常学习到的一些知识点，并以文字的形式跟大家一起交流，互相学习，一个人虽可以走的更快，但一群人可以走的更远。

我是一名后端开发爱好者，工作日常接触到最多的就是Java语言啦，所以我都尽量抽业余时间把自己所学到所会的，通过文章的形式进行输出，希望以这种方式帮助到更多的初学者或者想入门的小伙伴们，同时也能对自己的技术进行沉淀，加以复盘，查缺补漏。

小伙伴们在批阅的过程中，如果觉得文章不错，欢迎点赞、收藏、关注哦。三连即是对作者我写作道路上最好的鼓励与支持！

📖 目录

🎯 前言：为什么要学习 JavaScript？
🔗 JavaScript 的三种引入方式
- 📜 1. 内联方式
- 🛠️ 2. 内部方式
- 🌐 3. 外部方式
📚 JavaScript 的基础语法
- 💡 1. 变量和常量
- 🔢 2. 数据类型
- 🔄 3. 条件语句和循环
- ✨ 4. 函数基础
🛠️ 案例展示：JavaScript 的应用场景
🌟 拓展阅读：深入了解 JavaScript 的高级特性
💡 总结：学习 JavaScript 的正确姿势

🎯 前言：为什么要学习 JavaScript？

在前端开发的世界里，JavaScript 是绝对的核心玩家。它能让网页从静态的画布变成动态、交互的舞台。你可以用它实现酷炫的动画、实时数据更新，甚至还能用它写后端、开发 APP。🌍

不夸张地说，没有 JavaScript 的网页是没有灵魂的！（严肃脸）🫡 所以，今天我们就从头开始，聊聊 JavaScript 的引入方式和基础语法，为你的前端之旅打下牢固的基础。

🔗 JavaScript 的三种引入方式

JavaScript 想要在网页上生效，必须通过特定的方式嵌入到 HTML 中。不同场景下，我们有三种常见的引入方式：

📜 1. 内联方式

概念：
直接将 JavaScript 代码写入 HTML 标签的 onclick 或 onload 等属性中。

优点：

简单易懂，快速测试小功能。

缺点：

不便于维护，代码杂乱无章。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>内联方式示例</title>
</head>
<body>
  <button onclick="alert('你点击了按钮！')">点击我</button>
</body>
</html>

**适用场景：**快速调试或简单功能。

🛠️ 2. 内部方式

概念：
将 JavaScript 写在 <script> 标签中，放置于 HTML 文件的 <head> 或 <body> 中。

优点：

代码集中，适合简单网页。

缺点：

当代码过多时，文件会变得冗长。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>内部方式示例</title>
  <script>
    function greet() {
      alert('欢迎访问我的网页！');
    }
  </script>
</head>
<body>
  <button onclick="greet()">点击问候</button>
</body>
</html>

**适用场景：**单页面简单项目。

🌐 3. 外部方式

概念：
将 JavaScript 写入独立的 .js 文件，通过 <script src="路径"></script> 引入。

优点：

代码模块化，便于复用和维护。
支持多个页面共享同一脚本。

缺点：

增加了文件请求，可能稍微影响加载速度。

示例代码：

index.html 文件：

<!DOCTYPE html>
<html>
<head>
  <title>外部方式示例</title>
  <script src="script.js"></script>
</head>
<body>
  <button onclick="greet()">点击问候</button>
</body>
</html>

script.js 文件：

function greet() {
  alert('外部文件的代码生效啦！');
}

**适用场景：**大型项目或团队协作。

📚 JavaScript 的基础语法

了解了如何引入 JavaScript，接下来就是重头戏：**基础语法！**我们从最常用的知识点讲起，让你轻松上手。

💡 1. 变量和常量

JavaScript 提供了三种声明变量的方式：var、let 和 const。

var：传统方式，作用域是函数级。
let：现代方式，块级作用域，推荐使用。
const：声明常量，不可重新赋值。

示例代码：

var name = "Tom";
let age = 25;
const country = "China";

console.log(name);    // Tom
console.log(age);     // 25
console.log(country); // China

🔢 2. 数据类型

JavaScript 支持多种数据类型：

基本类型：String、Number、Boolean、Undefined、Null、Symbol。
复杂类型：Object（包括数组和函数）。

示例代码：

let isHappy = true;  // Boolean
let count = 42;      // Number
let message = "Hello"; // String
let list = [1, 2, 3];  // Array
let person = { name: "Alice", age: 30 }; // Object

🔄 3. 条件语句和循环

条件语句和循环控制代码的执行逻辑。

条件语句：

let score = 85;

if (score >= 90) {
  console.log("优秀！");
} else if (score >= 60) {
  console.log("及格！");
} else {
  console.log("不及格！");
}

循环语句：

for (let i = 1; i <= 5; i++) {
  console.log(`第 ${i} 次循环`);
}

✨ 4. 函数基础

函数是 JavaScript 的核心，用于封装可复用的代码逻辑。

声明函数：

function add(a, b) {
  return a + b;
}

console.log(add(5, 10)); // 15

箭头函数：

const multiply = (x, y) => x * y;

console.log(multiply(3, 4)); // 12

🛠️ 案例展示：JavaScript 的应用场景

场景：实现一个计数器功能

HTML 文件：

<!DOCTYPE html>
<html>
<head>
  <title>计数器</title>
  <script src="counter.js"></script>
</head>
<body>
  <h1>简单计数器</h1>
  <p>点击按钮增加计数：</p>
  <button onclick="increment()">增加</button>
  <p id="count">0</p>
</body>
</html>

JavaScript 文件（counter.js）：

let count = 0;

function increment() {
  count++;
  document.getElementById("count").textContent = count;
}

🌟 拓展阅读：深入了解 JavaScript 的高级特性

ES6+ 新特性
- 模板字符串、解构赋值、模块化 import/export。
- 了解箭头函数、async/await 等。
DOM 操作
- 如何操作页面元素，动态修改内容或样式。
事件监听
- 使用 addEventListener 实现更灵活的事件处理。

💡 总结：学习 JavaScript 的正确姿势

JavaScript 是前端开发的灵魂，学习它不仅需要掌握基础知识，更需要通过实践积累经验。无论是简单的计数器，还是复杂的单页应用，每一步进步都能让你离高手更近一步。😉

最后提醒：别怕错，多练习，代码会让你成长的！Happy Coding！🎉

… …

文末

好啦，以上就是我这期的全部内容，如果有任何疑问，欢迎下方留言哦，咱们下期见。

… …

学习不分先后，知识不分多少；事无巨细，当以虚心求教；三人行，必有我师焉！！！

wished for you successed ！！！

⭐️若喜欢我，就请关注我叭。

⭐️若对您有用，就请点赞叭。
⭐️若有疑问，就请评论留言告诉我叭。

版权声明：本文由作者原创，转载请注明出处，谢谢支持！