day1笔记
- 李
- Java开发
- WebUI开发
-
全国疫情可视化平台
-
当前开发架构
合格软件工程师基本素质- 熟悉linux操作系统
- 能够使用终端的绝对不使用图形化界面,能使用英文界面绝对不汉化
- 前端工程师
1. 重构技能:html/css/js
2. 交互技能:ajax
3. 企业级框架技能:vue/vuerouter/vuex/elementui | react | angular
4. 移动端技能:webapp、hybirdapp、小程序
5. 通用技能:linux/svn/git/vscode
- Java工程师
1. 基础技能:coreJava/xml/mysql/jdbc/servlet/jsp
2. 企业级框架技能:springmvc spring mybatis
3. 第三方:消息队列,微服务,缓存...
4. 通用技能:linux/svn/git/vscode
- python web工程师
- 人工智能工程师
- 大数据工程师
- 硬件工程师
- 实训安排
- 分组
- 项目驱动,技术点-案例 - 完善 (举三反一)
- 版本控制技术,提交代码
- 答辩
出勤,代码,团队文档
-
休息任务
-
下载vscode
-
注册成为码云的会员 (gitee)
name
email -
注册一个博客账号,实训周期内发布3篇博客,主题自定义(自己想法)
-
完成表格信息填写(下午)
-
开发前的准备工作
-
安装vscode
一路下一步(无脑安装)
c:/program files/
jdk、node
-
认识vscode
轻量级的文本编辑器(sublime) 自行车
资源管理器
搜索
插件
open in browse
重量级集成开发环境(webstrom、eclipse/idea) 小汽车 -
浏览器
ie ie高版本浏览器
firefox 火狐
google chrome 谷歌
opera 欧朋
safari 苹果 -
搭建工作空间
1) 创建好目录
d:/briup/
day01
day02
day03
2) 通过vscode打开你的工作空间
vscode -> file -> open...
- 地图
question:如何在网页中显示地图?
- 选取地图组件
高德地图(alibaba) *
百度地图(baidu) - 编程
js语法
- js 基础
- js与java的简单对于
Javascript
浏览器端语言,运行在浏览器上
弱类型语言
let a; // 声明了一个变量a
a = 2; // a为数字类型
js为解释型语言
js -> 运行在浏览器上
Java
服务器端语言,运行在jvm上
强类型语言
int a ; // a为数字 int 类型
a = 2;
编译型语言
java -> class ->运行在jvm上
- js组成
ECMAScript (js的标准) == 基础Java
语法
变量
数据类型
关键字&保留字
操作符
流程控制语句
数组
对象
函数
正则表达式
DOM (js操作浏览器中的html的sdk)
BOM (js操作浏览器的sdk)
window.history
window.location
超时调用、间歇调用
Ajax - 变量
1) 声明
const a = 1; // 常量
let b ; // 变量
2) 赋值
b = "hello world";
3) 访问
console.log(b); // System.out.println() 打印到控制台
- 数据类型
弱类型语言的数据类型取决于赋值
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的数据类型
基本数据和引用数据类型在内存中的表现形式
- 操作符
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
"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,否则再进一步比较值
当比较引用数据类型的时候,比较引用地址
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 a = 3;
a++ + ++a; //8 a = 5
--
自减
- 类型转换
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
- 流程控制语句
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("未成年人");
}
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) 循环语句
三要素:
初始化条件 结束判定条件 迭代
1~100之间的累加操作
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++
}
3. do-while循环
初始化条件
do{
循环体
迭代
}while(结束判定条件);
例如:
let result = 0;
let i = 1;
do{
result += i;
i++;
} while(i<=100);
算法:
1. 排序算法(冒泡、插入、选择)
2. 求取一个数的最小公倍数和最大公约数
3. 分解质因数
4. 获取1~1000之间的水仙花数
...
- 对象
用于保存复杂的数据,数据特点为键值对
1) 初始化对象- 字面量
使用双大括号作为对象的边界,对象有键值对组成,键值对与键值对之间通过逗号",“分割,属性名与属性值通过冒号”:"分割
var obj = {name:“terry”,age:12,gender:“male”,sayName:function(){}}; - 构造函数
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这个属性,我们是无法在实例中添加这个属性。
3) 对象属性访问
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];
}
- 数组
保存多个值的集合称为数组
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);
}
- 函数
方法,js中的函数比java方法更强大一些,它实际上是方法和类的统称
1) 函数定义
1. 函数声明
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; 别人嗑瓜子,自己吃瓜子
// 我们调用forEach帮我们遍历arr,每次遍历获取到数据之后都需要将遍历到的元素返给我们(通过回调函数)
arr.forEach();
- css基础
10.html基础
11.vue
12.搭建项目框架