backup.pug

section
  h1 What is "Program"?
  hr

  br
  p.fragment A program is an <em>abstract</em> <u>state machine</u>.
  br
  p.fragment A <u>behavior</u> of a state machine is a sequence of states.
  br
  p.fragment A <u>state</u> is an assignment of all variables.
  br
  p.fragment A <u>variable</u> is an <u>object</u> in computer memory.

section
  h1 State Machines
  hr

  br
  img(src = "./0-intro/figs/button-state-machine.jpg",
      alt = "State Machine for Buttons",
      width = 400, height = auto)

section
  h1 State Machines
  hr

  br
  img(src = "./0-intro/figs/vending-state-machine.png",
      alt = "State Machine for Beverage Vending Machine",
      width = 500, height = auto)

section
  p C is a <span class="hl">imperative</span> programming language.
  p (Imperative: 命令式的)

//- Why C?
section
  h2 Why C?
  hr

  br
  img(src = "./0-intro/figs/pl.jpg" alt = "PL"
      width = 700 height = auto)
  p Hundreds of programming languages

section
  h2 C is General-Purpose
  hr

  br
  <div class="row">
    <div class="column">
      img(src = "./0-intro/figs/linux-c.png" alt = "Linux in C"
        width = 600 height = auto)
    </div>
    <div class="column">
      img(src = "./0-intro/figs/honor-of-kings.jpg", alt = "Honor of Kings",
          width = 600, height = auto)
    </div>
  </div>

  p In principle, you can do whatever you want using C.

section
  h2 C is (still) Popular
  hr

  img(src = "./0-intro/figs/PL-IEEE.png" alt = "PL IEEE"
      width = 500 height = auto)

section
  h2 "Spirit of C"
  hr

  br
  p(class = "r-fit-text") "Keep the language small and simple."

  br
  br
  p.fragment What you see <em>is</em> what you get. &emsp; (<code>a + b</code>)

section
  h2 "Spirit of C"
  hr

  br
  p "Don't prevent the programmer from doing what needs to be done."

  br
  br
  p.fragment ???

section
  h2 "Spirit of C"
  hr

  br
  p "Make it <mark>fast</mark>, even if it is not guaranteed to be <mark>portable</mark>."


//- How to learn?
section
  h2 How to Learn?
  hr

  img(src = "./0-intro/figs/keep-calm-dont-panic.jpg" alt = "Keep Calm and Don't Panic"
    width = 400 height = auto)

  p Beginners are welcome!


section
  h2 How to Learn?
  hr

  br
  p 20% theory + 80% coding
  img(src = "./0-intro/figs/theory-practice.jpeg" alt = "Theory vs. Practice"
      width = 500, height = auto)
  p(class = "r-fit-text") I can teach you theory; but I cannot write code for you.

section
  h2 How to Learn?
  hr

  br
  img(src = "./0-intro/figs/step-by-step.jpg" alt = "Step by Step"
    width = 500 height = auto)

  p Don't expect to learn everything at once.
  p (<code>pointers: *</code>)

section
  h2 Dev-C++
  hr

  p Open Source C/C++ IDE for Windows
  img(src = "./0-intro/figs/DevC++.jpg" alt = "The C Programming Language"
      width = 600 height = auto)

  p
    a(class='button' href='https://www.bilibili.com/video/BV1sP4y1p7n5') <small>Wins-DevC++ @ bilibili</small>

section
  h2 Hello World
  hr

  pre
    code(class="lang-c")
      script(type="text/template").
        #include <stdio.h>

        int main() {
          printf("Hello World");
          return 0;
        }

section
  h2 Comments
  hr

  img(src = "./0-intro/figs/less-comments.jpeg" alt = "Less Comments"
    width = 400 height = auto)

  p Replace verbose comments with clear code.

section
  h2 How to Learn?
  hr

  br
  img(src = "./0-intro/figs/gates-programming.jpeg" alt = "Bill Gates on Programming",
      width = 800 height = auto)

//- section
//-   h2 Xiaobo Wang (王小波)
//-   hr

//-   br
//-   img(src = "./1-io/figs/Wang.jpeg" alt = "Xiaobo Wang"
//-     width = 500 height = auto)
//-   p Xiaobo Wang ($5\text{-}13\text{-}1952 \sim 4\text{-}11\text{-}1997$)

//- section
//-   h2(style="font-variant: small-caps") Recommend
//-   img(src = "./1-io/figs/5-stars.png" alt = "Recommend"
//-       width = 300, height = auto)
//-   hr

//-   br
//-   p <code>int number = 100;</code>
//-   br
//-   p <code>number</code> has also been <em>initialized</em>.

      tr
        td %o
        td unsigned int
        td unsigned octal (dddd)
      tr
        td %u
        td unsigned int
        td unsigned decimal (dddd)
      tr
        td %x, %X
        td unsigned int
        td unsigned hexadecimal (dddd)

section
  h2 Program
  hr

  br
  <div class="row">
    <div class="column">
      img(src = "./1-io/figs/program-wirth.png" alt = "Book by Wirth"
        width = 400 height = auto)
      p 程序 = 数据 + 操作
    </div>
    <div class="column">
      img(src = "./1-io/figs/Wirth.jpg" alt = "Wirth"
        width = 450 height = auto)
      p Niklaus Wirth ($1934 \sim$)
      p <small> Turing Award ($1984$) for developing a sequence of innovative computer languages</small>
    </div>
  </div>

section
  h2 Hello World (Standard C)
  hr

  br
  pre
    code(class="lang-c")
      script(type="text/template").
        #include <stdio.h>

        int main() {
          printf("Hello World\n");
          return 0;
        }
  br
  p <code>main</code> (主) 函数是程序的入口

section
  h2 Game: Guess the Number
  hr

  img(src = "./0-intro/figs/guess-the-number.png",
      alt = "Guess the Number",
      width = 500, height = auto)

  p
    a(class = "button" href = "https://www.abcya.com/games/guess_the_number") Guess the Number

section
  h2 Declarations, Expressions, and Statements (Informal)
  hr

  br
  p <code>double circumference = <mark>0</mark>;</code>
  p <code>circumference = <mark>2 * PI * radius</mark>;</code>

  br
  p.fragment Declarations declare <em>variables</em>.
  p.fragment Expressions express <em>values</em>.
  p.fragment Statements state <em>actions</em>.

section
  h2 Expressions (Formal)
  hr

  br
  p <code>circumference = <mark>2 * PI * radius</mark>;</code>
  br
  ul
    li Variables are expressions;
    li Constants are expressions;
    li If $E_{1}$ and $E_{2}$ are expressions, then $E_{1} \circ E_{2}$ is an expression.
      ul
        li ($\circ$ is an operator)

section
  h2 Statements (Formal)
  hr

  br
  ul
    li Assignment statements
    li If statements
    li For statements
    li $\ldots$

section
  h2 Compound Statements (Blocks)
  hr

  p Declarations and statements surrounded by <code>{}</code>.
  img(src = "./2-if-for-array/figs/compound-statement.png" alt = "Compound Statement"
    width = 350 height = auto)
  h3 Always use <code>{}</code>.