【前端笔记9】javascript1 初识、输入/出、数据类型

本文基于【黑马程序员JavaScript全套教程，Web前端必学的JS入门教程，零基础JavaScript入门】P1-40内容所做笔记，帮助建立js的基本概念、在“四、数据类型”涉及数据简单处理方法：计算字符串长度length、查询变量数据类型typeof、字符串/数值/布尔数据类型的转换(表格)等。

---

一、简介

javascript（js）: 编程语言、运行在客户端(浏览器)的脚本语言

HTML：标记语言
脚本语言：不需要编译，运行过程由js解释器(js引擎)逐行进行解释执行
(现在也可以基于Node.js 技术进行服务器端编程)

js的作用：
表单动态校验、网页特效、服务端开发(Node.js)、桌面程序(Electron)、App(Cordova)、控制硬件-物联网(Ruff)、游戏开发(cocos2d-js)

浏览器执行js简介:
浏览器分两部分：渲染引擎 和 JS引擎
渲染引擎（内核）：用来解析HTML与CSS，如 Chrome的blink
JS引擎（解释器）：读取网页中的JS代码，对其处理后运行，如ChromeD的V8

JS组成

• ECMAScript: JavaScript语法
• (Web API)DOM: 页面文档对象模型。页面元素的移动、大小调整、添加删除等
• (Web API)BOM: 浏览器对象模型。页面弹窗、检测窗口宽度、存储数据到浏览器

javascript权威网站：百度搜索 mdn

JS书写位置

1. 行内式
   在标签内部
2. 内嵌式
   在< body >< /body >内，< script >< /script >中编写
3. 引用式
   < script src=“(JS位置)”> < /script >

注释
单行：ctrl + /
多行：shift +alt +a

结束符：英文分号

实际开发中，结束符可不写，浏览器会自动推算

二、输入输出语句

语法	说明
alert(‘文字内容’)	浏览器弹出警示框
console.log(“文字内容”)	浏览器控制台打印输出信息,程序员调试用
document.write(‘文字内容’)	文档里面输出内容，可在内容中增加HTML
prompt(“请在下方文本框内输入”)	浏览器弹出输入框，用户可以输入

alert() 和 prompt() 会跳过页面渲染先执行

三、变量的使用

变量：计算机存储数据的“容器”

1.声明变量
2.变量名赋值

声明语法：let 变量名;
变量初始化语法：let 变量名 = 值;
多变量：用 英文逗号, 分开。

---

变量的本质：程序在内存中申请的一块用来存放数据的小空间

命名规则

• 不能用关键字：let var for…
• 只能用下划线、字母、数字、&，且数字不能开头
• 字母严格区分大小写，大小写是不同变量

命名规范

• 起名要有意义
• 遵循小驼峰命名法：第一单词小写，后每个单词首字母大写

let 解决了var 中的一些问题，var已被淘汰。
var声明的问题：

1. 可以先使用，再声明
2. var声明过的变量可以重复声明
   比如变量提升、全局变量、没有块级作用域等等

四、常量的使用 const

声明：const 变量名 = 值

	const PI = 3.14

特点：

1. 常量声明时必须赋值
2. 常量不允许更改值

五、数据类型

数据类型种类

种类：
基本数据类型

• 数字型Number
• 布尔值bool
• 字符串char
• 未定义undefine
• 空null

• js的变量数据类型判断仅在程序运行时，根据等号右边的值进行
• js是 动态语言，变量的数据类型是可以变化的

引用数据类型：对象object

数字型 ↓
八进制：数字前加0，如：010
十六进制：数字前加0x，如：0xA
其他显示：无穷大infinity，无穷小-infinity，非数字NaN
判断是否为数字：isNaN()，返回是true,否false.

字符型 ↓
声明方式：

1. 单引号’’
2. 双引号""
3. 反引号 ``

• 字符串引号嵌套：当需输出引号时，应遵循 外双内单、外单内双 的方式
• 转义符：

转义符	说明
\n	换行
\\’	斜杠
’	单引号
"	双引号
/t	tab缩进
b	空格

• 检测获取字符串的长度：变量.length

let str = 'ab c d'
len = str.length	// len = 6

• 字符串的拼接1：+
  只要字符串与其他数据类型相’+'，最终结果为字符型数据(隐式转换)

+的作用：

1. 数值相加，字符相连
2. 将字符串转换为数字型，如：+‘123’ （字符串 → 数字型）
3. 除+外、-*/会把数据转换为数字类型

• 字符串的拼接2：模板字符串(es6新语法)
  使用场景：拼接字符串和变量
  语法：反引号``，内容拼接时，用${}包住变量

	let age = 19
	document.write(`我今年${age}岁了`)

• 获取变量数据类型：typeof 变量

 let num = null
 document.write(typeof num)	// object

数据类型转换

• 转换为字符串

方式	案例
变量.toString()	let num=1; alert( num.toString() );
String(变量)	let num=1; alert( String(num) );
加号拼接字符串	var num=1; alert( num + ‘这是字符串’ );

• 转换为数字型（重点）

prompt 默认接收的数据的数据类型为字符串string

方式	案例	说明
parseInt(变量)	var age = ‘18’; alert( parseInt(age) );	取整
parseFloat(变量)	var age = ‘18’; alert( parseFloat(age) );	取小数
Number(变量)	var age = ‘18’; alert( Number(age) );	强制转换
利用算数运算	alert( ‘12’ - 0 ); //输出12	隐式转换

• 转换为布尔型
  方法：Boolean(变量)
  说明：代表 ‘空、否定’ 的值会转换为false，如：0、‘’、NaN、null、undefined
  其余值都会转换为true。

---

---

若对本文有任何建议或意见欢迎在评论区提出~十分感谢！
Ending