JavaScript 基礎教學

0.Apr-08-2015  ：初版
1.Jul-1*-2015  ：新增ECMAScript 6簡述、修正內容
2.Oct-14-2018  ：修改語法、內容，移除jQuery相關內容

簡介

  • 一個 「直譯式」 的程式語言
  • 由 Netscape公司設計 (1995年)
  • 微軟亦在後來提出JScript，功能與JavaScript相同
  • 在 歐洲電腦製造商協會(ECMA)的協調下 標準化(ECMA-262)
    因此JavaScript又被稱為 ECMAScript (1997年)
  • 直至投影片最後修改時間為止最新版本為ES8
  • JavaScript≠Java，只是長得像而已

什麼是JavaScript

網頁開發角色

網頁客戶端

伺服器端

送出需求(Request)

回傳內容(Response)

  • HTML       →負責 網頁結構
  • CSS           →負責 樣式
  • JavaScript→負責 行為控制
  • PHP
  • C#、VB→ASP.NET
  • Java→JSP
  • JavaScript→Node.js

前端

Frontend

後端

Backend

在HTML中的擺放位置

  1. 寫成HTML屬性
    • 缺點：破壞HTML只有框架的原則
      可讀性低
  2. 使用<script>標籤
    • 優點：速度較快
    • 缺點：破壞HTML只有框架的原則
  3. 寫成外部檔案並匯入
    • 優點：維持HTML基本架構

小建議：使用第2、3點時
建議將標籤接在</body>前

詳情請見下面釋例

直接混在HTML中

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div onclick="alert('安安~');"></div>
        <!--或是-->
        <a href="javascript:alert('安安~');"></a>
    </body>
</html>

在HTML中的擺放位置 (續)

寫在Script標籤內

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div></div>
        <script type="text/javascript">
            document.getElementByTagName('div').onclick(function(){
                alert('安安~');
            });
        </script>
    </body>
</html>

在HTML中的擺放位置 (續)

寫在外部檔案並且匯入

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div></div>
        <script type="text/javascript" src="example_source.js"></script>
    </body>
</html>
document.getElementByTagName('div').onclick(function(){
    alert('安安~');
});

example_source.js

example_source.html

在HTML中的擺放位置 (續)

其他應用

  • WebGL
  • Unity
  • Node.js
  • Tessel

基礎語法

變數宣告：var

var i;

變數宣告：let (ECMAScript 6)

let i;

//---------------------global---------------------//
var testvara;
//等同
let testleta;
//---------------------大括號內--------------------//
if(true) var testvarb = foo;
testvarb;//<foo

if(true) let testletb = bar;
testlatb;//<error

與var的差別：var宣告為全域變數(一個地方宣告，整個網頁的JavaScript都可以使用)；let為區域變數(在某個區域宣告只有同層及底層可以使用)

常數宣告：const (ECMAScript 6)

const i = foo;

if (條件1) {
    //程式碼內容1
}
else if (條件2) {
    //程式碼內容2
}
else {
    //程式碼內容
}

條件判斷式：if

switch (變數名稱) {
    case 條件A:
        //當變數==條件A->執行這行
        break;
    case 條件B:
        //當變數==條件B->執行這行
        break;
    case 條件C:
        //當變數==條件C->執行這行
        break;
    case 條件D:
    case 條件E:
    case 條件F:
        //當變數==條件D、E或是F->執行這行
        break;
    default:
        //上面都不符合時執行這行
        break;
}

多重條件判斷式：switch

for(i = 0, i < 10, i++){
    //程式碼內容
}

迴圈：for

另一種用法：for...in

var abc[10];
for(var i in abc){
    console.log(abc[i]);
}

另一種用法2：for...of (ECMAScript 6)

var abc[10];
for(let i of abc){
    console.log(i);
}

基本用法

while (true){
    //程式碼內容
}

條件迴圈：while

do{
    //程式碼內容
} while (true)

條件迴圈：do

function fname(arga){
    var returnVal;
    //函數內容
    
    return returnVal;
}
const fname = function (arga){
    var returnVal;
    //函數內容
    
    return returnVal;
}
fname('安安');

宣告方法

使用方法

函數：function

const fname = arga => console.log(arga);
fname('安安');

宣告方法

使用方法

函數：Arrow Function(ES6)

進階使用

BOM

  • Browser Object Model 
  • 由Netscape制定
  • 核心物件是window
  • 較不常用

DOM

  • Document Object Model
  • 由W3C制定
  • 核心物件是document
  • 標準
  • 使用JavaScript開發網頁時
    主要是操作DOM物件

以下是目前有的物件選擇器

document.getElementById('物件ID')
//以物件的 ID 屬性選取單一元件
document.getElementsByClassName('物件的class name')
//以物件的 Class 屬性選取多個元件
document.getElementsByName('物件名稱')
//以物件的 Name 屬性選取多個元件
document.getElementsByTagName('標籤類型')
//選取多個 HTML 標籤為 "標籤類型" 的元件
document.getElementsByTagNameNS('XML命名空間', '標籤類型')
//選取多個在某個 XML命名空間 下標籤類行為 "標籤類型" 的標籤，只能在.xhtml下使用
document.querySelector('CSS Selector')
//使用CSS選擇器選取首個相符物件
document.querySelectorAll('CSS Selector')
//使用CSS選擇器選取多個相符物件

物件選擇器

走訪節點

一個HTML架構(註：紅色為aNode)

aNode.parentElement

走訪節點(續)

aNode.priviusElementSibling

aNode.nextElementSibling

aNode.children

新增/刪除物件

刪除物件

//1.建立物件參考
var element = document.createElement('標籤名稱');
//2.設定物件內容
element.innerHTML = 'OOXX';
//3.新增在文件中
    //在後面
    document.getElementById('...').appendChild(element);
    //在前面
    document.getElementById('...').insertBefore(element, document.getElementById('id').childNodes[0]);
//1.建立物件參考
var element = document.getElementById('ID');
//2.刪除物件
element.parentNode.removeChild(element);

新增物件

修改物件內容

element.innerHTML = 'foo';

修改物件CSS屬性

物件參考.style.<css屬性> = '屬性內容';

事件處理(Event Listener)

  1. 寫在HTML屬性標籤
    • 缺點：破壞HTML只有框架的原則
      可讀性低
  2. .on<event>(callback)
    • 優點：維持HTML基本架構
    • 缺點：事件只能指定一次
  3. .addEventListener('event', callback)
    • 優點：維持HTML基本架構
      事件可指定多次(後指定先執行)
    • 缺點：舊版本IE不支援此方法
      ((使用.attachEvent('event', callback)
var abc = function (event) {
    alert('安安~');
}

先定義Callback Function

詳情請見下面釋例

寫在HTML屬性標籤

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div onclick="abc();"></div>
    </body>
</html>

事件處理(Event Listener) (續)

element.on<事件名>(callback)

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="adiv"></div>
        <script type="text/javascript">
            document.getElementById('adiv').onclick = abc();
        </script>
    </body>
</html>

事件處理(Event Listener) (續)

element.addEventListener("事件名",callback)

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="adiv"></div>
        <script type="text/javascript">
            //For other browser
            if(document.getElementById('adiv').addEventListener)
                document.getElementById('adiv').addEventListener('click', abc);
            //For IE versions prior to IE 9
            else document.getElementById('adiv').attachEvent('click', abc);
        </script>
    </body>
</html>

事件處理(Event Listener) (續)

XSS Attacking

Introduction

        跨網站指令碼攻擊(Cross-side scripting，XSS，用CSS會和層疊樣式表搞混所以使用XSS)

        最初Netscape推出JavaScript時，這些工程師也發現從網頁伺服器可能會傳某些程式碼到客戶端瀏覽器的安全風險；目前許多瀏覽器也有做某些防範，擋掉了某些跨網站攻擊的風險(比如：你只是開我的網站，我就把你的FB個人資料A光光了)

不過瀏覽器擋的只是部分，我們來看個有趣的故事

故事發生在我同學身上，資訊工程系三年級上學期有堂選修叫Ajax程式設計，這堂課期末要我們交個網站，他設計了一套留言板如下

然後我另一個同學留了一個言，如下

<script>document.write(/HACK BY JIGSAW/)</script>

結果網頁就變成了這樣

後來Debug完之後...青蛙終於變回王子了

但...好日子不持久

我們來注意一下這個網頁可以由使用者建立或修改的部分有什麼吧

A：留言

↑B：

使用者

神人再度出馬...

但是如果是直接註冊新帳號的話...自己也會被攻擊阿

於是...他用另一個帳號找到留言的API......

GG WP again..................

參考資料

  • 簡報基礎    :http://www.slideshare.net/josephj/javascript-14734172
  • Wikipedia  :http://zh.wikipedia.org/
  • w3school   :http://http://www.w3schools.com/
  • 故事來源     :http://slides.com/jigsawye/ajax-final-report
  • ES6相關      :
  • 其他範例來源:
    • WebGL  :https://developer.mozilla.org/zh-TW/demos/tag/tech:webgl
    • Unity      :http://unity3d.com/5

Thanks For Watching

Made with Slides.com