前端后端

前端就是用来绘图的

前端技术

安卓（java）

ios

html5 （web端、app端、小程序端跨平台（混合开发））

后端

后端就是数据提供及服务提供。

后端技术

java

php

python

go...

后端业务前移

中台的概念

前后端分离（前端和后端的服务分离）

前后端不分离（服务器渲染 ssr （速度快对服务器压力大首屏的ssr））

JavaScript

概述

JavaScript是一个解释型的语言，JavaScript是一个跨平台的面向对象的脚本语言（侵入性 xss攻击），JavaScript是一个弱语言（没有强制规范类型由值指定的）。

解释说明

对象：属性和方法
面向对象：面向属性和方法，简单理解就是每一个环节都是独立的
跨平台：能够在不同的操作系统上执行，只要有浏览器就能运行脚本：不能独立运行必须依托于其他程序

JavaScript的构成由三部分构成

BOM（broser object model 浏览器对象模型）
DOM(document object model 文档对象模型)
ECMAScript （基础语法 ES3、ES5、ES6..）
babel.js他是一个专门用来转换ECMAScript相关版本的一个脚本工具）。

ECMAScript的版本

ES3 基础版本没有兼容问题
ES5 升级版本兼容大部分的浏览器
ES6 最新版本只兼容高版本浏览器
babel.js 是一个js库，他的用途是将对应的js以相应版本输出。

JavaScript特点

解释性脚本语言
运行在浏览器
弱类型语言
事件驱动
跨平台

js用途

主要是视觉交互、数据交互、Node.js后台

视觉交互

嵌入动态文本于HTML页面。
对浏览器事件做出响应·数据交互

处理网页中的前端验证（视觉交互、数据交互、node.js(进行服务器端的编程))

弱类型

定义变量只用var，且变量不需要区分数据类型
一个变量可以装任何数据类型

数据交互

读写HTML元素
在数据提交到服务器之前进行数据验证
检测访客的浏览器信息
控制cookies(创建修改等)

Node.js后台

基于node.js技术对于服务器端进行编程

JavaScript的书写位置

内部写法（写在script 标签中写主要的JavaScript代码）

<!-- 内部写法 -->
<script>
//js代码
console.log('hello world')
</script>

外部写法引入js文件（抽取公共的代码）

//准备index.js文件 
<script src="./js/index.js"></script>

内嵌写法（不建议的）

<!-- 内嵌写法 写在事件中-->
<a href="javascript:void"></a>
<button onclick="console.log('点击了我')">点击</button>

注意事项

script 代码可以写在任何位置
script标签是按照文档流的顺序执行（从上到下）
推荐将script标签放到html标签结束的后面

javascript的一些相关细节

document.write("在页面上显示书写")
console.log("在控制台打印")  更多用在代码调试用
alert("弹窗")  会阻断代码的执行

JavaScript的变量定义

变量就是一个存储单位。他会根据你赋的值在内存中开辟空间（根据赋值得到对应的类型）

声明变量

使用var关键词来定义变量

var 变量名 = 变量值
var a = 10 //定义一个变量名字叫a 值为10
var a = 30
console.log(a) //30  后面的覆盖前面的

变量名的书写注意事项

只能使用字母，数字，下划线_，美元符号$这几个
不能使用关键词及保留字
不能以数字开头
使用驼峰命名法（首字母小写其他首字母大写）
语义化命名（见名之意）
不能出现中文符号

数据类型

typeof 检索值类型查看数据类型关键字（原理二进制解析）

typeof返回的是一个字符串

null的typeof值为object

var un
console.log(typeof typeof un)//返回的是一个string类型

数据类型划分

基础值类型（栈类型）

number 数值类型

//数值类型 整数和浮点数都是数值
var number = 1.2
console.log(number)

string 字符串类型

//字符串类型 所有加了引号的都是字符串 不管是单引号 还是双引号
var str = 'hello'
console.log(str)
console.log(typeof str) //string

boolean 布尔类型 (true 或者 false)

// boolean 类型
var bool = false
console.log(typeof bool)//boolean

null 空类型（空对象引用）

//null 类型 只有在赋值为null时候的值为null类型 空对象引用 （释放内存）
var nullValue = null
console.log(nullValue)
console.log(typeof nullValue) //object

undefined 定义了变量，未定义值（null的派生子类）

//undefined 未定义的值 不赋值
//undefined是null 派生子类
var a //没有给值 默认值为undefined
console.log(a)
console.log(typeof a) //undefined

引用数据类型（对象类型）

Function、Array、Object、Date....

内存划分

值类型存储在栈上（不可变）
引用数据类型存储在堆上（可变）

JavaScript 中的注释

单行注释 ctrl + /
多行注释 shifit + alt + a

运算符

算术运算符

//+ - * / % ++ --

注意事项

+特殊的算术运算符
出现字符串的话进行字符串拼接其他都会转为数值进行计算返回的都是字符串

如果没有字符串那么其他的会被转为number类型进行计算（其他类型还是会被转为number）

其他的算术运算（会将对应的值转为number类型进行计算如果出现NaN 那么结果就是NaN）

++前置先执行+1操作，再执行本行代码 ++后置先执行本行代码再执行++

  console.log('hello'+1) //hello1
  //boolean类型转数值 对应的true为1 false为0
  //undefined转数值 NaN (not a number 他是数值类型) NaN跟任何数值进行计算得到结果都是NaN
  //null 转数值 0
  console.log(1+2+true) //4
  console.log(1+2+true+undefined) //NaN
  console.log(1+2+true+null) //4
  console.log(1+2+true+undefined+null+'hello') //NaNhello
  //* / % - 全部转为number进行计算
  console.log(null*13) //0 相当 0 * 13
  console.log(false*true) //0 相当 0 * 1
  console.log(true-false-undefined) //NaN
  //字符串会自动转为数值 如果转不了 那么就是转为NaN
  console.log('123'*true+false) //123
  console.log('false'-'123') //NaN
  //自增 自减
  var a = 10
  a++ //自增1
  console.log(a)//11
  a--
  console.log(a)//10
  //前置和后置的区别
  //前置先计算后执行 后置先执行后计算
  console.log(a++) //10
  console.log(++a) //12
  console.log(--a) //11
  console.log(a--) //11
  console.log(a) //10
  console.log((a++)+a+(++a)+a)//45

注意事项

字符串+号进行拼接操作
NaN进行任意操作返回的结果都是NaN (除字符串拼接以外)
-* / % 自动转为数值进行计算
++ 自增-- 自减前置先计算后执行后置先执行后计算

赋值运算符

+= -= *= /= %= =
//赋值运算在最后执行
var number = 10
number += 20 //number = number + 20
console.log(number) //30

比较运算符（条件运算返回的是boolean类型的值） > < >= <= != == ===

console.log(1>2) //false
console.log(2<=3) //true
console.log(1=='1') //true ==只比较值
console.log(1==='1') //false ===比较值之后还要比较类型 比较地址
console.log(NaN == NaN) //false
console.log(NaN != NaN) //ture
console.log(null == undefined) //true
console.log(null === undefined) //false
//自动转为number类型
console.log(true>false) //true
// 出现NaN进行比较必定为false 除非有!符号
console.log(undefined > true) //false
console.log(undefined < true) //false
console.log(undefined == true) //false
//字符串和字符串进行比较 比较的是ascii码 （按位置来比的）
//按照ascii码进行比较
// A 65 、 a 97
console.log("21">"121")//true
console.log('abc'>"cba") //false
console.log('Abc'>"aba") //false

注意事项

数值1和字符串1的值是相等的 == 为true ===为false
NaN不等于NaN
null和undefined的值是相等的 == 为true ===为false
在数值的比较过程中会自动转为number类型
出现NaN进行比较必定为false 除非有!符号
字符串和字符串进行比较比较的是ascii码（按位置来比的）

逻辑运算符

与 && （全部为true则为true 其他为false）
或 || （全部为false则为false 其他为true）

非！（取反）

//与 都是true才返回true 否则返回false && 短路与
console.log(false && 1+2+3+4+5>=18) //false
//boolean类型转换
// 数值转boolean类型 非0和非NaN就是true 0和NaN为false
// 字符串转boolean类型 非空字符串就是true ""为false
// null 和 undefined 默认都是false
console.log(1 && 2) //2 如果是真取最后一个真 如果有假取第一个假
console.log(undefined && 0) //undefined
console.log(true && 1 && 4+3-1*undefined) //NaN
console.log(0 && false && null)//0
//或 有一个为true就返回true 短路或
//如果有true返回第一个true 否则返回最后一个false
console.log(true || 1+undefined+NaN+'hello World') //true
console.log(1 && 0 || undefined) //undefined
console.log(null || 1>2 || 3<5) //true
onsole.log(1-1 || 2*'abc' || 3-"120") //-117
console.log(-1 || -0.5 && undefined) //-1
//非 取反
console.log(!-1)//false
console.log(!0)//true

注意事项

非0和非NaN就是true 0和NaN为false
非空字符串就是true ""为false
null 和 undefined都是false

位运算符（解析为二进制进行运算）

& ^ | < >

位移运算符（二进制进行位移）

<<   >>
console.log(2<<3)
// 10 ==> 1000 左移 后边补零 右移 删除后面多余的内容
console.log(2>>2) //0
console.log(2<<2)//8

注意事项

位运算是执行最快的运算
位运算是基于二进制进行运算
左移后边补零右移删除后面多余的内容

三元运算符（三目运算符）

布尔类型表达式?真的结果:假的结果
var a = 2>3?2:3
console.log(a) //3

运算符的运算顺序

类型转换

基础值类型转换引用数据类型（装箱）

number
string

Boolean

// Number
var number = 10
console.log(typeof number)//number
//只要是被new的都是对象 都是引用数据类型
var obj = new Number(number)
console.log(typeof obj)//object

//string
var str = 'hello'
console.log(typeof new String(str))//object

// Boolean
var bool=true
console.log(typeof new Boolean(bool))//Boolean

// 引用数据类型转基础值类型（拆箱）

  // obj对象转为字符串 对象中有东西 属性（方法）
  var obj = new Number(number)
  console.log(typeof obj.toString())//srtring
  console.log(typeof string(obj))//string
  // obj对象转为对应的数值
  console.log(typeof Number(obj))//number
  // obj对象转为对应的布尔类型
  console.log(typeof Boolean(obj))//boolean
  console.log(Boolean(obj))//true

其他类型转字符串

显式转换（强制转换）和隐式转换（自动转换）

加空字符串 (隐式转换)

var is = true
//转为字符串
is += ""
console.log(typeof is) //string

使用toString方法

// 数值转字符串
  var number = 10
  console.log(typeof toString(number))
  // Boolean转为字符串
  var bool=true
  console.log(typeof toString(bool))
  // null转为字符串
  var num = null
  console.log(typeof toString(num))//报错  null没有tostring方法
  // undefined转为字符串
  var un
  console.log(typeof toString(un))//报错  undefined没有tostring方法

使用String方法

// 数值转为字符串
  var number = 10
  console.log(typeof String(number))
  // Boolean转为字符串
  var bool=true
  console.log(typeof String(bool))
  // null转为字符串
  var num = null
  console.log(typeof String(num))//报错  null没有tostring方法
  // undefined转为字符串
  var un
  console.log(typeof String(un))//报错  undefined没有tostring方法
  console.log(typeof number.toString())

其他类型转number类型

Number方法

// 1.Number方法
var bool = true
console.log(Number(bool)) //1
使用parseInt方法 （整数）
// 2.parseInt方法
var nullValue = null
console.log(parseInt(nullValue))//NaN
使用parseFloat方法 （浮点数）
// 3.parseFloat方法
var str ="1.025"
console.log(parseFloat(str)) //1.025
console.log(parseInt(str)) //1

parseInt和Number的区别

Number方法是将整体进行强制转换如果转换不成功结果为NaN

parseInt和parseFloat方法采用的是截取进行转换也就是说前面的满足转换就可以进行转换

//俩者区别
var str ="123abc"
console.log(Number(str)) //NaN
console.log(parseInt(str)) //123
//null值的转换
console.log(Number(null)) //0
console.log(parseInt(null)) //NaN

注意事项

boolean类型转number类型 true为1 false为0
null转为number类型结果为0 undefined转为number类型结果为NaN
字符串转number类型无法转换返回NaN
空字符串转为number类型结果为0

其他类型转为boolean类型

Boolean方法

//转为boolean类型
console.log(Boolean("")) //false
console.log(Boolean(" ")) //true
console.log(Boolean(null)) //false
console.log(Boolean(undefined)) //false
console.log(Boolean(NaN)) //false
console.log(Boolean(0)) //false
console.log(Boolean(-1)) //true

注意事项

字符串转boolean类型非空即为true
数值转boolean类型非NaN和非0为true
null和undefined都是为false

Number的值

NaN (not a number)

Infinity 无穷大

console.log(NaN)
//最大的整数
console.log(Number.MAX_SAFE_INTEGER)
//最小的整数
console.log(Number.MIN_SAFE_INTEGER)
//最大值
console.log(Number.MAX_VALUE)
//最小值
console.log(Number.MIN_VALUE)
//无穷大
console.log(Infinity)
//无穷小
console.log(-Infinity)
//无穷大
console.log(Number.POSITIVE_INFINITY)
//无穷小
console.log(Number.NEGATIVE_INFINITY)

注意事项

//NaN 不等于 NaN
console.log(NaN != NaN)
//无穷大和无穷大加1一样大
console.log(Infinity == Infinity+1)

前端后端

前端后端

前端技术

后端

后端技术

后端业务前移

JavaScript

概述

解释说明

JavaScript的构成由三部分构成

ECMAScript的版本

JavaScript特点

js用途

弱类型

JavaScript的书写位置

内嵌写法（不建议的）

注意事项

javascript的一些相关细节

JavaScript的变量定义

声明变量

使用var关键词 来定义变量

变量名的书写注意事项

数据类型

typeof 检索值类型 查看数据类型关键字（原理二进制解析）

内存划分

JavaScript 中的注释

运算符

//+ - * / % ++ --

注意事项

赋值运算符

注意事项

类型转换

基础值类型转换引用数据类型 （装箱）

// 引用数据类型转基础值类型 （拆箱）

其他类型转字符串

其他类型转number类型

使用var关键词来定义变量

typeof 检索值类型查看数据类型关键字（原理二进制解析）

基础值类型转换引用数据类型（装箱）

// 引用数据类型转基础值类型（拆箱）