js基本输入输出，变量，数据类型，案例。

可心abc

已于 2022-07-30 10:36:30 修改

阅读量2k

点赞数 19

分类专栏： javascript

于 2022-07-15 20:49:32 首次发布

本文链接：https://blog.csdn.net/bug_caicai/article/details/125811795

版权

javascript 前端

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

1.计算机编程基础：
2.JS
3. 变量
4. 数据类型
5. 扩展阅读

1.计算机编程基础：

a. 编程：让计算机未解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程
b. 编程语言是：用来控制计算机的一系列指令，有固定的格式和词汇
c. 编程语言和标记语言不同：标记语言不对计算机发出指令，常用语格式化和链接，用来被读取；编程语言主动，有强的逻辑和行为能力。
d. 常见的数据存储单位及其换算单位 ; 二进制数据 0 1存储到硬盘，单位：bit,byte,KB,MB,GB,TB
e. 内存的主要作用以及特点;cpu读取数据从硬盘读取到内存条，运行内存中的数据，内存是电，硬盘是机械，速度不一样

2.JS

a. JS作用：表单动态校验，网页特效，服务端开发(Node.js)，桌面程序，APP，控制硬件物联网，游戏开发（微信程序）
b. JavaScript是：运行在客户端的脚本语言，可以基于Node.js 技术进行服务器端编程
c. JavaScript发展历史：布莱登.艾奇与 sun 公司合作
d. 浏览器执行JavaScript原理：渲染引擎：解析CSS和HTML（内核），JS引擎：用来读取网页中的1JS代码，处理后运行。浏览器本身不会执行JS代码，通过JS引擎转换为机器语言，逐行解释每一句源码（脚本语言），再由计算机执行。
e. JavaScript组成：JS基础（JS语法：ECMAScripts） JSapi(页面文档对象模型：DOM, 浏览器对象模型：BOM)
f. JavaScript三个输入输出语句：alert 弹出警告框, console 控制台打印输出信息，prompt 弹出用户输入的输入框，
g. JS格式：行内式οnclick=“”，内嵌式，外部(标签script中不可写代码)。alert(‘这个是弹出文本框内容啦’)

行内式

<body>
    <!-- 1.行内式的JS，直接写到元素内部 -->
    <input type="botton" value="who" οnclick="alert('吃吃水果')">
</body>

内嵌式

<head> 
	<script> 
	alert('弹出警告框')；
	var num = prompt('输入你喜欢的数字吧：');
	console(num);//后台可视字符型
	</script>
</head>

外部式

<head> 
 <script src="./3.0JS输入输出.js">
        // 3.外部式的JS，这里啥都不能写昂
    </script>
</head>

3. 变量

a. 变量的主要作用：保存修改用户数据的盒子，是申请的内存空间，需要变量名
b. 变量的初始化：声明变量+赋值 var age = 18;自动分配内存

		var age;
        age = 18;

c. 变量的语法扩展; 只声明未赋值会出现undefined,不声明不赋值报错；不声明可以直接使用。

var variate;

variate = 18;

d. 命名规范; 不能以数字开头，不能是关键字1，驼峰命名
e. 画出变量在内存中存储：√
f. 实现交换变量。√

// 案例一：交换变量
        var someoneage = age;
        age = hisage;
        hisage = someoneage;
        console.log(age);
        console.log(hisage);

4. 数据类型

a. 5种简单数据类型：

js数据类型根据程序在运行过程中自动判断等号右侧，变量数据类型可变。
ⅰ. A:简单数据类型包括：
1. 数字型(整形和浮点);Number；注意进制和最值

 // 数字型变量  八进制 0开头封八进一;十六进制0x 0~9 a~f;
        var num = 10; //十进制 PI = 3.14
        var num1 = 010;
        console.log(num1);
        var num2 = 0x12
        console.log(num2);
        // 数字型最小值是 console.log(Number.MIN_VALUE);
        // 无穷大Infinity console.log(Number, MAX_VALUE * 2);
        // 无穷小-Infinity console.log(-Number,MAX_VALUE);
        // 得不到数值非数字 NaN   console.log('你好'-100); isNaN 用来判断非数字，是数字返回false
        console.log(Number.MAX_VALUE);
        console.log(isNaN('a'));

布尔值类型：Boolean; 可以进行加法运算

        console.log(Boolean(''));

字符串类型（都带引号）：String; 加‘ ’引号嵌套外双内单和 length 获取字符长度；

// 字符串赋值用引号，转义字符 换行\n，斜杠\\, 单引 \',双引\",缩进\t,空格\b 
        var adjective = "我想成为一名合格的程序员，虽然现在还是个在学习中的'菜狗'";
        console.log(adjective);
        // length计算字符长度，
          // 字符产拼接 ''+'' 无所谓数据类型，最终是字符串类型。数值相加，字符相连。
        console.log(adjective.length);
        // 可更改变量不要写到字符串内，和字符串相连,引引加加
        var somebodyage = 18;
        console.log('somebody which age is ' + somebodyage + '.');
        console.log('but do you trust he is ' + somebodyage + ' years old?');

声明变量没给值，未定义类型：Undefined;
5. 空类型：Null;
6. 未定义类型和空区别：和数字相加前者得NaN,后者得数字
ⅱ. B：复杂数据类型：

案例

1.弹出网页警告;

 // 案例二：弹出网页警告
        var
            case2 = '酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最独特的风景，我审视四周，这里，是我的舞台，我就是天地间的王者。\n 这一刻，我好奇冲天，终于大喊一声：“收破烂啦~”';
        alert(
            case2);

2.显示年龄

  // 案例三：显示年龄
        var userage = prompt('请输入您的年龄');
        var printage = '您今年' + userage + '岁辣';
        alert(printage);

b. typeof获取变量类型：

ⅰ. 程序员可视方：var num = 1;  		console.log(typeof num);                             [得到数据类型为Number] 
ⅱ. prompt  得到的是字符型 （看字面：字符型黑色，数字是蓝色，深蓝boolean,灰色是未定义和空）

c. 转化为数值型的放法：

ⅰ. parseInt(string)函数 字符型转化为数字整型，会去掉后面单位（空字符串，布尔型，null，undefined进行转换只能转换为NaN），（使用parseInt()时，也可以转换为指定进制数字）
ⅱ. parseFloat(string)函数  转为浮点型，同样去掉单位（此类方法不可以指定进制，只能转为十进制）
ⅲ. Number()强制转换函数
ⅳ. 算术运算 - * / 进行隐式转换 
注意：字符串中有非数字内容，转换后结果为NaN

// 装换为数字型 整形，浮点型，利用Number，隐式转换
        var figure2 = prompt('请输入年龄'); 
        console.log(parseInt(figure2)); 
        console.log(parseFloat(figure2));
        var str = '123';
        console.log(Number(str));
        console.log(Number('123'));
        str = parseInt(str,8);//转换为8进制

        console.log(str - 0);
        console.log('123' - '120'); //3 数值型
        console.log('123' + '120'); //123120 字符型

d. 转化为字符型的方法;

ⅰ. toString(); 数字专为字符串（null和undefined没有toString()方法）
ⅱ. String()强制类型转换（null和undefined通过这个方法可以成功转换为字符串类型）
ⅲ.  隐式转换;加号拼接字符串

 // 类型转换为字符型 toString String 拼接
        var figure = 99;
        var figure1 = figure.toString(); 
        console.log(figure);//	99
        console.log(figure1);// 99
        console.log(typeof figure1); // String
        console.log(String(figure)); // String
        console.log(figure + '');    //String

f. 转化为布尔型;
ⅰ. boolean函数：仅以下是false ‘’0 NaN null undefined 6个，其余全true

var p = '18';
p = boolean(p);//先转化为Number,再转化为真假值

案例：

1.计算年龄：

 // 案例四：计算年龄
        var calculus = '2022' - prompt('请输入您的出生年份：');
        var calculus1 = '您的年龄是' + calculus + '岁';
        alert(calculus1);

2.简单加法

  // 案例五：简单加法器
        var numb1 = prompt('请输入第一个值') - 0;
        var numb2 = prompt('请输入第二个数值：') - 0;
        var numb3 = numb1 + numb2;
        alert(numb3);

        var numb1 = prompt('请输入第一个值');
        var numb2 = prompt('请输入第二个数值：');
        var numb3 = parseFloat(numb1) + parseFloat(numb2);
        alert(numb3);

5. 扩展阅读

a. 解释型语言和编程语言的特点： js是解释语言，运行时逐行翻译为机器语言；java是编译语言，在代码执行之前编译，区别是翻译的时间点不同
b. 标识符不能是关键字或保留字
案例;

// ：姓名，年龄，性别
        var yourname = '您的姓名是:' + prompt('请输入您的姓名：') + '\n';
        var yourage = '您的年龄是:' + prompt('请输入您的年龄：') + '\n';
        var yoursex = '您的性别是:' + prompt('请输入您的性别：') + '\n';
        var union = yourname + yourage + yoursex;
        alert(union);