JavaScript基础-优快云博客

文章目录

前言
一、JavaScript简介
- 1.JavaScript脚本语言
- 2.JavaScript的组成
二.JavaScript应用
三.JavaScript变量
四.JavaScript数据类型
总结

前言

在当今的互联网时代，JavaScript 已经成为了前端开发中不可或缺的一部分。无论是构建动态网页、开发复杂的单页应用，还是实现服务器端的功能，JavaScript 都扮演着至关重要的角色。作为一门轻量级且功能强大的脚本语言，JavaScript 不仅易于学习，还能够与 HTML 和 CSS 无缝集成，为开发者提供了极大的灵活性。

本篇博客将带你简单了解 JavaScript 的基础知识，包括其基本概念、组成部分、应用方式、变量声明、数据类型等核心内容。无论你是刚刚接触编程的新手，还是有一定经验的开发者，相信通过这篇博客，你都能对 JavaScript 有一个更加全面和深入的理解。

一、JavaScript简介

1.JavaScript脚本语言

JavaScript是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、
PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript是一种轻量级的编程语言。

JavaScript是可插入 HTML 页面的编程代码。

JavaScript插入 HTML 页面后，可由所有的现代浏览器执行。

2.JavaScript的组成

● ECMScript：脚本程序设计语言（JavaScript的核心）
● BOM：浏览器对象模型（Browser Object Model)
● DOM：文档对象模型（Document Object Model)

二.JavaScript应用

1.行内应用

在HTML代码中嵌入JS代码，不使用 script 标签

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JS行内应用</title>
</head>
<body>
  <input type="button" value="button" onclick="alert('hello JS');">
</body>
</html>

在这里插入图片描述

2.内部应用（内嵌）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JS内部应用</title>
</head>
<body>
  <!-- script标签用于执行脚本代码，默认的type值为"text/javascript"，指定按照js的语法执行 -->
  <script type="text/javascript">
    // window.alert 等价于 alert
    window.alert('hello JS');
  </script>
</body>
</html>

在这里插入图片描述

3.外部应用（外联）

1.先创建一个hello.js文件（内容必须遵守JS的语法规范）

alert('hello JS');

2.在 JS3.html 文件中引用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JS外部应用</title>
</head>
<body>
  <script type="text/javascript" src="./hello.js"></script>
</body>
</html>

在这里插入图片描述

三.JavaScript变量

任何编程语言程序组成都可以划分为3个部分：
1.表达式
2.变量
3.流程控制语句
表达式
表达式即进行各种各样的运算

表达式	结果
1+1	2
2/2	1
5%2	1

对于表达式所计算出的结果需要存储，方便后期使用进行运算

变量
申明变量：var变量名称
申明变量且初始化：var 变量名称 = 变量值

● 变量名称的首字母只能是字母、下划线（_）或美元符号（S)，例如：变量名叫做“1name”首字母为数
字不合适
● 变量名中不能包含空格或标点符号
● 变量名区分大小写，不能使用内置的关键字，例如：if、for、switch、break等
● 变量名尽量以可读性命名，即见名知意，例如：姓名 name，年龄 age
● 推荐变量名采用首字母小写的驼峰式命名，例如：userlnfo
● 使用下划线分隔方式命名，例如：user_info

四.JavaScript数据类型

1.数字类型(Number)

数字类型（Number）表示变量存储的值为数字。数字包括正数、负数、整数与小数。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>数字类型</title>
</head>
<body>
  <script type="text/javascript">
    // 变量为容器，容器中保存的数据类型是什么格式，就代表的是什么数据类型
    var a = 10; // 申明一个变量a，保存的值为数字类型
    // typeof 为 JS 中的内置语句，用来查看变量保存的值的数据类型
    console.log(typeof a);

    var height = 1.78;
    console.log(typeof height);

    var money = -1000;
    console.log(typeof money);
    // 数字类型的数据可以进行数学运算
    // = 号代表为赋值操作，将 = 号右侧的表达式运算的结果赋值给 = 号左侧的变量
    money = money + 2000;
    console.log("计算之后的结果为：",money);

    // 进行除法运算
    console.log(money/31);

    // 当被除数为0时，结果无意义，显示为 Infinity
    console.log(money/0);

    // NAN 表示不是一个数字 Not A Number
    // "a" 不是数字类型的数据
    console.log("a" * 10);
    console.log(a * 10);
  </script>
</body>
</html>

在这里插入图片描述

2.字符串类型(String)

使用单引号或者双引号包裹起来的字符就是字符串类型（String）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>字符串类型</title>
</head>
<body>
  <script type="text/javascript">
    // 使用双引号包裹
    var name = "司徒小明";
    // 使用单引号包裹
    var name2 = '张小明';
    console.log(typeof name,typeof name2);
  </script>
</body>
</html>

在这里插入图片描述

A.单双引号混合使用

注意：单引号中不能包含单引号，但是可以包含双引号；双引号中不能包含双引号，但是可以包含单引
号。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>字符串类型</title>
</head>
<body>
  <script type="text/javascript">
    var info = '"PHP"是世界上最好的语言！';
    console.log(info);
    var info2 = "'HTML'是超文本标记语言！";
    console.log(info2);
  </script>
</body>
</html>

在这里插入图片描述

B.转义字符
转义字符即以 \ 开头用于在字符串中需要输出特殊的符号使用。
转义字符比较多常用的包括 \’ (输出单引号）、\n (换行)、\r (回车)、\"(输出双引号)
常用转义字符所对应的意义：

转义字符	意义	ASCII码值(十进制)
\n	换行(LF)，将当前位置移到下一行开头	010
\r	回车(CR)，将当前位置移动到本行开头	013
\t	水平制表(HT)(跳到下一个TAB位置)	009
\\	代表一个反斜杠字符“\”	092
\’	代表一个单引号字符	039
\"	代表一个双引号字符	034
\?	代表一个问号	063
\0	空字符(NULL)	000

例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>字符串类型</title>
</head>
<body>
  <script type="text/javascript">
    // 使用双引号时，里面的单引号不借助转义字符
    var name = "My name's Tom";
    console.log(name);

    // 使用单引号时，需要借助转义字符来输出单引号
    var name2 = 'My name\'s Tom';
    console.log(name2);

    // 其他转义字符的使用
    var info = '勒索\t病毒通常使用非对称和对称加密算法组合的形式来加密文件，\n绝大部分勒索病毒均无法通过技术手段解密，一般无法溯源，危害巨大。';
    console.log(info);
  </script>
</body>
</html>

在这里插入图片描述

3.布尔数据类型(boolean)

布尔数据类型表示一种状态：一般使用布尔值表示真与假，布尔值本身没有特别含义，但是经常会使用
在流程控制上。
布尔类型可以出现的值为：true/false

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>布尔类型</title>
</head>
<body>
  <script type="text/javascript">
    // 手动指定变量的值为真，可以作为标识符使用
    var n1 = true;
    console.log(typeof n1); // boolean
    // 使用运算符获取布尔值
    var a = 10;
    var b = 20;
    // 判断a是否大于b，如果a大于b，结果为真，否则结果为假
    console.log(a > b); // false
  </script>
</body>
</html>

在这里插入图片描述

4. undefined

undefined类型只有一种值，就是undefined。一般是申明变量没有初始化就为undefined。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>undefined</title>
</head>
<body>
  <script type="text/javascript">
    // 只是申明了a变量
    var a; // => undefined
    console.log(a); // undefined
    a = 10;
    console.log(a); // 10
  </script>
</body>
</html>

在这里插入图片描述

5. null

null数据类型的值也只有一个，就是null，null代表为空

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>null</title>
</head>
<body>
  <script type="text/javascript">
    var a = null;
    console.log(null == a);
    console.log(typeof a);
  </script>
</body>
</html>

在这里插入图片描述

总结

通过本篇博客的学习，我们对 JavaScript 的基础知识有了一个较为系统的了解。

在应用方面，我们学习了 JavaScript 的三种常见应用方式：行内应用、内部应用和外部应用。每种方式都有其适用的场景，开发者可以根据具体需求选择合适的方式来嵌入 JavaScript 代码。

此外，我们还简单探讨了 JavaScript 中的变量声明和数据类型。变量是编程中的基本概念，而 JavaScript 的动态类型特性使得它在处理不同类型的数据时非常灵活。我们简单介绍了数字类型、字符串类型、布尔类型、undefined 和 null 等常见的数据类型，并通过示例代码展示了它们的使用方法。

总的来说，JavaScript 作为一门功能强大且易于上手的编程语言，为开发者提供了丰富的工具和灵活的方式来构建现代化的 Web 应用。掌握这些基础知识将为你在前端开发的道路上打下坚实的基础。希望这篇博客能够帮助你更好地理解和应用 JavaScript，期待你在未来的开发中创造出更多精彩的作品！

如果你觉得这篇文章对你有帮助，欢迎点赞，你的支持是我分享更多免费优质内容的动力！