梦入琼楼寒有月，行过石树冻无烟

📖 earlier posts 📖

CSS 对齐

2022-04-21

居中（center）

1
<center><p>Hello,world!</center>

center（text-align）

1
2
3
4
5
6
7
8
<style>
.text {
	text-align: center 
	}
</style>
<body>
	<p class="text">Hello,world!</p>
</body>

右（right）

1
2
3
4
5
6
7
8
<style>
.text {
	text-align: right 
	}
</style>
<body>
	<p class="text">Hello,world!</p>
</body>
1
2
3
4
5
6
7
8
<style>
.text {
	text-align: left 
	}
</style>
<body>
	<p class="text">Hello,world!</p>
</body>

margin（0 auto）

1
2
3
4
5
6
7
8
9
<style>
.dm {
	display: block;
	margin: 0 auto;
	}
</style>
<body>
	<img class="dm" src="http://zsdk.org.cn/img/Joint_ZhongShan/Jiang_Xue_Open_Knowledge_Repository.png">
</body>
ID DE FA
center 居中 元素标签
center 居中 text-align
right 居右
left 居左
0 auto 居中 margin

CSS 与 语法

2022-04-21

简介

CSS是指层叠样式表（Cascading Style Sheets），也可以理解为在<style>标签中的语法另写为“title.css”。

语法（class）

通常CSS语法主要为以下实例:

1
2
3
4
5
6
7
/* 
第一种写法 
*/
.title {
    color: red;
    text-align: center;
}

当然你也可以写成如下实例：

1
2
3
4
/* 
第二种写法
*/
.title{color: red;text-algn: center;}

通常我们在文件中格式一般为第一种，主要可增加代码可读性。但是第二种也可以在<p style=”color: red;text-algn: center;”>中。

语法（id）

通常可以使用Class或者id等两个语法来引用CSS样式，其具体可能和Class的CSS语法有所不同如：

直观：

1
2
3
4
#title {
    color: red;
    text-align: center;
}

单行：

1
#title {color: red;text-align: center;}

引入CSS样式

Calss（class=”title”）

Hello,world!

1
2
3
4
5
6
7
8
9
10
11
12
<style>
/* 
第一种写法 
*/
.title {
    color: red;
    text-align: center;
}
</style>
<body>
   	<p class="title">Hello,world!</p>
</body>
Id （id=”title”）

Hellp,world!

1
2
3
4
5
6
7
8
9
<style>
    #title {
        color: red;
        text-align: center;
    }
</style>
<body>
    <p id="title">Hellp,world!</p>
</body>
ID DE FA
color 颜色 Style
text-align 位置 Style

Ajax Server Response

2022-04-21

Ajax Response 简介

Ajax向服务器发送请求后，如需要获得服务器的响应，可以使用XMLHttpRequest对象的responseText或reponseXML两个属性：

例子

1
2
3
4
5
xmlhttprequest_.onreadystatechange = function() {
    if (xmlhttpquest_.readyState == 4 && xmlhttprequest.status == 200 {
        document.getElementById("myResponse").innerHTML = xmlhttprequest_.responseText;
        }
}

方法对象

ID DA FA
responseText 获取字符串形式的响应数据 String
responseXML 获得XML形式的相应数据 XML

实现 Ajax Response

Ajax Response Text

NewFile.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
	function test() {
		var xmlhttprequest;
		if (window.XMLHttpRequest) {
			// 现代浏览器内核
			xmlhttprequest = new XMLHttpRequest();
		} else {
			// 旧的浏览器内核
			xmlhttprequest = new ActoveXObject("Microsoft.XMLHTTP");
		}
		xmlhttprequest.onreadystatechange = function() {
			if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
				document.getElementById("data").innerHTML = xmlhttprequest.responseText;
			}
		}
		xmlhttprequest.open("GET","hello.txt",true);
		xmlhttprequest.send();
	}
</script>
</body>

<div id="data"><h2>Ajax response</h2></div>
<a href="javascript:test()">XMLHttpResponse</a>
</html>
hello.txt
1
OK,Hello!

Ajax Response XML

NewFile.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
	function test() {
		var xmlhttprequest;
		var t,x,i;
		if (window.XMLHttpRequest) {
			xmlhttprequest = new XMLHttpRequest();
			} else {
				xmlhttprequest = new ActiveXObject("Microsoft.Xmlhttprequest");
			}
		xmlhttprequest.onreadystatechange = function() {
			if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
				xmlDoc = xmlhttprequest.responseXML;
				t="";
				x=xmlDoc.getElementsByTagName("title");
				for (i=0;i<x.length;i++) {
					t=t + x[i].childNodes[0].nodeValue + "<br/>";
				}
				document.getElementById("data").innerHTML = t;
			}
		}
		xmlhttprequest.open("GET","hello.xml",true);
		xmlhttprequest.send();
		}
</script>
</body>

<div id="data"><h2>Ajax response XML</h2></div>
<a href="javascript:test()">XMLHttpResponse</a>
</html>
````
#### hello.xml
```xml
<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
<book category="children">
<title lang="cn">你好世界</title>
</book>
<book category="children">
<title lang="cn">你好Ajax</title>
</book>
</bookstore>

Onreadystatechange

简介

onreadystatechange事件中，可以规定服务器响应已做好处理准备阶段时所执行的任务，而一般主要状态可通过readyState、status来分别设置就绪状态、状态：

ID DA FA
readyState 就绪状态 onreadystatechange
status 状态 onreadystatechange

当就绪状态（readyState等于4），状态（状态status等于200）时，则表示响应已经就绪：

onreadystatechange 实现

1
2
3
4
5
6
7
<script type="text/javascript">
	xmlhttprequest.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttprequest.status == 200) {
			document.getElementById('response').immerHTML = xmlhttprequest.responseText;
		}	
	}
</script>

Ajax 发送服务器请求

2022-04-21

在Ajax中，使用了XMLHttpRequest对象的open()、send()两个对象方法来事项将请求发送服务器，分别为GET方式和POST方式来提交请求，而两个请求的同一功能就是，都是提交数据：

1
2
xmlhttprequest.open("GET","Ajax_info.txt",ture);
xmlhttprequest.send();
ID DA FA
open(类型,url,异步) 类型：请求类型（GET或POST）; url：文件在服务器上的位置;异步：true(异步)或false(同步) open
send(String) string:仅用于POST请求 send

GET / POST

GET

在GET方法之中，数据将会加载在URL中进行发送：

1
http://www.jiangxue.org.cn/login?one=test

POST

想对于GET方法来说，POST更加的安全和可靠，如通过Wireshark进行抓包可发现，GET只有一个数据传输，而POST方法会有两个数据传输，分别为Ajax发送和Server回应，相比之下他比GET更加安全，在URL内无法看见。

GET

xmlhttprequest.open(“GET”,”Ajax_info”,ture);

在GET方法之中，数据将会加载在URL中进行发送，DANG：

1
2
xmlhttprequest.open("GET","Ajax_info.txt",ture);
xmlhttprequest.send();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Ajax</title>
<script type="text/javascript">
	function test() {
		var xmlhttprequest_;
		if (window.XMLHttpRequest) {
			xmlhttprequest_ = new XMLHttpRequest();
		} else {
			xmlhttprequest_ = new ActoveXObject("Microsoft.XMLHTTP");
		}
		xmlhttprequest_.onreadystatechange = function() {
			if (xmlhttprequest_.readyState == 4 && xmlhttprequest_.status == 200) {
				document.getElementById("title").innerHTML=xmlhttprequest_.responseText;
			}
		}
		xmlhttprequest_.open("GET","Hello.txt",true);
		xmlhttprequest_.send();
	}
</script>
</head>
<body>
<div id="title"><p>Hello,world!</p></div>
<button type="button" onclick="test()">up</button>
</body>
</html>

xmlhttprequest.open(“GET”,”Ajax_info?usernae=Sun&li”,true);

1
2
xmlhttprequest.open("GET","Ajax_info?usernae=Sun&li",true);
xmlhttprequest.send();

POST

xmlhttprequest.open(“POST”,”Ajax_info”,ture);

1
2
xmlhttprequest.open("POST","Ajax_info.txt",ture);
xmlhttprequest.send();

xmlhttprequest.open(“POST”,”ActoveXObject”,true);

1
2
3
xmlhttprequest.open("POST","ActoveXObject",true);
xmlhttprequest.setRequestHeader("Content-type","application/x-www-form-urkebcided");
xmlhttprequest.send("uname=chenheng&upwd=1213124");

Ajax XMLHttpRequest

2022-04-21

XMLHttpRequest 简介

Ajax XMLHttprequest即”Ajax XMLHttp请求对象”，是在Ajax中的一个核心，Ajax引擎会使用XMLHttpRequest对象和Server进行异步间的通信。而在Web开发之中，有三大浏览器内核，分别为：Google、Ie、Firefex三大内核，其中主要Ie的适配问题尤为关键，但在国内有一些事业单位或机关喜欢使用iE浏览器进行开发和访问。到Ajax技术发展至今，几乎所有的主流浏览器都可支持XMLHttpRequest对象，而在老版本的Ie5、Ie6需要使用ActiveXObject对象。

XMLHttpRequest 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Ajax</title>
</head>
<script type="text/javascript">
	function test() {
		var xmlhttprequest;
			if (window.XMLHttpRequest) {
				// IE7
				xmlhttprequest = new XMLHttpRequest();
				alert("当前浏览器是现代浏览器");
			} else {
				// IE6\IE5
				xmlhttprequest = new ActiveXObject("Microsoft.xmlhttprequest");
				alert("当前浏览器是就版本的");
			}
	}
</script>
<body>
	<a href="javascript:test()">XMLHttpRequest</a>
</body>
</html>

Ajax

2022-04-21

2. Ajax 简介

异步JavaScript和XML，全称“Ajax，Asynchronous Javascript And XML”，是一种创建交互式网页应用的开发技术，而不是开发语言。主要将不刷新页面向服务器发起请求成为了一种现实。而应用Ajax应用最广的就是名称推荐、搜索关键词推荐等，就比如在生活中，有很多页面是应用到Ajax技术的，如：
而应用Ajax技术最为知名的是Goole,是Google让Ajax技术慢慢流行起来。最初Google Suggest使用Ajax开发了与itao动态性极强的Web页面，就在搜索引擎时将输入的信息，JavaScript会将这些信息发送至服务器中，然后服务器返回一些信息在指定页面中（及关键词推荐）。
很快，由于Ajax 随着google的举动迅速得到发展，这项技术也引用在了Google地图之中，而主要体现这项技术的无非就是可随着鼠标的放大、缩小、拖动，地图也随着改变。由于这项技术的流行，很快，得到国内开发者的青睐，应用在了搜索引擎、名称推荐、地图等，而这些可以在邮箱注册或游戏名称注册时得到体现。

2.Ajax 技术原理

通过上图可以看出，在Ajax技术中，主要通过JavaScript事件调用Ajax引擎，之后负责收集数据并通过Ajax的XMLHttpRequest对象向服务器发送HTTP请求，之后服务器处理完后返回XML，JSON、文本等相应结果，之后Ajax引擎可根据响应后输出的信息进行解析后配合CSS/HTML渲染将显示结果加入到客户端界面。

SVG defs and filter

2022-04-21

在此之前，需要注意的是 SVG 滤镜都会定义在 <defs> 的元素中，而 <fileter> 则是用来定义 SVG 滤镜，本章主要用于来实现 SVG 的阴影，需要使用 <feFlood> 等元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<svg width="568" height="568" viewBox="0 0 568 568" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_2_4)">
  <circle cx="285" cy="280" r="198" fill="white"/>
</g>
<defs>
   <filter id="filter0_d_2_4" x="0" y="0" width="1111" height="561118" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
      <feMorphology radius="22" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_2_4"/>
      <feOffset dx="-1" dy="4"/>
      <feGaussianBlur stdDeviation="32"/>
      <feComposite in2="hardAlpha" operator="out"/>
      <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2_4"/>
      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_4" result="shape"/>
   </filter>
</defs>
</svg>

filter

在 <filter> 元素中爬刨除基础问题，剩下的 “filterUnits”和 “color-interpolation-filter” 属性，其中 filterUnits 主要用于指定或定义 width&height 所使用的坐标系统。

在本章中， filterUnits 主要使用了 userSpaceOnUser，来通过 x,y\width&height 来表示当前系统的坐标中的值或 <filter> 在用户坐标系统中的位置和大小。同时还是用的颜色插值滤镜 color-interpolation-filters 为 “RGB” 颜色。

Id 元素 属性 描述
1 feFlood flood-opacity 定义不透明度以填充滤镜区域
- - result 分配给 BackgroundImageFix 滤镜
2 feColorMatrix - 基于转换列阵对颜色进行变换，通过类似于 r,g,b,t 都需要通过矩阵算法来得出新的颜色
- - type 在默认情况下 feColorMatrix 指明了运算类型，即 Matrix ，表明一个 5x4 的矩阵会被提供其他关键字的方式待避岙允许不执行复杂矩阵运算下的使用常用颜色
value 在 feColorMatrix 的使用场景下主要用写入颜色的数字列表
3 feMorphology 主要用于扩散其阴影效果
- - operator 该属性下的 out 主要表示定义在图形之外的部分，也就是说在外部扩散阴影
4 feOffset 用于阴影，通过 dx,xy 来进行实现
5 feGaussianBlur stdDeviation 用于模糊阴影
6 feComposite in2 使得两个属性配合，通过 <feColorMatrix> 元素下的 result 属性绑定到本元素，在之后通过 operaator 进行扩展
7 feBlend mode 使两个对应的对象通过 mode 下的值进行混合

SVG SMIL Animations

2022-04-21

SVG

SVG 是可伸缩矢量图的缩写（Scalable Vector Graphics），是另一种图形格式，通过XML制定行组行，最后由SVG查看器来呈现XML，目前大多数浏览器都可以支持显示SVG。本文中的 Animations在SVG里面，主要用于呈现 SVG 动画效果，而SVG可以实现如下效果：

  1. 基本行组行
  2. 路径形状
  3. 文本
  4. 图片
  5. 分层和透明度
  6. 旋转
  7. 渐变
  8. 链接
  9. 动画制作
  10. 数据用例等

就比如我们来编写一个简单的svg图像：
效果图

1
2
3
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="200" width="100" style="stroke: red; fill:royalblue"></rect>
</svg>

svg 图像可以是非常简单也可以是非常复杂，这都将取决与项目的需要来进行改变。就如上述code 中的实例可以看出，我们首先使用了svg标签，之后通过写入rect标签来画一个矩形，设置x,y左边以及大小和轮廓以及填充颜色等。

浏览器使用

在浏览器中我们可以通过使用iframe来引入svg img，通常像是ps、ai等专业级的设计工具都支持导出svg格式：

1
<iframe src="img.svg">

在编写svg的是时候需要注意，所有图像的根元素都是以<svg>所开始的，通常格式为：

1
2
3
4
<svg xmlns =“ http://www.w3.org/2000/svg”
      xmlns：xlink =“ http://www.w3.org/1999/xlink”>
       <!-- code -->
</ svg>

svg 分组

svg中，可以通过使用 <g>元素来将svg形状分组在一起，分组后可将单个图形变成一个整体，因此我们可以使用：
分组后的图形整体移动

1
2
3
4
5
6
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g transform="rotate(10 20 40)">
        <line x1="10" y1="10" x2="85" y2="10" style="stroke: royalblue;"></line>
        <rect x="10" y="20" height="20" width="40" style="stroke: royalblue;"></rect>
    </g>
</svg>

动画

动画

1
2
3
4
5
6
7
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
        <rect x="10" y="20" height="200" width="100" style="stroke: royalblue;">
            <animate attributeName="y" form="160" to="160" begin="3s" dur="1s" repeatCount="indefinite"></animate>
        </rect>
    </g>
</svg>

在SVG动画中，主要基于SMIL即Synchronized Multimedia Integration Language，同步多媒体集成语言来进行实现，通过使用SMIL可以做到动画的移动、颜色、路径运动、元素数值属性等效果。

路径

路径

1
2
3
4
5
6
7
8
9
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
        <rect x="0" y="0" width="10" height="10" style="stroke: blue;fill: none;">
            <animateMotion 
                path="M10,50 q60,50 100,0 q60,-50 100,0"
                begin="0s" dur="10s" repeatCount="indefinite" />
    </g>
    <path xmlns="http://www.w3.org/2000/svg" d="M10,50 q60,50 100,0 q60,-50 100,0" stroke="#cd0000" stroke-width="2" fill="none"/>
</svg>

SVG Animation的强大之处在于只要是浏览器页面中，使用animation元素，即使在没有css、js的情况下也可以实现，而svg图像可通过使用贝塞尔曲线（bezier curve）进行。

贝塞尔曲线

ID DA
线性贝塞尔曲线（一次） 1
二次贝塞尔曲线 2
三次贝塞尔曲线 3
四次被塞尔曲线 4
五次被塞尔曲线 5

贝塞尔曲线又被称之为济埃曲线，主要应用在二维图形应用程序的数学曲线，一般矢量图形软件通过贝塞尔曲线来精确画出曲线，主要通过线段与节点组成：

  1. 节点可通过拖动支点
  2. 线段可进行伸缩

贝塞尔曲线指令

在上述的code直至中，我们主要使用了path元素来写贝塞尔曲线命令，通常Canvas以及CSS3动画函数也会使用贝塞尔曲线，但语法格式会有大多数不同，就比如svg的:

1
<path xmlns="http://www.w3.org/2000/svg" d="M10,50 q60,50 100,0 q60,-50 100,0"/>

通过指令+坐标值进行实现，在svg中，标准的指令值有“10”个，分别为：

ID DA
M 移动到……
Z 关闭路径
L 直线到……
H 水平线到……
V 垂直线到……
C 三次贝塞尔曲线到……
S 光滑三次贝塞尔曲线到……
Q 二次贝塞尔曲线到……
T 光滑贝塞尔曲线到……
A 椭圆弧
R Catumll-Rom 曲线

贝塞尔曲线基础

点
一个标准的贝塞尔曲线当中，主要有四个点，分别为起始点（x）、终止点（y）、两个曲线点（x1,y1 and x2,y2）
三次贝塞尔曲线
在上图的贝塞尔曲线中的坐标需要组合为svg格式，主要格式为：

  1. M
    1. 211 375
  2. C
    1. x1,y1
      1. 579 294
    2. x2,y2
      1. 209 464
  3. X,Y
    1. 464 384

其表达式为M 211 375 C 579 294, 206 209, 464 384 即 ：
效果

1
2
3
<svg xmlns="http://www.w3.org/2000/svg" width='500' height='500'>
    <path d='M211 375 C 579 294,206 209, 464 384' style="stroke:blue;stroke-width:1;fill:rgb(238, 238, 238);"></path>
</svg>

最后强烈推荐使用“ http://wx.karlew.com/canvas/bezier/ ”进行绘制贝塞尔曲线，虽然所生成的code为Canvas格式，但我们依然可以进行提取为CSS或SVG格式的语法

Shell 函数

2022-04-21

和其他编程语言一样，Function可能会具有功能，函数是是ixan一组命令和操作的子程序，这主要对重复任务很有帮助。

基本结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#基本结构
function_name {   
       // code……
}
## 创建函数
函数可通过写一些简单的方法进行调用函数，函数等效用于命令，可以在函数名称后面指定参参数，也可以将参数传递给函数。
```shell
# 构造函数
function one {
        echo "Hello,one!"
}
function two {
        echo "Hello,two!"
}

调用函数

1
2
3
4
5
6
7
8
9
# 构造函数
function one {
        echo "Hello,one!"
}
function two {
        echo "Hello,two!"
}
# 函数调用
two

函数的参数传递

加减法

1
2
3
4
function adder {
        echo "$(($1 + $2))"
}
adder 10 12

Shell 判断与循环

2022-04-21

与众多开发语言一样，Shell同样支持循环方法和判断方法，本文主要介绍if……else和for\while循环等，其他方法如读者有兴趣可自行进行学习。

test

Shell then主要用于检测条件是否成立，主要分为如下测试方法：

测试方法

数值测试

1
2
3
4
5
6
7
8
one=1
two=1
if test $[one] -eq $[two]
then
        echo "相等"
else
        echo "不相等"
fi
ID DA
-eq 等于为真
-ne 不等于为真
-gt 大于为真
-ge 大于等于为真
-lt 小于则为真
-le 小于等于则为真

字符串测试

1
2
3
4
5
6
7
8
9
one=1
two=1
if test $[one] = $[two]
then
        echo "相等"
else
        echo "不相等"
fi

ID DA
= 等于则为真
!= 不等于则为真

I/O 测试

1
2
3
4
5
6
7
8
one=1
two=1
if test -e home.js
then
        echo "存在"
else
        echo "不存在"
fi
ID DA
-e 文件存在为真
-r 文件可读为真
-w 文件可写为真
-x 文件可执行为真
-d 文件和目录存在则为真
-f 文件是普通文件则为真
-c 文件为特殊文件则为真

判断

判断的基本格式

1
2
3
4
5
6
7
8
9
if [Requirement]
then 
    // code
elif [Requirement2]
then
    // code
else 
    // code
fi

判断是否等于

1
2
3
4
5
6
7
8
9
10
11
12
a=10
b=20

if [ $a == $b ]
then
        echo "one 等于 two"
elif [ $a != $b ]
then
        echo "one 不等于 one"
else 
        echo "不符合预期"
fi

循环

循环格式

for 循环

1
2
3
4
for cycle_name in data
do
    // code
done

while 循环

1
2
3
4
while Requirement 
do
    // code
done

循环数值

for 循环

1
2
3
4
for var in 1 2 3 4 5 6 7 8 9
do
        echo $var
done

while 循环

1
2
3
4
5
6
7
#! /bin/bash
var="Good"
while (( $var<=3 ))
do
        echo $var
        let "$var++"
done
📖 more posts 📖