1. Course ID: 210156
  2. Time:
  3. Classroom:
  4. Required Software:
    1. PuTTY 0.83
    2. Vim 9.2
    3. Microsoft Edge
    4. Mozilla Firefox (newest)
    5. Google Chrome (newest)
  5. Course Name: JavaScript Programming (JavaScript程式設計)
  6. Overview: This course has been prepared for programmers, by a programmer. So, in order to get the most from it, you should enjoy writing programs everyday, and have already known object-oriented programming languages such as C++, Python, or PHP. Thus, the course's target audience is programmers who want to learn JavaScript quickly and properly, and JavaScript programmers who want to deepen their skills and/or look up specific topics.
  7. Prerequisite: C++ Programming
  8. Target Students: 1234
  9. Upper-limit: 16 students
  10. Instructor: Dr. Quincy Wu
  11. TA:
  12. Credit: 3
  13. Grading Criteria:
  14. Discussion Platform: Stack Overflow[Stack Overflow]
  15. 上課注意事項: 暑假期間每週上課六小時。四小時為非同步，請提前以自己的學習速度觀看影片，必要時可調整速度或重覆觀看。二小時同步上課，其中一小時輪流講解（自己或別人的程式），並接受同學提問。另一小時線上解題並交互觀摩。
  16. Textbook:
  17. References:
  18. Collaborative Learning Strategies:
    1. Team Assisted Instruction for Homework
    2. Think-Pair-Share for Online Test
    3. Group Investigation for Term Project
  19. 彈性教學 (Flexible Teaching): 以本學期課程為範圍，以二至三人為一組，參考網路資源，討論並完成期末專題（六小時）。程式及簡報繳交期限在八月底。
  20. Schedule in 2026
    1. Introduction - The Power of JavaScript
      1. Console
      2. DOM
      3. Event
      4. Form
      5. [Further Reading] Speaking JavaScript: Part I - JavaScript Quick Start
    2. HyperText Markup Language (HTML) & Form
      1. h, p, ol, ul, li, img, a, title
      2. font, table,
      3. div, span, and Styles
      4. input form
      5. [Further Reading] W3Schools Tutorials
      6. [Tips] 游標停在一個 start tag 時標出 end tag
    3. Function
      1. Function Expression
      2. Debugger
        • [Demo] GCD
        • "Step" vs. "Step Into"
      3. Arrow Functions
      4. Event Handler
      5. Modules
        • Modular Programming
    4. Arrays
      1. Array
      2. Object
      3. Spreak Operator
      4. Destructuring
    5. Strings
      1. Match
      2. Regular Expression
        • [Demo] Words ending with a vowel
    6. Objects & Classes
      1. Construct an Object
      2. Properties and Methods
      3. Class & Inheritance
      4. JavaScript Objects
    7. Document Object Model (DOM)
      1. [Demo] createElement
      2. [HW] JavaScript Form Validation
    8. JavaScript Object Notation (JSON)
      1. [Ex] JSON Array
    9. WebSocket
      1. Server
      2. Client
      3. [Ex] Word Lookup in a Dictionary
    10. Cookie
      1. Inspect Cookies in Developer Tools
      2. Set/Get Cookies in JavaScript
      3. [Demo] Remember Me for 2 Minutes
    11. JavaScript Canvas
      1. [Demo] Shapes with Holes
      2. Rotate 360 Degrees
      3. [Code] Solar System
    12. React.js
      1. [Demo] 9x9 Multiplication Table
      2. [Demo] Horse Racing (3)
      3. [Demo] Login
    13. JSX
      1. Convert Some HTML to JSX
      2. Extract a Component
      3. [Demo] 9x9 Multiplication Table (2)
      4. Translator from HTML to JSX
    14. JSX with Event Handler
      1. [Demo] Font Size
      2. [Demo] Zip Code
      3. Set Character Encoding
    15. State in React
      1. [Demo] CSIE Teachers
      2. [Demo] BgColor of 9x9 Multiplication Table
    16. Bootstrap
      1. Include from CDN
      2. Color
      3. Grid System
      4. Responsive Web Design (RWD)
      5. Typography
      6. Form
    17. TypeScript (1): Introduction & Setup
      1. Basic Types & Type Annotations
      2. Functions & Objects
      3. Type Narrowing & Type Guards
    18. TypeScript (2): Core TypeScript Features
      1. Interfaces, Types & Object-Oriented TS
      2. Generic Functions
      3. Advanced Types
    19. TypeScript (3): Additional Topics
      1. Modules, Namespaces & Declaration Files
      2. Error Handling, Async & Modern JS Features
      3. Configuration & Tooling
  21. Educational Goals:
    1. 配合國家經濟發展，培養符合資訊產業需求的工程技術人才
    2. 配合國家科技發展，培養具備前瞻資訊科技研發潛能的人才
    3. 配合全球永續發展潮流，培養具備國際視野、工程倫理、人文關懷及社會責任的科技人才
  22. Core Capabilities:
    1. 具備資訊科學基礎數理知識並應用於發掘、分析與解釋數據的能力
    2. 具備程式設計基礎知識並應用於設計及實作資訊軟體的能力
    3. 具備使用英文閱讀資訊領域技術文件及學術論文的能力
    4. 具備團隊合作及獨立執行資訊工程領域學術研究的能力
    5. 理解資訊工程專業倫理、敬業態度、環境保護及社會責任

Exercises

  1. Numbers
    1. [HW] Chickens and Rabbits (雞兔同籠)
    2. [HW] BMI (Body Mass Index)
    3. [HW] What day is January 1st?
  2. Statements
    1. [HW] Syracuse Sequence
    2. [HW] Tree of Stars
    3. [HW] Switch Case
  3. Exception handling
    1. [HW] lastModified
    2. [HW] 1A2B
    3. [HW] Monty Hall
  4. Functions
    1. [HW] setAttribute()
    2. [HW] Pass Functions as Arguments to Another Function
    3. [HW] Indefinite Number of Arguments
    4. [Ex] Callback cards
    5. [Ex] Counter
  5. Strings
    1. Validate Email Address
    2. Palindrome
    3. Caesar Cipher
  6. Variables: Scopes, Environments, and Closures
    1. [HW] Immediately Invoked Function Expression (IIFE)
    2. [HW] scrollIntoView()
    3. [HW] setProperty()
  7. Objects and Inheritance
    1. [HW] Enter Personal Information
    2. [Ex] Horse Racing (2)
    3. [Ex] Falling Objects
    4. [Ex] Clock
  8. Arrays
    1. [Ex] Horse Racing
    2. [Ex] Rolling a Dice
    3. [Ex] Two Dices
    4. 西元和中國年份對應: 清光緒26年。
    5. I am the 4th
    6. [HW] Sorting an Array of Objects
    7. [HW] Sudoku
  9. Regular Expressions
    1. [HW] Email Address Validation
    2. [HW] Registration Verification
    3. [HW] Colorize C++ Code
    4. [HW] Binary Tree
    5. [HW] Complete/Full/Perfect Binary Tree
    6. [HW] Daily Report
  10. Dates
    1. [HW] Date Conversion
    2. [HW] Date Calculator
  11. Math
    1. [HW] Horse Racing
    2. [HW] Quick Sort
    3. [HW] styleSheet()
  12. JSON
    1. [HW] Add an Event Listener
    2. [HW] FileReader
    3. [HW] JSON.parse()
    4. [HW] Air Quality

Further Readings

  1. JavaScript.info
  2. JavaScript Tutorial - W3Schools
  3. Introduction to the DOM - Mozilla Developer Network
  4. Jitsi WebRTC
  5. CSS (Cascading Style Sheet)

Presentation Topics

Related Links

  1. MOE 數位學習課程認證指標