DAY11-JavaScript（一）

前言：

前面我们介绍了很多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介面在建立网页架构非常方便。

那我们先创一个新的资料夹：

再来我们直接将这个资料夹拉到VS Code左边的workspace里，这时候应该会出现一个确认选项：

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

接下来我们可以按右键新增以下两个档案：

再来我们加入前面几周用过的基本html架构，在vs code可以直接打一个!然後按enter：

接下来如果我们要引用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"的按钮：

把他点下去之後在chrome打开http://127.0.0.1:5500/index.html这个网址，这时候应该还是一片空白：

再来我们把刚刚的其中一个code贴到app.js中：

然後按下f12里面的Console：

可以看到我们要log的讯息出现在右边，这就是console.log的功能，有点像是其他语言的print，是之後帮助我们debug的好工具！

大家也可以尝试把其他指令贴上去试试看。

小结：

今天介绍了JavaScript的几个前置环境、基本资料型态还有一些用法，其实其他的像是for loop回圈等功能都和一般程序语言的用法差不多，只要先会这些基本变数宣告剩下应该可以上手的很快。

接下来我会继续介绍JavaScript如何和网页互动，讲解DOM的基本概念，那我们就明天再见啦！