js基本输入输出，变量，数据类型，案例。1.计算机编程基础：2.JS3. 变量4. 数据类型5. 扩展阅读

84 阅读 0 评论 56 点赞

我是靠谱客的博主阔达帽子，这篇文章主要介绍js基本输入输出，变量，数据类型，案例。1.计算机编程基础：2.JS3. 变量4. 数据类型5. 扩展阅读，现在分享给大家，希望可以做个参考。

文章目录

1.计算机编程基础：
2.JS
3. 变量
4. 数据类型
- a. 5种简单数据类型：
- - 案例
- b. typeof获取变量类型：
- c. 转化为数值型的放法：
- d. 转化为字符型的方法;
- - 案例：
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(‘这个是弹出文本框内容啦’)

复制代码

1
2
行内式

复制代码

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

复制代码

1
2
内嵌式

复制代码

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

复制代码

1
2
外部式

复制代码

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

3. 变量

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

复制代码

1
2
3
4

var age;
age = 18;

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

复制代码

1
2
var variate;

复制代码

1
2
variate = 18;

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

复制代码

1
2
3
4
5
6
7
// 案例一：交换变量
var someoneage = age;
age = hisage;
hisage = someoneage;
console.log(age);
console.log(hisage);

4. 数据类型

a. 5种简单数据类型：

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 // 数字型变量
八进制 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; 可以进行加法运算

复制代码

1
2
3

console.log(Boolean(''));

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
// 字符串赋值用引号，转义字符 换行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.弹出网页警告;

复制代码

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

2.显示年龄

复制代码

1
2
3
4
5
6

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

b. typeof获取变量类型：

复制代码

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

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

复制代码

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
// 装换为数字型 整形，浮点型，利用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. 转化为字符型的方法;

复制代码

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

复制代码

1
2
3
4
5
6
7
8
9
10
 // 类型转换为字符型 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

复制代码

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

案例：

1.计算年龄：

复制代码

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

2.简单加法

复制代码

1
2
3
4
5
6
7
8
9
10
11

// 案例五：简单加法器
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. 标识符不能是关键字或保留字
案例;

复制代码

1
2
3
4
5
6
7
// ：姓名，年龄，性别
var yourname = '您的姓名是:' + prompt('请输入您的姓名：') + 'n';
var yourage = '您的年龄是:' + prompt('请输入您的年龄：') + 'n';
var yoursex = '您的性别是:' + prompt('请输入您的性别：') + 'n';
var union = yourname + yourage + yoursex;
alert(union);