編程現(xiàn)在已經(jīng)變得越來越普及剂跟，不止是程序員需要用到編程技能减途，工作中的辦公軟件、大學(xué)里的課程和大作業(yè)等等場景未來都會隨著編程技能的普及而變得越來越依賴基本的編程能力曹洽。更不用說編程工作已經(jīng)是現(xiàn)在對于年輕人來說需求最大待遇最好的行業(yè)了鳍置，編程在大城市已經(jīng)變得隨處可見，就像二十年前剛剛興起送淆、現(xiàn)在已經(jīng)變成辦公室工作標(biāo)配的電腦使用能力一樣税产。
編程并不難，但是大部分的技術(shù)資料都是已經(jīng)會編程的人看起來輕松偷崩，但是不會編程的人完全看不懂辟拷，這就成了先有雞還是先有蛋的矛盾。
接下來的一系列文章會從零基礎(chǔ)學(xué)習(xí)者的角度出發(fā)阐斜，幫助大家從一個完全不知道程序是什么的零基礎(chǔ)開始起步衫冻，掌握編程的方法和思維。做到不僅僅是“學(xué)過”編程谒出，而是能真正地寫出自己想要的程序隅俘。在這一系列文章的閱讀過程中，每一組文章都會帶領(lǐng)大家寫出各種不同類型的小項目笤喳，甚至要不了多久我們就可以寫出自己的微信小程序在手機(jī)上運(yùn)行了为居。
歡迎對編程有興趣的讀者加入微信群一起分享編程學(xué)習(xí)過程中得到的收獲和遇到的問題，微信號：latiao-java杀狡，也可以加入我的免費(fèi)知識星球向我提問：https://t.zsxq.com/Nrz7uNZ
我們的第一個程序
編程其實很簡單蒙畴，我們在學(xué)習(xí)編程的第一個五分鐘里就可以完成我們的第一個程序。
首先呜象，讓我們打開一個瀏覽器膳凝，也就是我們上網(wǎng)頁用的工具蜒秤，可以是任何的瀏覽器绅络，比如360瀏覽器藻糖、搜狗瀏覽器等等爬坑。然后我們需要打開瀏覽器的開發(fā)者工具撑帖，在瀏覽器里按F12就可以打開了慌植。
下面的圖中是360極速瀏覽器打開“開發(fā)者工具”的地方弓叛，其他瀏覽器打開的位置也差不多璃弄。
然后我們在最上面一排找到"Console"哥捕，點擊之后就會出現(xiàn)下面的界面了牧抽。
然后我們輸入我們的第一個程序——alert('Hello world')，點擊回車遥赚，網(wǎng)頁上就跳出了一個寫著“Hello world”的對話框扬舒。這就是我們寫的第一個程序了！
接下來我們的所有代碼都會放在瀏覽器的這個Console（控制臺）里運(yùn)行凫佛，就不再另外說明了讲坎。
程序是什么孕惜？
既然我們已經(jīng)寫出并運(yùn)行了我們的第一個程序，那么我們就正式來聊聊“什么是程序晨炕？”衫画。
程序就是由代碼組成的很多命令，告訴計算機(jī)要做什么事情瓮栗。比如我們前面輸入的alert('Hello world')就是讓瀏覽器打開一個對話框削罩。編程和做數(shù)學(xué)題的最大區(qū)別就是：
在做數(shù)學(xué)題的時候，我們得聽題目的费奸，按題目的要求得到結(jié)果弥激。但是在編程時，我們就翻身做了主人愿阐，由我們通過代碼來告訴計算機(jī)一步一步怎么去運(yùn)行微服。我們可以讓計算機(jī)去解一個數(shù)學(xué)題，也可以讓計算機(jī)運(yùn)行一個游戲缨历，或者顯示一個網(wǎng)頁职辨。
在學(xué)習(xí)編程的過程中，這種思維方式的轉(zhuǎn)變是最重要的一環(huán)戈二。很多人學(xué)不會舒裤、寫不出基本都是卡在思維方式上。
程序的核心 —— 變量
接下來我們就要繼續(xù)我們的編程之旅了觉吭，我們要學(xué)的第一個技術(shù)就叫做“變量”腾供。下面的所有代碼都建議大家打到瀏覽器的控制臺里試一試，對大家的學(xué)習(xí)一定會有所幫助鲜滩。
變量在程序中用于保存一個數(shù)據(jù)伴鳖，比如我們可以把我們現(xiàn)在口袋里現(xiàn)金的金額100保存到一個變量里，如果買了三塊錢的飲料就可以從變量里減掉3變成97徙硅，如果又從銀行領(lǐng)了100塊那就可以在變量上加上100變成197榜聂。
在程序中我們可以這么使用變量：
// 創(chuàng)建變量a1
var a1;
// 把值100保存到變量a1中
a1 = 100;
// 從變量a1中減掉3
a1 = a1 - 3;
// 在變量a1上加上100
a1 = a1 + 100;
在上面的代碼中，我們可以看到嗓蘑，每句代碼后都是以;分號結(jié)尾的须肆。這是一個需要記牢的地方：每一個程序語句都要以;英文分號結(jié)尾桩皿。
那么我們應(yīng)該如何理解“變量”這個概念呢？我們可以把變量想象成一個盒子泄隔，然后我們可以把一個具體的值寫在紙條上放到盒子里拒贱，并且我們還可以給每個盒子取一個唯一的名字。
比如像下面的圖里就是一個名字叫a1的盒子里放了一張寫著1的紙條，翻譯成代碼就是：
var a1;
a1 = 1;
那我們有了這樣的一個放著紙條的盒子之后有什么用呢逻澳？既然盒子里有一張寫著字的紙條闸天，那么我們就可以把一些東西寫到紙條上記下來，等到以后需要的時候就可以拿出來看了斜做。
比如我們在暑假里把離暑假結(jié)束的天數(shù)存到一個名字叫“remaining”（剩余）的變量里苞氮，然后每天減一，這樣我們想知道暑假還有多少天的時候就可以從這個變量里讀取到對應(yīng)的數(shù)字了陨享。
我們可以這樣來創(chuàng)建變量并把暑假的剩余天數(shù)存進(jìn)去：
var remaining;
remaining= 20;
那么我們要怎樣每天去給變量remaining減1呢葱淳？我們可以這么寫：
remaining = remaining - 1;
這段代碼可以分為三個部分：
- 變量名
remaining在等號右邊的時候代表的是remaining的值钝腺，也就是盒子remaining里的紙條上的內(nèi)容抛姑。在我們的例子中就是數(shù)字20。 - 第二部分是拿remaining的值（也就是數(shù)字20）減1得到結(jié)果數(shù)字19艳狐。
- 而當(dāng)變量名
remaining出現(xiàn)在等號左邊時定硝，代表的是remaining盒子本身，而等號就代表把右邊的內(nèi)容寫在紙條上放到盒子remaining里毫目。盒子remaining里原來的紙條就會被替換掉蔬啡，所以在這里就是將第二步的計算結(jié)果數(shù)字19放到了變量remaining里。
簡單來說镀虐，這三步就是：
- 獲取變量remaining的值箱蟆，得到數(shù)字20；
- 計算
20 - 1的結(jié)果刮便，得到數(shù)字19空猜； - 將數(shù)字19保存到變量remaining中。
其他操作
除了用+號來使兩個值相加恨旱，我們還可以執(zhí)行下面這些操作：
-
i - 1辈毯，計算變量i減1的值 -
i * 2，計算變量i乘以2的值 -
i / 2搜贤，計算變量i除以2的值
在上面的代碼中谆沃，我們都沒有使用=來把值保存到變量里，這樣的情況下仪芒，程序僅僅是計算出了結(jié)果唁影，但是不會把結(jié)果保存到任何的變量里。在程序代碼中掂名，=等號被稱為“賦值操作”夭咬，這個操作會把=右邊的計算結(jié)果保存到=左邊的變量里。
大家可以試一試铆隘，只輸入i + 1是不是可以得到結(jié)果卓舵，但是變量i里保存的值并沒有被改變。
字符串
我們除了可以在變量里保存數(shù)字膀钠，還可以保存中文或者英文掏湾，比如"Hello world 你好 世界"裹虫，這在程序里被叫做“字符串”。字符串在程序里需要用"英文雙引號包住融击，兩個"雙引號中間的部分就是我們的字符串了筑公。所以我們可以這樣將字符串保存到變量里：str = "Hello world"。其中尊浪，=等號左邊的str是一個變量匣屡。
字符串也可以執(zhí)行+加操作，操作的結(jié)果就是把+加號左右兩邊的字符串拼在一起拇涤，比如"Hello " + "world"的結(jié)果就是"Hello world"捣作。大家可以輸入到瀏覽器的控制臺里試一試。
猜猜我是幾
我們接下來就來開發(fā)我們的第一個項目鹅士。下面是我們最后能完成的成果券躁，大家可以拷貝到瀏覽器的控制臺里試一試。
var n = Math.ceil(Math.random() * 100);
var input = prompt('猜猜我是幾掉盅？');
for (; input != null;) {
if (n > input) {
alert('我大于' + input);
} else if (n < input) {
alert('我小于' + input);
} else {
alert('猜對啦也拜！我是' + n);
break;
}
input = prompt('猜猜我是幾？');
}
這個程序在開始運(yùn)行的時候會產(chǎn)生一個0到100范圍內(nèi)的隨機(jī)數(shù)趾痘，我們可以在彈出的對話框里輸入數(shù)字猜這個數(shù)字到底是多少慢哈。如果沒猜中，那程序會告訴我們是大了還是小了永票；如果猜中了卵贱，程序就會結(jié)束。
接下來瓦侮，我們就來嘗試一下親手寫出這樣的一個程序艰赞。
比較操作符
要完成這個程序，我們首先需要能判斷對話框里填的數(shù)字和這個隨機(jī)數(shù)之間的大小關(guān)系肚吏。那在代碼里我們怎么去判斷大小呢方妖？
我們在控制臺里輸入1 < 2再按下回車試試，這段代碼運(yùn)行之后返回了true罚攀。這個單詞的意思是“正確”党觅，也就是說“1小于2”是對的。如果我們輸入1 > 2就會返回false斋泄，這個單詞的意思是“錯誤”杯瞻，也就是說“1大于2”是錯的。
這里的<小于炫掐、>大于在程序里就被叫做比較操作符魁莉，他們專門用來比較兩個值之間的關(guān)系。
然后我們就需要產(chǎn)生要用來比較大小的那兩個數(shù)字了。首先旗唁，我們要生成一個0到100的隨機(jī)數(shù)畦浓，讓用戶來猜〖煲撸“隨機(jī)”的意思就是每次獲取到的都是指定范圍里的任意一個數(shù)字讶请，但是每次獲取的時候不一定會獲取到幾，就像扔骰子一樣屎媳。比如第一次獲取夺溢，可能拿到的是10，第二次拿到的可能是57烛谊，每次獲取的時候都不知道會是多少风响。下面的語句就是獲取一個0到100的隨機(jī)數(shù)并保存到變量n里的程序代碼，我們先不用了解這段代碼的含義晒来，暫時先直接復(fù)制過來用钞诡。
var n = Math.ceil(Math.random() * 100);
我們現(xiàn)在已經(jīng)有了一個隨機(jī)數(shù)n郑现，然后要去猜它到底是幾湃崩。那我們就可以把它和我們猜的數(shù)字比較一下，看n到底是大于接箫、小于還是等于我們猜的數(shù)字攒读。不過下面的這幾段代碼在大家電腦上運(yùn)行的結(jié)果可能和我的結(jié)果不太一樣，因為n不一定是0到100之間的哪個數(shù)字辛友。
比如我們猜它是12薄扁，那么就可以這樣來判斷它是不是大于12：
n > 12;
輸出的結(jié)果就像下面這樣，是一個true废累。這就意味著n確實大于12邓梅。
我們再猜它是50：
n > 50;
哇哦，結(jié)果變成了false邑滨，這是什么意思呢日缨？
這就說明n不是真的大于50，所以它可能小于50掖看，也可能等于50匣距。
那我們再來看看n是不是小于50：
n < 50;
結(jié)果是true，說明n真的小于50“タ牵現(xiàn)在n的范圍就是大于12毅待，小于50了。
我們再猜它是42归榕，首先來看看n是不是大于42：
n > 42;
n不大于42尸红，那么它就可能小于或者等于42了。我們來看看n是不是小于42：
n < 42;
哎呀，n怎么既不大于42外里，也不小于42呢邑飒？大家知道是為什么嗎？
對级乐，這是因為我們的n此時的值就是42疙咸，我們猜對了！
其他比較操作符
我們不僅可以用>大于和<小于來判斷兩個數(shù)字之間的關(guān)系风科，還有更多其他的比較操作符撒轮，比如像下面這些：
-
a >= b，a是否大于或等于b -
a <= b贼穆，a是否小于或等于b -
a == b题山，a等于b -
a != b，a不等于b
注意故痊，上面的等于判斷用的是兩個等號==顶瞳，因為一個等號=已經(jīng)被作為賦值操作了，所以判斷兩個值是否相等要用兩個等號==愕秫。而不等于就是把第一個等號換成感嘆號!慨菱。
if語句
但是每次都要判斷true和false的意思感覺好煩啊，能不能讓結(jié)果變成中文顯示呢戴甩？
我們知道當(dāng)計算n > 12時符喝，如果n確實大于12，那么n > 12的結(jié)果就是true甜孤，否則的話就是false协饲。那么我們只要在n > 12的運(yùn)行結(jié)果為true的時候顯示n大于12，而在n > 12的運(yùn)行結(jié)果是false的時候顯示n小于等于12就可以了缴川。
在英文里茉稠，“如果”就是if，那么上面這句話就可以這么寫：
// 如果n大于12的計算結(jié)果是true
if (n > 12)
顯示"n大于12"這句話可以用到我們在這篇文章最開始用到過的alert()函數(shù)把夸，我們在控制臺里輸入alert("n大于12");而线，然后瀏覽器上就跳出了這樣的一個對話框：
從上圖中我們可以看到在alert后面的小括號里的字符串會被顯示在瀏覽器彈出的對話框里。
為了大家在自己電腦上執(zhí)行的結(jié)果和接下來的內(nèi)容一樣扎即，我們先直接把n設(shè)置為42吞获，代碼是這樣的：var n = 42;。
然后我們把顯示對話框的代碼接在if語句后面谚鄙，寫成下面這樣：
if (n > 12) {
alert("n大于12");
}
運(yùn)行之后瀏覽器里就會彈出下面這樣的一個對話框了：
好的各拷，我們現(xiàn)在已經(jīng)成功地用中文代替了原來麻煩的判斷true和false含義的過程。那么接下來我們就來分析一下剛才用的if語句的寫法闷营。
if語句的格式是這樣的：
if (判斷式) {
代碼塊A
}
如果判斷式的計算結(jié)果是true烤黍，就像上面的n > 12一樣知市，那么就會執(zhí)行大括號{}里的所有代碼。如果判斷式的計算結(jié)果是false的話速蕊，那就不會執(zhí)行大括號{}里的代碼了嫂丙。
else if語句
接下來我們再來試試n > 50，記住哦规哲，現(xiàn)在變量n里面保存的值仍然是42：
if (n > 50) {
alert("n大于50");
}
啊哦跟啤，為什么我們按下回車之后什么也沒有發(fā)生呢？
因為現(xiàn)在變量n里面保存的值是42唉锌，而42是小于50的隅肥，所以n > 50的運(yùn)行結(jié)果就是false。所以當(dāng)小括號里的判斷式的結(jié)果是false時袄简，程序就不會執(zhí)行if后面的大括號{}里的代碼塊了腥放。那如果我們在這種情況下也想讓程序能給我們一個中文提示的話應(yīng)該怎么辦呢？
首先绿语，我們考慮一下秃症，如果n > 50的結(jié)果是false，那么就可能是兩種情況：一種是n < 50吕粹，另外一種是n == 50（n等于50）种柑。我們先來改一下程序，讓它在n < 50的情況下可以告訴我們“n小于50”昂芜。
if (n > 50) {
alert("n大于50");
} else if (n < 50) {
alert("n小于50");
}
我們可以看到莹规，開頭的一段代碼和之前是一樣的赔蒲，但是在if的大括號{}之后又加上了一個else if (n < 50)泌神。if (n < 50)是什么意思我們現(xiàn)在已經(jīng)都知道了，就是在n小于50的時候執(zhí)行后面的大括號{}里的代碼舞虱。但是else是什么意思呢欢际？
else在英語里是“其他”的意思，在我們的程序中就代表前面的if的小括號()中的判斷式計算結(jié)果是false的時候矾兜。所以這里的意思就是损趋，當(dāng)if (n > 50)結(jié)果是false的時候，如果n < 50是true椅寺，那么就執(zhí)行else if后面大括號{}里的代碼塊浑槽，在上面的程序里就是alert("n小于50");。
我們把上面的這段代碼復(fù)制到控制臺里執(zhí)行看看：
這下我們的中文提示就能正確地跳出來了返帕。那么當(dāng)我們猜中了n是42的時候又會發(fā)生什么呢桐玻？
我們把代碼里用于比較的數(shù)字改成42試試看：
if (n > 42) {
alert("n大于42");
} else if (n < 42) {
alert("n小于42");
}
啊哦，又是什么都沒發(fā)生荆萤。相信有一些讀者已經(jīng)猜到了镊靴，因為變量n的值就是42铣卡，所以上面的n > 42的結(jié)果是false，n < 42的結(jié)果也是false偏竟。也就是說變量n既不是大于42煮落，也不是小于42，而是等于42踊谋！
這時候我們就需要在上面的代碼后面加上最后一段代碼了：
if (n > 42) {
alert("n大于42");
} else if (n < 42) {
alert("n小于42");
} else {
alert("恭喜你蝉仇，猜對啦");
}
當(dāng)else后面不帶if的時候，意思就是剩下的所有情況都執(zhí)行else后面大括號{}里的代碼殖蚕。在上面的情況中就是n既不大于也不小于我們猜的數(shù)字量淌，那么這種情況自然就是我們已經(jīng)猜對了n的值了。
玩?zhèn)€游戲：猜猜我是幾嫌褪？
游戲規(guī)則：
- 我們用
var n = Math.ceil(Math.random() * 100);來生成一個隨機(jī)數(shù)并保存到變量n里 - 然后我們用上面的那一串if語句代碼不斷地去猜n到底是多少呀枢，每次猜的時候我們都要把和n比較的數(shù)字修改成我們想猜的數(shù)字，比如我們?nèi)绻氩耼是50笼痛，那么就可以這么寫：
if (n > 50) {
alert("n大于50");
} else if (n < 50) {
alert("n小于50");
} else {
alert("恭喜你裙秋，猜對啦");
}
如果我們要猜n是42，那么就可以這么寫：
if (n > 42) {
alert("n大于42");
} else if (n < 42) {
alert("n小于42");
} else {
alert("恭喜你缨伊，猜對啦");
}
啊哦摘刑，運(yùn)氣不太好，變量n已經(jīng)不是42了呢刻坊。那就讓我們用代碼來猜猜它到底是多少吧枷恕！
推薦資料
下面的兩個網(wǎng)站不管是作為學(xué)習(xí)的工具還是寫代碼時用來查找的“字典”都是很不錯的選擇，有興趣的讀者可以了解一下：
- 在線JavaScript教程（ https://www.liaoxuefeng.com/wiki/1022910821149312 ）
- 在線js速查手冊（ https://www.runoob.com/js/js-tutorial.html ）
