01 js基础 变量 数据类型
# 1.初识javascript ##
## 1.1javaScript ##
- javaScript 是一种运行在客户端的脚本语言
- 脚本语言：不需要编译，运行过程中由js解释器来进行解释并执行
- 现在也可以基于Node.js技术进行服务器端编程
## 1.2 js的作用 ##
- 表单动态校验（密码强度检测）（js产生最初的目的）
- 网页特效
- 服务端开发（Node.js）
- 桌面程序（Electron）
- APP（Cordova）
- 控制硬件-物联网（Ruff）
- 游戏开发（cocos2d-js）
## 1.3 HTML/CSS/JS ##
> HTML/CSS--描述类语言
HTML/CSS 决定网页结构和内容，等于身体
CSS 决定网页呈现给用户的模样
> js编程类语言
实现业务逻辑和页面控制，等于人的动作
## 1.4 浏览器执行js ##
浏览器分成两部分 渲染引擎和js引擎
渲染引擎：用来解析html与css，俗称内核，比如Chrome浏览器的blink,老版本的webkit
js引擎：也称为js解释器，用来读取网页中的js，对其处理后运行，如chrome浏览器的v8
## 1.5 javaSript ##
js的组成
- ECMAScript (JS语法)
规定了js的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套js语法工业标准
- DOM （页面文档对象模型）
w3c组织推荐的处理可扩展标记语言的标准编程接口，通过接口对页面上的各种元素进行操作（大小、位置、颜色）
- BOM (浏览器对象模型)
通过bom操作浏览器窗口，弹出框、控制浏览器跳转、获取分辨率
## 1.6 js初体验 ##
js有三种书写位置分别是行内、内嵌、外部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 2.内嵌式的js --> <script> alert('半夏'); </script> <!-- 3.外部写法 script 双标签 --> <script src="js/my.js"></script> </head> <body> <!-- 1.行内式的js 直接写到元素的内部--> <input type="button" value="阿况" onclick="alert('苏苏')"> </body> </html>
1. 行内式js
- 可以将单行或者少量js写在HTML标签的事件书写中（以on开头的属性），如onclick
- 推荐使用单引号
- 引号易错，多层嵌套匹配容易报错
- 特殊情况下用
2. 内嵌式
- 推荐学习中使用
3. 外部
- 工作中常用 方便复用
- 引用的标签中不可写代码
## 1.7 js的注释 ##
<script>
// 1.单行注释 ctrl + /
/* 2.多行注释 shift + alt + a
2.多行注释
2.多行注释 */
</script>
# 2.js的输入输出语句 #
为了方便信息的输入输出, JS中提供了一-些输入输出语句, 其常用的语句如下:
方法 说明 归属
alert(msg) 浏览器弹出警示框 浏览器
console.log(msg) 浏览器控制台打印输出信息 浏览器
prompt(info) 浏览器弹出输入框，用户可以输入 浏览器
## 3. js变量的使用 ##
1. 声明变量
2. 赋值
// 声明变量
var age; //声明一个名为age的变量
var 是一个js关键字，用来声明变量。计算机会自动分配内存空间
age 是程序员定义的变量名，用来访问这个内存中分配的空间
<script> //1.声明一个age变量 var age; //2.赋值 age = 18; //3.输出结果 console.log(age); //4.变量初始化 var myname = "水井"; console.log(myname) </script>
## 3.1 变量语法拓展 ##
> 更新变量
一个变量被重新赋值后，原有值就会被覆盖，以最后一次赋值为准
## 3.2 同时声明多个变量 ##
var age = 18,
ads = '火影';
## 3.3 声明变量特殊情况##
情况 说明 结果
var age ; console.log (age); 只声明不赋值 undefined
console.log(age) 不声明不赋值直接使用 报错
age = 10; console.log (age); 不声明只赋值 10
## 3.4 变量命名规范 ##
1.5变量命名规范
●由字母(A-Za-z)数字(0-9)、 下划线( )、 元符号($ )组成,如: usrAge, num01, name
●严格区分大小写。var app;和var App;是两个变量
●不能以数字开头。 18age 是错误的
●不能是关键字、保留字。例如:var、for、 while
●变量名必须有意义。MMD BBD nl→ age
●遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。myFirstName
●推荐翻译网站:有道 爱词霸
# 4.数据类型 #
不同的数据所需占用的存储空间是不同的，充分把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义不同的存储空间
## 4.1 变量的数据类型 ##
js是弱类型语言，不用提前声明变量的类型，程序运行过程中，类型自动被确定
<script> // 这里num 我们是不确定属于哪种数据类型的 var num = 10; // num 属于数字型 var str = '数据';// str 属于字符型 //变量的数据类型根据等号右边的值来确认 </script>
## 4.2 数据类型分类 ##
- 简单数据类型（number、string、boolean、undefined、Null）
- 复杂数据类型（object）
### 4.2.1 简单数据类型 ###
简单数据类型 说明 默认值
Number 数字型，包含整型值和浮点型值,如21、0.21 0
Boolean 布尔值类型，如true、 false, 等价于1和0 false
String 字符串类型，如"张三”注意咱们js里面,字符串都带引号 ""
Undefined var a;声明了变量a但是没有给值，此时a = undefined undefined
Null vara=null;声明了变量a为空值 null
1 数字型
最大值与最小值
alert(Number.MAX_VALUE);
alert(Number.Min_VALUE);
三个特殊值
Infinty,代表无穷大，大于任何数值
-Infinty,代表无穷小，小于任何数值
NaN,代表一个非数值
验证NAN的方法 isNaN() 判断数字 返回值 是数字 返回flase 不是数字返回true
2 字符串
可以是引号中的任意文本，推荐引号使用单引号
字符串转义符
转义符 解释说明
\n 换行符, n是newline的意思
\\ 斜杠\
\' 单引号
\" 双引号
\t tab缩进
\b 空格,b是blank的意思
字符串长度
字符的数量既是长度，通过字符串length属性可以获取整个字符串的长度
<script>
// 1.检测获取字符串的长度 length
var str = 'my name is xujing';
console.log(str.length);
</script>
字符串拼接
console.log('沙漠' + '骆驼');
console.log('沙漠' + 18);
+号总结口诀：数值相加，字符相连
3 布尔型boolean
布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0
### 4.2.2 获取变量数据类型 ###
typeof 用来获取检测变量的数据类型
类型 例 结果
String typeof "小白” "string"
Number typeof 18 "number"
Boolean typeof true "boolean"
Undefined typeof undefined "undefined"
Null typeof null "object"
## 4.3 转换为字符串 ##
方式 说明 案例
toString() 转成字符串 var num= 1; alert(num.toString0);
String()强制转换 转成字符串 var num = 1; alert(String(num);
加号拼接字符串 和字符串拼接的结果都是字符串 var num = 1; alert(num+ "我是字符串");
<script> // 1. 把数字型转换为字符串型 变量.toString() var num = 10; var str = num.toString(); console.log(str); console.log(typeof str); // 2.我们利用String() console.log(String(num)); console.log(typeof str); </script>
## 4.4 转换为数字型##
方式 说明 案例
parseInt(string)函数 将string类型转成整数数值型 parselnt("78")
parseFloat(string)函数 将string类型转成浮点数数值型 parseFloat('78.21')
Number()强制转换函数 将string类型转换为数值型 Number('12')
js隐式转换(- * /) 利用算术运算隐式转换为数值型 '12'-0
## 4.5 转换为布尔型 ##
方式 说明 案例
Boolean() 其他类型转换成布尔值 Boolean("true")
