指令式編程
培養指令式編程思維
復習上一節課的內容
- Markdown是一種輕量級的「標記語言」,使用它來書寫文檔、代碼規范，只要專心碼字就行，排版什么的它都幫你輕松搞定！好比，使用Markdown，項目經理再也不用擔心我的文檔了！
- 全棧工程師的概念，服務器、運行環境、數據庫、前端、后端、APP(這里我們注重的是Hybrid App) 直到上線，全部由一個人搞定！很牛叉吧，我會成為這樣的人才的！不要羨慕哥，努力、堅持的人總能吃到西瓜的！
- 編程語言的發展歷史，各種語言的優勢和劣勢，編程語言發展趨勢只會越來越簡單，方便人的操作，節省人力、腦力，讓機器去操作運行，喂，機器，快死去干活，你懂的！
- 編程語言執行的兩種方式：指令式編程、函數式編程；指令式編程，按照機器的運行規則來執行；函數式編程，就是讓電腦像人腦一樣的運行；你覺得那種好？這還要問，當然是兩種一起來，機器必須服務我的指令（不然像機器反主怎么辦，對吧！），但是在我讓它做某項事物的時候，我拋概念，機器你來執行，好比：我要賺一百萬，機器你來完成如何給我賺一百萬，我只要結果，過程你來！嘿嘿！
進入今天的內容
- 明確目標：培養人像電腦一樣思考！要玩轉它，首先你要懂它！
- 全棧開發中，Js的比重很大，適用于很多一面。
- 指令式編程，通過js來闡述它。
指令式編程
闡述之前，先擴展兩條Node命令
- node -v 查看當前Node版本
- node 進入交互模式
指令式編程最基本的指令
順序結構語句
順序結構
像 2+3、2*3、3-1，這種形式的都是計算機指令，<b>計算機指令不等于cpu指令</b>
而 a=3，a +=1、a *=1、a++，這帶有變量的指令，變量存儲在內存中
執行流程是從上而下的順序結構！
分支結構語句
if( true ) {
}else{
}
給予簡單的判斷，進入不同的結構
循環結構語句
（初期循環結構應該是 goto 這種形式）
a++;
a:
if( a > 10) goto a;
//當a>10條件滿足時，進入無限循環，想要跳出循環，兩種方法：
// 1. 從滿足條件開始起一直到不滿足
// 2.
a:
if( a > 50 ) goto b;
goto a;
b:
懶猿不想寫這么繁瑣的，所以因然而生，while 語句
var i = 100;
while(i<100 ){
i++;
}
//條件不滿足，跳出循環結構
var flag = true;
while(flag){
break;//滿足條件的我就這么任性就是想這里跳出
}
懶猿還想再懶點，所以 for 又出現
for(var i=0;i<100;i++){
}
//剖析
var i = 0;
for(;i<100;){//中間的是條件
i++;
}
指令式編程的最基本的指令就這三種了，執行流程也要遵循：
- 從上而下
- 根據條件
- 最后一個就是 在函數里
函數 執行流程
var a=0;
function f( ) {
console.log(a);
}
f();
//當函數依次執行到 f() 函數時（存儲到了內存但并不執行），沒有被調用，不執行函數體，所以來到下面 函數 f() 被調用，返回到 函數執行函數體。
var a=0;
function f( ) {
console.log(a);
return 0;
}
var s = f();
// 函數體內有返回值，就會把返回值返回到調用處。也就是說 s等于0；
最基本的指令式編程的執行流程如上所述這樣了，那下面，就從計算機最基礎的指令開始，來強化理解計算機指令式編程，不斷加強！
以打印圖形來開始
打印圖形
這樣的重復勞動造輪子的工作還是讓給機器吧！
打印圖形
那想打印個矩形，怎么辦呢？
還是同樣的重復勞動，那我們是不是可以按照重復勞動的規律，寫個簡潔的.
打印矩形
那根據上述的循環，我是不是可以對他進行封裝，來控制矩形的長寬，想要什么樣的打印什么樣的。提取事物共同的特性，用一個抽象的概念來涵蓋！
打印矩形
抽象化后，封裝的函數達到了初期我想要的目標，那我是不是還可以對它進行抽象，畢竟我今天想用星，那我后天想用別的符號呢！所以繼續...
打印矩形
懶猿認為，好像并不是更方便了，反而有點復雜了！
打印矩形
這樣看是不是 舒服多了，也方便多了，也更容易讀懂了！那下面懶猿又要開始思考了，正方形也是矩形，對吧！只是長寬都一樣，那同理我的正方形是不是也可以打印出來了！
正方形
那通過上面這幾個實例，是不是更加對指令式編程又有新的了解了，好了，通過上邊幾個方法，我們是不是可以打印出我們想要的任何圖形，請看:
空心矩形
三角形
梯形
根據這些規律，我們是不是可以進行封裝，成為一個像上面輸出矩形函數一樣，等待更新！
打印空心矩形函數
規律：除了特殊的兩行，第一行和最后一行全星，中間的都是第一列和最后一列是星，中間是空格，這個規律知道了，我們是不是只要給個判斷，就會得到我們想要的，既然思路來了，就動手試驗試驗吧！
空心矩形打印等邊三角形函數
規律: 看下圖我們來找找規律！
等邊三角形
那看到這，是不是有點明白了，每行輸出的星的個數和空格的個數都跟輸出的行數有關，根據下圖是不是明白輸出的原理了！從中我們也推算出每行星的輸出個數的方程式了：2n-1(n代表行)
| 第幾行 | 空格數 | 星個數 | 規律 |
|---|---|---|---|
| 1 | 9 | 1 | 1x2-1=1 |
| 2 | 8 | 3 | 2x2-1=3 |
| 3 | 7 | 5 | 3x2-1=5 |
| 4 | 6 | 7 | 4x2-1=7 |
| 5 | 5 | 9 | 5x2-1=9 |
| 6 | 4 | 11 | 6x2-1=11 |
| 7 | 3 | 13 | 7x2-1=13 |
當你不明白一個事物的時候，別急，怎么先找一個客觀存在的事物，找出他的共性，然后抽象它！
代碼：
三角形
打印梯形
規律: 三角形砍了頭，是不是就一個梯形了！那好根據這個我們用示例圖更直觀的看下：
梯形
那我一個上邊是5顆星，下邊是19顆星的 梯形；更據三角形規律方程式2n-1；我們是不是知道要輸出一個幾行的三角形，然后從第幾行砍掉頭！活生生的梯形不就展現在我們面前了！
代碼
梯形
輸出梯形
打印梯形
還是一樣，先找出規律:
這個實例圖看到時，是不是瞬間就得出，
- 第一個星和最后一個星打出，中間空格；也就最外邊打印
- 然后加上一個特殊行，最后一行全星就組成了一個空心三角！
那我們是不是可以更據這個兩個判斷，再加上輸出上述等別三角形的例子，是不是就可以打印出空心三角形了！
代碼
空心三角形
Javascript 的兩個不同的工作環境下的工作狀態
客服端
Javascript 中變量作用域的問題
- 多人團隊項目開發中，存在最多的問題，命名空間污染問題，java當中有引入包名稱來解決，js當中可沒有引入類似包、命名空間這些，所以怎么解決呢！
熟悉js作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS 中的作用域</title>
</head>
<script type="text/javascript">
var = a; //這么低級的錯誤肯定不會犯的
//var = a;
</script>
// 這是一個外部引入 js文件
<script type="text/javascript">
var = a; //這個文件也聲明了一個這樣的變量，那是不是就沖突了
</script>
<body>
</body>
</html>
分析作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS 中的作用域</title>
</head>
<script type="text/javascript">
var a = 5;//全局變量
function f() {
var a = 3;//這樣就不沖突了，這里的a 是局部變量
alert(a); //這里輸出的是函數內的a
}
alert(a);//5
f();// 3
——————————————————————————————
//var a = 5;//全局變量 相當于 window.a (最頂層的a)=5;
window.a = 5;
function f() {
var a = 3;
// a = 3;//這樣 a ，在函數調用后，也是全局變量，根據js的特性，閉包函數，a 會一直往外(函數外)尋找！直到找到最頂層！
alert(a); //這里輸出的是函數內的a
window.a = 6;
}
alert(a);//5
f();// 3
alert(a);//6
</script>
<body>
</body>
</html>
網頁中的 js 全局變量是 window.a ,在node 環境下 是： global a ；這樣你對js中的作用域更深入的了解了吧！
參考文檔我叫了，你不能叫！你叫了，我不能叫！
為了解決這個問題，經常用到這個方法！
(function (){//匿名函數
var user;
alert("a ");//會立即執行
}) () ;
function f() {
var a = function(){
};
}
function f() {
return function () {//返回一個函數
}
}
var x = f();//調用函數f(),返回一個函數，給了x；
x(); //這樣 x() 可以調用函數了！
總結
- 了解最基本指令式編程里的最基本的指令，體會機器執行程序的流程,是自己更明白電腦執行流程！
- 了解js 在不同環境下的工作狀態，js的變量作用域問題，和一些解決辦法！
