iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Modern Web

1995到2021,php到react網站開發歷程系列 第 11

DAY11-JavaScript(一)

javascriptme.jpeg

前言:

前面我們介紹了很多html, css, php和mysql相關的內容了!今天我們要繼續來介紹JavaScript!這個JavaSript呢可以說是目前做網頁脫離不了的語言,很多的網頁開發工具都是從他繼續衍伸的,像是Jquery, React.js, vue.js等等。

而在學這些以前JavaScript是最最最重要的基本功,那在開始之前阿森推薦大家可以去看看JavaScript發明者的一個訪談影片:

https://www.youtube.com/watch?v=IPxQ9kEaF8c&ab_channel=ieeeComputerSociety

可以知道一些這個語言當初開發時的想法,我相信也有助於各位繼續學習。

那我大概會分三天來講,第一天先介紹他身為程式語言基本的幾種語法,第二天來講他如何與網頁DOM做互動,第三天我們就來寫一個簡單的網頁吧!

前置作業:

這裡阿森推薦大家使用Visual Studio code來做JavaScript的編寫,因為VS Code的workspace介面在建立網頁架構非常方便。

那我們先創一個新的資料夾:

截圖 2021-08-20 下午11.39.50.png

再來我們直接將這個資料夾拉到VS Code左邊的workspace裡,這時候應該會出現一個確認選項:

截圖 2021-08-20 下午11.41.00.png

按Add Folder to Workspace後就大功告成了!

截圖 2021-08-20 下午11.42.32.png

接下來我們可以按右鍵新增以下兩個檔案:

截圖 2021-08-20 下午11.44.33.png

再來我們加入前面幾週用過的基本html架構,在vs code可以直接打一個!然後按enter:

截圖 2021-08-20 下午11.49.18.png

接下來如果我們要引用javascript檔案,也就是.js檔,我們可以在這個結尾標籤上面加一行:

<script src="./app.js"></script>

記得通常都是加在body的最下面,因為瀏覽器是從上往下讀的,如果你在JavaScript檔裡面先呼叫了一個還沒有宣告的tag就會出錯。

那到這邊我們前置作業就完成了!

基本語法:

變數宣告:

JavaScript中主要宣告變數的用法有兩種,分別是var和let,而這兩者的差別簡單來說,就是var的作用域是函式作用域(function scope),所以可能會產生不小心更動到全域變數的情況,這常常會造成之後debug時不知道問題出在哪。

這時候let就出現了,let的作用域是區塊作用域(block scope),在函數中使用let就不用擔心會動到外面的變數,這個概念也比較接近一般程式語言宣告變數的概念。

而JavaScript的變數基本型態有以下幾種:

String Data Type:

var a = "hello world";

Number Data Type:

var a = 100;
var b = 1.5;

Boolean Data Type:

var isOdd = true;
var isEven = false;

Undefined Data Type:

var a;

Null Data Type:

var a = null;

物件宣告及使用方法:

var dog = {
	"name": "Luci",
	"age": 3,
	"color": "black and white"
};

console.log(dog.name);//Luci

陣列宣告及使用方法:

var colors = ["red", "orange", "yellow"];

console.log(colors[0]);//red

函式宣告及使用方法:

function saySomeThing(name){
	console.log("hello "+name);
}

saySomeThing("Sen");//hello Sen

如果要確認一個變數的型態可以用:

var a = 100;
console.log(typeof a); //number

動手寫寫看:

接下來讓我們試試看上面的指令吧!

為了方便起見可以先在VS Code的Extention搜尋live server。

安裝好之後右下角應該會出現這個"go live"的按鈕:

截圖 2021-08-21 上午12.23.03.png

把他點下去之後在chrome打開http://127.0.0.1:5500/index.html這個網址,這時候應該還是一片空白:

截圖 2021-08-21 上午12.24.04.png

再來我們把剛剛的其中一個code貼到app.js中:

截圖 2021-08-21 上午12.26.46.png

然後按下f12裡面的Console:

截圖 2021-08-21 上午12.27.19.png

可以看到我們要log的訊息出現在右邊,這就是console.log的功能,有點像是其他語言的print,是之後幫助我們debug的好工具!

大家也可以嘗試把其他指令貼上去試試看。

小結:

今天介紹了JavaScript的幾個前置環境、基本資料型態還有一些用法,其實其他的像是for loop迴圈等功能都和一般程式語言的用法差不多,只要先會這些基本變數宣告剩下應該可以上手的很快。

接下來我會繼續介紹JavaScript如何和網頁互動,講解DOM的基本概念,那我們就明天再見啦!


上一篇
DAY10-小型成果發表
下一篇
DAY12-JavaScript(二)
系列文
1995到2021,php到react網站開發歷程30

尚未有邦友留言

立即登入留言