JavaScript的变量入门知识点-优快云博客

1.什么JavaScript

是一种运行在客户端（浏览器）的编程语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画等交互效果。

2.JavaScript书写的位置

2.1内部JavaScript

直接写在HTMl中，用script标签包住。

规范：script标签写在</body>上面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>

<body>
    <script>
        alert("Hello, World!");
    </script>
    初学JavaScript，欢迎！
</body>

</html>

注意：我们将JavaScript代码放在HTML文件的底部附近，原因是因为浏览器会按照代码在文件夹中的顺序加载HTML，如果是先加载的是JavaScript去修改它下方的HTML，那么就有可能会出现HTML没有被加载而失效。所以，将JavaScript代码放在HTML代码底部附近。

2.2外部JavaScript

代码写在.js的文件夹，标签内部不能写JS代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 通过外部JavaScript标签引入外部JavaScript文件 -->
    <script src="./my.js" type="text/javascript"></script>
</head>
<body>
    <h1>外部JavaScript标签</h1>
</body>
</html>

2.3行内JavaScript

代码写在标签内部

语法：直接标签内部写js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="alert('Hello World!')">点击</button>
</body>
</html>

3.输入输出语句

3.1输出语句

语句1.

作用：页面弹出警示框

alert("页面警示框输出的内容");

语句2.

在body标签内输出内容，如果输出的内容写标签，会被解析成网页元素

document.write("向页面文档内容输出的内容");

语句3.

作用：控制台输出语法，程序员调试。

conslole.log("控制台输出内容");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 输出语句1
        alert("Hello, World!");
        // 输出语句2
        document.write("Hello, World!");
        document.write("<h1>Hello, World!</h1>");
        // 输出语句3
        console.log("Hello, World!");
    </script>
</body>
</html>

3.2输入语句

语法

prompt('请输入您的姓名');	//prompt是提示的意思

作用：显示一个对话框，对话框中包含一条信息，用来提示用户输入文字

4.变量

什么是变量？

就是计算机存储数据的容器。主要作用是记录计算机中数据的不同状态。

注意：变量不是数据本身，它仅仅是一个用来存储数值的容器。

变量的基本使用

1.变量的声明

2.变量的赋值

注意：

1.数字直接存储

2.字符用单引号引起来，表示一段信息。

要想使用变量，首先需要创建变量（也称为声明变量或者定义变量）

语法

let 变量名;

声明变量有两部分组成：声明关键字，变量名（标识）

let关键字，let：允许，许可，让，要；

变量命名的规则

不能使用关键字

只能使用下划线，字母，数字，$组成，且数字不能开头。

字母严格区分大小写。

5.常量

1.常量是一个容器，用于保存数据。

2.和变量的区别：常量里面保存的值是不允许改变的。

3.使用场景：当某个值永远不会改变的时候，我们可以使用常量来进行保存，目的是为了程序的安全。

const a =10;//const就是常量的意思

6.数据类型

1.基本数据类型（简单数据类型)：number（数字型），String（字符串型），boolean(布尔型)，undefined(未定义型)，null（空类型）

2.引用数据类型（复杂数据类型）：Object，Function，Array。

通过typeof关键字检测数据类型

7.模版字符串

使用场景：拼接字符串和变量

语法：~~反引号，内容拼接的时候，使用${}包住变量

let name ='张三';
let age = 18;
console.log(`${name}今年${age}`);

<script>
       let username = prompt("请输入姓名");
       let age = prompt("请输入年龄");
       document.write(`${username}今年${age}岁`);
</script>