【JavaScript】(一)（JS的书写位置、注释、输入输出和变量）

香蕉卟NaNa

已于 2023-02-24 16:04:36 修改

阅读量1.4k

点赞数 5

分类专栏： JavaScript 文章标签：前端 javascript

于 2022-04-30 23:23:57 首次发布

本文链接：https://blog.csdn.net/weixin_48650082/article/details/124520909

版权

JavaScript 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

前言：

刚开始学习JavaScript，下面是关于JS的一些非常非常基础的知识，JS的书写位置呀，JS的注释呀，JS的输入输出和变量呀~

JS的书写位置

➢ JS有三种书写位置，分别是行内、内嵌和外部。

1、行内式JS

➢ 行内式JS：直接写到元素的内部。
• 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
• 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中推荐使用单引号
• 可读性差，在html中编写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>
    <!-- 行内式JS 直接写到元素的内部 -->
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')">
</body>
</html>

效果展示：
行内式JS

2、内嵌JS

• 可以将多行JS代码写到 <script> 标签中
• 内嵌 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>
    <!-- 内嵌式JS -->
    <script>
        alert('你好呀~');
    </script>
</head>
<body>
    
</body>
</html>

效果展示：
内嵌式JS

3、外部JS文件

• 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
• 引用外部 JS文件的 script 标签中间不可以写代码
• 适合于JS 代码量比较大的情况

例子：
test.js

alert('如果我是DJ，你还爱我吗？');

test.html

<!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>
    <!-- 外部JS文件 -->
    <script src="js/test1.js"></script>
</head>
<body>
    
</body>
</html>

效果展示：
外部JS文件

JavaScript注释

为了提高代码的可读性，JS与CSS一样，也提供了注释功能。JS中的注释主要有两种，分别是单行注释和多行注释。

1、单行注释

VS Code中的默认快捷键是 ctrl + /
单行注释

2、多行注释

VS Code中的默认快捷键是 alt + shift + a
多行注释

JavaScript 输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

注意：alert() 主要用来显示消息给用户，console.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>
    <script>
        // 这是一个输入框
        prompt('请输入您想说的话');
        // alert 弹出警示框 展示给用户的
        alert('您的话已收到！');
        // console 控制台输出 给程序员测试用的
        console.log('这是程序员测试用的');
    </script>
</head>
<body>
    
</body>
</html>

效果展示：
输入框：

弹出框：

控制台输出：

变量

1、变量的使用

变量在使用时分为两步： 1. 声明变量 2. 赋值

（1）声明变量

var age; // 声明一个名称为 age 的变量

• var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
• age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

（2）变量的赋值

age = 10; // 给 age 这个变量赋值为 10

• = 用来把右边的值赋给左边的变量空间中，此处代表赋值的意思
• 变量值是程序员保存到变量空间里的值

（3）变量的初始化

var age = 18; // 声明变量同时赋值为 18

声明一个变量并赋值，我们称之为变量的初始化。

例子：

<!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>
    <script>
        // 1、声明一个变量
        var age;
        // 2、赋值 把值存入这个变量中
        age = 18;
        // 3、输出结果
        console.log(age);
        // 4、变量初始化
        var myname = '香蕉卟NaNa';
        console.log(myname);
    </script>
</head>
<body>
    
</body>
</html>

效果展示：

例子（弹出框显示）：

<!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>
    <script>
        // 输入框 输入用户姓名，存储到一个myname变量中
        var myname = prompt('请输入您的用户名：');
        // 弹出框显示用户名
        alert(myname);
    </script>
</head>
<body>
    
</body>
</html>

效果展示：
变量用户名输入
弹出框显示用户名

2、变量语法扩展

（1）更新变量

一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

var age = 18;
age = 81; // 最后的结果就是81因为18 被覆盖掉了

（2）同时声明多个变量

var age = 10, name = 'JJ', sex = 2;

（3）声明变量的特殊情况

情况	说明	结果
var age ; console.log (age);	只声明不赋值	undefined
console.log(age);	不声明不赋值直接使用	报错
age = 10; console.log (age);	不声明只赋值	10

3、变量命名规范

• 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，例如：usrAge, num01, _name
• 严格区分大小写。例如：var app; 和 var App; 是两个变量
• 不能以数字开头。例如： 18age 是错误的
• 不能是关键字、保留字。例如：var、for、while
• 变量名必须有意义。例如： MMD BBD nl → age
• 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如： myFirstName

4、交换两个变量的值

需要声明一个临时变量
例子：

<!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>
    <script>
        // 声明一个临时变量
        var temp;

        var apple1 = '青苹果';
        var apple2 = '红苹果';
        // 1、把apple1的值赋值给临时变量temp （即把apple1的值存在临时变量temp里面先）
        temp = apple1;
        // 2、再把apple2的值赋值给apple1
        apple1 = apple2;
        // 3、最后把临时变量temp的值赋值给apple2
        apple2 = temp;
        // 输出两变量的值
        console.log(apple1);
        console.log(apple2);
    </script>
</head>
<body>
    
</body>
</html>

效果展示：
交换两个变量的值

香蕉卟NaNa

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
【JavaScript】(一)（JS的书写位置、注释、输入输出和变量）

目录前言：JS的书写位置1、行内式JS2、内嵌JS3、外部JS文件JavaScript注释1、单行注释2、多行注释JavaScript 输入输出语句变量1、变量的使用（1）声明变量（2）变量的赋值（3）变量的初始化2、变量语法扩展（1）更新变量（2）同时声明多个变量（3）声明变量的特殊情况3、变量命名规范4、交换两个变量的值前言：刚开始学习JavaScript，下面是关于JS的一些非常非常基础的知识，JS的书写位置呀，JS的注释呀，JS的输入输出和变量呀~JS的书写位置➢ JS有三种书写位置，分.
复制链接

扫一扫