JavaScript 基础：从概念到变量与交互逻辑详解

JavaScript 基础入门：核心概念、语法结构与变量应用

前言

在接触前端开发之前，许多人存在一种误解：

• HTML 仅用于构建页面内容结构

• CSS 仅用于调整页面视觉样式

• JavaScript 可能只是“更高级一点的样式控制”

直到真正开始编写 JS 代码后，才发现这种认知完全错误。

与 CSS 关注页面外观不同，JavaScript 不关心页面长什么样，

它关注的核心是：

用户执行操作 → 系统随后发生的响应

一、JavaScript 的定义及其在前端中的角色

JavaScript 是一种运行在浏览器环境中的脚本语言。

脚本语言的核心特征在于：

• 无需预先编译成二进制文件

• 浏览器逐行解释并执行代码

在前端开发的三大基石中，各自职责清晰：

• HTML：负责页面结构，构建骨架

• CSS：负责页面样式，提供皮肤

• JavaScript：负责页面逻辑与交互，充当大脑

举一个直观的例子：

• 点击按钮

• 弹出提示框

• 执行表单校验

• 根据用户操作动态改变页面内容

上述所有行为，均由 JavaScript 负责处理。

二、JavaScript 的三种引入方式

行内式 JS（功能可用，但不推荐）

直接将代码嵌入 HTML 标签属性中：

<button type="button" onclick="alert('bjyxszd');">
		bxg
</button>

该方式特点如下：

• 编写速度快

• 但导致 HTML 结构与 JS 逻辑混杂

• 代码量增加后极难维护

内部 JS

将 JS 代码放置在

<script type="text/javascript">
    function getDemo(){
        var result = confirm("是否确定要删除数据？");
        if(result == true){
            alert('删除成功！')
        }else{
            alert("取消删除！")
        }
    }
</script>

这种方式的优势在于：

• 实现了 JS 与 HTML 的部分分离

• 非常适合学习阶段进行代码测试

外部 JS 文件

新建一个名为 demo1.js 的文件：

function getSay(){
    alert("Hello World!")
}

console.log("输出函数")

var name = prompt("请输入姓名：")
console.log(name)

然后在 HTML 文件中通过 script 标签引入：

<script src="demo1.js"></script>

其优点十分明显：

• 代码结构清晰

• JS 代码可实现复用

• 在代码量较大时，这种方式体验更佳

三、JS 常见的输入与输出方式

alert：弹窗提示

<body>
		<button type="button" onclick="alert('bjyxszd');">
			bxg
		</button>

作用直接，但会阻塞后续代码执行，

在实际项目开发中并不常用。

confirm：让用户做出选择（重点掌握）

var result = confirm("是否确定要删除数据？");

这里是我第一次意识到 JS 不仅仅是“执行”，而是在等待用户的选择：

点击“确定” → 返回 true

点击“取消” → 返回 false

从这一刻起，代码逻辑开始产生分支。

prompt：输入框（返回字符串类型）

var name = prompt("请输入姓名：");
console.log(name);

需要注意一点：

• prompt 获取的结果类型始终为字符串

若后续需参与数值计算，必须处理类型转换问题

console.log：开发者的调试工具

其实上面的截图中已经能看出console.log的用法，在控制台打印出内容。

console.log("输出函数");

相比弹窗：

• 不会打断程序流程

• 输出信息更清晰

学习 JS 时，console.log 几乎是必备工具。

四、变量：JS 中存储数据的“容器”

var a = 10;
var b = "10";
var c = false;

JavaScript 属于弱类型语言：

• 无需提前声明变量类型
• 赋值为何种值，变量即为何种类型

常见数据类型示例如下

var a = 10;
console.log(a, typeof a);

var b = "10";
console.log(b, typeof b);

var c = false;
console.log(c, typeof c);

var d;
console.log(d, typeof d);

var e = null;
console.log(e, typeof e);

五、一个完整的小案例：点击 → 判断 → 执行

HTML 结构：

<a href="#" rel="external nofollow"  onclick="getDemo()">点击我删除数据</a>

JS 逻辑：

function getDemo(){
    var result = confirm("是否确定要删除数据？");
    if(result == true){
        alert('删除成功！')
    }else{
        alert("取消删除！")
    }
}

这段代码没有任何样式，但已经在执行三个步骤：

1、接收用户操作

2、判断用户选择

3、根据结果执行不同分支

这是 JavaScript 和 CSS 最本质的区别：

CSS 仅描述静态规则，而 JS 在处理“可能发生的情况”。

六、小结

写完这一篇，我对 JavaScript 有了一个很清晰的认识：

• CSS 的难点在于细节处理

• JavaScript 的难点在于逻辑与判断

从写 JS 开始，你需要提前想清楚：

• 用户会不会点

• 点了之后怎么办

• 不点又怎么办

后面在数据类型、运算符、流程控制中，这种“分岔思维”会越来越明显。

总结

到此这篇关于JavaScript是什么以及一次理清变量、语法的文章就介绍到这了,更多相关JS变量、语法内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！