JavaScript是什么以及一次理清变量、语法

更新时间：2026年07月09日 09:27:50 作者：常常有

JS是一种广泛应用于网页开发的脚本语言,这篇文章主要介绍了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 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变量、语法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

webpack之devtool详解
这篇文章主要介绍了webpack之devtool详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
详解javascript立即执行函数表达式IIFE
本文主要介绍了javascript立即执行函数表达式IIFE的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
微信小程序如何获取用户头像和昵称
这篇文章主要介绍了微信小程序如何获取用户头像和昵称，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
TensorFlow.js机器学习预测鸢尾花种类
TensorFlow.js是一个开源的基于硬件加速的JavaScript库，用于训练和部署机器学习模型。本教程将会带大家简单了解和使用TensorFlow.js框架实现预测鸢尾花种类
2022-11-11
JavaScript中的observables 操作符创建实例
这篇文章主要介绍了JavaScript中的observables 操作符创建实例的相关资料，文章介绍详细，需要的小伙伴可以参考一下，希望对你有所帮助
2022-03-03
js控件Kindeditor实现图片自动上传功能
这篇文章主要为大家详细介绍了js控件Kindeditor实现图片自动上传功能的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-06-06
JS实现同一个网页布局滑动门和TAB选项卡实例
这篇文章主要介绍了JS实现同一个网页布局滑动门和TAB选项卡效果,通过简单的自定义切换函数setTab实现页面元素的遍历及属性切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
Three.js基础学习教程
这篇文章主要为大家详细介绍了Three.js基础学习教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
Javascript必知必会(四)js类型转换
这篇文章主要介绍了Javascript必知必会(四)js类型转换的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
JS/HTML5游戏常用算法之碰撞检测像素检测算法实例详解
这篇文章主要介绍了JS/HTML5游戏常用算法之碰撞检测像素检测算法,结合实例形式详细分析了javascript像素检测碰撞算法的原理、实现步骤及相关操作技巧,需要的朋友可以参考下
2018-12-12