appendix-playground.ptx

<?xml version="1.0" encoding="UTF-8"?>

<!--*****************************************
This is part of Basic Programming
Copyright (C) 2024
Phạm Công Vinh
See the file COPYING for copying conditions.
******************************************-->

<appendix xml:id="appendix-playground" xmlns:xi="http://www.w3.org/2001/XInclude">
  <title>Playground</title>

  <introduction>
    <p>
      This appendix provides you with some code cells in different programming languages, made possible by <pretext />. By playing around with them, you can have a better understanding of the idea that <q>though their syntax might be slightly, or hugely, dissimilar, the fundamental concepts are always there</q>.
    </p>

    <p>
      A fun way to try a language out is by looking up its code examples. For instance, you can search for <q>python code examples</q> on Google. Nowadays most programming sites have their own coding environments, so you can just use theirs, or you can copy-paste and run the examples here.
    </p>
  </introduction>

  <subsection xml:id="subsec-python-play">
    <title>Python</title>

    <p>
      Python is one of the most popular modern programming languages right now. It's high-level and multi-purpose.
    </p>

    <p>
      <idx><h>Links</h><h>Python examples</h></idx>
      <url href="https://www.google.com/search?q=Python+code+examples" visual="google.com/search?q=Python+code+examples">Search for Python code examples.</url>
    </p>

    <sage language="python">
      <input>
        # This is a Python cell
        # Write and run your Python code here

        print("Hello world!")
      </input>
    </sage>

    <p>
      Below is a more complex Python environment. The slider allows you to work on code through repeated edit-compile-test cycles. There is also a <q>CodeLens</q> button, which activates a steppable program similar to a debugger, meaning you can watch output, variables, and other data change line by line (or statement by statement).
    </p>

    <program language="python" interactive="activecode">
      <input>
        # This is a Python cell
        # Write and run your Python code here

        print("Hello world!")
      </input>
    </program>

    <p>
      <cd>
      </cd>
      Actually, this version has another advantage. It accepts user input, as opposed to the simpler version.
    </p>
    
    <program language="python" interactive="activecode">
      <input>
        # This is a Python cell
        # Write and run your Python code here

        s = input("Your input:")
        print(s)
      </input>
    </program>

  </subsection>

  <subsection xml:id="subsec-javascript-play">
    <title>Javascript</title>

    <p>
      Virtually every modern web page has Javascript running under the hood. Its main use case is to provide interactivity to websites.
    </p>

    <p>
      <idx><h>Links</h><h>Javascript examples</h></idx>
      <url href="https://www.google.com/search?q=Javascript+code+examples" visual="google.com/search?q=Javascript+code+examples">Search for Javascript code examples.</url>
    </p>

    <program language="javascript" interactive="activecode">
      <input>
        // This is a Javascript cell
        // Write and run your Javascript code here

        alert("Hello world!");
      </input>
    </program>

    <note>
      <p>
        Output of Javascript code might not appear right below. Instead, open the <q>Element Inspect</q> panel by right-clicking on the page and select <q>Inspect</q>. Then, go to the <q>Console</q> tab. Run the code and you should see the output appear there.
      </p>
    </note>
    
  </subsection>

  <subsection xml:id="subsec-html-play">
    <title>HTML</title>

    <p>
      Technically speaking, HTML (HyperText Markup Language) is <em>not</em> a programming language, but instead a <term>markup language</term>. However, playing around with HTML, or other markup languages, can be very beneficial, especially for beginners. (P.S. This article is authored in <pretext />, a markup language.)
    </p>

    <aside>
      <title>Topic(s) you might be interested in</title>
      
      <p>
        <idx><h>Links</h><h>markup languages</h></idx>
        <url href="https://www.google.com/search?q=what+is+a+markup+language" visual="google.com/search?q=what+is+a+markup+language">"what is a markup language"</url>
      </p> 
    </aside>

    <p>
      <idx><h>Links</h><h>HTML examples</h></idx>
      <url href="https://www.google.com/search?q=html+code+examples" visual="google.com/search?q=html+code+examples">Search for HTML code examples.</url>
    </p>

    <sage language="html">
      <input>
        <![CDATA[<!DOCTYPE html>
        <html>
        <body>

        <h1 style="text-align:center;">Centered Heading</h1>
        <p style="text-align:center;">Centered paragraph.</p>

        </body>
        </html>]]>
      </input>
    </sage>

  </subsection>

  <subsection xml:id="subsec-sage-play">
    <title>Sage</title>

    <p>
      Sage is part of SageMath, an open-source mathematics software system. It's based on Python, so their syntax is mostly similar.
    </p>
    
    <p>
      <idx><h>Links</h><h>SageMath examples</h></idx>
      <url href="https://www.google.com/search?q=SageMath+code+examples" visual="google.com/search?q=SageMath+code+examples">Search for SageMath code examples.</url>
    </p>

    <sage>
      <input>
        # This is a Sage cell
        # Write and run your Sage code here

        show(sqrt(2))
      </input>
    </sage>

  </subsection>

</appendix>