实训day1
指导：李春雨
开发
1) Java开发
2) WebUI开发
1) Java开发
2) WebUI开发
2. 全国疫情可视化平台
3. 当前开发架构
合格软件工程师基本素质
1. 熟悉linux操作系统
2. 能够使用终端的绝对不使用图形化界面，能使用英文界面绝对不汉化
合格软件工程师基本素质
1. 熟悉linux操作系统
2. 能够使用终端的绝对不使用图形化界面，能使用英文界面绝对不汉化
1) 前端工程师
1. 重构技能：html/css/js
2. 交互技能：ajax
3. 企业级框架技能：vue/vuerouter/vuex/elementui | react | angular
4. 移动端技能：webapp、hybirdapp、小程序
5. 通用技能：linux/svn/git/vscode
2) Java工程师
1. 基础技能：coreJava/xml/mysql/jdbc/servlet/jsp
2. 企业级框架技能：springmvc spring mybatis
3. 第三方：消息队列，微服务，缓存...
4. 通用技能：linux/svn/git/vscode
3) python web工程师
4) 人工智能工程师
5) 大数据工程师
6) 硬件工程师
4. 实训安排
1) 分组
2) 项目驱动，技术点-案例 - 完善 （举三反一）
3) 版本控制技术，提交代码
4) 答辩
1) 分组
2) 项目驱动，技术点-案例 - 完善 （举三反一）
3) 版本控制技术，提交代码
4) 答辩
出勤，代码，团队文档
5. 休息任务
1. 下载vscode
2. 注册成为码云的会员 （gitee）
name
email
3. 注册一个博客账号，实训周期内发布3篇博客，主题自定义（自己想法）
4. 完成表格信息填写（下午）
1. 下载vscode
2. 注册成为码云的会员 （gitee）
name
3. 注册一个博客账号，实训周期内发布3篇博客，主题自定义（自己想法）
4. 完成表格信息填写（下午）
6. 开发前的准备工作
1. 安装vscode
一路下一步（无脑安装）
c:/program files/
1. 安装vscode
一路下一步（无脑安装）
c:/program files/
jdk、node
2. 认识vscode
轻量级的文本编辑器（sublime） 自行车
资源管理器
搜索
插件
open in browse
重量级集成开发环境（webstrom、eclipse/idea） 小汽车
3. 浏览器
ie ie高版本浏览器
firefox 火狐
google chrome 谷歌
opera 欧朋
safari 苹果
2. 认识vscode
轻量级的文本编辑器（sublime） 自行车
资源管理器
搜索
插件
open in browse
重量级集成开发环境（webstrom、eclipse/idea） 小汽车
3. 浏览器
ie ie高版本浏览器
firefox 火狐
google chrome 谷歌
opera 欧朋
safari 苹果
4. 搭建工作空间
1) 创建好目录
d:/briup/
day01
day02
day03
2) 通过vscode打开你的工作空间
vscode -> file -> open...
1) 创建好目录
d:/briup/
day01
day02
day03
2) 通过vscode打开你的工作空间
vscode -> file -> open...
7. 地图
question：如何在网页中显示地图？
1) 选取地图组件
高德地图（alibaba） *
百度地图（baidu）
2) 编程
js语法
8. js 基础
1) js与java的简单对于
Javascript
浏览器端语言，运行在浏览器上
弱类型语言
let a; // 声明了一个变量a
a = 2; // a为数字类型
js为解释型语言
js -> 运行在浏览器上
Java
服务器端语言，运行在jvm上
强类型语言
int a ; // a为数字 int 类型
a = 2;
编译型语言
java -> class ->运行在jvm上
2. js组成
ECMAScript (js的标准) == 基础Java
语法
变量
数据类型
关键字&保留字
操作符
流程控制语句
数组
对象
函数
正则表达式
DOM (js操作浏览器中的html的sdk)
BOM (js操作浏览器的sdk)
window.history
window.location
超时调用、间歇调用
Ajax
3. 变量
1) 声明
const a = 1; // 常量
let b ; // 变量
2) 赋值
b = "hello world";
3) 访问
console.log(b); // System.out.println() 打印到控制台
4. 数据类型
弱类型语言的数据类型取决于赋值
1) 基本数据类型（5种）
c语言的基本数据类型有 种
Js的基本数据类型有5种：number string boolean null undefined
Java的基本数据类型有8种: byte short int long float double char boolean
undefined
let b; // b的值为undefinedi
null
let a = null;
// a的数据类型为null,typeof a 返回值也为object
number
let a = 3;
let b = 3.5;
let c = 011;
let d = 0x11;
let e = 1 + undefined; // NaN not a number
string
let a = 'hello world'
let b = "hello world"
let c = `hello world`
boolean
let a = true;
let b = false;
2) 引用数据类型
在c语言中称为结构体，用于保存一些较为复杂的值
在js中除了基本数据类型剩下的全部都是引用数据类型
object
let a = {name:"terry",age:12};
array
let arr = ["terry","larry","tom"]
function
let foo = function(a,b){
let total = a + b;
return total;
}
...
如何检测数据类型：
typeof
var result = typeof a; // result为a的数据类型
基本数据和引用数据类型在内存中的表现形式
5. 操作符
1) 算术运算符
+、+=
1 + 2 //3
true + false //1 了解即可
question：如何在网页中显示地图？
1) 选取地图组件
高德地图（alibaba） *
百度地图（baidu）
2) 编程
js语法
8. js 基础
1) js与java的简单对于
Javascript
浏览器端语言，运行在浏览器上
弱类型语言
let a; // 声明了一个变量a
a = 2; // a为数字类型
js为解释型语言
js -> 运行在浏览器上
Java
服务器端语言，运行在jvm上
强类型语言
int a ; // a为数字 int 类型
a = 2;
编译型语言
java -> class ->运行在jvm上
2. js组成
ECMAScript (js的标准) == 基础Java
语法
变量
数据类型
关键字&保留字
操作符
流程控制语句
数组
对象
函数
正则表达式
DOM (js操作浏览器中的html的sdk)
BOM (js操作浏览器的sdk)
window.history
window.location
超时调用、间歇调用
Ajax
3. 变量
1) 声明
const a = 1; // 常量
let b ; // 变量
2) 赋值
b = "hello world";
3) 访问
console.log(b); // System.out.println() 打印到控制台
4. 数据类型
弱类型语言的数据类型取决于赋值
1) 基本数据类型（5种）
c语言的基本数据类型有 种
Js的基本数据类型有5种：number string boolean null undefined
Java的基本数据类型有8种: byte short int long float double char boolean
undefined
let b; // b的值为undefinedi
null
let a = null;
// a的数据类型为null,typeof a 返回值也为object
number
let a = 3;
let b = 3.5;
let c = 011;
let d = 0x11;
let e = 1 + undefined; // NaN not a number
string
let a = 'hello world'
let b = "hello world"
let c = `hello world`
boolean
let a = true;
let b = false;
2) 引用数据类型
在c语言中称为结构体，用于保存一些较为复杂的值
在js中除了基本数据类型剩下的全部都是引用数据类型
object
let a = {name:"terry",age:12};
array
let arr = ["terry","larry","tom"]
function
let foo = function(a,b){
let total = a + b;
return total;
}
...
如何检测数据类型：
typeof
var result = typeof a; // result为a的数据类型
基本数据和引用数据类型在内存中的表现形式
5. 操作符
1) 算术运算符
+、+=
1 + 2 //3
true + false //1 了解即可
let a = 3;
a += 2; // a = a+2;
-、-=
3 - 1 //2
*、*=
2 * 3 // 6
/、/=
5/2 //2.5
%、%=
5%2 //1
2) 逻辑运算符
操作数可以为任意的数据类型，并且返回结果也可以为任意数据类型
&&
同真则真，有假则假
true && true // true
true && false // false
a += 2; // a = a+2;
-、-=
3 - 1 //2
*、*=
2 * 3 // 6
/、/=
5/2 //2.5
%、%=
5%2 //1
2) 逻辑运算符
操作数可以为任意的数据类型，并且返回结果也可以为任意数据类型
&&
同真则真，有假则假
true && true // true
true && false // false
"hello" && "world" // "world"
如果第一个表达式为真，第二个表达式就可以决定整个表达式结果，返回第二个表达式
"" && 25.8 //""
如果第一个表达式为假，整个表达式结果就已经确定，直接返回第一个表达式，无需判断第二个表达式
||
有真则真，同假才假
true || false // true
"hello" || "world" // "hello"
如果第一个表达式为真，整个表达式结果就已经确定，直接返回第一个表达式，无需判断第二个表达式
如果第一个表达式为假，第二个表达式就可以决定整个表达式结果，返回第二个表达式
!
!true //false
3) 比较运算符
操作数一般为数字类型但是不确保，返回值为布尔类型
>
let age = 15;
age > 16 // false
>=
<
<=
==、!=
当比较基本数据类型的时候，比较值，当值类型不同，先转换再比较
当比较引用数据类型的时候，比较引用地址
let a = 3;
let b = "3";
a == b; // true
let a = {}
let b = {}
a == b // false
===、!==
当比较基本数据类型的时候，先比较数据类型，如果数据类型不同直接返回false,否则再进一步比较值
当比较引用数据类型的时候，比较引用地址
如果第一个表达式为真，第二个表达式就可以决定整个表达式结果，返回第二个表达式
"" && 25.8 //""
如果第一个表达式为假，整个表达式结果就已经确定，直接返回第一个表达式，无需判断第二个表达式
||
有真则真，同假才假
true || false // true
"hello" || "world" // "hello"
如果第一个表达式为真，整个表达式结果就已经确定，直接返回第一个表达式，无需判断第二个表达式
如果第一个表达式为假，第二个表达式就可以决定整个表达式结果，返回第二个表达式
!
!true //false
3) 比较运算符
操作数一般为数字类型但是不确保，返回值为布尔类型
>
let age = 15;
age > 16 // false
>=
<
<=
==、!=
当比较基本数据类型的时候，比较值，当值类型不同，先转换再比较
当比较引用数据类型的时候，比较引用地址
let a = 3;
let b = "3";
a == b; // true
let a = {}
let b = {}
a == b // false
===、!==
当比较基本数据类型的时候，先比较数据类型，如果数据类型不同直接返回false,否则再进一步比较值
当比较引用数据类型的时候，比较引用地址
let a = 3;
let b = "3";
a == b; // false
let a = {}
let b = {}
a == b // false
4) 三目运算符
let age = 13;
let result = age > 16?"成年人":"未成年人"; // "未成年人"
5) 一元运算符
+
let a = 3;
+a; // 3
-
let a = 3;
-a; // -3
类型转换
var a = true;
+true //1 将true转换为数字类型
-(-true) //1
++
自增
let a = 3;
a++; // 4
let b = "3";
a == b; // false
let a = {}
let b = {}
a == b // false
4) 三目运算符
let age = 13;
let result = age > 16?"成年人":"未成年人"; // "未成年人"
5) 一元运算符
+
let a = 3;
+a; // 3
-
let a = 3;
-a; // -3
类型转换
var a = true;
+true //1 将true转换为数字类型
-(-true) //1
++
自增
let a = 3;
a++; // 4
let a = 3;
a++ + ++a; //8 a = 5
--
自减
a++ + ++a; //8 a = 5
--
自减
6. 类型转换
1) boolean
Boolean(a)
!!a
-----------------------
true false
字符串 非空 空
数字 非0 0、NaN
null null
undefined undefined
2) string
String(a)
a+"" 任何其他数据类型与字符串相加结果都为字符串
3) number
Number(a);
+a
-(-a)
parseInt(a) parseInt表示从字符串中解析出int类型
parseInt("23.5abc") //23
parseFloat(a) parseFloat表示从字符串中解析Float类型
parseFloat("23.5abc") //23.5
parseFloat("abc23.5") //NaN
6. 流程控制语句
1) 分支语句
1. if
let a = 19;
if(a>16){
console.log("成年人"); // 只有当if中的表达式为true的时候才会执行
}
console.log("end"); // 始终执行
1) boolean
Boolean(a)
!!a
-----------------------
true false
字符串 非空 空
数字 非0 0、NaN
null null
undefined undefined
2) string
String(a)
a+"" 任何其他数据类型与字符串相加结果都为字符串
3) number
Number(a);
+a
-(-a)
parseInt(a) parseInt表示从字符串中解析出int类型
parseInt("23.5abc") //23
parseFloat(a) parseFloat表示从字符串中解析Float类型
parseFloat("23.5abc") //23.5
parseFloat("abc23.5") //NaN
6. 流程控制语句
1) 分支语句
1. if
let a = 19;
if(a>16){
console.log("成年人"); // 只有当if中的表达式为true的时候才会执行
}
console.log("end"); // 始终执行
2. if-else
let age = 15;
if(age>16){
console.log("成年人");
} else {
console.log("未成年人");
}
let age = 15;
if(age>16){
console.log("成年人");
} else {
console.log("未成年人");
}
3. if-else-if
let day =2;
if(day === 1){
console.log("周一");
} else if(day === 2){
console.log("周二");
} else if(day === 3){
console.log("周三");
}...
4. switch-case
let v = 1;
switch(v){
case c1:
exp1;
break;
case c2:
exp2;
break;
...
default:
exp;
break;
}
v 与 c1对比采用的是 ===, 意味着先比较数据类型在比较值
default中可以不添加break。但是当default位于其他地方的时候一定要添加break;
2) 循环语句
三要素：
初始化条件 结束判定条件 迭代
let day =2;
if(day === 1){
console.log("周一");
} else if(day === 2){
console.log("周二");
} else if(day === 3){
console.log("周三");
}...
4. switch-case
let v = 1;
switch(v){
case c1:
exp1;
break;
case c2:
exp2;
break;
...
default:
exp;
break;
}
v 与 c1对比采用的是 ===, 意味着先比较数据类型在比较值
default中可以不添加break。但是当default位于其他地方的时候一定要添加break;
2) 循环语句
三要素：
初始化条件 结束判定条件 迭代
1~100之间的累加操作
1. for循环
for(初始化条件;结束判定条件;迭代){
循环体
}
例如：
let result = 0;
for(var i=1;i<=100;i++){
result += i; // result = reuslt + i;
}
1. for循环
for(初始化条件;结束判定条件;迭代){
循环体
}
例如：
let result = 0;
for(var i=1;i<=100;i++){
result += i; // result = reuslt + i;
}
2. while循环
初始化条件
while(结束判定条件){
循环体
迭代
}
例如：
let result = 0;
let i = 1;
while(i<=100){
result += i;
i++
}
初始化条件
while(结束判定条件){
循环体
迭代
}
例如：
let result = 0;
let i = 1;
while(i<=100){
result += i;
i++
}
3. do-while循环
初始化条件
do{
循环体
迭代
}while(结束判定条件);
初始化条件
do{
循环体
迭代
}while(结束判定条件);
例如：
let result = 0;
let i = 1;
do{
result += i;
i++;
} while(i<=100);
算法：
1. 排序算法（冒泡、插入、选择）
2. 求取一个数的最小公倍数和最大公约数
3. 分解质因数
4. 获取1~1000之间的水仙花数
...
7. 对象
用于保存复杂的数据，数据特点为键值对
1） 初始化对象
1. 字面量
使用双大括号作为对象的边界，对象有键值对组成，键值对与键值对之间通过逗号","分割，属性名与属性值通过冒号":"分割
var obj = {name:"terry",age:12,gender:"male",sayName:function(){}};
2. 构造函数
var obj = new Object();
obj.name= "terry";
obj.age = 12;
obj.gender = "male"
2) js对象和Java对象区别
js对象 更加灵活，动态的添加和删除属性
js对象 更加像Java中的Map集合
let result = 0;
let i = 1;
do{
result += i;
i++;
} while(i<=100);
算法：
1. 排序算法（冒泡、插入、选择）
2. 求取一个数的最小公倍数和最大公约数
3. 分解质因数
4. 获取1~1000之间的水仙花数
...
7. 对象
用于保存复杂的数据，数据特点为键值对
1） 初始化对象
1. 字面量
使用双大括号作为对象的边界，对象有键值对组成，键值对与键值对之间通过逗号","分割，属性名与属性值通过冒号":"分割
var obj = {name:"terry",age:12,gender:"male",sayName:function(){}};
2. 构造函数
var obj = new Object();
obj.name= "terry";
obj.age = 12;
obj.gender = "male"
2) js对象和Java对象区别
js对象 更加灵活，动态的添加和删除属性
js对象 更加像Java中的Map集合
Student stu = new Student();
stu.a = // 如果Student类中没有a这个属性，我们是无法在实例中添加这个属性。
stu.a = // 如果Student类中没有a这个属性，我们是无法在实例中添加这个属性。
3) 对象属性访问
1. 点访问符
obj.name // 访问obj对象中的name属性
2. 中括号访问符
中括号可以解析变量
let name = "name"
obj[name] // 首先先将name解析为"name"，然后从obj中获取name属性
1. 点访问符
obj.name // 访问obj对象中的name属性
2. 中括号访问符
中括号可以解析变量
let name = "name"
obj[name] // 首先先将name解析为"name"，然后从obj中获取name属性
obj["name"] // 直接从obj中获取name属性
4) 遍历对象
for( var k in obj){
// k表示obj中的属性名，每次循环，for循环都会从obj中获取一个属性名赋值为k
var v = obj[k];
}
4) 遍历对象
for( var k in obj){
// k表示obj中的属性名，每次循环，for循环都会从obj中获取一个属性名赋值为k
var v = obj[k];
}
8. 数组
保存多个值的集合称为数组
1) 实例化
1. 字面量
数组使用[]作为边界，数组中的元素通过逗号进行分割，数组的长度通过length来获取
let arr = ["terry","larry","tom"]
let arr = [{
name:"terry",
age:12
},{
name:"tom",
age:12
}]
2. 构造函数
let arr = new Array();
arr[0] = "terry"
arr[1] = "larry"
arr[2] = "tom"
2) 访问
数组的长度是通过length属性来获取 ，数组长度为数组中元素的个数
通过索引来进行访问，索引的范围是从0~arr.length-1;
3) 遍历
for(let k in arr){
// k为索引
let item = arr[k]; //访问元素
console.log(k,item);
}
保存多个值的集合称为数组
1) 实例化
1. 字面量
数组使用[]作为边界，数组中的元素通过逗号进行分割，数组的长度通过length来获取
let arr = ["terry","larry","tom"]
let arr = [{
name:"terry",
age:12
},{
name:"tom",
age:12
}]
2. 构造函数
let arr = new Array();
arr[0] = "terry"
arr[1] = "larry"
arr[2] = "tom"
2) 访问
数组的长度是通过length属性来获取 ，数组长度为数组中元素的个数
通过索引来进行访问，索引的范围是从0~arr.length-1;
3) 遍历
for(let k in arr){
// k为索引
let item = arr[k]; //访问元素
console.log(k,item);
}
9. 函数
方法，js中的函数比java方法更强大一些，它实际上是方法和类的统称
1) 函数定义
1. 函数声明
function 函数名(形式参数){
方法，js中的函数比java方法更强大一些，它实际上是方法和类的统称
1) 函数定义
1. 函数声明
function 函数名(形式参数){
}
例如：
function foo(a,b){
let result = a+b;
return result;
}
2. 函数表达式
var 函数名 = function(形式参数){
例如：
function foo(a,b){
let result = a+b;
return result;
}
2. 函数表达式
var 函数名 = function(形式参数){
}
例如：
var foo = function(a,b){
let result = a+b;
return result;
}
2) 函数调用
函数名(实参);
3) 回调函数
我调用你的函数，你的函数在执行的时候又返回来调用我的函数
let arr = ["terry","larry","tom"]
// 遍历
// 1. 原生遍历 for、while、do-while、for-in； 自己嗑瓜子（遍历），自己吃瓜子（访问）
// 2. api； 别人嗑瓜子，自己吃瓜子
var foo = function(a,b){
let result = a+b;
return result;
}
2) 函数调用
函数名(实参);
3) 回调函数
我调用你的函数，你的函数在执行的时候又返回来调用我的函数
let arr = ["terry","larry","tom"]
// 遍历
// 1. 原生遍历 for、while、do-while、for-in； 自己嗑瓜子（遍历），自己吃瓜子（访问）
// 2. api； 别人嗑瓜子，自己吃瓜子
// 我们调用forEach帮我们遍历arr，每次遍历获取到数据之后都需要将遍历到的元素返给我们（通过回调函数）
arr.forEach();
arr.forEach();
浙公网安备 33010602011771号