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