JS入门---输入、输出、变量、简单数据类型

书立行

已于 2024-06-08 10:41:19 修改

阅读量924

点赞数 12

文章标签： javascript 前端 html 开发语言

于 2024-06-08 10:35:46 首次发布

本文链接：https://blog.csdn.net/primebrake/article/details/139539836

版权

1. JS初体验

js由三部分组成，分别是ECMAScript-js（脚本语言规范）、DOM（文档对象模型）和BOM（浏览器对象模型）。

JavaScript是ECMAScript规范的一种实现。ECMAScript定义了语言的语法、类型、语句、关键字、保留字、操作符、全局对象和原型。JavaScript最初由Netscape公司的Brendan Eich在1995年创建，随后成为Web开发中使用最广泛的脚本语言之一。
DOM-文档对象模型，是W3C组织推荐的处理可拓展标记语言的标准变成接口，通过DOM提供的接口可以对页面上的各种元素进行操作。
BOM---浏览器对象模型，提供了独立于内容的，可以对浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口。

js分为内嵌式的js、外部js和行内式的js。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- js推荐使用单引号 -->
    <!-- 内嵌式的js -->
    <script>
        // alert('沙漠骆驼');
       /*  你是谁你是谁
        你是谁 */
    </script>
    <!-- 外部js写法 -->
    <!--    nishishei
    你是谁
    你是谁 -->
    <script src="my.js"></script>
</head>

<body>
    <!-- 行内式的js 直接写到元素内部-->
    <!-- <input type="button" value="唐伯虎" onclick="alert('秋香姐')"> -->
</body>

</html>

2. JS输入输出

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

alert(msg):浏览器弹出警示框输出，展示给用户。
console.log(msg):浏览器控制台打印输出信息。
prompt(info):浏览器弹出输入框，用户可以输入。

3. JS变量

变量就是一个装东西的盒子，是用于存放数据的容器。变量的本质:变量是程序在内存中申请的一块用来存放数据的空间。

变量在使用时分为两步：

声明变量
赋值

var age = 18;
console.log(age);

以下是变量代码验证：

var myname = '旗木卡卡西';
var address = '火影村';
var age = 30;
var email = 'kakaxi@itcast.cn';
var gz = 2000;
console.log(myname);
console.log(adderss);

变量案例弹出用户框：

//1.用户输入姓名
var name = prompt('请输入你的名字'); 
// 2.存储到一个myname的变量
alert(name);

3.1 变量语法扩展

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

// 1.更新变量
var myname = 'pink老师';
console.log(myname);
myname = '迪丽热巴';
console.log(myname);

声明多个变量：

// 2.声明多个变量
/*var age = 18;
  var address = '常州';
  var gz = 2000; */
var age = 18,
    address = '常州',
    gz = 2000;

声明变量特殊情况：

只声明不赋值结果是undefined；
不声明不赋值直接使用某个变量会报错；
不声明直接赋值使用不会报错但是会变成全局变量。

    <script>

        // 3.声明变量的特殊情况
        // 3.1 只声明不赋值 结果是undefined
        var sex;
        console.log(sex);
        // 3.2 不声明 不赋值 直接使用某个变量会报错
        // console.log(tel);
        // 3.3 不声明直接赋值使用 不会报错 但是会变成全局变量
        qq = 110;
        console.log(qq);
    </script>

变量命名规范：

由字母(A-Z,a-z)、数字(0-9) 下划线_ 美元符号$组成；
严格区分大小写，var app和var APP是两个变量；
不能以数字开头。18age 是错误的；
不能是关键字、保留字，例如var for while；
变量名必须有意义 MMD BBD nl--age；
遵守驼峰命名法，首字母小写，后面单词的首字母需要大写 myFirstName；
推荐翻译网站:有道爱词霸。

3.2 交换变量数值

想要交换两个变量的值，需要设置一个temp作为临时变量。

<script>
      // temp为临时变量
      var temp;
      var apple1 = '青苹果';
      var apple2 = '红苹果';
      // 把apple2给我们的临时变量
      temp = apple2;
      // 把apple2 里面的苹果给apple1
      apple2 = apple1;
      // 把临时变量里面的值给apple1
      apple1 = temp;
      console.log(apple1);
      console.log(apple2);
</script>

4. 数据类型

为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

js的变量数据类型只有程序在运行过程中根据等号右边的值来确定。

<script>
        // 这里的num 我们是不确定属于那种数据类型

        var num;
        // num属于数字型
        // js的变量数据类型只有程序在运行过程中 根据等号右边的值来确定
        var num = 10;
        // js是动态语言 变量的数据类型是可以变化的
        var x = 10; //x是数字型
        x = 'pink'; //x字符串型
</script>

4.1 简单数据类型

Number 数字型，包括整型和浮点型。

Boolean布尔值类型，如true false。

var flag = true; 
var flag = true + 1; //true参与加法运算当1来看

String 字符串类型，如张三，注意咱们js里面，字符串都带引号。

// 外带内双、外双内单
var str = "我是一个'高富帅'的程序员";
// 字符串转义字符:  都是用\开头的
/*   1. \n   转行符
     2. \\   斜杠\
     3. \'   单引号
     4. \"   双引号
     5. \t   tab缩进
     6. \b   空格，b是blank  */

Undefined，var a;声明了变量a 但是没有给值，此时a = underfined。

console.log(str);
var variable = undefined;
console.log(variable + 'pink'); //结果为undefinedpink
console.log(variable + 1); // NaN underfined 和数字相加 最后的结果是NaN

Null ，var a = null; 声明了变量a为空值。

 var space = null;
console.log(space + 'pink'); //nullpink
console.log(space + 1); //1

4.2 字符串长度以及拼接

字符串的拼接 + 只要有字符串和其他类型相拼接最终的结果是字符串类型。

var str = 'my name is andy';
//检测获取字符串长度
console.log(str.length);
//字符串的拼接+  只要有字符串和其他类型相拼接  最终的结果是字符串类型
console.log('沙漠' + '骆驼');//沙漠骆驼
console.log('我是' + 18);//我是18
console.log('12' + 12); // 1212

变量和字符串拼接口诀：引引加加。（引号加号）

console.log('我是' + 18);
console.log('我是' + 18 + '岁');
var age = 18; 
//变量和字符串相连的口诀：引引加加
console.log('pink老师'+ age + '岁');

显示年龄案例：

弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示"您今年xx岁啦"。

var age = prompt('请输入你的年龄');
//使用alert语句弹出警示框
alert("你的年龄是" + age + "岁");

4.3 检测变量数据类型

我们可以利用typeof检测变量数据类型。

var num = 10;
console.log(typeof num);
var str = 'pink';
console.log(typeof pink);
var flag = true;
console.log(typeof flag);
var vari = undefined;
console.log(typeof vari);
//prompt取过来的值是字符型的
var age = prompt('请输入您的年龄')
console.log(age);
console.log(typeof age);

切记：prompt取过来的值都是字符型。

插曲：介绍一下字面量：字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

4.4 数据类型转换

使用表单、prompt获取过来的数据默认是字符串类型，此时不能直接简单的进行加法运算,而是需要转换变量的数据类型。

4.4.1 转换为字符串

将数据类型转换为字符串有三种方法：

利用toString ，转成字符串--------变量.toString();

var num = 10;
var string = num.toString( );
console.log(string);

利用String(变量);
```
 console.log(String(num));
```
利用 + 拼接字符串的方法实现转换效果隐式转换。
```
 console.log(num + '');
```

4.4.2 转换为数字型

将数据类型转换为数字型，有以下几种方法：

parseInt 转换为整数数据；

console.log(typeof parseInt(age));
console.log(parseInt('3.94')); // 3取整
console.log(parseInt('120px')); // 120 会去掉120px单位
console.log(parseInt('rem120px')); //NaN

parseFloat(变量) 可以把字符型的转换为浮点型；

利用Number(变量)；

var str = '123';
console.log(Number(str));
console.log(Number('12'));

利用了算术运算， * - / 隐式转换。
```
console.log('12' - 0);
```

计算年龄案例：弹出一个输入框,让用户输入出生年份。

//弹出一个输入框,让用户输入出生年份 这里的bir是字符串
var bir = prompt('请输入出生年份');
//让用户输入的值变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄
var a = 2024;
//弹出警示框alert，把计算的结果输出
// 这是隐式转换
alert(a - bir);

简单加法器案例：计算两个数的值，用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果。

var a = prompt('请输入一个数据');
var b = prompt('请输入另外一个数据');
var res = parseFloat(a) + parseFloat(b);
alert(res);

4.4.3 转换为布尔型

想要把数据类型转换为布尔型，只需要利用Boolean(变量)。

5. 小练习

依次询问并获取用户姓名、年龄、性别，并打印用户信息如图。

    <script>
        var name = prompt('请输入您的姓名');
        var age = prompt('请输入您的年龄');
        var sex = prompt('请输入您的性别');
        alert('您的姓名是：' + name + '\n您的年龄是：' + age + '\n您的性别是：' + sex);
        
    </script>