JavaScript入门前端入门,前端基础学习.前端前端就是用来渲染（绘图）的。前端技术安卓（java） ios

前端和后端

前端

前端就是用来渲染（绘图）的。

前端技术

安卓（java）

ios

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

后端

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

后端技术

java

php

python

go...

后端业务前移

中台的概念

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

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

JavaScript

概述

JavaScript是一个脚本语言（侵入性 xss攻击），是一个弱语言（没有强制规范类型由值指定的）。JavaScript的构成由三部分构成，分别为**BOM（**broser object model 浏览器对象模型）、DOM (document object model 文档对象模型) 、ECMAScript （基础语法 ES3、ES5、ES6..）

ECMAScript的版本简介

ES3 基础版本没有兼容问题

ES5 升级版本兼容大部分的浏览器

ES6 最新版本只兼容高版本浏览器

babel.js 是一个js库，他的用途是将对应的js以相应版本输出。

JavaScript的书写位置

内联写法（script 标签中）

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

外联写法（js文件中）

准备index.js文件

console.log('hello !!! my name is index.js')

引入js文件

<script src="./js/index.js"></script>

内嵌写法

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

注意事项

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

JavaScript的变量定义

使用var关键词来定义变量

var a = 10 //定义一个变量名字叫a 值为10
console.log(a) //10

变量名的书写注意事项

只能使用字母，数字，下划线_，美元符号$这几个
不能使用关键词及保留字
不能以数字开头
见名知意
使用驼峰命名法

数据类型

数据类型划分

基础值类型（栈类型）

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....

内存划分

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

typeof 检索值类型

typeof返回的是一个字符串
null的typeof值为object

运算符

算术运算符

//+ - * / % ++ --
//+ 出现字符串的话进行字符串拼接 其他都会转为数值进行计算
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）
或 || （有一个true就是true 没有就是false）
非！（取反）

//与 都是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
console.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

位移运算符

转为二进制进行计算

<<  >>

快速的将2变成8

console.log(2<<3)

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

注意事项

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

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

布尔类型表达式?真的结果:假的结果

var a = 2>3?2:3
console.log(a) //3

运算符的运算顺序

运算符	描述
. [] ()	对象成员存取、数组下标、函数调用等
++ -- ~ ! delete new typeof void	一元运算符
* / %	乘法、除法、去模
+ - +	加法、减法、字符串连接
<< >> >>>	移位
< <= > >= instanceof	关系比较、检测类实例
== != === !==	恒等(全等)
&	位与
^	位异或
\|	位或
&&	逻辑与
\|\|	逻辑或
?:	三元条件
= x=	赋值、运算赋值
,	多重赋值、数组元素

类型转换

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

其他类型转字符串

加空字符串 (隐式转换)

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

使用String方法

//使用String方法
var number = 1
console.log(typeof String(number))

使用toString方法

//使用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的书写位置

内联写法（script 标签中）

外联写法（js文件中）

准备index.js文件

引入js文件

内嵌写法

注意事项

JavaScript的变量定义

使用var关键词 来定义变量

变量名的书写注意事项

只能使用字母，数字，下划线_，美元符号$这几个

不能使用关键词及保留字

不能以数字开头

见名知意

使用驼峰命名法

数据类型

数据类型划分

基础值类型 （栈类型）

number 数值类型

string 字符串类型

boolean 布尔类型 (true 或者 false)

null 空类型 （空对象引用）

undefined 未定义的值（null的派生子类）

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

内存划分

typeof 检索值类型

运算符

算术运算符

注意事项

赋值运算符

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

注意事项

逻辑运算符

注意事项

位移运算符

快速的将2变成8

注意事项

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

运算符的运算顺序

类型转换

其他类型转字符串

加空字符串 (隐式转换)

使用String方法

使用toString方法

其他类型转number类型

Number方法

使用parseInt方法 （整数）

使用parseFloat方法 （浮点数）

parseInt和Number的区别

注意事项

其他类型转为boolean类型

Boolean方法

注意事项

Number的值

注意事项

使用var关键词来定义变量

基础值类型（栈类型）

null 空类型（空对象引用）

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

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

使用parseInt方法（整数）

使用parseFloat方法（浮点数）