什么是JavaScript（快速入门）_编程什么是javascript-CSDN博客

本文链接：https://blog.csdn.net/qq_46423017/article/details/127037891

JavaScript是一种流行的脚本语言，用于Web开发中的交互逻辑。它与HTML和CSS共同构成网页，负责行为层面。JavaScript是解释型、面向对象、弱类型且动态的，支持事件驱动。基本使用包括内部和外部引入，以及数据类型的快速浏览，如Number、字符串、布尔值等。严格检查模式（use strict）有助于避免编程中的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、什么是JavaScript

概述

JavaScript是一门世界上最流行的脚本语言

JavaScript是Web开发领域中的一种功能强大的编程语言，主要用于开发交互式的Web页面。在计算机、手机等设备上浏览的网页，其大多数的交互逻辑几乎都是由JavaScript实现的。
对于制作一个网页而言，HTML、CSS和JavaScript分别代表了结构、样式和行为，结构是网页的骨架，样式是网页的外观，行为是网页的交互逻辑，如下图所示。

JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页，其中：

HTML 用来定义网页的内容，例如标题、正文、图像等；
CSS 用来控制网页的外观，例如颜色、字体、背景等；
JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。

历史

ECMAScript可以理解为JavaScript的一个标准
最新版本已经到es6
但是大部分浏览器还只停留在支持es5代码上
开发环境~线上环境，版本不一致

布兰登·艾奇，JavaScript 创始人

特点

解释型脚本语言：JavaScript 是一种解释型脚本语言，与 C、C++ 等语言需要先编译再运行不同，使用 JavaScript 编写的代码不需要编译，可以直接运行。
面向对象：JavaScript 是一种面向对象语言，使用 JavaScript 不仅可以创建对象，也能操作使用已有的对象。
弱类型：JavaScript 是一种弱类型的编程语言，对使用的数据类型没有严格的要求，例如您可以将一个变量初始化为任意类型，也可以随时改变这个变量的类型。
动态性：JavaScript是一种采用事件驱动的脚本语言，它不需要借助 Web 服务器就可以对用户的输入做出响应，例如我们在访问一个网页时，通过鼠标在网页中进行点击或滚动窗口时，通过 JavaScript 可以直接对这些事件做出响应。
跨平台：JavaScript不依赖操作系统，在浏览器中就可以运行。因此一个 JavaScript 脚本在编写完成后可以在任意系统上运行，只需要系统上的浏览器支持 JavaScript 即可。

2、基本使用及HelloWorld

1、引入JavaScript

（1）内部标签

<!--    script标签内，写JavaScript代码-->
    <script>
        // 弹窗
        alert('hello world');
    </script>

输出效果：

（2）外部引入

我的第一个JavaScript程序.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--    script标签内，写JavaScript代码-->
    <!--    <script>-->
    <!--        // 弹窗-->
    <!--        alert('hello world');-->
    <!--    </script>-->

    <!--    外部引入
    <script src="js/qj.js"/>记住千万不可以这样！
    script必须成对出现！！！
    -->
    <script src="js/qj.js"></script>

    <!--    不用显示定义type，也默认就是JavaScript-->
    <script type="text/javascript">
        
    </script>

</head>
<body>

</body>
</html>

qj.js

alert('hello world');

输出效果：

2、基本语法

记得要先把idea调成ECMAScript 6+

网页功能（F12）：

Elements：把网址复刻一遍
Console：调试js
Sources：要查看短点
Network：java jar包
Application：查看网站的应用

<script>
    // 1.定义变量 变量类型 变量名 = 变量值
    var num = 1;
    alert(num);
</script>

输出效果：

//2.条件判断
var score = 71;
if (score > 60 && score < 70) {
    alert("60~70")
} else if (score > 70 && score < 80) {
    alert("70~80")
} else {
    alert("other")
}

输出效果：

3、浏览器控制台使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--javascript严格区分大小写-->
    <script>
        //1. 定义变量  (变量类型  变量名 = 变量值;)
        var score = 1;
        // alert(num);
        //2. 条件控制
        if (score>60 && score<70) {
            alert("60~70");
        } else if(score>70 && score<80) {
            alert("70~80");
        } else {
            alert("other");
        }
        //console.log(score); 在浏览器的控制台打印变量  相当于System.out.println();
    </script>
</head>
<body>

</body>
</html>

输出效果：

调试（打断点）

4、数据类型快速浏览

记住不能以数字作为变量名，如果用符号的话一般就是_和$
清空控制台（Ctrl+L）

变量

var 变量名

Number

js不区分小数和整数，number
123 //整数
123.1 //浮点数
1.123e3 //科学计数法
-99 //负数
NaN // not a number
Infinity //表示无限大

字符串

‘abc’
"abc"

布尔值

true
false

逻辑运算

&& //两个都是真，结果为真
|| //一个为真，结果为真
! //真即假，假即真

比较运算符

= 赋值，不是比较运算符
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果true）（尽量使用这个！）

注意：

NaN===NaN，结果为false,这个与所有的数值都不相等，包括自己

只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题

console.log((1/3)===(1-2/3))
结果为false

尽量避免使用浮点数进行运算，存在精度问题

null和undefined

null 空
undefined 未定义

数组

java的数值必须是相同的类型的对象，js中不需要这样

var arr = [1, 2, 3, 4, 5, 6, 'hello', null, true]
 new Array(1,2,3,'hello',null, true);

取数据下标，如果越界了，就会undefined

对象

对象是大括号{}，数组是中括号[]
每个属性之间使用逗号隔开，最后一个不需要添加

        //    Person person = new Person(1,2,3,4)
        'use strict'
        //全局变量
        let i = 1

        var person = {
            name: "shanmu",
            age: 3,
            tags: ['js', 'java', 'web']
        }

5、严格检查模式strict

前提：idea需要设置支持es6的语法
use strict 严格校验模式，预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行
局部变量建议都使用let去定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    前提是需要idea支持es6语法
        'use strict';严格检查模式，预防JavaScript的随意性导致产生一些问题，必须写在第一行！！！！
        局部变量建议都去使用let去定义！
    -->
    <script>
        // //保证代码的可读性，尽量使用[]
        // var arr = [1, 2, 3, 4, 5, 6, 'hello', null, true]
        //
        // new Array(1,2,3,'hello',null, true);
        //    Person person = new Person(1,2,3,4)
        'use strict'
        //全局变量
        let i = 1
        var person = {
            name: "shanmu",
            age: 3,
            tags: ['js', 'java', 'web']
        }

    </script>
</head>
<body>

</body>
</html>

错误：

正确：