1. Course ID: 210156
2. Time: Friday 14:10-17:00
3. Classroom: TC-208 (ext. 94334492)
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:
    • Quiz (20%)
    • Homework (20%)
    • Online Participation (10%)
    • Forum Discussion (20%)
    • Term Project (20%)
    • Demo (10%)
14. Discussion Platform: Stack Overflow
15. Textbook:
    • Alex Banks, Eve Porcello, "Learning React", 2nd Edition, O'Reilly Media, June 2020. (307 pages)
      
16. References:
    • [W3Schools] JavaScript Tutorial
    • Axel Rauschmayer, Speaking JavaScript, O'Reilly, Mar 12, 2014.
    • [eBook] Jeremy Keith and Jeffrey Sambells, DOM Scripting : Web Design with JavaScript and the Document Object Model, Springer-Verlag, 2005.
    • [eBook] Cody Lindley, DOM Enlightenment: Exploring JavaScript and the Modern DOM, O'Reilly, 2013.
    • [eBook] Cody Lindley, jQuery Enlightenment, O'Reilly, 2009.
    • Terry McNavage, JavaScript for absolute beginners, Apress 2010.
    • Nicholas C. Zakas, "The Principles of Object-Oriented JavaScript", No Starch Press, 2014. (local copy)
    • Peter Lubbers, Brian Albers, and Frank Salim, "Pro HTML5 Programming", Apress, 2nd edition, 2011.
    • Vanessa Wang, Frank Salim, and Peter Moskovits, The Difinitive Guide to HTML5 WebSocket
    • Tom Hughes-Croucher and Mike Wilson, Node: Up and Running
    • ECMAScript(R) 2015 Language Specification
17. Collaborative Learning Strategies:
    1. Team Assisted Instruction for Homework
    2. Think-Pair-Share for Online Test
    3. Group Investigation for Term Project
18. 彈性教學 (Flexible Teaching): 以本學期課程為範圍，以二至三人為一組，參考網路資源，討論並完成期末專題（六小時）。程式及簡報繳交期限在八月底。
19. 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
          • [Ex] Callback cards
       2. Debugger
          • [Ex] GCD
          • "Step" vs. "Step Into"
       3. Arrow Functions
          • [Ex] Counter
       4. Modules
          • Modular Programming
    4. Arrays
       1. Array
          • [Ex] Horse Racing
          • [Ex] Rolling a Dice
          • [Ex] Two Dices
       2. Object
       3. Spreak Operator
       4. Destructuring
    5. Strings
       1. Match
       2. Regular Expression
          • [Ex] Words ending with a vowel
    6. Objects & Classes
       1. Construct an Object
       2. Properties and Methods
          • [Ex] Horse Racing (2)
       3. Class & Inheritance
          • [Ex] Falling Objects
       4. JavaScript Objects
          • [Ex] Clock
    7. Document Object Model (DOM)
       1. [Ex] 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. [Ex] Remember Me for 2 Minutes
    11. JavaScript Canvas
        1. [Ex] Shapes with Holes
        2. Rotate 360 Degrees
        3. [Code] Solar System
    12. React.js
        1. [Ex] 9x9 Multiplication Table
        2. [Ex] Horse Racing (3)
        3. [Ex] Login
    13. JSX
        1. Convert Some HTML to JSX
        2. Extract a Component
        3. [Ex] 9x9 Multiplication Table (2)
        4. Translator from HTML to JSX
    14. JSX with Event Handler
        1. [Ex] Font Size
        2. [Ex] Zip Code
        3. Set Character Encoding
    15. State in React
        1. [Ex] CSIE Teachers
        2. [Ex] BgColor of 9x9 Multiplication Table
    16. Bootstrap
    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
20. Topics:
    1. JavaScript's Syntax
    2. Values
    3. Operators
    4. Booleans
    5. Numbers
       1. [HW] Chickens and Rabbits (雞兔同籠)
       2. [HW] BMI (Body Mass Index)
       3. [HW] What day is January 1st?
    6. Strings
    7. Statements
       1. [HW] Syracuse Sequence
       2. [HW] Tree of Stars
       3. [HW] Switch Case
    8. Exception handling
       1. [HW] lastModified
       2. [HW] 1A2B
       3. [HW] Monty Hall
    9. Functions
       1. [HW] setAttribute()
       2. [HW] Pass Functions as Arguments to Another Function
       3. [HW] Indefinite Number of Arguments
    10. Variables: Scopes, Environments, and Closures
        1. [HW] Immediately Invoked Function Expression (IIFE)
        2. [HW] scrollIntoView()
        3. [HW] setProperty()
    11. Objects and Inheritance
        1. [HW] Enter Personal Information
    12. Arrays
        1. [HW] Sorting an Array of Objects
        2. [HW] Sudoku
    13. 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
    14. Dates
        1. [HW] Date Conversion
        2. [HW] Date Calculator
    15. Math
        1. [HW] Horse Racing
        2. [HW] Quick Sort
        3. [HW] styleSheet()
    16. JSON
        1. [HW] Add an Event Listener
        2. [HW] FileReader
        3. [HW] JSON.parse()
        4. [HW] Air Quality
    17. Standard Global Variables
    18. Unicode and JavaScript
    19. A Meta Code Style Guide
    20. Language Mechanisms for Debugging
    21. Subclassing Built-ins
    22. JSDoc: Generating API Documentation
    23. Libraries
    24. Module Systems and Package Managers
21. Presentation Topics
    • jQuery Tutorial
    • React
    • Bootstrap
    • HTMX
    • AJAX
    • WebSocket
    • WebRTC
22. Educational Goals:
    1. 配合國家經濟發展，培養符合資訊產業需求的工程技術人才
    2. 配合國家科技發展，培養具備前瞻資訊科技研發潛能的人才
    3. 配合全球永續發展潮流，培養具備國際視野、工程倫理、人文關懷及社會責任的科技人才
23. Core Capabilities:
    1. 具備資訊科學基礎數理知識並應用於發掘、分析與解釋數據的能力
    2. 具備程式設計基礎知識並應用於設計及實作資訊軟體的能力
    3. 具備使用英文閱讀資訊領域技術文件及學術論文的能力
    4. 具備團隊合作及獨立執行資訊工程領域學術研究的能力
    5. 理解資訊工程專業倫理、敬業態度、環境保護及社會責任

Further Readings

1. JavaScript.info
2. JavaScript Tutorial - W3Schools
3. Introduction to the DOM - Mozilla Developer Network
4. Jitsi WebRTC

Exercises

1. Good Examples of Student Exercises
2. 西元和中國年份對應: 清光緒26年。
3. I am the 4th

Related Links

1. MOE 數位學習課程認證指標
2. CSS (Cascading Style Sheet)
   • W3Schools Tutorials
   • 1keydata Tutorials
   • [YouTube] CSS Tutorials for Beginners
   • HW: Interactive webpages