Please enable JavaScript.

Coggle requires JavaScript to display documents.

台大Javascript 課程, 20200203 (方法計劃假設/分析判斷 (Javascript (main.js (變數 (可以儲存資料的空間…

- - - - jQuery
      - HTML5 API
      - Localstorage瀏覽器儲存
      - Google Firebase API
      - Javascript(ES5&ES6)
    - - NPM 套件管理系統
      - EJS 模板系統
      - Node.js & Express
  - - - /多行註解/ 是多行註解
      - 變數
        
        可以儲存資料的空間
        
        命名宣告
        
        除了一個單字外，其餘單字都要大寫
        
        let 在迴圈內, 若使用var則會在外面被使用
        
        let myName = 'Andy'
        
        1 more item...
        
        let vari;
        console.log(vari)
        
        也可以不給值
      - 常數
        
        建立一名為myID的常數
        
        const myID = 'A12345678';
        console.log('myID', myID);
        
        常數不可賦予新值
    - - console.log('Hellow world')
        
        用chrome 的檢查來確認程式是否正確
      - alert("Hellow world")
        
        會在視窗中跳出alert 視窗
    - - 單引號 ' '
      - 雙引號 " "
      - 寫法
        
        過去寫法
        
        const intro = 'Hi, 我叫' + myName + '今年' + myAge + '歲';
        console.log(intro);
        
        近年來可用
        
        鍵盤左上角 ``
        
        const intro = Hi,我叫${myName}今年${myAge}歲;
        console.log(intro);
        
        遇到字串裡有特殊符號 EX. '
        
        在特殊符號前面加入\
        
        const name = 'Conan O\'Brien'
        
        name
        
        Conan O'Brien
        
        用雙引號
        
        const conan = "Conan O'Brien";
        
        可以使用typeof 檢查是字串還是數字
        
        typeof name
        
        "string"
    - - form
        
        呼叫函數攔截form填入的資訊
        
        onsubmit
        
        輸入自訂函數 createIntro
        
        onsubmit="createIntro(event)"
      - Intro.js
        
        設計一名為creatIntro 的函數
        
        函數將接受傳遞進來的event
        
        函數: 一系列的動作
        
        function createIntro(event) {
        }
        
        // 取消瀏覽器預設會重整的表單行為
        
        1 more item...
        
        // 取得名字
        
        1 more item...
        
        // 產生自我介紹
        
        1 more item...
        
        // 顯示到畫面上
        
        1 more item...
    - - document
      - windows.navigator
- - - - const num1 = 10;
        
        const num2 = 2;
        
        console.log(num1 + num2); // 12
        
        console.log(num1 - num2); // 8
        
        console.log(num1 * num2); // 20
        
        console.log(num1 / num2); // 5
        
        看餘數是多少
        
        console.log(10 % 3); // 1
      - 數字處理
        
        轉成浮點數(小數點)
        
        parseFloat("10.02")+12
        
        22.02
        
        轉成整數數字
        
        parseInt("100") +12
        
        112
        
        四捨五入
        
        Math.round(score)
        
        但要有小數點
        
        Math.round(3.1415*100)/100
        
        無條件進位
        
        Math.ceil
        
        無條件捨去小數點
        
        Math.floor
      - // 可從Input 取得值並轉換為數字的函數
        
        function getScore() {}
        
        let score = document.getElementById('chineseScoreInput').value;
        
        score = parseInt(score);
        
        console.log('[分數]', score);
        
        // 把結果輸出
        
        return score;
        
        在function calculatorGPA(event) { } 中加入const
        
        const chineseScore = getScore('chineseScoreInput');
        
        function getScore(inputId) {}
        
        // 取得指定id裡面所填的值
        
        let score = document.getElementById(inputId).value;
        
        // 轉成數字
        
        score = parseInt(score);
        
        console.log('[分數]', score);
        
        // 把結果輸出
        
        return score;
        
        在function calculatorGPA(event) { } 中加入const
        
        const englishScore = getScore('englishScoreInput');
        
        在html 新增一個button type=button onclick=function()
      - 布林 boolean 運算
        
        // TODO: 完成GPA計算機邏輯
        
        let gpa;
        
        // 如果平均分數 >=90
        
        if (avgScore >= 90) { }
        
        // 設定GPA是A+
        
        gpa = 'A+'
        
        console.log('[GPA]', gpa)
        
        else if (avgScore >= 80) { }
        
        1 more item...
        
        //上述條件都不符合
        
        1 more item...
        
        判斷式若先滿足第一個滿足，就不會執行後面的判斷式
        
        判斷是否相等
        
        連是否是字串及數字是否相等，較嚴格
        
        console.log('5' === 2+3)
        
        false
        
        只判定內容是否相同
        
        console.log(5 == 2+3)
        
        true
        
        判斷是否不等於
        
        console.log(5+4 !== 10) // true
        console.log(5+5 !== 10) // false
      - // TODO: 顯示成績報告於畫面上
        
        const str = `
        
        <div class="alert alert-secondary">
        
        國文:${chineseScore}
        
        英文:${englishScore}
        
        數學: ${mathScore}
        
        GPA:${gpa}
        
        </div>
        
        `;
        
        console.log(str);
        
        // 取得div
        
        const result = document.getElementById('result')
        
        console.log(result);
        
        // 改變div內容
        
        result.innerHTML = str;
        
        根據分數變更alert 的顏色
        
        let color = 'secondary'
        
        // 想要保留之前的資料
        
        result.innerHTML = ${result.innerHTML} ${str};
      - 賦值運算子
        
        let card = 500;
        
        設定盒子內更新值為card+120
        
        card = card + 120;
        
        card+=100;
        
        console.log('[餘額]', card);
- - - - input#numInput
    - - 檢查是否有在20~30之間
        
        console.log(5 > 3); // true
        
        邏輯運算子
        
        或
        
        ||
        
        true || false
        
        1 more item...
        
        false ||false
        
        1 more item...
        
        且
        
        &&
        
        false && false
        
        1 more item...
        
        const a = 20,
        b = 30;
        
        1 more item...
        
        將條件反過來
        
        !
        
        let condition = !(num >= a && num <= b)
  - - - name:'Andy',phone:'0912345678',
        
        電話，郵遞區號是字串
        
        年齡是數字
        
        物件
    - - 最後一個不用加逗號
    - - console.log(user1.name);
        
        user1的名字
    - - user1.name = 'Josh';
      - user1['name']='Tony';
    - - user1.email = 'andy@gmail.com';
      - user1['email'] = 'tony@gmail.com';
    - - console.log(user1.address.city);
    - - delete user1.email;
    - - intro: function () {}
        
        const str = Hi;
        console.log(str);
        
        // 在物件函數內使用this
        
        this代表這個物件
        
        const str = Hi, 我叫${this.name}住在${this.address.city};
      - intro: function (greeting) { }
      - 要執行函數才會執行
        
        user1.intro();
      - 用return 把資料放到函數外面
        
        return 'str'
  - - - 函數的命名第一字大寫
        
        function User() {
        }
        
        建構式裡頭是function所以是用"="
      - this
        
        this在建構式裡
        
        代表即將被建構式產生的物件
      - 在外面建立一個用建構式函數產生一個物件
        
        const user1 = new User('Eric');
        
        就會把User裡面的值傳到建構式的變數
        
        建構式裡的物件也可以當為函數
        
        使用this當作外面呼叫一次的變數
- - - - for (let key in this.purchaseHistory)
    - - https://momentjs.com/
        
        https://cdnjs.com/
        
        https://cdnjs.com/libraries/moment.js
        
        const time=moment(record.createdAt).format('YYYY年MM月DD日 HH:mm:ss');
    - - const luckyNums = [1, 3, 9, 12, 22, 32];
        
        第一筆資料叫0
        
        叫出每個index中的值
        
        傳統迴圈
        
        // console.log(i);
        
        // 透過索引取回數字
        
        const n=list[i];
        
        console.log(第${i+1}筆數字是${n});
        
        }
        
        for (let i=0;i<list.length;i++){
        
        forEach 寫法
        
        mdn mozilla 可參考
        
        // 新語法寫法
        
        // 把list裡的資料一個一個取出
        
        // 陣列.forEach(function(每個陣列內的資料, 資料的索引){})
        
        list.forEach(function(x, index){
        
        // console.log(x);
        
        console.log(第${index+1}筆資料是${x})
        
        })
        
        檢查是否是陣列
        
        console.log(Array.isArray([]))
        
        新增陣列
        
        const arr=[];
        arr.push(50);
        
        刪除陣列
        
        // 從索引2的位置移出1筆資料
        arr.splice(2,1)
- - - - jason
    - - 表格類資料
- - - - 引用jquery
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    - - 產生顯示卡片js
        
        把卡片內容套在卡片內容
        
        // 把容器加入每個產品卡片UI
        container.innerHTML +=createProductCardElement();
        
        要用 "+="，而不是用"="
        
        // 預設要顯示tags的html是個空字串
        
        let tagsElement='';
        
        1 more item...
    - - jQuery('#productRow').append(card);
        
        append是加入的意思
    - - // 綁定productRow內部動態產生的form標籤的submit事件
    - - installation
        
        copy script to index.html
    - - 存在瀏覽器中
        
        瀏覽器中檢查
        
        Application
        
        Local storage (一定要字串)
        
        會存在直到刪除資料
        
        物件轉字串
        
        1 more item...
        
        把字串轉回物件
        
        1 more item...
        
        Session storage (一定要字串)
        
        只在現在這個分頁
        
        https://developer.mozilla.org/zh-TW/docs/Web/API/Window/localStorage
        
        建立物件
        
        localStorage.setItem('myCat', 'Tom');
    - - nn.splice(1,1)
- - - - download LTS(long turn support) version
        
        insstall Node.js
        
        到windows搜尋powershell
        
        以系統管理員執行
        
        輸入get-executionPolicy
        
        確認是否為Restricted
        
        1 more item...
  - - - 要加入沒有權限的人不能進入
        
        路由 route : 請求(request)各式不同的路徑，不同頁面
        
        可以在路由中做判斷式
        
        由模板(類HTML語言)來產生
        
        EJS模板語言
        
        1 more item...
  - - - 檢視
        
        終端機
        
        檢查是否已經安裝node.js
        
        npm -v
        
        npm i(install) -g(glable) express-generator (package 名稱)
        
        Mac使用者
        
        sudo npm i -g express-generator
  - - - express --view=ejs myapp
        
        輸入ls可以看到路徑中有那些
        
        路徑指到有package JSON
        
        輸入npm install
        
        輸入npm i -g nodemon (曾經輸入過就不用再輸入)
        
        輸入nodemon
        
        1 more item...
        
        Mac使用者
        
        sudo npm i -g nodemon --unsafe-perm
  - - - <%= title %> 是ejs標籤
  - - - 安裝其中一個套件
        
        npm install --save popper.js
  - - - axios.post
- - - - active
- - - - axios.post
    - - 放模組名稱
        
        下指令 npm install
        
        建立package.json鐘的版本放在node modules
    - - 前面加入 : 是代表變數
        
        動態取得路徑num
        
        req.params
        
        NaN (not a number)
        
        要變成變數就在指令後面加上 . 變數名
        
        res.locals.q
    - - 可以在ejs中使用function
        
        不是使用forEach(function(){})
        
        而是用forEach(變數名 =>{})
        
        若有多變數forEach((變數名,變數名) =>{})
        
        每一行都要加<% %>, 但不用加=
      - 變數名要用 <%= 變數 %> 包起來
    - - firebase
        
        前往主控台
        
        建立專案
        
        寫專案名稱
        
        布建
        
        database
        
        1 more item...
      - 取得資料
        
        await
  - - - 可以重開機
      - 或在bin資料夾中的 var port 改成別的
- - - - 服務帳戶
        
        產生新金鑰
        
        放到專案根目錄中
        
        改名為key.JSON
  - - - desc是反向的意思
  - - - Authentication
        
        project overview
        
        新增應用程式
        
        web
- - - - middleware
        
        知道你已經登入
        
        存一段session cookie 亂碼可以跟Firebase要回登入訊息
        
        設定過期時間5天
    - - 在database中加入管理者
  - - - 一、需安裝軟體：安裝heroku
        
        Heroku CLI
        https://devcenter.heroku.com/articles...
    - - https://git-scm.com/
        
        上述軟體安裝完成後必須重新啟動Visual Studio Code
        
        1.6 Getting Started
        
        二、初次安裝好Git需要做的設定：
        
        git config --global user.name "你的名稱"
        git config --global user.email 你的Email
        
        Git初次設定官方文件
        https://git-scm.com/book/en/v2/Gettin...
    - - 在Heroku open in app
    - - git add .
        
        git commit -m "string"
        
        git push heroku master
    - - heroku login
    - - git init
        
        git add .
        
        git commit -m "專案目前的狀態紀錄"
        
        heroku git:remote -a HEROKU專案名稱
        
        推到Heroku
        
        git push heroku master