Java Web 页面布局与JS

页面布局

• 表格布局：表格在目前互联网环境下，已经被淘汰，维护性较差，通常修改某一区域时，不得不重新设计页面
• 盒子模型：div+css布局，当前互联网最常用的布局方式
  弹性盒子：修改display：flex
  ①.flex-direction：控制盒子的行列布局方式，属性有row，column，row-reverse，column-
  ②.flex-wrap：控制盒子的多行模式
  ③.justify-content：
  ④.align-items：
  ⑤.align-content：
• 网格布局：
  首先修改display属性：
  display:grid
  grid-template-columns:每个横排格子的占比，可用比例也可像素
  grid-template-rows:每个竖排格子的占比
  repeat()函数用来设置行列属性，第一个参数控制总共多少行，后一参数控制每一列的宽高
  grid-gap:每个格子间隔
  合并3到5的格子不包括5：
  ①.
  grid-columns-start:3
  grid-columns-end:5
  ②.
  gird-column：3/5
  ③.
  grid-area：四个参数（row-s，col-s，row-d，col-d）

JavaScript

1. js的几种写法

• 写在script标签中
• 写在标签的事件中
• 单独写在js文件中

2. 弹窗信息：

• alert()警告弹窗
• confirm()确定框，返回一个值，确定返回true，取消返回false
• prompt()输入框

3. js的变量（弱类型语言）

• var与let的区别：
  • var在函数中定义时，无论在第几行声明，它都会在加载函数的第一时间声明，let无此特性
  • var和let的作用域不同，var是函数作用域，let是块作用域
  • let不能重复声明，var可以
• 可以不使用关键字创建，该变量作用域是全局的
• const创建常量，必须赋值
• 变量的命名规范
  • 使用有效字符创建变量：所有大小写字母，数字，$，_等
  • 数字不能在最首位
  • 不能使用关键字，保留字创建变量
  • 变量名要有意义，否则影响可读性与可维护性
  • 可使用小驼峰，大驼峰，下划线等方式创建变量，类

4. js的数据类型

• 基本数据类型：数值类型，bool类型，字符串类型，undefine，NaN
  • 数值类型：int，float
  • bool类型：true，false
  • 字符串类型：‘’,“”,``;反引号可以使用${}引用内容
• 引用类型：对象，数组
• 数据类型转换
  • 自动类型转换：通过不同类型的基本数据相加减，会自动从大信息量的类型转为小信息量的类型（string>float>int）
  • 强制类型转换：parseint parsefloat 可以将优先级高的数据类型转为int/float

5. 常用运算符

• 算术运算符：+ - * / % **
• 比较运算符：> < = >= <= != ==（只比较值内容） ===（比较值也比较内容）
• 逻辑运算符：&& || ! & | ^
• 赋值运算符：= += -= /= *=
• 三目运算符：条件? true:false
• 位移运算符：<< >> >>> （无符号右移）
• 自增自减运算符：a++ a-- ++a --a （a++运算优先级低过=，++a运算优先级最高）

6. 流程控制

• 顺序：从左到右，从上到下
• 选择结构：单分支，双分支，多分支
• 循环：
  • for循环：
    ①.通常跟其他语言类似
    ②.for…in，当遍历目标是数组是，他会取到数组的下标，当遍历的目标是对象时，它会取到对象的属性名称
    ③.for…of，跟foreach类似，可遍历可迭代对象中的每一个元素
  • do while循环：
    首先执行一次循环体代码，然后判断条件是否成立，不成立跳出循环，成立则保持循环
  • break和continue：
    ①.break关键字可以跳出循环，只能跳出内层循环
    ②.continue关键字可以跳出本次循环，并且不再执行循环体中continue后的代码

7. 函数

• 语法结构
  function 函数名 (参数列表){代码片段}
• 基本特征
  • js的函数形参与实参可不一致，并且，你填入的实参是否有对应的形参，他都会保留在函数内部的arguments里
  • 在函数中创建的临时变量，只能在函数范围内使用，不能在全局使用，根本原因是临时变量会在栈中创建，当函数执行完毕，其所占用的内存会被释放掉，外部无法访问
  • 运行js代码时，会将函数提到最前面进行声明再进行代码的运行
• 函数参数的值传递和引用传递
  • 值传递：将变量的值传给函数，函数无论如何修改值的内容都不会影响原本的变量
  • 引用传递：将变量的地址传给函数，修改参数就会影响到变量本身
  • 基本数据类型，数值类型，布尔型等都是值传递，对象，数组等是引用传递
• 函数作为参数进行传递
  • 弱数据类型的编程语言，设计思想，万物皆对象，函数在弱类型语言中，可作为对象，即可当作参数作为传递
  • 匿名函数，通过不创建函数来节省堆内存（使用一次即可释放），来节约资源
  • lambda表达式：省去function和函数名，只保留参数列表let fn = a,b => console.log(a+b)

递归

本质上是一种分治的理念。递归是一种逆向思维，递归会不停进行压栈，如果不加以限制将会把栈区压爆，所以使用递归时不要递归太多次，递归须设置终止条件，否则无法结束