image frame

Mor | void

Yesterday is a history. Tomorrow is a mystery. But today is a gift.
Empty spaces,fill the pages.

Java基础语法

Node

对象

软件对象也由状态和相关行为组成。

对象将其状态存储在字段（某些编程语言中的变量）中，并通过方法（某些编程语言中的函数）公开其行为。

字段cadence、speed和gear表示对象的状态，方法（changeCadence、changeGear等speedUp）定义其与外部世界的交互

方法对对象的内部状态进行操作，并作为对象到对象通信的主要机制。隐藏内部状态并要求通过对象的方法执行所有交互被称为数据封装——面向对象编程的基本原则。

将代码捆绑到单个软件对象中提供了许多好处，包括：

  1. 模块化：一个对象的源代码可以独立于其他对象的源代码编写和维护。一旦创建，对象可以很容易地在系统内部传递。
  2. 信息隐藏：通过仅与对象的方法交互，其内部实现的细节对外界保持隐藏。
  3. 代码重用：如果一个对象已经存在（可能由另一个软件开发人员编写），您可以在您的程序中使用该对象。这允许专家实现/测试/调试复杂的、特定于任务的对象，然后您可以信任这些对象在您自己的代码中运行。
  4. 可插入性和易于调试：如果某个特定对象出现问题，您可以简单地将其从应用程序中删除，然后插入一个不同的对象作为替代。这类似于解决现实世界中的机械问题。如果螺栓断裂，则更换它，而不是整台机器。

类

在 Java 编程语言中，每个类都可以有一个直接的超类，并且每个超类都可以有无限数量的子类

接口

对象通过它们公开的方法来定义它们与外部世界的交互

方法形成对象与外界的接口

在其最常见的形式中 , 接口是一组具有空主体的相关方法

实现一个接口可以让一个类对它承诺提供的行为更加正式。接口在类和外部世界之间形成了一个契约，并且这个契约在编译时由编译器强制执行。如果您的类声称实现了一个接口，则该接口定义的所有方法都必须出现在其源代码中，然后该类才能成功编译。

(要实际编译ACMEBicycle该类，您需要将public关键字添加到已实现接口方法的开头。)

包

包是组织一组相关类和接口的命名空间

Java 平台提供了一个庞大的类库（一组包），适合在您自己的应用程序中使用。这个库被称为“应用程序编程接口”，简称“API”。它的包代表最常与通用编程相关的任务。

标识符

给包,类,方法,变量起名字的符号

标识符由字母、数字、下划线、美元符号组成

包名：全部小写，多级包用.隔开。
类、接口：一个单词首字母大写，多个单词每个单词的首字母大写。
方法和变量：一个单词首字母小写，多个单词从第二个单词开始每个单词的首字母大写
常量：如果是一个单词,所有字母大写，如果是多个单词,所有的单词大写,用下划线区分每个单词
项目名：全部用小写字母，多个单词之间用横杆-分割

关键字

访问控制

private
访问控制修饰符，在同一类内可见
protected
访问控制侬饰符，对同一包内的类和所有子类可见
public
访问控制修饰符，对所有类可见

类、方法和变量修饰符

abstract
表明类或者成员方法具有抽象展性
class
声明一个类
enum
枚举(在J2SE 5.0中添加)
extends
表明一个类型是另一个类型的子类型
final
用来说明最终属性
implements
表明一个类实现接口
interface
接口
native
原生方法(非Java实现)
new
用来创建新实例对象
static
表明具有静态同性
strictfp
用于很制浮点计其的精度和舍入(在J2SE 1.2中添加)
synchronized
表明一段代码需要同步执行
transient
声明不用序列化的成员域
volatile
表明两个或音多个变量必须同步地发生变化

程序控制语句

break
用于结束当前循环体中的执行
case
用在switch语句之中,表示其中的一个分支
continue
用于在当前循环体结束时恢复程序执行
default
默认，例如，用在switch语句中，表明一个默认的分支
do
用在do-while循环结构中
else
用在条件语句中，表明当条件不成立时的分支
for
一种循环结构的引导词
if
条件语句的引导词
instanceof
用来测试一个对兔是管是指定类型的实例对象

return
用于完成方法的执行。返回给调用者一个方法定义返回值
switch
分支语句结构的引导词
while
用于创建一个while循环

错误处理

assert
断言，用来进行程序调试(在J2SE14中添加)
catch
用在异常处理中，用来捕捉异常
finally
用来声明处理异常中肯定会被执行到的语句块
throw
抛出一个异常
throws
在方法声明中用于搭定在方法中未处理哪些异常

try
定义具有异常处理的语句块

包相关

import
表明引入要访问搭定的类或包
package
包

基本数据类型

boolean
基本数据类型之一，布尔类型
byte
基本数据类型之一，字节类型
char
基本数据类型之一，字符类型
double
基本数据类型之一，双精度浮点数类型
float
基本数据类型之一，单精度浮点数类型
int
基本数据类型之一，整数类型
long
基本数据类型之一，长整数类型
short
基本数据类型之一.短整数类型

变量引用

super
当前对象的父类型的引用或音父类型的构造方法
this
指向当前实例对象的引用
void
用于声明方法不返回任何值

保留关键字

goto
保留关键享，没有具体含义
const
保留关键享，没有具体含义

换行输出 :

System.out.println("Hello World");或System.out.print("Hello\nWord")

System.out.print("Hello\tWord")

注释

1
2
3
4
5
6
7
8
9
10
//单行注释

/*
 *多
 *行
 *注
 *释
*/

/**JavaDoc注释*/

访问修饰符

分隔符

  • ; 分号 用来终止一个语句
  • {} 花括号、大括号 用来包括自动初始化的数组的值，也用来定义程序块、类、方法以及局部范围
  • []方括号、中括号 用来声明数组的类型，也用来表示撤消对数组值的引用
  • , 逗号 在变量声明中，区分变量说明的各个变量。在for控制语句中，用来将圆括号内的语句连接起来
  • . 原点 用来将软件包的名字与它的子包或类分隔。也用来将引用变量与变量或方法分隔
  • () 圆括号 在定义和调用方法时用来容纳参数表。在控制语句或强制类型转换组成的表达式中用来表示执行或计算的优先权

进制

运算符

除了赋值运算符之外的所有二元运算符都是从左到右计算的

赋值运算符从右到左求值

算数运算符

+ - * / % ++ --

  • 1./ 左右两端的类型需要一致

  • 2.%最后的符号和被模数相同

  • 3.前++；先+1，后运算

    ​ 后++；先运算 , 后+1

  • 4、+：当String字符串与其他数据类型只能做连接运算 , 并且结果为String类型

比较运算符

== != < > <= >= instanceof

运算结果都是Boolean类型

赋值运算符

= += -= *= /= %=

逻辑运算符

& | ^ ! && ||

& 逻辑与

| 逻辑或

^ 逻辑异或

! 逻辑非

&& 短路与

|| 短路或

  • &：左边无论真假，右边都会进行运算；
  • &&：如果左边为假，则右边不进行运算；
  • | 与 || 的区别同上；在使用的时候建议使用&&和||
  • ^与或|的不同之处是：当左右都为true时，结果为false。

位运算符

<<

>>

<<<

&

|

^

~

三元运算符

(条件表达式)?表达式1:表达式2;

条件运算符

条件表达式为true时,运算后的结果是表达式1
条件表达式为false时,运算后的结果是表达式2

  • 1、表达式1与表达式2的类型必须一致；
  • 2、使用三元运算符的地方一定可以使用if…else代替，反之不一定成立；

例:

1
2
3
4
5
6
public static void main (Sting[] args){
    int a=1;
	int b=2;
	String result = a<b?("a大"):("b大");
	System.out.println(result);
}

==与equals() 的区别

Java语法—-Java中equals和==的区别

结果为布尔类型

例 : 

1
2
3
String sex="男";
sex.equals("男");
//此种情况变量sex必须赋值

或 

1
"男".equals(sex);

转义字符

支持一些特殊的转义序列char和String文字：

String.contains()方法不需要转义

\a(响铃) \b( 退格） \f(换页) \n(换行) \r（回车） \t(制表符)\v (垂直制表 ) \\(反斜杠) \'(单引号) \"(双引号) \0 (空字符) \ddd (1到3位八进制所代表的任意字符) \xhh (1到2位十六进制所代表的任意字符)

变量

Java 编程语言定义了以下类型的变量：

  • 实例变量（非静态字段）从技术上讲，对象将其各自的状态存储在“非静态字段”中，即没有static关键字声明的字段。非静态字段也称为实例变量，因为它们的值对于类的每个实例（换句话说，对于每个对象）都是唯一的
  • 类变量（静态字段）类变量static是使用修饰符声明的任何字段；这告诉编译器存在这个变量的一个副本，不管这个类被实例化了多少次。定义特定类型自行车的齿轮数量的字段可以标记为static , 因为从概念上讲，相同数量的齿轮将适用于所有实例。该代码static int numGears = 6;将创建这样一个静态字段。此外，可以添加关键字final来表示齿轮的数量永远不会改变。
  • 局部变量与对象在字段中存储其状态的方式类似，方法通常会将其临时状态存储在局部变量中。声明局部变量的语法类似于声明字段（例如，int count = 0;）。没有特殊关键字将变量指定为局部变量；该决定完全来自声明变量的位置——位于方法的左大括号和右大括号之间。因此，局部变量仅对声明它们的方法可见；课堂上的其他人无法访问它们。
  • 参数您已经在“Hello World!”的Bicycle类和方法中看到了参数示例。main应用。回想一下，该main方法的签名是public static void main(String[] args). 这里，args变量是这个方法的参数。要记住的重要一点是，参数总是被归类为“变量”而不是“字段”。这也适用于您将在本教程后面了解的其他参数接受构造（例如构造函数和异常处理程序）。

成员变量( 非静态字段即没有static关键字声明的字段 , 也叫作实例变量/对象变量 , 定义在类中 , 属于对象 , 只能对象调用(类的实例调用 ? ) , 堆内存 )

​ 静态成员变量(也叫类变量 , 有static关键字声明 , 属于成员变量的一种 , 可以直接使用类名调用 , 可以对象调用 , 共享内存)

局部变量(在方法体中定义 , 栈内存 , 生命周期只存在在方法中 , 方法结束后就会回收)

Java没有全局变量 , 但可以用静态成员变量实现全局变量效果

变量的命名

变量名区分大小写。

变量的名称可以是任何合法的标识符——一个长度不限的Unicode字母和数字序列，以字母、美元符号$或下划线字符_开头。惯例是变量名总是以字母开头，而不是$或_。

美元符号字符根本就不会被使用。在某些情况下，自动生成的名称将包含美元符号，但变量名称应该始终避免使用它。对于下划线字符也有类似的约定

虽然从技术上讲，变量名以_开头是合法的，但这种做法是不鼓励的。

空格是不允许的。

后续字符可以是字母、数字、美元符号或下划线字符。为变量选择名称时，请使用完整的单词而不是隐晦的缩写。

在许多情况下，它还会使您的代码自我记录

名称不能是关键字或保留字

如果您选择的名称仅包含一个单词，则将该单词拼写为所有小写字母。如果它包含多个单词，则将每个后续单词的第一个字母大写。

如果变量存储一个常量值，例如static final int NUM_GEARS = 6，则约定会略有变化，将每个字母大写并用下划线分隔后续单词。下划线字符从不在其他地方使用。

常量

常量名通常大写

不同字符使用下划线分隔

只能被赋值一次 , 通常定义时即对其初始化

1
final double PI = 3.14;

数据类型

原始类型由语言预定义并由保留关键字命名

原始值不与其他原始值共享状态

已声明但未初始化的字段将由编译器设置为合理的默认值。一般而言，此默认值将为零或null，具体取决于数据类型

局部变量略有不同；编译器永远不会为未初始化的局部变量分配默认值。如果无法在声明它的地方初始化局部变量，请确保在尝试使用它之前为其分配一个值。访问未初始化的局部变量将导致编译时错误。

如果整型字面值以字母L或l结尾，则为长型;否则为int类型。建议使用大写字母L，因为小写字母l与数字1很难区分

如果浮点字面值以字母F或f结尾，则为float类型 ; 否则，它的类型是double，它可以选择以字母D或d结尾

字符和字符串文字 :

文字类型char，String可以包含任何 Unicode (UTF-16) 字符。也可以使用“Unicode 转义”，始终对文字使用“单引号”，对char文字使用“双引号” String。Unicode 转义序列可以在程序的其他地方使用（例如在字段名称中），而不仅仅是在char或String文字中。

null文字可以用作任何引用类型的值。null可以分配给任何变量，除了原始类型的变量。null除了测试它的存在之外，几乎无能为力。因此，null经常在程序中用作标记，表示某些对象不可用。

有一种特殊的字面量，称为类字面量，由类型名称和附加 “ 组成.class；例如，String.class. 这指的Class是表示类型本身的（类型的）对象。

在 Java SE 7 及更高版本中，任意数量的下划线字符 _)可以出现在数字文字中数字之间的任何位置。能够分隔数字文字中的数字组，提高代码的可读性。

原始数据类型Primitive Data

double此数据类型绝不应用于精确值，例如货币。

  • 数值型
    • 字节型(byte)
    • 整数类型(short,int,long)
    • 浮点类型(float,double)
  • 字符型(char)
  • 布尔型(boolean)
1
2
3
4
String name = "张三";
//String  双引号
char sex = '男';
//char  单引号

引用数据类型

  • 类(class)
  • 接口(interface)
  • 数组([])
1
String.format("%.2f",f1);

数组

数组是一个容器对象，它包含固定数量的单一类型的值。数组的长度是在创建数组时确定的。创建后，它的长度是固定的。

数组中的每一项都称为一个元素，每个元素都通过其数字索引访问

标识符

数组元素

元素下标 : 从0开始

元素类型

流程控制语句

顺序结构

分支结构

条件为布尔类型

if

1
2
3
4
/*if(条件){
 *执行代码块
 *}*/

if-else

1
2
3
4
5
6
7
/*
if(条件){
	代码块1
}else{
	代码块2
}
*/

if-else-if

1
2
3
4
5
6
7
8
9
10
11
/*
if(条件){
	代码块1
}else if(条件2){
	代码块2
}else if(条件3){
	代码块3
}else {
代码块4
}
*/

switch

与if和if-else语句不同，switch语句可以有许多可能的执行路径。

switch适用于byte、short、char和int基元数据类型。还适用于枚举类型、String类和一些封装某些基本类型的特殊类 : Character、Byte、Short和Integer

语句的主体switch称为switch 块。块中的语句switch可以用一个或多个case或default标签来标记。该switch语句计算其表达式，然后执行匹配case标签后面的所有语句。

switch语句仅基于单个整数、枚举值或String对象测试表达式

每个break语句都终止封闭switch语句

continue

return

循环结构

for

迭代一系列值

初始化表达式初始化循环;它在循环开始时执行一次

当终止表达式的计算结果为false时，循环终止

递增表达式在每次循环迭代后被调用;这个表达式可以对一个值递增或递减

增强for循环

or each element in arrayName do {…}

for(数据类型 变量名 :遍历的目标){ 数据类型 变量名 :声明一个变量用来接收遍历目标遍历后的元素}

1
for(ElementType element: arrayName){};

例:

1
2
3
4
int[] num = {1,2,3,4,5,6};
for(int i: num){
    System.out.print(i);
}

while

while语句计算表达式，表达式必须返回一个布尔值。

do-while

do-while和之间的区别在于while它do-while在循环底部而不是顶部评估其表达式。因此，块内的语句do总是至少执行一次

表达式

表达式是由变量、运算符和方法调用组成的构造，这些构造根据语言的语法构造，计算结果为单个值。

表达式返回值的数据类型取决于表达式中使用的元素。

表达式也可以返回其他类型的值，例如booleanor String。

只要表达式的一部分所需的数据类型与另一部分的数据类型匹配，Java 编程语言就允许您从各种较小的表达式构造复合表达式。

一条语句构成一个完整的执行单元。;通过以分号 ( )结束表达式，可以将以下类型的表达式组成语句。

  • 赋值表达式
  • 任何使用++或--
  • 方法调用
  • 对象创建表达式

这样的语句称为表达式语句。

还有另外两种语句：声明语句和控制流语句 : 声明语句声明一个变量 , 控制流语句控制语句执行的顺序

块是一组位于平衡大括号之间的零个或多个语句，可以在任何允许使用单个语句的地方使用

反射

语法糖

注解

多态

同一个引用类型使用不同的实例而执行不同操作

Java基础

Node

其他

TIOBE 编程语言排行榜

Hadoop 分布式系统基础架构

Apache Hadoop

ORALE ( 甲骨文 )

IDE(集成开发环境)

MyElipse , Eclipse , IDEA

(MyEclipse 2017 stable)

MyElipse
Eclipse
汉化过程 :

依次点击 : help , Install New Software, Add , Location

输入：https://download.eclipse.org/technology/babel/update-site/latest/

选择Babel Language Packs in Chinese (Simplified) 后点击next , 成功后eclipse自动重启

解除汉化过程 :

找到eclipse根目录 , 找到eclipse.ini文件右键编辑 , 在最后输入

-Duser.language=en保存退出

右键eclipse.exe发送到桌面快捷方式 , 右键选择属性 , 在目标最后输入 ln zh点击确定

IDEA

Java

JDK

目前版本JDK8

包含JRE和JVM

Java开发需下载完整JDK , 只运行Java只需下载JRE

JDK Java语言的软件开发工具包

JRE Java运行环境

JVM Java虚拟机

Java SE(基础核心) :

  • 面向对象
  • API
  • JVM

Java ME :

  • 移动设备
  • 游戏
  • 通信

Java EE :

  • JSP
  • EJB
  • 服务

JDK文件夹中部分文件 :

COPYRIGHT 版本;版权

LICENSE 许可证

release 发布版本

bin文件夹 : 包含JDK开发工具的可执行性文件

lib 类库

include C语言头文件

src.zip java源代码

path配置过程

下载JDK后需配置path ( win10系统 )

复制JDK文件中bin的文件位置

依次打开 : 控制面板 , 系统 , 高级系统设置 , 高级 , 环境变量 , 选择系统变量中的Path点击编辑 , 将文件位置粘贴保存 , 并上移至第一行

参考文章 : JDK安装与环境变量配置

查看JDK是否配置成功

打开windows命令处理程序 ( win+R出入cmd )

输入 : 

1
java -version

显示版本即为配置成功

反编译工具

jad命令

例 :

Jad -s java Test.class

Jad -s java -8 Test.class(含中文时)

FrontEndPlus

图形化工具 , jad内核

需要设置 : Configuration , Decompile Options , 选择convert Unicode strings into ANSI string (anti) , Update and Close

cropper剪裁插件的用法

Node

使用方法：加载的文件必须按照顺序加载三个js

1
2
3
4
5
6
<link rel="stylesheet" href="../assets/lib/cropper/cropper.css">


<script src="../assets/lib/jquery.js"></script>
<script src="../assets/lib/cropper/Cropper.js"></script>
<script src="../assets/lib/cropper/jquery-cropper.js"></script>

初始化剪裁插件

1
2
3
4
5
6
7
8
9
10
11
12
let $image = $('#image'); // 找到一张图片（默认显示的那张图片）

// 配置项
let option = {
  // 参考下面的 [参数] 部分
  // 比如：aspectRatio 表示剪裁比例
  aspectRatio: 400 / 280
};

// 初始化
$image.cropper(option);

方法的使用

1
2
3
4
5
6
7
8
9
$image.cropper('方法名', 方法的参数);

比如，有一个 replace 方法：replace(url)

$image.cropper('replace', url);

比如，剪裁得到canvas，原方法是这样说明的：getCroppedCanvas({ width: 30, height: 10 })

let canvas = $image.cropper('getCroppedCanvas', { width: 30, height: 10 });

把canvas转成我们想要的格式

1
2
3
4
5
6
7
8
9
10
// 剪裁之后，会得到一个canvas
// 能够把 canvas 转成 base64 格式；转成 文件对象 格式，只能转成这两种格式

// 转成 base64格式
let base64 = canvas.toDataURL();

// 转成 文件对象 格式
canvas.toBlob(function (blob) {
  // blob是二进制大对象格式，把它 append 到 FormData 中，会变为文件对象
});

参数

  • 你可以通过$().cropper(options)方法来设置参数。如果你想改变全局默认参数，可以使用$.fn.cropper.setDefaults(options)方法。
  • aspectRatio：类型：Number，默认值NaN。设置剪裁容器的比例。
  • crop：类型：Function，默认值null。当改变剪裁容器或图片时的事件函数。
  • preview：类型：String(jQuery选择器)，默认值’’。添加额外的元素（容器）的预览。注意：
  • 最大宽度是剪裁容器的初始化宽度
  • 最大高度是剪裁容器的初始化高度
  • 如果你设置了aspectRatio参数，确保预览容器具有相同的比例
  • strict：类型：Boolean，默认值true。在strict模式中，canvas不能小于容器，剪裁容器不能再canvas之外。
  • responsive：类型：Boolean，默认值true。是否在窗口尺寸改变的时候重置cropper。
  • checkImageOrigin：类型：Boolean，默认值true。默认情况下，插件会检测图片的源，如果是跨域图片，图片元素会被添加crossOrigin class，并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。添加时间戳会使图片重新加载，以使跨域图片能够使用getCroppedCanvas。在图片上添加crossOrigin class会阻止在图片url上添加时间戳，及图片的重新加载。
  • background：类型：Boolean，默认值true。是否在容器上显示网格背景。
  • modal：类型：Boolean，默认值true。是否在剪裁框上显示黑色的模态窗口。
  • guides：类型：Boolean，默认值true。是否在剪裁框上显示虚线。
  • highlight：类型：Boolean，默认值true。是否在剪裁框上显示白色的模态窗口。
  • autoCrop：类型：Boolean，默认值true。是否在初始化时允许自动剪裁图片。
  • autoCropArea：类型：Number，默认值0.8（图片的80%）。0-1之间的数值，定义自动剪裁区域的大小。
  • dragCrop：类型：Boolean，默认值true。是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域。
  • movable：类型：Boolean，默认值true。是否允许移动剪裁框。
  • resizable：类型：Boolean，默认值true。是否允许改变剪裁框的大小。
  • zoomable：类型：Boolean，默认值true。是否允许放大缩小图片。
  • mouseWheelZoom：类型：Boolean，默认值true。是否允许通过鼠标滚轮来缩放图片。
  • touchDragZoom：类型：Boolean，默认值true。是否允许通过触摸移动来缩放图片。
  • rotatable：类型：Boolean，默认值true。是否允许旋转图片。
  • minContainerWidth：类型：Number，默认值200。容器的最小宽度。
  • minContainerHeight：类型：Number，默认值100。容器的最小高度。
  • minCanvasWidth：类型：Number，默认值0。canvas 的最小宽度（image wrapper）。
  • minCanvasHeight：类型：Number，默认值0。canvas 的最小高度（image wrapper）。
  • build：类型：Function，默认值null。build.cropper事件的简写方式。
  • built：类型：Function，默认值null。built.cropper事件的简写方式。
  • dragstart：类型：Function，默认值null。dragstart.cropper事件的简写方式。
  • dragmove：类型：Function，默认值null。dragmove.cropper事件的简写方式。
  • dragend：类型：Function，默认值null。dragend.cropper事件的简写方式。
  • zoomin：类型：Function，默认值null。zoomin.cropper事件的简写方式。
  • zoomout：类型：Function，默认值null。zoomout.cropper事件的简写方式。

方法

因为图片是异步加载的，所以你需要在built之后才能调用下面的方法，setAspectRatio、replace和destroy方法例外。

1
$().cropper({`` ``built: ``function` `() {``  ``$().cropper(``'method'``, argument1, , argument2, ..., argumentN)`` ``}``}

move(offsetX, offsetY)：

  • offsetX：类型：Number，水平方向上移动的大小，单位像素。
  • offsetY：类型：Number，垂直方向上移动的大小，单位像素。

移动一幅图片：

1
$().cropper(``'move'``, 1, 0)``$().cropper(``'move'``, 0, -1)

zoom(ratio)：

ratio：

类型：Number

  • Zoom in：需要一个正数（ratio > 0）
  • Zoom out：需要一个负数（ratio < 0）

缩放一幅图片：

1
$().cropper(``'zoom'``, 0.1)``$().cropper(``'zoom'``, -0.1)

rotate(degree)：

ratio：

类型：Number

  • Rotate right：需要一个正数（degree > 0）
  • Rotate left：需要一个负数（degree < 0）

旋转一幅图片，需要CSS3 Transforms3d的支持（IE10+）：

1
$().cropper(``'rotate'``, 90)``$().cropper(``'rotate'``, -90

enable()：使cropper可用。

disable()：冻结cropper。

reset()：重置剪裁区域的图片到初始状态。

clear()：清空剪裁区域。

replace(url)：

1
url：``替换图片的URL重建cropper。``类型：String``一个新的图片URL

getData()：

1
返回值：``类型：Object``属性：``x：剪裁区域左侧的偏移。``y：剪裁区域距上部的偏移。``width：剪裁区域的宽度。``height：剪裁区域的高度。``rotate：图片的旋转角度。``请参考实例效果

getContainerData()：

1
返回值：``类型：Object``属性：``width：容器的当前宽度。``height：容器的当前高度。``输出容器尺寸数据。

getImageData()：

返回值：

类型：Object

1
属性：``left：图片的左侧偏移。``top：图片的上部偏移。``width：图片的宽度。``height：图片的高度。``输出图片的位置和尺寸大小。

getCanvasData()：

1
返回值：``类型：Object``属性：``left：canvas的左侧偏移。``top：canvas的上部偏移。``width：canvas的宽度。``height：canvas的高度。``输出canvas（图片容器）的位置和尺寸大小。

setCanvasData(data)：

1
返回值：``类型：Object``属性：``left：canvas的距离左侧新的偏移。``top：canvas的距离上部新的偏移。``width：canvas新的宽度。``height：canvas新的高度。``改变canvas（图片容器）的位置和尺寸大小。

getCropBoxData()：

1
返回值：``类型：Object``属性：``left：剪裁区域距离左侧的偏移。``top：剪裁区域距离上部的偏移。``width：剪裁区域的宽度。``height：剪裁区域的高度。``输出剪裁区域的位置和尺寸大小。

setCropBoxData(data)：

1
返回值：``类型：Object``属性：``left：剪裁区域距离左侧新的偏移。``top：剪裁区域距离上部新的偏移。``width：剪裁区域新的宽度。``height：剪裁区域新的高度。``改变剪裁区域的位置和尺寸大小。

getCroppedCanvas([options])：

1
参数（默认值）：``类型：Object``属性：``width：输出的canvas目标宽度。``height：输出的canvas目标高度。``fillColor：canvas中填充的颜色。``返回值：``类型：HTMLCanvasElement``一个画有剪裁图片的canvas。

JavaScript对象相关笔记

Node
原生对象

ECMA-262把本地对象（native object）定义为 “ 独立于宿主环境的 ECMAScript 实现提供的对象”

“ 本地对象 ” 包含哪些内容：

Object、Function、Array、String、Boolean、Number、 Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、 URIError

由此可以看出，本地对象就是 ECMA-262 定义的类（引用类型）

内置对象

ECMA-262 把内置对象（ built-in object ）定义为“由 ECMAScript 实现提供的、独立于宿主环境的所有对象，在 ECMAScript 程序开始执行时出现”。

这意味着开发者不必明 确实例化内置对象，它已被实例化了

同样是“独立于宿主环境”。

根据定义我们似乎很难分清“内置对象”与“本地对象”的 区别。

而ECMA-262 只定义了两个内置对象，即 Global 和 Math（ 它们也是本地对象， 根据定义，每个内置对象都是本地对象 )。如此就可以理解了。

**内置对象是本地对象的一种 **

宿主对象

何为 “ 宿主对象 ” ？

主要在这个“宿主”的概念上，ECMAScript 中的 “ 宿主 ” 当然就是我 们网页的运行环境 ，即 “ 操作系统 ” 和 “ 浏览器 ”

所有非本地对象都是宿主对象（host object），即由 ECMAScript 实现的宿主环境提供 的对象 。

所有的 BOM 和 DOM 都是宿主对象。因为其对于不同的 “ 宿主 ” 环境所展示的内容不同 。

其实说白了就是，ECMAScript 官方未定义的对象都属于宿主对象，因为其未定 义的对象大多数是自己通过 ECMAScript 程序创建的对象

2

对象

JavaScript 中有八种数据类型。

有七种原始类型，因为它们的值只包含一种东西（字符串，数字或者其他）。

相反，对象则用来存储键值对和更复杂的实体。

对象是具有一些特殊特性的关联数组。

“普通对象（plain object）”，或者就叫对象。

JavaScript 中还有很多其他类型的对象：

  • Array 用于存储有序数据集合，
  • Date 用于存储时间日期，
  • Error 用于存储错误信息。
  • ……等等。

“Array 类型”或“Date 类型”，但其实它们并不是自身所属的类型，而是属于一个对象类型即 “object”。它们以不同的方式对 “object” 做了一些扩展。

3

对象 (object)

对象类型的成员。

注：对象是属性的集合，并有一个原型对象。原型可以是空值。

原生对象

(native object)

ECMAScript 实现中，并非由宿主环境，而是完全由本规范定义其语义的对象。

注：标准的原生对象由本规范定义。一些原生对象是内置的，其他的可在 ECMAScript 程序执行过程中构建。

内置对象

(built-in object)

由 ECMAScript 实现提供，独立于宿主环境的对象，ECMAScript 程序开始执行时就存在。

注：标准的内置对象由本规范定义，ECMAScript 实现可以指定和定义其他的。所有内置对象是原生对象。一个内置构造器 (built-in constructor) 是个内置对象，也是个构造器。

宿主对象

(host object)

由宿主环境提供的对象，用于完善 ECMAScript 执行环境。

注：任何对象，不是原生对象就是宿主对象。

4

Native Object

JavaScript语言提供的不依赖于执行宿主的对象，其中一些是内建对象，如：Global、Math；一些是在脚本运行环境中创建来使用的，如：Array、Boolean、Date、Function、Number、Object、RegExp、Error。

Build-in Object

JavaScript语言提供的不依赖于执行宿主的内建对象，如：Global、Math；内建对象都是Native Object。

Host Object

JavaScript语言提供的任何依赖于宿主环境的对象，所有非Native Object的对象都是宿主对象，如：IE中的window，WScript中的wscript实例，任何用户创建的类。

5

JavaScript 标准内置对象或称全局的对象（global objects）

不要和 全局对象（global object）混淆。

这里说的全局的对象是说在全局作用域里的对象，全局作用域包含了全局对象的属性，还有它可能继承来的属性。

JavaScript 标准内置对象的分类：

\1. 值属性（Infinity、NaN、undefined、null 字面量、globalThis）这些全局属性返回一个简单值，而且这些值没有自己的属性和方法。

\2. 函数属性（eval()、uneval() 、isFinite()、isNaN()、parseFloat()、parseInt()、decodeURI()、decodeURIComponent()、encodeURI()、encodeURIComponent()、escape() 、unescape()）全局函数可以直接调用，不需要在调用时指定所属对象，执行结束后会将结果直接返回给调用者。

\3. 基本对象（Object、Function、Boolean、Symbol、Error、EvalError、InternalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError）基本对象是定义或使用其他对象的基础。基本对象包括一般对象、函数对象和错误对象。

\4. 数字、数学和日期对象（Number、BigInt、Math、Date）用来表示数字、执行数学计算和日期的对象。

\5. 字符串和正则式对象（String、RegExp）用来表示和操作字符串的对象。

\6. 可索引的数组对象（Array、Int8Array、Uint8Array、Uint8ClampedArray、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array、Float64Array、BigInt64Array、BigUint64Array）这些对象表示按照索引值来排序的数据集合，包括数组和类型数组，以及类数组结构的对象。

\7. 使用键的集合对象（Map、Set、WeakMap、WeakSet）这些集合对象在存储数据时会使用到键，支持按照插入顺序来迭代元素。

\8. 构化数据（ArrayBuffer、SharedArrayBuffer 、Atomics 、DataView、JSON）这些对象用来表示和操作结构化的缓冲区数据，或使用 JSON （JavaScript Object Notation）编码的数据。

\9. 控制抽象对象（Promise、Generator、GeneratorFunction、AsyncFunction ）

\10. 反射（Reflect、Proxy）

\11. 国际化（Intl、Intl.Collator、Intl.DateTimeFormat、Intl.ListFormat、Intl.NumberFormat、Intl.PluralRules、Intl.RelativeTimeFormat、Intl.Locale）为了支持多语言处理而加入ECMAScript的对象。

\12. WebAssembly（WebAssembly、WebAssembly.Module、WebAssembly.Instance、WebAssembly.Memory、WebAssembly.Table、WebAssembly.CompileError、WebAssembly.LinkError、WebAssembly.RuntimeError）

\13. 其他（arguments）

6

编程语言中预先定义的函数。

具体：嵌入到主调函数中的函数称为内置函数，又称内嵌函数。 作用是提高程序的执行效率，大多编程语言都有自己的内置函数，如javascript内置函数等。 内置函数的存在极大的提升了程序员的效率和程序的阅读。

部分网页 :

MDN-JavaScript标准内置对象

MDN-对象模型

MDN-对象

MDN-带键的集合

MDN-全局对象

ECMAScript Standard Built-in Objects

JavaScript Built-in Functions

Standard built-in objects in JavaScript

JavaScript reference

Standard built-in methods to work with Arrays

Built-in Methods in Javascript

Use built-in JavaScript objects in Office Scripts

ECMA-262, 11th edition, June 2020 ECMAScript® 2020 Language Specification

https://blog.bitsrc.io/discovering-javascript-three-objects-new-developers-must-know-fade54355383

JavaScript static code analysis

Node.js v16.6.1 documentation

标准对象分类Value Properties

https://www.w3schools.com/js/js_object_definition.asp

https://medium.com/nerd-for-tech/understanding-objects-and-prototypes-in-javascript-d847baa50f9a

The Modern JavaScript Tutorial

JS Functions Are Objects

ECMAScript2020言語仕様　私的日本語訳

Using JavaScript’s built-in objects

Explain built-in objects of JavaScript.

JavaScript Built-in Objects

https://ithelp.ithome.com.tw/m/articles/10193146

JavaScript Built-in Objects

ASP Built-in Objects

What is a built in object in Javascript?

Built-in objects and functions

Built –In Objects - JavaScript (JS)

Using Built-in JavaScript Code with JavaScript Objects

Frameork Built-in Objects

https://www.quora.com/What-are-built-in-objects-in-python

https://medium.com/nerd-for-tech/understanding-objects-and-prototypes-in-javascript-d847baa50f9a

Built in objects in javascript

FAQ: Advanced Objects - Built-in Object Methods

builtins: Returns the Names of All Built-in Objects

Returns the Names of All Built-in Objects

List of Built-In Routines

http://google.com/search?sa=N&q=What+are+built-in+objects%3F&ved=2ahUKEwjGnMzGx5nyAhXDdd4KHajuDgEQzmd6BAgpEAU&biw=360&bih=640&dpr=3#ip=1

前端技术查询

Node

PC端网站

  • 掘金社区
  • CSDN社区
  • 博客园
  • 菜鸟教程
  • 张鑫旭的个人空间(CSS完美世界作者)
  • 阮一峰的个人主页(ES6标准入门作者)
  • Stack Overflow(国外技术社区)
  • GItHub(一个神奇的网站,全世界开发者的交流网站)
  • 鸠摩搜书
  • BiliBili(有技术类的教学视频资源)
  • LeetCode(算法)

手机APP

  • 掘金社区
  • 简书
  • CSDN
  • 微信读书

公众号类

  • 前端大学
  • 前端之巅
  • 程序人生

推荐书籍

  • JavaScript高级程序设计4(红宝书)
  • JavaScript权威指南(犀牛书)
  • JavaScript-DOM编程艺术
  • ES6教程入门
  • 深入浅出Vuejs
  • Vuejs实战
  • 图解HTTP
  • 图解TCP/IP
  • 深入浅出Nodejs
  • 我的第一本算法书
  • 算法4

HTML学习笔记

Node

前置知识

Web

结构 : HTML(超文本标记语言)

表现 : CSS(层叠样式表)

行为 : JavaScript(脚本语言)

参考文章 : Web 和 Web标准

文档参考网站 :

MDN(推荐)

W3School(推荐)

菜鸟教程

书籍推荐 ( 英文原版 ) :

Head First - HTML with CSS & XHTML

Head First HTML5 Programming Building Web Apps with JavaScript

(添加桌面pdf文件)

基本快捷键

Ctrl + C 复制

Ctrl + V 粘贴

Ctrl + X 剪切

Ctrl + Z 撤销

Ctrl + / 注释

Ctrl + S 保存

Ctrl + F 查找

基本快捷键

常用快捷键

编辑器

Sublime Text

HbuliderX

visual studio code

WebStorm10

DWCS6

浏览器分类

IE 内核Trident

Firefox(火狐) 内核Gecko

Safari 内核Webkit

Chrome(谷歌) Oprea 内核Blik

Edge 内核Chromiun和Blink

网络协议

http

参考文章 : HTTP

https

参考文章 : HTTPS

怪异模式和标准模式

参考文章 : 怪异模式和标准模式

标准

浏览器Web标准/W3C(万维网联盟)

参考文章 : W3C标准

W3C简介

VScode快捷键

快速生成HTML骨架快捷键

  • 英文”!” + Tab
  • 英文”!” + Enter
  • html + : (既英文冒号) + 5

Ctrl + Enter 双标签中转为下一行

Shift + Alt + ↓ 双标签中向下复制整行

HTML

定义

超文本标记语言

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

参考文章 : 开始学习HTML

HTML简介

基本结构

1
2
3
4
5
6
7
8
<html>
    <head>
        <title>网页标题</title>
    </head>
    <boby>
    网页内容
    </boby>
</html>

参考文件 : HTML头部

语言

1
2
3
<html lang="en">
    <!-- en英文  zh-CN中文  fr法文-->
</html>

参考文章 : HTML语言代码参考手册

字符集Charset

1
2
3
4
<head>
    <meta Charset=" ">
    <!-- GB2312简体中文  BIG5繁体中文  GBK简体繁体中文  UTF-8(utf-8)所有语言-->
    </head>

参考文章 : HTML编码(字符集)

注释

1
2
3
<html>
     <!-- 注释 -->
</html>

参考文章 : HTML注释

基本约定

参考文章 : HTML(5)样式指南和代码约定

元素

元素( Element )指的是从开始标签（start tag）到结束标签（end tag）的所有代码

参考文章 : Element元素

HTML元素

HTML5 语义元素

块级元素(块元素)

独占一行 , 只能出现在<body> </body>元素内。

例 :

<h1>~`

` <form> dl <dd> <hr> <ol> <ul> <p> <table> <div> <adress> , <article> , <aside> , <bolckquote> , <fieldest> , <figcaption> , <figure> , <footer>, <header , <hgroup>, ,<pre> , <section> ,

参考文章 : 块级元素

行内元素(内联元素)

只占据它对应标签的边框所包含的空间。

例 : <b> <strong> —— 字体加粗

<big> <small> —— 字体改变大小

<i> <em> —— 字体倾斜

<u> <ins> —— 字体添加下划线

<s> <del> —— 字体添加删除线

<br> —— 换行

<input> <textarea> <img> —— 添加图片<span>

<q> ——引用标签

<label>—— 定义标注标签 , 配合<input>按钮使用增加用户体验

<tt> , <abbr> , <acronym> , <cite> , <code> , <dfn> , <kbd> , <samp>, <var.a> , <bdo>, , <map> , <object> ,, <script>, , <sub> , <supbutton> ,<select>

参考文章 : 行内元素

HYMLdiv和span

标签

声明标签
1
2
3
4
5
<head>
    <!DOCTYPE>
    <!-- 文档类型声明标签 -->
    <!-- doc文档,type类型 -->
</head>

参考文章 : HTML<!DOCTYPE>

根标签

<html> </html>

骨架标签
1
2
3
4
5
6
7
8
<html>
	<head>
        <title>
        </title>
	</head>
	<body>
	</body>
</html>
<meta> 标签

提供有关页面的元信息。位于文档的头部，不包含任何内容。 在 HTML 中， 标签没有结束标签。

参考文章 : HTMLmeta标签

双标签

标题标签

<h1></h1>~`

`

参考文章 : HTML标题

h1–h6：HTML 区域标题元素

段落标签

<p></p>

可根据浏览器页面大小改变每行字数

参考文章 : HTML段落

p

盒子标签

<div> </div> —— 单独占一行 , 此标签内可存放任何标签和内容

参考文章 : div：内容划分元素

<span> </span> —— 一行可存在多个

等

参考文章 : span

有序列表标签

<ol> </ol> , <li> </li>

<li> </li> —— 标签内可存放任何标签和内容

1
2
3
4
5
6
<body>
    <ul>
        <li>内容</li>
        <li>内容</li>
    </ul>
</body>

参考文章 : ol

无序列表标签

<ul> </ul> , <li> </li>

<li> </li> —— 标签内可存放任何标签和内容

1
2
3
4
5
6
<body>
    <ol>
        <li>内容</li>
        <li>内容</li>
    </ol>
</body>

参考文章 : ul

自定义列表标签

<dl> </dl> , <dt> </dt> , <dd> </dd>

dt只有一个 , dd有很多个

1
2
3
4
5
6
7
<body>
    <dl>
        <dt></dt>
        <dd></dd>
        <dd></dd>
    </dl>
</body>

参考文章 :

参考文章 : HTML列表

单标签

<br>或<br/>—— 换行 ( 只能在HTML5中去掉 “/“ ) ,

<nobr>或<nobr/> —— 不换行 ,

<hr>或<hr/> —— 水平线 ,

<img> —— (必带属性 : src=" ”) 插入图片 ,

<input> —— 输入，表单控件 ,

<link> —— 链接，关联

等

实体

参考文章 : HTML字符实体

HTML符号

空格实体

&nbsp; —— 不换行空格 , 既空格键

&ensp; ——半角空格 , 字体度的一半

&emsp; —— 全角空格 , 16px

&thinsp; ——窄空格

&zwnj; ——零宽不连字

&zwj; —— 零宽连字

参考文章：HTML中的& nbsp; & ensp; & emsp;等6种空格标记

路径

相对路径(常用)

../ —— 向上一个文件夹返回查找文件 , 不能跨储存盘

./ —— 可查找当前根目录所有文件

绝对路径

\ ——可跨储存盘

或直接输入文件地址

参考文章 : HTML文件路径

路径

图片

直接插入图片 : 

1
2
3
<body>
    <img src="">
</body>

图片替换的文字 : alt=" "

提示文本 : title=" "

修改图片大小 : 图片的width(宽)和height(高)可一起修改 , 若只写其中一个 , 图片等比例缩放

参考文章 : HTML图像

img：图像嵌入元素

链接

链接外地网址 :

1
2
3
4
5
6
<body>
    <a href=""></a>
    <!--不写target属性则默认在当前网页打开-->
    <!--target="_self"在当前网页打开-->
    <!--target="_blank"在新的网页打开-->
</body>

链接内部网址

  1. 添加其他的html文件 : <a href=""(文件位置)></a>

  2. 回到顶部 : <a href=" "> 或 <a href="#">

  3. 不回顶部 : <a href="javascript:;"></a>

下载链接

添加zip文件 : <a href=" "(zip文件位置)></a>

锚链接

寻找 : <a href="#+锚链接名字">名字</a>

定位 : <id = "锚链接名字">

参考文章 : HTML链接

表格

表格标签

<table> </table>——表格

<tbody> </tbody> ——表格主体

<thead> </thead> ——表格头部

<th> </th> ——表头单元格

<tr> </tr> ——行

<td> </td>——单元格

<ul><lul>——无序的列表

<li></li>——列表项

表格属性

height ——表格高

width ———表格宽

border ———表格边框——默认1 , “ “——代表没有边框

align ———表格对齐方式

lift——居左

center ———居中

right ——居右

cellpadding ——像素值——单元格与内容的距离——默认1像素

cellspacing ——像素值——单元格之间距离——默认2像素

合并表格

跨行合并——rowspan="——从上到下合并，最上面开始，以下删除
跨列合并——colspan=" "——从左到右合并，最左边开始，以右删除

参考文章 : table

HTML表格

表单

表单在网页中主要负责数据采集的功能，和向服务器传送数据

表单标签 : 包含了处理表单数据所用 CGI 程序的 URL, 以及数据提交到服务器的方法

表单域 : 包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。

表单按钮 :包括提交按钮，复位按钮和一般按钮；用于将数据传送到服务器上的 CGI 脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

后台地址 : xxx.php

参考文章 : HTML表单

HTML表单属性

HTML表单元素

HTML输入类型

HTML input属性

input

表单控件 :

<input> : 输入列表 <input type="属性值">

默认属性值为text , 即 <input type="text"> , 文本框 , 单行 , 默认20个字符

password : 密码框

value : 规定input元素的值 , 用户自定义

placehloder : 占位符 , 提示作用

select : 下拉列表

1
2
3
4
5
6
7
8
9
<body>
    <form>
        <select>
            <option></option>
            <option></option>
            <!--至少要含有一对option标签-->
        </select>
    </form>
</body>

<textare> : 文本域 : 文本框可放大缩小

<textare cols=" "(每行的字数)>(一般用css制作)

<textare rows=" "(显示的行数)>(一般用css制作)

参考文章 : input

textarea

只能在表单内使用的按钮(可放入图标/图片)

<input type="submit"> : 默认按钮内文字 “ 提交 “

<input type="reset"> : 默认功能重置 , 清除以上所有信息

按钮

没有位置限制的按钮 :

<input type="button"> : 普通按钮 , 没有实质作用 , 需后期js添加功能

<button> </button>

参考文章 : button

上传文件的按钮 : 

1
<input type="file">

图片按钮 : 

1
`<input type="image src=" " ">

隐藏域

hidden : 属性 , 隐藏的输入字段 , 不给用户使用 , 程序员写给后台进行其他用途

参考文章 : hidden

思维导图

dos命令存档

Node

打开命令窗口

  1. 开始+系统+命令提示符
  2. Windows+R 输入cmd打开控制台
  3. 在任意的文件夹下面，按住shift键+鼠标右键点击，在此处打开命令行窗口 ( Powershell )
  4. 资源管理器的地址栏前面加上 cmd 路径
Dos

( Disk Operating System ), 磁盘操作系统

部分Dos命令

改变当前盘符
1
2
c:
d:
目录
创建目录/文件夹

md + 文件夹名

1
md test
移除目录/文件夹

rd + 文件夹名

1
rd test
进入指定目录
1
cd
退回到上一级目录
1
cd..
退回到根目录
1
cd\
文件
创建文件

type nul> + 文件名+文件名后缀

1
type nul>test.txt
写入内容到文件
1
echo Hello Word >test.txt
追加内容到文件
1
echo Hello Word >>test.txt
在文件夹里创建文件
1
cd>
在文件夹里移除文件

del + 文件名

1
del test.doc
更改文件名
1
ren
列出当前目录下的文件和文件夹
1
dir
退出 dos 命令行
1
exit
清理屏幕
1
cls
查看电脑ip
1
ipconfig
ping命令
1
ping www.baidu.com
Java
查看jdc安装信息
1
java -version
编译java文件

javac + java文件名.java

1
javac test.java
运行java文件

java + 文件名

1
java test
生成Javadoc文档
1
javadoc -d doc -author -version next1.java

(Java文件内添加javadoc注释)

1
2
3
4
5
/**
*
*@author 作者名
*@version 1.0
*/

You Found Me.

支付宝
微信