杰普实训日志第一天学习内容

杰普实习日志第一天学习内容主讲人：李春雨主讲人原创内容，https://gitee.com/plusyu/shixun_hdjd/commit/7fd126f6bacfec6b27357a22bfad4afb1a2ad4b3

1 主要学习内容：
2 1) Java开发
3 2) WebUI开发
4
5 2. 全国疫情可视化平台
6
7 3. 当前开发架构
8 合格软件工程师基本素质
9 1. 熟悉linux操作系统
10 2. 能够使用终端的绝对不使用图形化界面，能使用英文界面绝对不汉化
11
12
13 1) 前端工程师
14 1. 重构技能：html/css/js
15 2. 交互技能：ajax
16 3. 企业级框架技能：vue/vuerouter/vuex/elementui | react | angular
17 4. 移动端技能：webapp、hybirdapp、小程序
18 5. 通用技能：linux/svn/git/vscode
19 2) Java工程师
20 1. 基础技能：coreJava/xml/mysql/jdbc/servlet/jsp
21 2. 企业级框架技能：springmvc spring mybatis
22 3. 第三方：消息队列，微服务，缓存…
23 4. 通用技能：linux/svn/git/vscode
24 3) python web工程师
25 4) 人工智能工程师
26 5) 大数据工程师
27 6) 硬件工程师
28
29 4. 实训安排
30 1) 分组
31 2) 项目驱动，技术点-案例 - 完善（举三反一）
32 3) 版本控制技术，提交代码
33 4) 答辩
34
35 出勤，代码，团队文档
36
37 5. 休息任务
38 1. 下载vscode
39 2. 注册成为码云的会员（gitee）
40 name
41 email
42 3. 注册一个博客账号，实训周期内发布3篇博客，主题自定义（自己想法）
43 4. 完成表格信息填写（下午）
44
45 6. 开发前的准备工作
46 1. 安装vscode
47 一路下一步（无脑安装）
48 c:/program files/
49
50 jdk、node
51 2. 认识vscode
52 轻量级的文本编辑器（sublime）自行车
53 资源管理器
54 搜索
55 插件
56 open in browse
57 重量级集成开发环境（webstrom、eclipse/idea）小汽车
58 3. 浏览器
59 ie ie高版本浏览器
60 firefox 火狐
61 google chrome 谷歌
62 opera 欧朋
63 safari 苹果
64
65 4. 搭建工作空间
66 1) 创建好目录
67 d:/briup/
68 day01
69 day02
70 day03
71 2) 通过vscode打开你的工作空间
72 vscode -> file -> open…
73
74 7. 地图
75 question：如何在网页中显示地图？
76 1) 选取地图组件
77 高德地图（alibaba） *
78 百度地图（baidu）
79 2) 编程
80 js语法
81
82 8. js 基础
83 1) js与java的简单对于
84 Javascript
85 浏览器端语言，运行在浏览器上
86 弱类型语言
87 let a; // 声明了一个变量a
88 a = 2; // a为数字类型
89 js为解释型语言
90 js -> 运行在浏览器上
91 Java
92 服务器端语言，运行在jvm上
93 强类型语言
94 int a ; // a为数字 int 类型
95 a = 2;
96 编译型语言
97 java -> class ->运行在jvm上
98 2. js组成
99 ECMAScript (js的标准) == 基础Java
100 语法
101 变量
102 数据类型
103 关键字&保留字
104 操作符
105 流程控制语句
106 数组
107 对象
108 函数
109 正则表达式
110 DOM (js操作浏览器中的html的sdk)
111 BOM (js操作浏览器的sdk)
112 window.history
113 window.location
114 超时调用、间歇调用
115 Ajax
116 3. 变量
117 1) 声明
118 const a = 1; // 常量
119 let b ; // 变量
120 2) 赋值
121 b = “hello world”;
122 3) 访问
123 console.log(b); // System.out.println() 打印到控制台
124 4. 数据类型
125 弱类型语言的数据类型取决于赋值
126 1) 基本数据类型（5种）
127 c语言的基本数据类型有种
128 Js的基本数据类型有5种：number string boolean null undefined
129 Java的基本数据类型有8种: byte short int long float double char boolean
130 undefined
131 let b; // b的值为undefinedi
132 null
133 let a = null;
134 // a的数据类型为null,typeof a 返回值也为object
135 number
136 let a = 3;
137 let b = 3.5;
138 let c = 011;
139 let d = 0x11;
140 let e = 1 + undefined; // NaN not a number
141 string
142 let a = ‘hello world’
143 let b = “hello world”
144 let c = hello world
145 boolean
146 let a = true;
147 let b = false;
148 2) 引用数据类型
149 在c语言中称为结构体，用于保存一些较为复杂的值
150 在js中除了基本数据类型剩下的全部都是引用数据类型
151 object
152 let a = {name:“terry”,age:12};
153 array
154 let arr = [“terry”,“larry”,“tom”]
155 function
156 let foo = function(a,b){
157 let total = a + b;
158 return total;
159 }
160 …
161 如何检测数据类型：
162 typeof
163 var result = typeof a; // result为a的数据类型
164 基本数据和引用数据类型在内存中的表现形式
165 5. 操作符
166 1) 算术运算符
167 +、+=
168 1 + 2 //3
169 true + false //1 了解即可
170
171 let a = 3;
172 a += 2; // a = a+2;
173 -、-=
174 3 - 1 //2
175 、=
176 2 * 3 // 6
177 /、/=
178 5/2 //2.5
179 %、%=
180 5%2 //1
181 2) 逻辑运算符
182 操作数可以为任意的数据类型，并且返回结果也可以为任意数据类型
183 &&
184 同真则真，有假则假
185 true && true // true
186 true && false // false
187
188 “hello” && “world” // “world”
189 如果第一个表达式为真，第二个表达式就可以决定整个表达式结果，返回第二个表达式
190 “” && 25.8 //""
191 如果第一个表达式为假，整个表达式结果就已经确定，直接返回第一个表达式，无需判断第二个表达式
192 ||
193 有真则真，同假才假
194 true || false // true
195 “hello” || “world” // “hello”
196 如果第一个表达式为真，整个表达式结果就已经确定，直接返回第一个表达式，无需判断第二个表达式
197 如果第一个表达式为假，第二个表达式就可以决定整个表达式结果，返回第二个表达式
198 !
199 !true //false
200 3) 比较运算符
201 操作数一般为数字类型但是不确保，返回值为布尔类型
202 >
203 let age = 15;
204 age > 16 // false
205 >=
206 <
207 <=
208 ==、!=
209 当比较基本数据类型的时候，比较值，当值类型不同，先转换再比较
210 当比较引用数据类型的时候，比较引用地址
211 let a = 3;
212 let b = “3”;
213 a == b; // true
214 let a = {}
215 let b = {}
216 a == b // false
217 =、!
218 当比较基本数据类型的时候，先比较数据类型，如果数据类型不同直接返回false,否则再进一步比较值
219 当比较引用数据类型的时候，比较引用地址
220
221 let a = 3;
222 let b = “3”;
223 a == b; // false
224 let a = {}
225 let b = {}
226 a == b // false
227 4) 三目运算符
228 let age = 13;
229 let result = age > 16?“成年人”:“未成年人”; // “未成年人”
230 5) 一元运算符
231 +
232 let a = 3;
233 +a; // 3
234 -
235 let a = 3;
236 -a; // -3
237 类型转换
238 var a = true;
239 +true //1 将true转换为数字类型
240 -(-true) //1
241 ++
242 自增
243 let a = 3;
244 a++; // 4
245
246 let a = 3;
247 a++ + ++a; //8 a = 5
248 –
249 自减
250
251 6. 类型转换
252 boolean
253 true false
254 字符串非空空
255 数组非0 0
256 null null
257 undefined undefined
258
259 6. 流程控制语句
260
261 7. 对象
262
263 8. 数组
264
265 9. 函数

 6. 流程控制语句

274 1) 分支语句
275 1. if
276 let a = 19;
277 if(a>16){
278 console.log(“成年人”); // 只有当if中的表达式为true的时候才会执行
279 }
280 console.log(“end”); // 始终执行
281
282 2. if-else
283 let age = 15;
284 if(age>16){
285 console.log(“成年人”);
286 } else {
287 console.log(“未成年人”);
288 }
289
290 3. if-else-if
291 let day =2;
292 if(day === 1){
293 console.log(“周一”);
294 } else if(day === 2){
295 console.log(“周二”);
296 } else if(day === 3){
297 console.log(“周三”);
298 }…
299 4. switch-case
300 let v = 1;
301 switch(v){
302 case c1:
303 exp1;
304 break;
305 case c2:
306 exp2;
307 break;
308 …
309 default:
310 exp;
311 break;
312 }
313 v 与 c1对比采用的是 ===, 意味着先比较数据类型在比较值
314 default中可以不添加break。但是当default位于其他地方的时候一定要添加break;
315 2) 循环语句
316 三要素：
317 初始化条件结束判定条件迭代
318
319 1~100之间的累加操作
320 1. for循环
321 for(初始化条件;结束判定条件;迭代){
322 循环体
323 }
324 例如：
325 let result = 0;
326 for(var i=1;i<=100;i++){
327 result += i; // result = reuslt + i;
328 }
329
330 2. while循环
331 初始化条件
332 while(结束判定条件){
333 循环体
334 迭代
335 }
336 例如：
337 let result = 0;
338 let i = 1;
339 while(i<=100){
340 result += i;
341 i++
342 }
260 343
344 3. do-while循环
345 初始化条件
346 do{
347 循环体
348 迭代
349 }while(结束判定条件);
350
351 例如：
352 let result = 0;
353 let i = 1;
354 do{
355 result += i;
356 i++;
357 } while(i<=100);
358 算法：
359 1. 排序算法（冒泡、插入、选择）
360 2. 求取一个数的最小公倍数和最大公约数
361 3. 分解质因数
362 4. 获取1~1000之间的水仙花数
363 …
261 364 7. 对象
365 用于保存复杂的数据，数据特点为键值对
366 1）初始化对象
367 1. 字面量
368 使用双大括号作为对象的边界，对象有键值对组成，键值对与键值对之间通过逗号",“分割，属性名与属性值通过冒号”:“分割
369 var obj = {name:“terry”,age:12,gender:“male”,sayName:function(){}};
370 2. 构造函数
371 var obj = new Object();
372 obj.name= “terry”;
373 obj.age = 12;
374 obj.gender = “male”
375 2) js对象和Java对象区别
376 js对象更加灵活，动态的添加和删除属性
377 js对象更加像Java中的Map集合
378
379 Student stu = new Student();
380 stu.a = // 如果Student类中没有a这个属性，我们是无法在实例中添加这个属性。
381
382 3) 对象属性访问
383 1. 点访问符
384 obj.name // 访问obj对象中的name属性
385 2. 中括号访问符
386 中括号可以解析变量
387 let name = “name”
388 obj[name] // 首先先将name解析为"name”，然后从obj中获取name属性
389
390 obj[“name”] // 直接从obj中获取name属性
391 4) 遍历对象
392 for( var k in obj){
393 // k表示obj中的属性名，每次循环，for循环都会从obj中获取一个属性名赋值为k
394 var v = obj[k];
395 }
262 396
263 397 8. 数组
398 保存多个值的集合称为数组
399 1) 实例化
400 1. 字面量
401 数组使用[]作为边界，数组中的元素通过逗号进行分割，数组的长度通过length来获取
402 let arr = [“terry”,“larry”,“tom”]
403 let arr = [{
404 name:“terry”,
405 age:12
406 },{
407 name:“tom”,
408 age:12
409 }]
410 2. 构造函数
411 let arr = new Array();
412 arr[0] = “terry”
413 arr[1] = “larry”
414 arr[2] = “tom”
415 2) 访问
416 数组的长度是通过length属性来获取，数组长度为数组中元素的个数
417 通过索引来进行访问，索引的范围是从0~arr.length-1;
418 3) 遍历
419 for(let k in arr){
420 // k为索引
421 let item = arr[k]; //访问元素
422 console.log(k,item);
423 }
264 424
265 425 9. 函数
426 方法，js中的函数比java方法更强大一些，它实际上是方法和类的统称
427 1) 函数定义
428 1. 函数声明
429 function 函数名(形式参数){
266 430
431 }
432 例如：
433 function foo(a,b){
434 let result = a+b;
435 return result;
436 }
437 2. 函数表达式
438 var 函数名 = function(形式参数){
439
440 }
267 441
442 例如：
443 var foo = function(a,b){
444 let result = a+b;
445 return result;
446 }
447 2) 函数调用
448 函数名(实参);
449 3) 回调函数
450 我调用你的函数，你的函数在执行的时候又返回来调用我的函数
451
452 let arr = [“terry”,“larry”,“tom”]
453 // 遍历
454 // 1. 原生遍历 for、while、do-while、for-in；自己嗑瓜子（遍历），自己吃瓜子（访问）
455 // 2. api；别人嗑瓜子，自己吃瓜子
456
457 // 我们调用forEach帮我们遍历arr，每次遍历获取到数据之后都需要将遍历到的元素返给我们（通过回调函数）
458 arr.forEach();