womangling/lesson-0.html at main · Noratrieb/womangling · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
    <title>Womangling</title>
  </head>
  <body>
    <main>
      <div class="content" id="content-area">
        <h1>
          <a class="root-link" href=".">Learn C++ Itanium Symbol Mangling</a>
        </h1>
        <h2>Lesson 0: Intro and C names</h2>
        <noscript>
          <p>
            Warning: You have JavaScript disabled. While the content is still
            viewable, interactive exercises will not work. Consider enabling
            JavaScript for this website.
          </p>
        </noscript>

        <section data-step="0" class="step">
          <p>
            Welcome to the interactive Itanium C++ mangling learning website! In
            this course you will learn everything there is to know about Itanium
            C++ Mangling, especially the things you've never wanted to know.
          </p>
          <p>
            For every exercise, there will be a small quiz. If you complete the
            quiz, you can continue
          </p>
          <quiz-section>
            <p>To complete the first quiz, press the button below.</p>
            <form data-challenge="1">
              <button
                data-challenge-submit="1"
                class="submit-challenge"
                type="submit"
              >
                Complete first challenge!
              </button>
              <div class="error"></div>
            </form>
          </quiz-section>
        </section>
        <section data-step="1" class="step">
          <p>
            Congrats, you just completed your first challenge! Good job. So,
            let's start with the mangling. Before diving too deep into the
            innards of Itanium Mangling, let's get more familiar with the way
            this works by mangling something trivial: a C function. C functions
            are traditionally not mangled (*this is not always fully true on all
            platforms). The simplest possible C function takes no arguments and
            returns no value. For C it doesn't actually matter what the
            parameters or return value are, since there is no mangling.
          </p>
          <p>
            To reference this function in C++, we use an
            <code>extern "C"</code> block.
          </p>
          <pre class="code">
extern "C" {
  void hello() {}
}
          </pre>
          <p>
            Because no mangling is applied to the identifier at all, the symbol
            for this function will simply be <code>hello</code>.
          </p>
          <p>
            Similarly, a more complex example would be the following function:
          </p>
          <pre class="code">
extern "C" {
  int main(int argc, char* argv[]) {}
}
          </pre>
          <p>
            But once again, the symbol name will simply be
            <code>main</code> because no mangling is applied.
          </p>
          <quiz-section>
            <p>What is the mangled symbol of the following function?</p>
            <pre class="code">
extern "C" {
  long long meow(long long argument, long long second) { /* too long */ }
}
            </pre>
            <form data-challenge="2" data-answer="meow">
              <input class="quiz-input" />
              <button
                data-challenge-submit="2"
                class="submit-challenge"
                type="submit"
              >
                Answer
              </button>
              <div class="error"></div>
            </form>
          </quiz-section>
        </section>
        <section data-step="2" class="step">
          <p>Congrats on answering your first mangling question!</p>
          <p class="lesson-last-paragraph">
            You now know how C functions are (not) mangled, which is a great
            starting point for your C++ Itanium Symbol Mangling Adventures. I
            wish you good luck for the rest!
          </p>
          <div class="center">
            <a href="lesson-1.html" class="action-button">
              Lesson 1: Basics
            </a>
          </div>
        </section>
      </div>
    </main>
    <script>
      window.LESSON = 0;
    </script>
    <script type="module" src="lessons.js"></script>
  </body>
</html>