1.html5
1.环境搭建
1）编辑器环境
轻量级的编辑
sublime(装emmet插件)
vscode（在用）
2）浏览器环境（测试）
firefox
google chrome
opera
safari(mac)
ie8+(兼容性)
2.编写简单的hello world
编写代码 -> 运行测试 -> 交付(部署到服务器)【网站】
1）部署在tomcat中 (动态服务器 - 慢)
主要是放在tomcat的webapps目录下
tomcat/webapps/hello.html
2) 部署到静态服务器（apache/nginx）
阿里云（Ubuntu16.04）139.196.164.93 *我自己的网站*
在服务器上安装jdk mysql apache tomcat
(* 本文最后会有阿里云服务器搭建的相关简易步骤，上传文件，安装mysql等)
3.html结构（超文本标记语言）
1.超级文本（文本，超级链接，图片，视频，音频等）
2.doctype说明：
HTML5：<!DOCTYPE html>
HTML4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www/w3.org/TR/html4/loose.dtd">
3.html的主体结构
<!DOCTYPE html>
<html lang="en">
<head>
<!--源信息-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--可以显示在网页中的内容-->
</body>
</html>
4.与xml的简单对比
xml:标签是可以自定义的。
html:所有标签都是内置的。
<h1>一级标题</h1>
5.语法
html有各种元素组成，一个元素通常包含开始标签，结束标签，内容 。在开始标签中可以添加属性。
<div class="content" id="one">
<span>hello world</span>
</div>
属性：
1）核心属性：id,class,title,style
绝大多数元素都具备的属性
2）特有属性
某些元素中特有的属性
ex: a href target
img src width height
4.对于html与java的一些简单的描述
1.java 编译型语言 .java->.class->jvm
隶属于sun/oracle公司的，有具体的团队维护，所有的标准oracle说了算，jvm也是oracle开发的
关于java语法的升级，有版本的区别
jvm升级（解释java代码）效果升级
springboot写完代码之后是如何部署
1）打包成war，直接抛到tomcat/webapps,war就会自动解压
2）打包成jar,直接运行jar就行（内置了tomcat）
2.html 解释型语言 .html->浏览器
1）网页编程标准 w3cschool
2）h4-->h5
语法升级，版本相差不会很大
就会废弃一些属性
新增一些属性
就是进行一些优化，效果升级
5.标签 【对于以下内容的学习，编写的代码已上传到github仓库中】通过以下网址可以进行访问(public):https://github.com/Jackson0036/Front-end-
1）块级标签（常用的）
作用：用来搭建网页的结构
特点：宽度默认占满父元素，高度默认有内容决定，宽高可以自定义，独占一行
div 【容器】无意义的块级元素
h1~h6 【标题】
p 【段落】
ul>li 【容器】列表
ol>li 【容器】列表
dl>dd,dt 【容器】列表
2）行级别标签
作用：填充网页
特点：默认宽高都由内容决定，宽高无法指定，所有的行内元素可以共享一行空间，行内元素内部一般不允许嵌套子元素，只允许放文本
span 【】无意义的行内元素
a 【超链接】
img 【图片】
src 图片地址
alt 当图片找不到的时候的文本替代
strong,b 加粗
em 强调
i 斜体
2.css入门：
1.三要素：
1）html (网页的骨架)
2）css(进行页面修饰，布局，动画过渡效果)
原则：对于动画效果能用css实现的绝对不用js
3)JavaScript(树莓派)
动态DOM,类似于jstl
数据交互
2.如何在html中使用css(3种方式)
1）嵌入在标签的内部
将css代码写在html中，较为混乱，复用性低， 好处：优先级高，简单直接（修改别人代码的时候 weex rn）
2)集中嵌入在style标签中（我在学习过程中使用的比较多）
3）将css独立写在外部的css文件中，并且通过link导入进来（适用于企业级的开发）
3.css语法
选择器{
/*规则*/
color:#fff;
background-color:pink;
}
css选择器（jQuery选择器）
1）核心选择器
用法：选择较大范围
1.标签（元素）选择器
div{
}
h1{
}
2.id选择器
#one{
}
<div id="one">one</div>
3.class选择器
.first{
}
<div id="one" class="first">one</div>
4.并且选择器
div .first{
}
div #one{
}
5.或者选择器
div,.first{
}
6.普遍选择器
*{
}
2）层次选择器
1.子代选择器
.top_nav > ul >li
选中class为top_nav的元素的直接后代ul元素的直接后代li元素
2.后代选择器
.top_nav li
3.下一个兄弟选择器
.top_nav li + *
4.之后所有的兄弟选择器
.top_nav li ~ *
3)过滤器
对已经选择到的元素进行过滤
1.属性过滤器
selector[name] 已选择到的元素具有name属性
selector[name=v] 已选择到的元素具有name属性，并且name属性的值为v
selector[name^=v] 已选择到的元素具有name属性，并且name属性的值以'v'开头
selector[name$=v] 已选择到的元素具有name属性，并且name属性的值以'v'结尾
selector[name*=v] 已选择到的元素具有name属性，并且name属性的值中包含了'v'
2.伪类过滤器
以:开头的
selector:first-child 过滤出已选择元素中的是第一个孩子的元素
selector:last-child 最后一个孩子
selector:nth-child(2) 第二个孩子
selector:nth-child(odd) 奇数孩子
selector:nth-child(even) 偶数孩子
selector:nth-child(3n+1) n为0开始
selector:only-child 如果某个元素是其父元素的唯一子元素，那么它就会被选中
selector:not(selector) 没有被选择的元素
3.伪元素过滤器
可以产生一个虚拟元素（行内元素）可以用来加一些特殊的符号 ^ - - 等
以::开头的
div::after{
}
div::before{
}
<div>
::before
<p>one</p>
::after
</div>
4.css规则 以下都可以参考【mdn】进行学习 mdn
单位值 px 像素
1rem=38px
1em=12px
1)字体 【设计师-架构师规定】【可以被继承】
font-size 字体大小 默认16px
font-weight 字体粗细程度
normal 【默认】
bold 【加粗】
bolder 【比当前元素上继承的值要大一些】
100~900
font-style 风格（是否打开斜体）
normal 【默认】
italic
font-family 字体族 "微软雅黑"
line-height 行高
绝对单位 1px
速写
font:[font-weight] [font-style] font-size/line-height font-family
2)网络字体（字体图标库）
iconfont【阿里巴巴的字体图标库】
【https://www.iconfont.cn/】
1.选取自己想要的图标
2.生成项目
3.按照说明进行使用
3）文本 【可以被继承】
text-align
left 居左排列
center 中
right 右
text-indent 文本缩进
text-decoration
line-through 划掉文本的线
overline 文本上边的线
undeline 下划线
none 无
text-tranform 字体大小写转换
uppercase
lowercase
4)列表
list-style:none
5)盒子
margin
padding
border
width
height
6)背景
background-color 背景色
关键字 teal red black
十六进制 #ffffff #000000
rgb函数 rgb(255,255,255)
rgba函数 rgba(0,0,0,.5)多了一个透明度
background-clip 背景覆盖区域
border-box 边框及边框以内全部覆盖
padding-box 内边距及内边距以内全部覆盖
content-box 内容区域全部覆盖
background-origin : border-box;
背景铺设的起点
background-image :url("./images/a.jpg");
背景图
background-repeat: no-repeat;
背景图的重复方式
background-size:contain;
背景图片的大小
background-position:50px 50px;
关键字 center
坐标点 1px 2px
背景图开始铺设的坐标
速写：background：
5.css布局
布局就是为了解决多个块元素在一行中显示的问题。
1）默认文档流
块元素从上到下进行排列
2）浮动布局
float:left; 向左侧浮动
clear:left; 当前元素左侧不允许有浮动元素，换行
display:block; 将一个元素设置为块元素
<span style="display:block"></span>
应该加在块元素上。
1.特点：
1）宽高默认由内容决定
2）脱离文档流，在默认文档流中不会再占据空间
3）在同一层次中，所有的浮动元素会在一行显示，当一行中无法容纳这些浮动元素的时候，就会自动换行
4）浮动元素会失去对父元素的支撑
2.解决浮动元素的父元素没有高度问题
1）所有子元素浮动，通过伪元素进行支撑
2）保留一个子元素不浮动，用于支撑父元素，为了让他显示出来，可以加margin
3)定位布局
position:static;【静态】
position:relative;
position:absolute;
position:fixed;
position:sticky;
如果一个元素具有position规则热，并且规则为relative,absolute,fixed,sticky之一，那么，我就认为这个元素是一个定位元素；只有定位元素才能使用如下规则：
left,right,top,bottom
1.相对定位
position:relative;
特点：
1）相对于当前元素所在位置
2）当前元素不会脱离文档流（即使发生了移动也不会被其他元素抢占位置）
应用：
一般情况下相对定位要配合绝对定位来进行移动
2.绝对定位
position:absolute;
特点：
1）相对于距离他最近的父定位元素，如果他的父元素没有定位元素，那就相对于浏览器视口
2）脱离文档流（不占据默认文档流的空间，块元素的宽度不再为100%）
3.固定定位
position:fixed;
特点：
1）相对于浏览器视口
2）脱离文档流（不占据默认文档流空间，块元素的宽度不再为100%）
3）不会随着屏幕的移动而移动
4.粘滞定位
问题：块元素居中？
答：给块元素一个宽度 margin: 0 auto;
6.选择器的优先级
Important 特权
!important
Specificity 权重（积分机制）
1000 style属性中
100 id选择器
10 类选择器，伪类过滤器，属性过滤器
1 元素选择器，伪元素选择器
Source order 顺序
7.伸缩盒布局(响应式布局)
响应式布局（bootstrap[封装了一些布局代码，完成响应式布局]，栅格系统）[bootstrap](https://getbootstrap.com)
<div class="row">
<div class="col-sm-2">1</div>
<div class="col-sm-2">2</div>
<div class="col-sm-2">3</div>
<div class="col-sm-2">4</div>
<div class="col-sm-2">5</div>
<div class="col-sm-2">6</div>
</div>
1.语法
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
【声明在父元素上的规则】
display:flex;
这个规则应用到父元素上，表示当前元素为伸缩盒。默认情况下，主轴在x轴上，交叉轴在y轴上
flex-direction:row/column;
默认情况下，为row(主轴在x轴上)
flex-wrap:no-wrap/wrap;
默认情况下，为no-wrap，表示当容器中的子元素宽度超过了容器宽，不换行
justify-content:flex-start/flex-end/center/space-around/space-between;
对主轴上剩余空间的排列设置（不要使用flex-grow对剩余空间进行分配了）
align-items:flex-start/flex-end/center;
交叉轴上的显示：交叉轴的开始排列/结束排列/中间排列
【声明在子元素的规则】
flex-basis:指定子元素的宽度基准【固定，相对】，width
flex-grow:1;
对容器剩余空间的分配，1表示当前元素占据剩余空间的一份
flex-shrink:1;
对于亏损空间的垫付，1表示栈亏损空间的一份
快写:flex:flex-grow flex-shrink flex-basis;
2.封装
爬虫
8.表格与表单（html）
【一般应用在后台管理系统中】
1.表单
与列表类似，用于展示一些数据，一般不用于布局，因为他的默认样式太复杂
table 表格容器
caption 表格标题
thead 表格的表头
tr > th > *
tbody 表格的主题
tr > td > *
tfoot 表格的底部
tr > td > *
表格美化
1.属性
align:center;
colspan 跨列 【通过excel来操作模拟】
rowspan 跨行
2.css 首选方案！！
table{
border-collapse:collapse;
width:90%;
margin:0 auto;
}
table td,
table th{
border:1px solid #ccc;
text-align:center;
}
2.iframe
将外部的一个网页链接进来你当前的网页中
3.表单
注意：
1.在企业级开发的时候，一般不直接使用这些表单，因为表单元素在不同的浏览器中显示的样子是不同的。一般使用组件（bootstrap，element-ui...）
2.看点咨询精选
发布文章功能 input type=""text
文章所属分类 select 如果是二级分类，需要插件，树形下拉菜单
正文 富文本编辑器（需要插件）
3.在表单学习的时候
掌握表单和表单元素的属性和特性
掌握交互原理
获取用户输入的数据，是用户与我们程序之间的一个数据桥梁
同步：form表单的直接提交就是同步操作
异步：form表单通过ajax提交
form
action url(相对路径/绝对路径)
method get/post
ectype 【只有在method=post考虑，如果是get方式，参数将会被直接编码为查询字符串，无法更改】
application/x-www-form-urlencoded
默认值
查询字符串
name=jack&password=abc123*
规则： 属性名与属性值之间通过=分割
键值对之间通过&分割
属性值中如果有特殊字符，会将这个给特殊字符转换为百分比格式【这也是为什么二进制不能使用这种编码】
ex:/ => %2F
multipart/form-data 附件上传【二进制图片】
如果表单中出现了二进制文件,<input type="file" name="file"/>,就无法使用字符串查询，只能用这种协议
text/plain
application/json 【目前在同步请求中不支持，但是在ajax中是支持的】
表单及元素
<form>
<input type="text"/> 单行文本框
<input type="password"/> 单行密码框
<input type="file"/> 文件选择按钮，enctype必须为multipart/form-data
<input type="radio"/> 单选按钮
单选按钮一般会同时出现多个，这多个按钮的name值必须相等才能达到互斥的要求
value必须通过，这样当勾选某个单选按钮的时候会提交改按钮上的value值
<input type="checkbox"/> 复选按钮
<input type="reset"/> 将表单内容恢复默认
<input type="submit"/> 提交按钮
<input type="button"/> 普通按钮
...【h5新增】
<input type="search" placeholder="请输入关键字"/> 搜索框
<input type="date"/> 日期框
<select name="department">
<option value="1">JavaEE</option>
<option value="2">WebUI</option> 当用户选择WebUI的时候，department的值为2
<option value="3">BigData</option>
</select>
<textarea name="introduce" rows="" cols="">提示...</textarea> 多行文本框
</form>
鄙视链(了解)
ex:嵌入式 -> java -> 前端 -> 美工
研究协议，自定义协议 -> 使用协议（http,请求头）-> 前端（知道有http）-> 美工（不知道）
9.动画
语法
animation
1)关键帧定义
随着时间移动的一些列的css规则
@keyframes name{
0%{
width:100px
}
50%{
width:300px
}
100%{
width:150px
}
}
2)动画定义
.move{
animation-name:move; 指定关键帧名称
animation-duration:2000ms; 设置动画持续时间(from-to)
animation-timing-function:linear; 时间曲线
animation-fill-mode:backwards; 动画完成后保持的规则(from/to)
animation-delay:1000ms; 持续时间
animation-iteration-count:infinite; 重复次数
animation-direction:alternate-reverse; 动画运行的方向
animation: 以上的速写形式
}
3）应用
<div class="move"></div>
开源组件库
自定义组件库
flash(直播流-监控)
海康 flash
4）animation.css(css3 animation动画轮子)
1.导入animation.css
2.调用class
框架
10.过渡效果
一般表示在元素状态切换的时候的过渡效果
transition-property
规则名
规则名1，规则名2[,...]
all
指明在状态切换的时候，哪些属性添加过渡效果
transition-duration
持续时间 ms/s
transition-timing-function
linear/steps
transition-delay
延迟 ms/s
transition
transition-property transition-duration [transition-delay]
11.变形
tranform
指定变形函数
1）旋转
rotate(deg) 旋转度数
rotateX(deg)
rotateY(deg)
rotateZ(deg)
2）平移
translate(长度)
translateX(长度)
translateY(长度)
translateZ(长度)
3）放大
scale()
scaleX()
scaleY()
4）拉伸
skew(deg)
skewX()
skewY()
transform-origin
指定变形的原点
12.媒体查询（响应式布局）
@media(媒体查询条件){
选择器{
规则
}
}
1）媒体查询的应用设置
1.直接应用在规则内部
<style>
html{
font-size:20px;
}
@media screen and (max-width:1500px){
}
</style>
2.应用在link标签中
<link rel="stylesheet" href="./css/screen_small.css" media="(max-width:1380px)">
<link rel="stylesheet" href="./css/screen_middle.css" media="(min-width:1380px) and (max-width:1500px)">
<link rel="stylesheet" href="./css/screen_large.css" media="(min-width:1500px) and (max-width:1780px)">
<link rel="stylesheet" href="./css/screen_xlarge.css" media="(min-width:1780px)">
3)应用在style标签中
<style></style>
<style media="screen and (max-width:1380px)">
.wrapper{
width:1105px;
}
html{
font-size:20px
}
</style>
<style media="screen and (min-width:1380px) and (max-width:1500px)">
.wrapper{
width:1200px;
}
html{
font-size:20px
}
</style>
2)注意：
1.如果我们编写的网页运行在pc中，那么一般要给固定宽度，但是这个宽度如果随着屏幕的宽度发生改变，我们就称为响应式(.wrapper)
2.如果我们编写的网页运行在大屏上，一般就采用满屏铺，不用指定wrapper
3.如果我们编写的网页运行在mobile中，一般就采用满屏铺，不用指定wrapper，但是需要响应式布局
13.at规则（@）
1) @font-face
2) @keyframes
3) @media
4) @import
@import url
@import url list-of-media-queries;
5) @charset
指定当前css文件的编码格式（说明当前文件是使用xxx编码）
14.css脚本语言（css预处理语言）【了解】
sass
less
15.bootstrap4(思路，封装) 【了解】
第三方库：iconfont/animation.css/bootstrap
bs 是css3的一个库，也就说我们如果用了这个库，就可以很少的去写css代码,因为css中提供了大量的选择及规则。我们只管通过类调用即可
css库
js库
组件库
bootstrap-reboot.css 重置样式，类似于我们自己写的common.css，要比我们写的好多了
bootstrap-grid.css 栅格布局（封装了flex布局【bs4封装float布局】）
bootstrap.css 完整样式（包含重置样式，栅格布局，按钮，表格，下拉菜单，模态框...）
vue (组件库-栅格系统、组件[table,form,button])
JavaScript
JavaScript
优点：1.能对浏览器时间做出响应
2.表单验证，减轻服务器的压力
前端对于登录所输入的账号密码做了限制
学习方式：
1.推荐网站：
代码练习：https://www.freecodecamp.one/
mdn：https://developer.mozilla.org/zh-CN/
csdn、博客园、掘金
2.推荐书籍：
红宝书：JavaScript高级程序设计
犀牛：JavaScript权威指南
组成：
1）ECMAScript5(es5) JavaScript语法标准
变量，注释，操作符，流程控制语句，数组，函数，对象
2）DOM (文档对象模型)
js操作html
选中浏览器页面任意元素
var dom = document.getElementById('#app');
绑定事件
dom.onclick = function(){
}
监听
dom.addEventListener(function(){
})
3）BOM (浏览器对象模型)
js操作浏览器
setTimeout(function(){
})
setInterval(function(){
})
alert()
js解析器：
1.目前所有的主流浏览器都有js解析器
2.js不仅仅可以运行在浏览器中，还可以运行在服务器中
js运行在浏览器中:动画，表单验证，ajax请求...
js运行在服务器中:操作数据库，代码编译，网络...
java可以通过sql语句操作mysql
nodejs可以通过sql语句操作mysql
nodejs下载（我是在root账户下，不是root账户下记得加sudo）
1.更新源
apt-get update/sudo apt-get update 只有更新之后，才能下载最新的安装包
2.下载nodejs安装包
apt-get install nodejs
注意：如果下载完nodejs之后，没有建立软连接，就只能使用nodejs
nodejs + 回车进入命令行模式
node + 回车是无法进入的
3.查看版本号
nodejs -v
出现版本号即说明nodejs下载完成
4.创建软连接（快捷方式）
ln -s /usr/bin/nodejs /usr/bin/node
注意：如果报错'/usr/bin/node' file exits. 说明已经创建好了node的快捷方式
5.退出node命令行
.exit
ctrl+cc
创建hello.js
1)使用vi hello.js创建文件
2）编写代码
3）执行代码
node 文件名
配置vi编辑器
spf13（为了更好的写代码，自动补全，下载时间较长）
1）下载git
apt-get install git
2）查看版本号
git --version
3）下载spf13
curl https://j.mp/spf13-vim3 -L > spf13-vim.sh && sh spf13-vim.sh
注意：下载spf13时，要预先安装好Git
变量
1) 强类型
int a = 2;
a是一个值为2的整数类型，类型是由int
a = false;
以上表达式会报错，因为a是一个整数类型，不能再赋值成其他数据类型
2) 弱类型(变量的数据类型可以随时变换)
var a = 2;
a是一个值为2的数字类型，类型是由a = 2
var b = 'hello'
b是一个值为hellow的字符串类型，类型是由b = 'hello'
a = false;
将a的数据类型由数字类型转换为布尔类型
3) 变量声明
使用关键字var
var a;
var obj;
var arr;
只是声明一个变量，但是没有初始值，打印的时候值为undefined
4) 变量初始化
a = 2;
obj = 'hello';
arr = 123;
变量声明和初始化同时进行
var name = 'xpf';
5) 变量的使用
var a = 2;
a++;
注意：如果变量没有声明，会报错xxx is not defined
6) 变量的数据类型
基本数据类型
数字类型 number
字符串类型 string
布尔类型 boolean
null
undefined
引用数据类型
对象
函数
数组
正则表达式
...
操作符
1) 算术运算符
+ 加 +=
var a = 1;
a += 1; // 2
等同于 a = a + 1；
- 减 -=
* 乘 *=
/ 除
% 取余
2) 一元运算符
++ 自增
a++;
后置，先使用变量，再自增
++a;
前置，先自增，再使用变量
var a = 2;
var b = a++;
console.log(a); // 3
console.log(b); // 2
var a = 2;
var b = ++a;
console.log(a); // 3
console.log(b); // 3
-- 自减
+、- 将其他数据类型转换为数字类型
var str = 'hello world';
console.log(typeof(str)); //string
console.log(typeof(+str)); //number
console.log(typeof(-str)); //number
1. typeof()可以用来检测基本数据类型，检测引用数据类型的时候，返回值并不精确
2. isNaN()可以用来检测一个变量是否是一个数字，返回一个布尔类型的值
NaN: not a number
var str = 'hello world';
isNaN(str); // true
var a = 1;
isNaN(a); // false
3) 逻辑运算符(表单验证)
&& 并且
两个表达式中，只要有任意一个的返回值为false，它都返回false
var a = true;
var b = false;
var c = a && b;
console.log(c); //fasle
var age = 17;
var gender = 'male';
console.log(age > 18 && gender == 'male'); // false
|| 或
两个表达式中，只要由任意一个的返回值为true，它都返回true
var a = true;
var b = false;
var c = a || b;
console.log(c); // true
! 非
取反
var a = true;
var b = !a;
console.log(b); // false
!true // false
!false // true
4) 比较运算符
==
!=
双等，比较值，会自动转换数据类型
var a = 1;
var b = '1';
console.log(typeof(a),'a'); // number
console.log(typeof(b),'b'); // string
console.log( a == b ); // true
console.log( a != b ); // false
console.log( a === b ); // false
console.log( a !== b ); // true
===
!==
三等(全等)，比较数据类型和值，先比较数据类型，如果数据类型不一致，就算值是一样的，仍然返回false；只有当数据类型一致的时候，才去比较值
>
>=
<
<=
var age = 17;
console.log(age > 17); // false
console.log(age >= 17); // true
5) 三目运算符
exp1 ? exp2 : exp3
先判断exp1，exp1为true的时候，返回exp2；exp1为false的时候，返回exp3
var age = 18;
var gender = 'male';
//酒吧:年龄在18岁及以上的男性才能入场
var result = age >=18 && gender == 'male' ? '可以入场' : '不允许进入'
console.log(result);
6) 拼接运算符
+
当使用'+'，操作数中出现了字符串，那么肯定就是拼接运算符
var name = 'xpf';
var age = 25;
function sayName(name,age){
console.log('my name is' + name + 'my age is' + age);
}
sayName(name,age);
1、案例一：
根据父栏目id查询子栏目
娱乐
八卦、媒体、周边新闻...
新闻
军事、篮球...
体育
2、案例二：
情况一：图片地址返回完全
<ul v-for="(item,index) in list1" :key="item.id">
<img :src="item.imgUrl" alt="">
</ul>
情况二：图片地址返回不完全
<ul v-for="(item,index) in list2" :key="item.id">
<img :src=" 'http://134.175.154.93:8888/group1/' + item.imgUrl" alt="">
</ul>
1.基本数据类型之间的转换 （工具：xshell）
1）其他数据类型转换为数字类型
+、-
Number()
1.字符串转数字类型
var str = '123';
//方法一
var num1 = +str;
//方法二
var num2 = Number(str);
console.log('str',typeof(str)); //string
console.log('num1',typeof(num1)); //number
console.log('num2',typeof(num2)); //number
---
var str = 'hello world';
var num = Number(str);
console.log(num); // NaN
console.log(typeof(num)); // number
2.布尔类型转换数字类型
var a = true;
var b = false;
var num1 = Number(a);
var num2 = Number(b);
console.log('num1',num1); //1
console.log('num2',num2); //0
3.null.undefined转换数字类型
var a = null;
var num = +a;
console.log(num); //0
---
var a = undefined;
var num = +a;
console.log(num); //NaN
4.parseInt/parseFloat
var a = 1.123;
var num1 = parseInt(a);
var num2 = parseFloat(a);
console.log('num1',num1); //1
console.log('num2',num2); //1.123
2)其它数据类型转换为字符串类型
'' 或 ""
String()
toString() null,undefined不可以调用
var a = 1;
var str1 = 'a';
var str2 = String(a);
var str3 = a.toString();
console.log('str1',typeof(str1)); //string
console.log('str2',typeof(str2)); //string
console.log('str3',typeof(str3)); //string
3)其它数据类型转换为布尔类型
!!
Boolean()
1.数字类型转布尔类型
var a = 1;
var b = 0;
var bn1 = !!a;
var bn2 = Boolean(a);
var bn3 = !!b;
console.log('bn1',bn1); //true
console.log('bn2',bn2); //true
console.log('bn3',bn3); //fasle
2.字符串类型转布尔类型
var str1 = 'hello';
var str2 = '';
var bn1 = !!str1;
var bn2 = !!str2;
console.log('bn1',bn1); //true
console.log('bn2',bn2); //false
3.null、undefined转布尔类型
返回值都为false
2.流程控制语句
1）分支语句
做了不同的选择，会有不同的后果，满足不同的条件，会执行不同的代码。
if(){
}
if(){
} else {
}
if(){
} else if(){
} else {
}
switch-case
var password = 123321
最低0.47元/天 解锁文章
1606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
