互聯網 - 大數據

3月 09 週四 201720:14
HTTP協議從入門到大牛，初識HTTP協議（學習筆記）

文章出處
HTTP數據傳輸協議
　　當訪問一個網頁時，瀏覽器會向服務器發起一條HTTP請求，接著服務器會去尋找相應的資源，如果請求成功，就會把這個對象，對象類型，對象長度以及其他的信息放在HTTP響應中，發送給客戶端。
　　因為資源種類太多，所以WEB服務器在返回響應時會為HTTP對象附加一條MIME類型（數據類型），當瀏覽器接收到數據時，會去查看這個MIME類型，然后會根據這個類型去渲染它（前提這個瀏覽器支持這種類型，否則瀏覽器會通過其他方式，這個沒有一個固定的形式）。

MIME類型由兩部分組成：
　　主要類型 / 具體類型

Image/jpeg

如：
　　人 / 男或女

HTTP 協議入門：http://www.ruanyifeng.com/blog/2016/08/http.html

MIME type還可以在尾部使用分號，添加參數。

Content-Type: text/html; charset=utf-8

客戶端請求的時候，可以使用Accept字段聲明自己可以接受哪些數據格式。

Accept: */*

上面代碼中，客戶端聲明自己可以接受任何格式的數據。

Content-Encoding 字段
　　由于發送的數據可以是任何格式，因此可以把數據壓縮后再發送。Content-Encoding字段說明數據的壓縮方法。

Content-Encoding: gzip

　　客戶端在請求時，用Accept-Encoding字段說明自己可以接受哪些壓縮方法。

Accept-Encoding: gzip, deflate

Referer
　　表示這個請求是從哪個URL過來的。
　　用途1：獲取用戶是從哪個網站跳轉到你主頁的。
　　用途2：推薦注冊應該也是通過這個實現的。（我猜的）

Cache-Control
　　對緩存進行控制，如一個請求希望響應返回的內容在客戶端要被緩存一年，或不希望被緩存就可以通過這個報文頭達到目的。

由HTTP引發的性能問題
　　服務器只有處理完上一個回應，才會進行下一個回應。要是前面的回應特別慢，后面就會有許多請求排隊等著。
　　為了避免這個問題，只有兩種方法：一是減少請求數，二是同時多開持久連接。這導致了很多的網頁優化技巧，比如合并腳本和樣式表、將圖片嵌入CSS代碼、域名分片（domain sharding）等等。

統一資源標識符URI
　　資源標識符分為兩種類型分別是：URL和URN，也就是說URL和URN都是URI的子集。

URL(統一資源定位符)
　　URL詳細的說明了某個資源的位置以及如何去訪問它。
　　URL是URI的一種，不僅標識了Web 資源，還指定了操作或者獲取方式，同時指出了主要訪問機制和網絡位置。
　　URL包括3部分：
　　　　1.訪問資源所使用的協議類型如: http:// 或 https://
　　　　2.服務器地址
　　　　3.服務器上具體的文件路徑

URN(統一資源名)
　　用來標識一個實體名字，它并不關心這個資源的具體位置。
　　URN是URI的一種，用特定命名空間的名字標識資源。使用URN可以在不知道其網絡位置及訪問方式的情況下討論資源。
　　百度云離線下載就是使用的URN：以及這個http://www.xuexila.com/fangfa/1115853.html
　　URN可以用來實現磁力鏈接 http://www.tuicool.com/articles/Z36nauv
　　
URL，URN，URI它們之間的區別：http://web.jobbole.com/83452/
HTTP請求方法
　　方法是用來告訴服務器做什么事情的，狀態碼則用來告訴客戶端，發生了什么事情。

常見HTTP方法
　　GET：從服務器獲取資源
　　POST：把發送數據到服務器
　　PUT：將客戶端數據存儲到服務器中
　　DELETE：從服務器中刪除數據
　　HEAD：將資源發送到HTTP首部

狀態碼
　　每條HTTP響應報文返回時都會攜帶一個狀態碼，這個狀態碼由3位數字組成，他告訴客戶端請求是否成功，或是否需要采取其他動作，另外它還會附帶一條解釋性的短語用來描述這個響應結果。

　　100 - 199 信息提示
　　200 - 299 成功
　　300 - 399 重定向
　　400 - 499 客戶端錯誤
　　500 - 599 服務器錯誤

報文
　　從客戶端發往服務器端的HTTP報文稱為請求報文，從服務器端發往客戶端的報文稱為響應報文。

HTTP報文包括以下3部分
　　起始行：
　　　　在請求報文中說明要干什么，在響應報文中說明出現了什么情況。
　　首部字段：
　　　　首部字段可以包含0個或多個，每個字段包含一個名字以及相應的值它們用：來分割，每個字段為一行。
　　主體：
　　　　請求主體包括了要發送給服務器的數據，響應主體裝載了要返回給客戶端的數據，主體可以是普通的文本也可以是二進制數據，另外請求主體是可選的。

傳輸協議TCP/IP
　　TCP提供了：無差錯的數據傳輸，數據按發送的順序到達，可以任意時刻把數據發送出去。
　　在HTTP客戶端向服務器發送報文之前，需要用網際協議地址和端口號在客戶端和服務器之間建立一條TCP/IP連接。
　　IP地址和端口號通過URL上獲取，如果URL上使用的是主機名形式，那么瀏覽器會通過DNS來將對應的域名解析成IP地址，如果URL上沒有提供端口號，那么默認為80端，數據庫默認端口為3306。

步驟如下：
　　1.瀏覽器從URL中解析出服務器的主機名
　　2.將主機名轉換成IP地址
　　3.將URL中的端口號解析出來，沒有的話默認80
　　4.建立TCP連接
　　5.瀏覽器向服務器發送一條HTTP請求
　　6.服務器響應客戶端報文
　　7.關閉連接，瀏覽器解析響應內容。

HTTP協議是一個無狀態的協議，同一個客戶端的這次請求和上次請求是沒有對應關系。
　　Cookie和Session它們都是為了解決HTTP無狀態的問題而所做的努力。

HTTP報文詳解：http://www.iteye.com/topic/1124408
HTTP協議:http://www.cnblogs.com/xiguain/category/600996.html

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(3)

個人分類：生活學習

▲top

3月 09 週四 201720:14
OOCSS入門學習

文章出處
　　對于面向對象大家肯定都有多多少少的了解，這里所說的OOCSS就是說面向對象的CSS，得說明的是OOCSS并不是一門新語言也不是什么庫，而是一種概念和javascript面向對象一樣。

可能你這樣寫過CSS代碼

#box>.item{
　　margin:10px;
　　float:left;
　　text-align:center;
}

但如果另外一處的HTML結構和這個一模一樣，那你是不是又得寫一次css代碼，這些多少有些不合理。

其實我們完全可以解決這個問題，如果我們寫成這樣。

.item{
　　margin:10px;
　　float:left;
　　text-align:center;
}

是不是下次直接復制一下class就可以了，這樣多簡單。

當然這只是其中的一個問題，有時我們并沒有那么幸運，往往HTML結構都不會一模一樣，但是很多情況下都差不多，只是一部分太個性，但也不是沒有辦法的，我們可以這樣。

//公共
.item{
　　margin:10px;
　　float:left;
}

//1
.set{
　　color:red;
　　text-align:center;
}

//2
.unset{
　　color:blue;
}

如果你對面向對象編程熟悉的話，我相信你很快就理解了。

有時我們還會縮小到更細的顆粒，我相信你已經使用過了。

.t_red_color{color:red;}
.t_blue_color{color:blue;}

有時定義全局CSS很有必要，一個網站往往都是主調色啥的都是統一的，定義全局，如果下次想換顏色也方便，如果不單獨提取出來，維護可想而知。
當然這里你可以把名字起的更好一些。

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(3)

個人分類：生活學習

▲top

3月 09 週四 201720:14
利用JSDOC快速生成注釋文檔，非常棒。

文章出處
　　有時往往我們需要建一個文檔來記錄js中的一些代碼注釋，比如一些公共的函數，又或者一些類，在團隊合作中，文檔接口也是必不可少的，傳統的方式多少有些不便，這里介紹一個工具，它叫JSDOC，它可以用來將注釋生成文檔。

　　雖然說是說它可以把注釋生成文檔，但是也不是什么注釋都可以的，我們需要按照它的規范來寫。
　　首先我們通過npm來下載它。

　　npm install jsdoc -g

　　
　　JSDOC的格式是這樣的。

/**

* 兩個數相加
* @param {number} num1 加法
* @param {number} num2 被加
* @returns {number} 和

*/
function add(num1,num2){
　　return num1 + num2;
}

　　首先注釋得以/**開始，結束以*/結束。
　　@：在jsdoc中有一定的作用，就是它有一套標簽規則。如：

　　@param {type} n1 description
　　　　param:表示函數參數 {類型} 參數值描述

　　@returns {type} description
　　　　returns:返回值描述
還有很多。

生成jsdoc文檔：cmd里面執行jsdoc xx.js

會在當前目錄下生成一個out目錄，里面有一個index.html，打開可以看到生成的結果。

看見沒，還是很清楚的。
里面還有一個Tank構造函數其中代碼是這樣的。

/**
* 坦克類
* @constructor
* @param {number} x 坐標X
* @param {number} y 坐標Y
* @param {number} dire 方向
* @param {array} colors 一組顏色
*/
function Tank(x,y,dire,colors){
　　this.x = x;
　　this.y = y;
　　// 速度
　　this.steep = 5;
　　// 方向
　　this.dire = dire;
　　// 坦克顏色
　　this.colors = colors;
　　// 移動方向
　　this.moveUp = function(){
　　　　this.y-= this.steep;
　　　　this.dire = 0;
　　};
　　this.moveRight = function(){
　　　　this.x+= this.steep;
　　　　this.dire = 1;
　　};
　　this.moveDown = function(){
　　　　this.y+= this.steep;
　　　　this.dire = 2;
　　};
　　this.moveLeft = function(){
　　　　this.x-= this.steep;
　　　　this.dire = 3;
　　};
}

@constructor表示一個構造器，你看上面的截圖就可以很清楚的看到它的結果是什么樣子了。
這上面介紹的是幾個比較常用的，當然還有很多方法，這里就不一一介紹了，可以看官方文檔或者搜索一下相關的教程，這里只是給大家入個門。

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(13)

個人分類：生活學習

▲top

3月 09 週四 201720:14
通過telnet來實踐HTTP協議。

文章出處
這是一篇實踐教程，能夠讓你更加深刻的理解HTTP協議，因此需要一定的HTTP基礎。

協議：一種規定，規定了你應該怎么去做，如w3c規定了瀏覽器應該怎么去解析HTML，CSS，JS。而HTTP則規定了客戶端怎么和服務器端進行數據傳輸，簡單來說就是我們得按照它的格式去寫。

前幾天花了點時間學習HTTP協議，但覺得光知道不行啊，還得實踐一般，現在我的學習方法就是：要么學，要么不學，學就得學通來，當然不是真的通，而是至少得明白它是干嘛的，怎么用，怎么更好的用....除非這東西花了很久時間都沒看懂，就先放著，因為以前學東西的時候總是東點西學點，還沒有搞明白呢就跑去學其他的了，最后發現還是得回去重新學，這樣反而浪費了大把時間，最后啥也沒有學到，對于HTTP之前是沒有把它當回事的，但隨著時間的流逝發現學它實在是太有必要了，因此為了更好的理解HTTP協議，這里用PHP來實踐一下。畢竟要玩轉HTTP還是得用點后端的東西的，雖然對后端了解不是很多，但用來學這個足以。

需要用來的工具：
1.php環境我們需要用來與客戶端進行數據交換。
2.telnet 　　telnet：可以用來與遠程服務器進行連接。

win7默認沒有開啟telnet，如果開啟可以看這篇文章：Win7如何解決telnet不是內部或外部命令的方案

cmd輸入 telnet ip 80 回車本機ip可以通過ipconfig來查看

telnet 192.168.1.100 80

我們還需要進入到回顯模式。按 Ctrl + ]
再按一次回車 OK。

我們接下來可以書寫HTTP格式。

先測試一下GET。
輸入:GET /文件路徑 HTTP/1.1 回車這個回車表示請求行結束
Host: ip地址回車這個回車表示結束這個請求頭
回車　這個回車表示結束輸入，發送請求。

GET /index.php HTTP/1.1

Host: 127.0.0.1

index.php

<?php

　　echo 'Hello HTTP';

返回的數據

請求行
　　GET：請求方式
　　./index.php：請求路徑
　　HTTP/1.1： HTTP版本

請求頭
　　Host: 127.0.0.1 ：ip地址

GET沒有請求體

從這個例子中我們可以看出，HTTP不一定得有瀏覽器，但發送HTTP一定得按照它的格式。

可以看到它們的大體執行過程：
　　建立連接 - 響應連接 - 關閉連接

原來瀏覽器幫我們做了很多事情，比如Host，瀏覽器通過我們的URL解析出來的，HTTP版本根據瀏覽器自身提供，路徑也是通過URL解析出來的。

POST測試：

POST /index.php HTTP/1.1
Host: 127.0.0.1
Content-type: application/x-www-form-urlencoded
Content-length: 10

name=rrraa

　　這里必須寫上Content-length和Content-type不然發送不成功。
　　Content-length: 客戶端會根據這個進行接收數據的長度，超出的不管。
　　Content-type: 告訴客戶端發送的這個數據類型是什么。

index.php

<?php

　　$str = implode($_POST,"\n"); 接收數據

　　print_r($str);　響應數據

通過HEAD方法在不獲取內容的情況下，檢查服務器某個文件是否存在，以前面試的時候還問了這個問題，當時沒答上。

HEAD /index.php HTTP/1.1

Host: 127.0.0.1

Accept: *

　　必須加上Accept不然還是會獲取內容，就和GET方法一樣了。
這樣我們就可以在不通過獲取文件內容的情況下，通過狀態碼進行判斷文件是否存在了以及是否修改。

我們訪問一個假路徑看看什么情況。
404了，正是我們想要的效果。

通過這些對HTTP協議的實踐真的很不錯，學習到了很多新東西，要是光看理論實在是不行。

大家還可以試試其他的。

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(1)

個人分類：生活學習

▲top

3月 09 週四 201720:14
HTTP與AJAX深入揭秘，不使用AJAX實現頁面無刷新

文章出處
AJAX的原理是什么？
實際上就是發起HTTP請求，既然就是發起HTTP請求，那只要我們能夠實現發起HTTP請求就可以在不使用AJAX的情況下實現相同的效果。

在前端有好多方式可以發起HTTP請求，比如script標簽的src以及圖片的src，css背景圖片，等等。

案例1：通過HTTP狀態碼204實現頁面無刷新
下面來一個小案例，實現一個頁面無刷新的投票功能。
html：

nodejs

var http = require('http');
http.createServer(function(req, res){
　　res.writeHead(204);
}).listen(3000);

當我們點擊投票的時候發出了一條HTTP請求，但是頁面并沒有跳轉，主要是利用HTTP204狀態碼實現的。
204:意思是我已經接收到了，但是我沒有數據要返回給你，請你不用刷新頁面.也不要跳轉到新的頁面。

案例2：利用圖片src實現
html：

nodejs：

var http = require('http');
http.createServer(function(req, res){
　　res.writeHead(200,{'Content-type':'text/html'});
　　res.end('ok');
}).listen(3000);

如果需要發送數據我們可以在src的后面加上參數，和AJAX的GET方式一模一樣。

通過script標簽和css來實現，和這里的圖片實現方式大同小異這里就不再演示了。

但是以上的幾種方式都有一個特點就是，只能發送數據給服務器，但是客戶端不能接收服務器返回的數據，并且不能使用POST方式，因此以前方式雖然可以實現，但使用的場景比較小。

下面介紹另外一種方式，它可以解決上面的問題。
利用iframe標簽實現頁面無刷新。

html：

nodejs：

var http = require('http');
http.createServer(function(req, res){
　　res.writeHead(200,{'Content-type':'text/html'});
　　res.end('ok');
}).listen(3000);

實際上這種方式是有刷新的，不過刷新的是iframe這個框架里面的內容，所有我們就有了利用它的機會，我們只需要把iframe的寬高邊框設置成0就好了。

可能你會問雖然現在可以返回數據了，但是怎么操作它呢，其實可以通過返回一段js代碼來操作dom。
html：

nodejs：

var http = require('http');
var fs = require("fs");

}).listen(3000);

核心代碼是加粗的那一段，也就是返回一段js代碼，通過parent來操作iframe的上一程。

接著我們再通過iframe + form 來實現POST提交。

html：

nodejs：

var http = require('http');
var fs = require("fs");

http.createServer(function(req, res){
　　if(req.url==="/favicon.ico")return;
　　if(req.url==='/index.html'){
　　　　res.writeHead(200,{'Content-type':'text/html'});
　　　　res.end((fs.readFileSync('index.html')).toString());
　　}else{

　　　　res.writeHead(200,{'Content-type':'text/html'});
　　　　var jsCode = '<script>';
　　　　jsCode += 'parent.document.body.removeChild(parent.document.getElementById("form"));parent.document.body.innerHTML="注冊成功！";';
　　　　jsCode += '</script>';
　　　　res.end(jsCode);
}

}).listen(3000);

ok，案例就到這了。

從這些案例上可以看出，所謂的ajax就是發起一個http請求，當然以上方式和ajax多少還是有差別的，ajax內部還是做了一些其他的事情，比如我們接收數據，客戶端是沒有刷新的，而我們模擬的ajax實際上都是有刷新的（除了利用src以外），不過是使用了一些小伎倆而已。所以在實際開發過程中，還是用ajax比較好，因為客戶端和服務器在內部還是做了很多事的，而這些我們是無法模擬出來的。

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(0)

個人分類：生活學習

▲top

3月 09 週四 201720:13
AJAX大文件切割上傳以及帶進度條。

文章出處
分塊傳輸的原理就是利用HTML5新增的文件slice截取函數。

代碼如下：
html：

JS：
核心部分已經加粗顯示了，其他部分不用看，因為實現的方式有很多種，不一定要按照我的方式去寫，但是核心是不會變的。

var writeFile = function(){
　　var temp = null;
　　var formData = null;
　　var xhr = null;

　　var file = document.getElementById('f');
　　var f = file.files[0];
　　var totalSize = f.size;

　　// 每次截取的大小
　　var num = 1024*1024;

　　var start = 0;
　　var end = start + num;

　　// 發送到的地址
　　var url = 'http://127.0.0.1/index.php';

　　// 進度條
　　var loaded = function(bili){
　　　　console.log(bili);
　　};

　　writeFile = function(){
　　　　// 如果已經截取完了跳出這個函數。
　　　　if(start>=totalSize)return;

　　　　// 截取文件
　　　　temp = f.slice(start,end);

　　　　formData = new FormData();
　　　　formData.append(file.name,temp);

　　　　xhr = new XMLHttpRequest();
　　　　xhr.open('POST',url);

　　　　xhr.onreadystatechange = function(){
　　　　　　if(this.readyState===4 && this.status===200){
　　　　　　　　// 改變下一次截取的位置
　　　　　　　　start = end;
　　　　　　　　end = start + num;
　　　　　　　　// 因為截取可能超過totalSize，判斷最后一次截取是否大于totalSize如果大于就直接讓end等于totalSize
　　　　　　　　if(end>totalSize){
　　　　　　　　　　end = totalSize;
　　　　　　　　}
　　　　　　　　// 可以用這個做進度條
　　　　　　　　loaded((start/totalSize)*100);
　　　　　　　　// 遞歸，如果文件沒有截取完，繼續截取
　　　　　　　　writeFile();
　　　　　　}
　　　　};
　　　　xhr.send(formData);
　　};

　　// 調用一下
　　writeFile();
};

當然除了這些還是不夠的，后端也是需要處理一下的，因為現在發送過去的文件是一塊一塊的，所有需要合并一下，不過已經和前端沒有關系了，但我還是給出代碼吧。

<?php

// 判斷是否有這個文件
if(!file_exists('./a/up.wmv')){

　　//創建一個文件
　　move_uploaded_file($_FILES['part']['tmp_name'],'./a/up.wmv');
}else{

　　//將前面的那個文件和當前這個文件合并，FILE_APPEND把當前這個內容追加上去。
　　file_put_contents('./a/up.wmv',file_get_contents($_FILES['part']['tmp_name']),FILE_APPEND);
　　echo 'ok';
}

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(84)

個人分類：生活學習

▲top

3月 09 週四 201720:13
按位運算符以及位移運算探討

文章出處
　　之前一直沒搞懂這個怎么計算的，主要也因為之前沒怎么用到過這個，但現在想把它搞懂，所以索性一次性搞懂為妙，以后就不用再糾結了哈。
按位運算符就是把數字看作二進制來進行計算的，并且再把計算出來的二進制給它轉換成十進制，也就是最終的結果了。

比如：

　　 7&9

這個是按位與，先不討論與不與的，總之它現在會把7和9轉換成二進制，接下來我們將7和9轉換成2進制，這里我用python。
如果你看不懂這段代碼沒有關系，因為這里的重點不是講python，而是按位運算符，這里我們可以看到7的二進制為111，而9的二進制為1001。明顯可以看出7和9的二進制長度不一樣，如果長度不一樣的話，短的那個前面會自動補0。結果就成了這樣：

7：0111

9：1001

前面說了所謂的按位運算符就是比較兩個數的二進制，那么怎么比較呢，是這樣的，如果是按位與那么就比較兩個數是不是都為1如果是就是1否則為0，看下面。

比如第一個7：0 ，第一個9：1那么它們就為0，只要其中有一個是0那么它就是零，當然這是對于按位于來說的。

整體比較如下：

7：0 1 1 1

9：1 0 0 1

結果：0 0 0 1

那么結果二進制就成了0001了，那么二進制0001再轉換成十進制就是1，自然7&9結果就是1。
我們可以用下面的工具來幫我們轉換。

其他的東西都不要問我，我只說按位運算符，因為其他我啥也不懂，至于轉換來轉換去，我也是百度了一下的，但我的目的達到了，因為我不是來學進制轉換的，有一句話說的很好，不忘初心,方得始終。這也是一種學習方式，以前我學習老愛糾結這些，所以一直就學不好，因為有些根本就不是你現在該考慮的，你要明確自己學這個干嘛。

那么按位或，按位非，按位取反，自然也是一個道理，不過是比較的時候換種花樣罷了，再拿按位或來演示一下。
按位或

5|6

轉換2進制：
5：101
6：110
只要有1就是1
結果：111 這是二進制再轉一下就是7.

我們來看看這個按位運算符有沒有什么規律。

//轉成二進制

console.log((1).toString(2)); //1
console.log((2).toString(2)); //10
console.log((3).toString(2)); //11
console.log((4).toString(2)); //100
console.log((5).toString(2)); //101
console.log((6).toString(2)); //110

console.log(1&0); //0

console.log(1&1); //1

console.log(1&2); //0
console.log(1&3); //1
console.log(1&4); //0
console.log(1&5); //1
console.log(1&6); //0

這里可以看出1&任何單數都為1，而1&任何雙數都為0。（包括負數）

console.log(2&0); //0
console.log(2&1); //0
console.log(2&2); //2
console.log(2&3); //2
console.log(2&4); //0
console.log(2&5); //0
console.log(2&6); //2
console.log(2&7); //2
console.log(2&8); //0
console.log(2&9); //0
console.log(2&10); //2
console.log(2&11); //2
console.log(2&12); //0
console.log(2&13); //0
console.log(2&14); //2
console.log(2&15); //2

這里可以看出2的規律是0 0 2 2 可以口算出來的管理還真沒看出來。

再看一組

console.log(3&0); //0
console.log(3&1); //1
console.log(3&2); //2
console.log(3&3); //3

console.log(3&4); //0
console.log(3&5); //1
console.log(3&6); //2
console.log(3&7); //3

console.log(3&8); //0
console.log(3&9); //1
console.log(3&10); //2
console.log(3&11); //3

console.log(3&12); //0
console.log(3&13); //1
console.log(3&14); //2
console.log(3&15); //3

或

console.log(3|0); //3
console.log(3|1); //3
console.log(3|2); //3
console.log(3|3); //3

console.log(3|4); //7
console.log(3|5); //7
console.log(3|6); //7
console.log(3|7); //7

console.log(3|8); //11
console.log(3|9); //11
console.log(3|10); //11
console.log(3|11); //11

console.log(3|12); //15
console.log(3|13); //15
console.log(3|14); //15
console.log(3|15); //15

規律隔4加4.

其他規律就不算了。

ok了，這是一次很愉快的過程，目的達到了哈，按位運算可以告一段落了。

位運算看了半天才看懂T_T ，下面寫一下位運算的原理吧。
先拿右移>>運算開刷。

如：16>>2 = 4
它的計算是先將16轉成二進制，然后把這個二進制往右移動2個位置。
16的二進制：0001 0000
往右移動兩個就成了0000 0100，為什么是移動兩個因為我們上面寫的就是2啊，>>后面表示的是你要移動多少位。實際上這里我們還是看不懂，為什么前面0001變成了0000了呢？是這樣的：
16>>2表示在16這個二進制前面添加兩個零或者兩個1，至于是添加零還是1取決于>>左邊的這個數是正數還是負數，如果是正數就填補0，如果是負數就填補1。

0001 0000
因為16是正數所以填補0
0000 0100 00 超出了兩個0去掉超出的，因此就是：
0000 0100

再如5>>3=0
5的二進制為：0000 0101
結果：0000 0000

那么左移位呢？自然相反啊。

比如5<<3=40
5的二進制為：0000 0101
結果：0010 1000
啥意思？就是把0或者一往0000 0101后面補，然后把前面多余的刪除。
000 0010 1000 前面三個0刪除。

反正就是這樣了，能不能聽懂你自己看著辦吧，就到這了。

網上看到這篇文章還是不錯的：http://www.cnblogs.com/yyangblog/archive/2011/01/14/1935656.html

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(11)

個人分類：生活學習

▲top

3月 09 週四 201720:13
Python學習筆記

文章出處
　　這幾天學習了一下Python之前想拿nodejs來當以后的后端學習，因為它的寫法是用js來寫，但學了一段時間以后發現其實nodejs學習起來還是有很多東西要學的，好多東西需要自己寫，但作為一個菜鳥來說，還是有難度的，除了這個原因以外也因為Python的簡潔語法還是誘惑了我，于是學了幾天，講一下這幾天學的東西。
　　在Python里面縮進替代了{}

if 1>0:
　　print('對的');
else:
　　print('錯了');

　　Python里面數組的一些語法糖還是很喜歡的，希望JS以后也有這樣的就好了。

list = ['a','b','c'];

# 獲取最后一個
print(list[-1]); #c

# 截取索引0 - 2之間的值不包括2
print(list[0:2]); #['a','b']

# 截取索引1到末尾的值
print(list[1:]); #['b','c']

　　雖然JS可以通過arr.length-1獲取最后一個值，但還是喜歡Python的這種寫法。
　　
　　其實基礎的內容這些語言都差不多，只是名字換了一下，寫法換了一下。

用Python寫了兩個小游戲。

#射球小游戲
#coding=gb2312
from random import choice
dir = ['left','center','right'];
def kick(num):
score = [0,0];
for i in range(num):
ranDir = choice(dir);
userDir = raw_input('請輸入你要射球的方向：');
if userDir!=ranDir:
score[0]+=1;
print('恭喜你射球成功，得分加1');
else:
score[1]+=1;
print('你射的球被守門員欄住了，重新輸入一個方向。');
print('您的總分是：%d,對手總分是：%d' % (score[0],score[1]));
return score;
result = kick(4);
while result[0]==result[1]:
print('你倆打了個平手，再來一次。');
result = kick(4);
if result[0]>result[1]:
print('恭喜你戰勝了對手！');
else:
print('很遺憾，對手戰勝了你。');

#coding=gb2312
#猜數字小游戲
# 導入模塊
from random import randint;
print('------開始游戲---------');
# 隨機數
ran = randint(0,100);
content = input('請輸入你要猜的數字: ');
# 記入成績
result = [0,0,0];
result[0] = 1;
# 猜錯
while ran!=content:
resu = '和目標值相差十萬八千里！';
if abs(content-ran)<=5:
resu = '您猜的結果和目標很靠近噢！';
elif abs(content-ran)<20:
resu = '相差有點距離！';
print('您猜的數是%d，%s\n' % (content,resu));
result[2]+=1;
result[1]+=1;
content = input('請重新輸入一個數字： ');
# 次數加1
result[2]+=1;
result[1]+=1;
print('-------恭喜你猜對了-------\n');
# 嘗試讀文件
try:
f = open('data.txt');
data = f.read().split();
f.close();
except:
# 如果沒有這個文件則創建一個
out = open('data.txt','w');
out.write('0 0 0');
out.close();
f = open('data.txt');
data = f.read().split();
f.close();
game_times = int(data[0]) + result[0];
min_times = int(data[1]);
total_times = int(data[2]) + result[2];
# 寫文件
out = open('data.txt','w');
if result[1]<min_times or int(data[0])==0:
min_times = result[1];
out.write('%d %d %d' % (game_times,min_times,total_times));
out.close();
# 計算平均數
avg_times = 0;
if game_times!=0:
avg_times = float(game_times)/total_times;
# 結束后輸出的內容
print('您一共玩了%d輪游戲,其中最快%d次猜中，平均輪數為%.2f，共進行%d次游戲。' % (game_times,min_times,avg_times,total_times));

其實也沒啥寫的，因為語法之類的看手冊啥的就好了，寫出來也沒意思，不經常用的也記不住，真是學的快忘的也快，只能記核心的東西了。

學Python看的這個教程：http://crossincode.com/course/lesson_list/挺不錯的，看了一天了。

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(1)

個人分類：生活學習

▲top

3月 09 週四 201720:13
領會CSS，實際中的研究

文章出處
雖懂卻不會，真是可怕，自認懂卻了無。

善用CSS屬性選擇器
在用于區別和唯一的情況下完全可以使用屬性選擇器，而沒有必要使用class或id

p[city="http://www.css.com/"]{
　　color:red;
}

first-line首行段落
利用:after和:before生成內容，可以減少你的標簽。

根據你要做的事來選擇合適的標簽而不是表現。
超越css-64頁

常用代碼庫

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>M tools module</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
--1
<!-- 左邊固定寬度，右邊自適應 -->
<section id="test_1">
<p>左邊：<span>嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻從小嘻嘻嘻嘻嘻嘻下</span></p>
</section>
--2
<!-- 左邊固定寬度，右邊自適應并且可以編輯內容 -->
<section id="test_2">
<p>左邊：<span contenteditable="true">嘻嘻嘻嘻嘻嘻下小嘻嘻嘻嘻嘻嘻下嘻嘻嘻嘻嘻嘻下小嘻嘻嘻嘻嘻嘻下</span></p>
</section>
--3
<!-- 商品列表 -->
<section id="test_3" class="clearfix">
<a href="javascript:;">
<span>圖片</span>
<dl>
<dt>商品標題商品標題商品標題商品標題商品標題商品標題商品標題</dt>
<dd>這是一段內容內容內容內容內容</dd>
<dd>這是一段內容內容內容內容內容</dd>
</dl>
<p>底部</p>
</a>
</section>
--4
<!-- 文字寬度平分 -->
<section id="test_4">
<p>文字啊</p>
</section>
--5
<!-- 特效 -->
<section id="test_5">
<h3>顯示</h3>
<p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>
</section>
</body>
</html>

/* reset */
div,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,p{
margin:0;
padding:0;
}
/* clearfix */
.clearfix{
overflow:auto;
zoom:1;
}
/* test_1 */
#test_1 span{
display:inline-block;
width:80%;
vertical-align:top;
}
/* test_2 */
#test_2 span{
display:inline-block;
width:80%;
vertical-align:top;
min-height: 50px;
outline: none;
border: 1px solid #fff;
padding:3px;
}
#test_2 span:hover{
border: 1px solid #a0b3d6;
}
/* test_3 */
#test_3 span{
float:left;
height:120px;
margin-right:12px;
}
#test_3 dl{
min-height:100px;
max-height:100px;
}
#test_3 dt{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
#test_3 dd{
padding:5px 0;
}
/* test_4 */
#test_4 p{
width: 60px;
text-align: justify;
}
#test_4 p:after{
content: "";
display: inline-block;
width: 100%;
height: 0;
}
/* 特效 */
#test_5:hover p{
opacity:1;
border:1px solid #ccc;
padding:10px 0;
}
#test_5 p{
opacity:0;
transition:all 0.5s;
}

............

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(2)

個人分類：生活學習

▲top

3月 09 週四 201720:13
CSS3伸縮布局Flex學習筆記

文章出處
如果需要使用伸縮布局首先得把display:flex;對于兼容還得加前綴display:-webkit-display:flex;等其他瀏覽器前綴，但我本機Chrome測試已經不需要加前綴了，其實這些還好，關鍵移動端竟然不支持這個屬性，移動端支持的還是老版本的display:-webki-box;不過對于學習來說，也不管它支持不支持了，學了再說吧，更何況Chrome已經把flex的前綴去了，說明flex多少還是有些穩定的。

下面列出了關于CSS與flex一起使用的一些屬性

display 顯示方式

flex-direction 設置flex模型的方向

justify-content 設置水平方向的對齊

align-items 設置垂直方向的對齊

flex-wrap 是否換行

align-content 設置換行后的對齊方式

flex-flow 簡寫flex-direction和flex-wrap

order 指定順序

align-self 覆蓋容器的對齊項目屬性

flex 指定長度

注意如果設置了寬度盒子是固定的。
彈性盒模型可以設置成·flex 或 inline-flex

display:flex

注意這個被固定住了，默認情況下，沿水平軸，從左至右
inline-flex和flex的效果是一樣的，也沒弄個所以然出來。

Flex的方向
　　flex-direction:屬性指定flex的方向。默認值是row（左到右，頂部到底部）
　　其他的值如下：

　　row-reverse - 從右到左，1在最右邊，2倒數第2....

　　column - 垂直排列

　　column-reverse - 垂直排列并且逆轉

row-reverse

column
　　
column-reverse
　　

水平對齊 --justify-content

　　可能的值如下：

　　flex-start- 默認值。被定位在容器的開頭

　　flex-end - 被定位在容器的端部

　　center - 被定位在容器的中心

　　space-between - 項目定位與線之間的空間

　　space-around - 項目是前定位成空間之間，并且所述線后

flex-end
　　
center
　　
space-between
　　
space-around
　　

垂直對齊--align-items

　　可能的值如下：

　　stretch- 默認值。項目被拉伸以適應父元素

　　flex-start - 被定位在容器的頂部

　　flex-end - 被定位在容器的底部

　　center - 被定位在容器的中心

　　baseline - 被定位在容器的基線

stretch
　　
flex-start
　　
flex-end
　　
center
　　
baseline
　　

如果沒有足夠的空間指定是否換行--flex-wrap

　　可能的值如下：

　　nowrap- 默認值。不換行

　　wrap - 換行

　　wrap-reverse - 以相反的順序換行

nowrap
　　
wrap
　　
wrap-reverse
　　

內容對齊--align-content
需要配合flex-wrap使用

可能的值如下：

　　stretch- 默認值。線路延伸到占用的剩余空間

　　flex-start - 線路都擠滿朝著柔性容器的開始

　　flex-end - 線路都擠滿朝著柔性容器的結束

　　center - 線路都擠滿朝著柔性容器的中央

　　space-between - 線條均勻地分布在Flex容器

　　space-around - 線條均勻地分布在Flex容器，用半角空格的兩端

center
　　
對這個不是很理解，待研究。

指定項目的順序--order

給第二個添加 order:-1
　　
誰的數大，誰在后面

余量將所有額外的空間被吸收到該元素上--margin-right: auto
　　

完美水平垂直居中
　　

對每個子項目設置對齊--align-self
flex-start、flex-end、center、baseline、stretch
　　

指定項目的范圍--flex

2，1，1
　　

簡寫flex-direction 和 flex-wrap --flex-flow

flex-flow: row-reverse wrap;
這些還多少有些不完善，以后還會更新進來。

本文內容翻譯自：http://www.w3schools.com/

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(2)

個人分類：生活學習

▲top

«1 ...303132 230 »

pop-under

參觀人氣

本日人氣：
累積人氣：

互聯網 - 大數據

本部落格為互聯網熱門頭條訊息管理中心

HTTP協議從入門到大牛，初識HTTP協議（學習筆記）

OOCSS入門學習

利用JSDOC快速生成注釋文檔，非常棒。

通過telnet來實踐HTTP協議。

HTTP與AJAX深入揭秘，不使用AJAX實現頁面無刷新

AJAX大文件切割上傳以及帶進度條。

按位運算符以及位移運算探討

Python學習筆記

領會CSS，實際中的研究

CSS3伸縮布局Flex學習筆記

pop-under

參觀人氣

線上人數

Marquee

最新文章

熱門文章

文章分類

最新留言

文章搜尋

文章精選

誰來我家

Live Traffic Feed