{"id":418,"date":"2026-08-13T03:09:52","date_gmt":"2026-08-13T08:09:52","guid":{"rendered":"https:\/\/sts.doit.wisc.edu\/training-materials\/?post_type=manual&p=418"},"modified":"2026-08-13T03:09:53","modified_gmt":"2026-08-13T08:09:53","slug":"a-beginners-guide-to-programming","status":"publish","type":"manual","link":"https:\/\/sts.doit.wisc.edu\/training-materials\/manual\/a-beginners-guide-to-programming\/","title":{"rendered":"A Beginner’s Guide to Programming"},"content":{"rendered":"\n
\n

Introduction<\/h2>\n\n\n\n

As we write essays on our laptops and snap friends with our smartphones, it’s easy to forget how complicated these devices really are. A modern smartphone has more billions of transistors, along with light sensors, infrared cameras, gyroscopes, accelerometers, microphones, antennas, and tons of other technological components that let it do all the things we can use smartphones for.<\/p>\n\n\n\n

How are we able to operate these complicated machines without needing an in-depth understanding of electrical engineering, abstract mathematics, digital signal processing, and all the other complexities involved?<\/p>\n\n\n\n

Simple: programming<\/strong>!<\/p>\n\n\n\n

Thanks to engineers and software developers applying different kinds of programming at varying levels of complexity, we are able to use polished, human-friendly interfaces to control unbelievably sophisticated systems, without having to worry about how it is all accomplished.<\/p>\n\n\n\n

But what exactly is<\/em> programming? And what do you need to know if you want to learn to program\/code?<\/p>\n\n\n\n

This manual will explain what programming is, explore some concepts that are common to most programming languages, and give real-world examples of how programming and coding are used today.<\/p>\n\n\n\n

\n

The terms programming<\/em> and coding<\/em> are both used when talking about writing instructions for computers. Opinions differ on whether they can be used interchangeably.<\/p>\n\n\n\n

Some people consider coding to be one aspect of programming, the way frying<\/em> is one aspect of cooking<\/em>. Other people consider them to be identical.<\/p>\n\n\n\n

We’ll mostly use the term programming throughout this manual, but we may call it coding here and there. It’s not that important what you call it, as long as you understand the concepts, and honestly, the people who make it a big deal probably have some other things going on they need to work through.<\/p>\n<\/div>\n<\/section>\n\n\n\n

\n

What Does “Programming” Even Mean?<\/h2>\n\n\n\n

It’s easy to think of programming as an arcane, hard-to-understand skill that only highly trained people can perform. But programming just means writing step-by-step instructions for how to accomplish a task, using language that a computer can understand.<\/em><\/p>\n\n\n\n

Even though it can feel extremely complicated, when you break it down, programming really consists of just three simple actions, combined in different ways:<\/p>\n\n\n\n

\n
\n
    \n
  1. Getting information from somewhere<\/li>\n\n\n\n
  2. Doing something to the information (aka Processing it)<\/li>\n\n\n\n
  3. Putting information somewhere<\/li>\n<\/ol>\n<\/div>\n<\/div>\n\n\n\n

    There are countless ways to combine and execute them, but fundamentally, all programming is just different combinations of those three steps.<\/p>\n\n\n\n

    These steps are written out in special code that a computer can interpret, and the finished product is called a computer program.<\/p>\n\n\n\n

    \n

    Computer Programming<\/h4>\n\n\n\n

    A computer program<\/em> is any collection of code that has been written to instruct a computer how to do something. Computer programs go by many names, including scripts, applications\/apps, algorithms, and more.<\/p>\n\n\n\n

    Anything from a simple 1-line script to a professional application containing millions of lines of code can be considered a program.<\/p>\n<\/div>\n\n\n\n

    Computer programs have data <\/strong>and behavior<\/strong>.<\/p>\n\n\n\n

    Data<\/strong> is the information the program has access to while running.<\/em><\/p>\n\n\n\n

    Behavior<\/strong> is what the program does with the data it has access to<\/em>.<\/p>\n\n\n\n

    Getting Information<\/h3>\n\n\n\n

    For a computer program to do anything useful, it usually requires some amount of data<\/em>, or information to work with.<\/p>\n\n\n\n

    This information can come from a variety of places:<\/p>\n\n\n\n

    \n
    \n
      \n
    • User input<\/li>\n\n\n\n
    • A file stored on the device<\/li>\n\n\n\n
    • Another computer over a network<\/li>\n\n\n\n
    • An on-device sensor like a camera or microphone<\/li>\n\n\n\n
    • A connected device (lab equipment, musical gear, smart home accessories, etc.)<\/li>\n\n\n\n
    • The programmer, written into the code itself<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n

      The information itself can take many forms:<\/p>\n\n\n\n

      \n
      \n
        \n
      • Simple text<\/li>\n\n\n\n
      • Structured data like spreadsheets or database entries<\/li>\n\n\n\n
      • Digital media (photos, video, audio, etc.)<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n

        The only requirement is that it is in (or can be converted into) a format the computer can understand: 1s and 0s.<\/em><\/p>\n\n\n\n

        Processing Information<\/h3>\n\n\n\n

        Manipulating or processing data makes up the majority of the behavior<\/em> of most computer programs. Writing the instructions for this behavior is often what people have in mind when they thing of ‘computer programming’.<\/p>\n\n\n\n

        Computers can perform data-related operations millions or billions of times faster than a human, with extreme precision. This makes them great at repetitive or calculation-intensive tasks like counting\/math, quickly finding specific items in large amounts of data, etc.<\/p>\n\n\n\n

        All of these tasks involve the computer looking at information and doing something to it according to the instructions given to it by the programmer.<\/p>\n\n\n\n

        Fast, accurate processing of information is what makes computers useful.<\/p>\n\n\n\n

        Putting Information Somewhere<\/h3>\n\n\n\n

        Once we’ve given the computer some information and done something to it, it’s not especially useful until we get it out of the computer memory and put it somewhere else.<\/p>\n\n\n\n

        As with getting the information, there are a lot of places for a computers to output information it has processed:<\/p>\n\n\n\n

        \n
        \n
          \n
        • A screen or display<\/li>\n\n\n\n
        • A file in the computer’s local storage<\/li>\n\n\n\n
        • Physical output devices like printers<\/li>\n\n\n\n
        • Another computer over a network<\/li>\n\n\n\n
        • A connected device such as a speaker or medical\/lab equipment<\/li>\n\n\n\n
        • Automated machinery<\/li>\n\n\n\n
        • The input of another program<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
          \n\n\n\n

          That’s it!<\/p>\n\n\n\n

          Everything we do with computers is the result of programmers combining those three steps – getting, processing, and outputting information – in different ways.<\/p>\n<\/section>\n\n\n\n

          \n

          Computers, Data, and Abstraction<\/h2>\n\n\n\n
          \n

          The following section offers background technical knowledge if you are curious about the bigger picture of programming, but this information is NOT a prerequisite to learn how to code<\/em>.<\/p>\n\n\n\n

          It is not necessary to know the technical details of how computers work if you want to be a programmer.<\/strong><\/p>\n\n\n\n

          They can be helpful if you get into particularly complex or high-performance programming, but you can absolutely succeed as a coder without knowing what a transistor is or how binary code works.<\/p>\n<\/div>\n\n\n\n

          What is a computer, and what does it compute?<\/h3>\n\n\n\n

          At its most basic, a computer is a machine that can process information<\/em> using logic<\/em>.<\/p>\n\n\n\n

          In our everyday usage of the term, information<\/em> can mean a lot of things. In this context, information is that which can be communicated about the state of something<\/strong>. The most basic building block of information is a binary state<\/em>, or choice between two things: yes-no, true-false, on-off.<\/p>\n\n\n\n

          As we use it, logic is the process of using simple comparisons to evaluate how pieces of information relate to each other<\/strong>, specifically, using true-false comparisons to determine the output from a given set of inputs.<\/p>\n\n\n\n

          By using basic logical comparisons to evaluate simple pieces of information, you can quickly start to represent much more complicated information.<\/p>\n\n\n\n

          In a computer, these logical comparisons are achieved with circuits<\/em>. Circuits are electrical systems – tiny wires and switches – that allow electricity to flow along a given path. The electricity’s path changes based on different conditions (like whether a given switch is on or off), and that path allows for those simple logical comparisons to be made, which can be used to represent and process more complicated information.<\/p>\n\n\n\n

          A computer processor is basically just lots and lots of circuits working together in specific ways, extremely quickly. The information they process comes in the form of bits<\/em>.<\/p>\n\n\n\n

          Bits<\/h3>\n\n\n\n

          The fundamental unit of information is called a bit<\/strong>, which is short for binary digit<\/em>.<\/p>\n\n\n\n

          \n

          Bit<\/h4>\n\n\n\n

          A bit, which is short for binary digit<\/em>, is a unit of information that can be in one of two states (on\/off, true\/false, 0\/1, etc.).<\/p>\n\n\n\n

          It is the fundamental building block of computing and is the basis of binary code, which is how computers read and interact with information.<\/p>\n<\/div>\n\n\n\n

          Any object that can be in two different states can be used to represent this unit of information:<\/p>\n\n\n\n

          \n
          \n
            \n
          • A light switch being on or off<\/li>\n\n\n\n
          • A torch being lit or unlit<\/li>\n\n\n\n
          • A coin being heads or tails<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n

            People have even created functional computing devices inside the game Minecraft using an in-game substance called redstone, which can be turned on or off by changing certain items in the game.<\/p>\n\n\n\n

            In computers, this unit of information is represented using electrical devices called transistors<\/em>. A transistor is a small electronic on-off switch that turns on or off depending on how much electricity is flowing through it.<\/p>\n\n\n\n

            This on\/off state of the transistor represent a bit<\/em>, and by setting up banks of multiple bits in a row, you can represent larger numbers using binary code.<\/p>\n\n\n\n

            Binary Code<\/h3>\n\n\n\n

            Because the transistors in computers can only be in one of two states (on<\/em> or off<\/em>) they need to use a counting system that is base two<\/em> to represent numbers larger than 1. This base-two system is also known as binary code<\/em>.<\/p>\n\n\n\n

            Base-Ten vs. Base-Two (Binary)<\/h4>\n\n\n\n

            The system of counting that we use in our everyday lives is called base ten<\/em>, because it uses 10 possible digits: 0 through 9. It has enough different values to count up to 9 (which is ten total values, because it starts at zero), but if we want to represent anything higher than 9, we add a new column to the left to keep track of how many 10s we have, and start back at 0 in the first column.<\/p>\n\n\n\n

            As we count up, each time we get to 9 and need to add 1 more, we increase the value in that second column by 1. If we get to 9 in that second column and 9 in the first column and need to add 1 more, we need to add a third column, to show how many hundreds we have, and start the whole process again. Once we get ten 10s in the hundreds column, we add a new column for how many thousands we have and start again.<\/p>\n\n\n\n

            If you are familiar with the math concept of exponents and raising numbers to a power, each new column is 10 raised to the next highest power e.g. the tens place is 102<\/sup> (10×10), the hundreds place is 103<\/sup> (10x10x10), etc.<\/p>\n\n\n\n

            When we write a number like 32,706<\/strong> each digit is showing how many we have of each of these multiples of 10:<\/p>\n\n\n\n

            \n
            \"32706<\/figure>\n<\/figure>\n\n\n\n

            When we are using base-two, it’s the exact same process, but there are only 2 possible values – 0 and 1 – so each column represents a multiple of 2 rather than a multiple of 10. Instead of starting over when we get to 9, we start over when we get to 1.<\/p>\n\n\n\n

            To represent the number 53 in binary code, which is base two, we would write 110101<\/strong><\/p>\n\n\n\n

            \n
            \"110101<\/figure>\n<\/figure>\n\n\n\n

            Because you only need 2 values for each digit’s place, you can use a simple on\/off switch like a transistor to represent each bit and store its place value.<\/p>\n\n\n\n

            As you increase the number of bits, you increase the size of the number that can be represented. The maximum value that can be represented by a binary number is 2 to the power of how many digits long it is. For example, the maximum value of a binary number with 8 bits (aka 8 digits long) is 28<\/sup>, or 256. Each additional digit of length doubles the maximum value that can be represented by that number. A 9 digit (or 9-bit) number can represent 512, a 10-bit number can represent 1024, and so on.<\/p>\n\n\n\n

            How Binary Code Becomes Data<\/h3>\n\n\n\n

            If computers only really understand 1s and 0s, how are we able to store and process human-friendly data like text, images, and video?<\/p>\n\n\n\n

            Bytes<\/h4>\n\n\n\n

            8 bits stacked together are called a byte<\/em>, which is the basic unit of data storage and processing for modern computers.<\/p>\n\n\n\n

            \n

            Byte<\/h4>\n\n\n\n

            A byte is the fundamental unit of computer storage and information processing. Bytes (usually) consist of 8 bits, and form the smallest unit that can be stored in computer memory.<\/p>\n\n\n\n

            Computer memory and storage space are measured in bytes, usually with a prefix indicating a multiple of ten (kilobyte = approximately one thousand bytes, gigabyte = 1 billion bytes, etc.)<\/p>\n<\/div>\n\n\n\n

            Bytes are saved in a computer’s memory by turning individual transistors (in groups of 8) on or off corresponding to the 0 or 1 value of each respective bit. Even the simplest modern computers can contain millions and millions of these transistors.<\/p>\n\n\n\n

            Depending on the context, a given byte can represent different things.<\/p>\n\n\n\n

            To represent text, there is a system known as ASCII (pronounced ACE-key<\/em>) that standardizes which letters and numbers are represented by which bytes. Each numerical value stored as an 8-bit byte corresponds to a letter of the alphabet, a number, or a symbol. The byte stored by the 8-bit number 01000010 (which is the number 66<\/em> in base-ten) is a capital B, while the byte 01001100 (76) stands for capital L, and 01001101 (77) stands for capital M.<\/p>\n\n\n\n

            The 3-letter phrase BLM<\/em> stored as ASCII text in computer memory would look like the following:
            01000010 01001100 01001101<\/p>\n\n\n\n

            Other kinds of data, for example images or video, use bytes in a different way. Digital images are made up of thousands of individual dots known as picture elements<\/em> or pixels<\/em>. The color of each individual pixel is stored as 3 bytes, representing the red, green, and blue values for that pixel (see sidebar).<\/p>\n\n\n\n

            In a pixel, that same set of bytes that represented the letters BLM<\/em>:
            01000010 01001100 01001101
            would represent a dark grey color: <\/p>\n\n\n\n

            By stacking up many, many (many!) bytes of a given type, computers can store and process massive amounts of information, which we call data. We can then program computers to manipulate this data in all sorts of ways.<\/p>\n\n\n\n

            \n

            Digital screens<\/strong><\/p>\n\n\n\n

            A digital screen contains millions of tiny dots known as pixels<\/em>. Each pixel is actually made up of three extremely tiny red, green, and blue light bulbs. The relative brightness of each tiny bulb determines what color the pixel will appear to have. Every color the human eye can perceive can be generated by combining different brightnesses of red, green, and blue light.<\/p>\n<\/div>\n\n\n\n

            Abstraction<\/h3>\n\n\n\n

            Dealing with individual bits and bytes themselves can be extremely complicated, and doing so successfully requires intimate knowledge of the electrical machines and circuits that computers are built on. Fortunately, most programmers never have to directly touch the bits and bytes that represent the data we work with, thanks to a concept called abstraction.<\/strong><\/p>\n\n\n\n

            \n

            Abstraction<\/h4>\n\n\n\n

            Abstraction is the process of providing a way to accomplish a task, which does not require knowledge of how the task is achieved.<\/p>\n\n\n\n

            It allows users to employ potentially complicated, multi-step technical processes without having to know the implementation details of how the task is accomplished.<\/p>\n<\/div>\n\n\n\n

            This is where the more complicated parts of a process (which are sometimes called implementation details) are hidden away or abstracted<\/em> behind a more simplified interface, which allows them to be accessed in a more user-friendly way.<\/p>\n\n\n\n

            A real-world example of abstraction is the steering wheel of a car.<\/p>\n\n\n\n

            When a driver turns the steering wheel of a car, they are kicking off a complicated series of mechanical processes. The steering wheel is attached to the steering column, which manipulates the car’s axles, which uses a differential to cause the car’s tires to be able to rotate at different speeds in a precise relationship, which ultimately results in the car moving in the intended direction.<\/p>\n\n\n\n

            The driver doesn’t need to know anything about these implementation details to successfully drive the car; they just need to learn the behavior of the steering wheel.<\/p>\n\n\n\n

            \n
            \n

            Implementation Details:<\/p>\n\n\n\n

            \"Implementation<\/figure>\n<\/div>\n\n\n\n
            \n

            Abstraction:<\/p>\n\n\n\n

            \"Abstraction<\/figure>\n<\/div>\n<\/div>\n\n\n\n

            The engineers who built the car required complex technical knowledge to solve the mechanical challenge of making the car turn. By applying that knowledge, they were able to create a much simpler, abstracted interface that everyday drivers could operate without issue.<\/p>\n\n\n\n

            This same process also applies when working with the electrical machines we know as computers.<\/p>\n\n\n\n

            Virtually all programming relies on one or more layers of abstraction to control the computer.<\/strong> Unless they are manually changing the transistors and re-routing circuits by hand, programmers are using abstraction to get the computer to compute.<\/p>\n\n\n\n

            Abstraction and Programming<\/h3>\n\n\n\n

            Let’s say we have a simple program in Python that prompts the user to enter their name, then outputs how many letters long their name is.<\/p>\n\n\n\n

            The code itself would look something like this:<\/p>\n\n\n\n

            \n
            <strong><em>print('What is your name?')\nname = input()\nnameLength = len(name)\nprint(nameLength)<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
            This simple-seeming task actually involves many technical processes shown in the following list. The steps that are bolded<\/strong> are the only ones the programmer needs to write.<\/p>\n\n\n\n
            \n
            \n
              \n
            • Parse the program to make sure the code is valid and uses correct syntax<\/li>\n\n\n\n
            • Allocate enough computer memory to keep the code active while the program runs<\/li>\n\n\n\n
            • Display text on screen<\/strong><\/li>\n\n\n\n
            • Illuminate the correct pixels to accurately render the text on screen<\/li>\n\n\n\n
            • Ask for input from the user<\/strong><\/li>\n\n\n\n
            • Listen for the electrical circuit interrupts that indicate keystrokes from the keyboard<\/li>\n\n\n\n
            • Convert characters from keystrokes into their respective ASCII byte codes<\/li>\n\n\n\n
            • Allocate a sufficient number of bytes of computer memory to store the word the user inputs and a count of the letters<\/li>\n\n\n\n
            • Capture the location of the data in the physical memory chips for recall later<\/li>\n\n\n\n
            • Convert bytes into their corresponding bit values<\/li>\n\n\n\n
            • Store the bits from the data in the computer memory<\/li>\n\n\n\n
            • Configure the electrical logic gates into the arrangement of bits for each individual byte<\/li>\n\n\n\n
            • Flip the electromagnetic switches in the computer memory to set each bit value on or off<\/li>\n\n\n\n
            • Use a function to save each individual byte in memory of the word and create a counter that goes up by 1 for each letter<\/li>\n\n\n\n
            • Return the number of letters saved<\/li>\n\n\n\n
            • Store the number of letters in the input<\/strong><\/li>\n\n\n\n
            • Display the number of items to the user<\/strong><\/li>\n\n\n\n
            • Conclude the program and release the stored memory<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
              The simplicity we enjoy is possible because so much of the complexity has been abstracted away from us as programmers.<\/p>\n\n\n\n
              Thousands of person-hours have been spent researching, implementing, and troubleshooting all of the electronic systems and digital components involved in these processes. The people who have performed that labor poured their effort into creating simplified, abstracted interfaces that we as programmers can use to accomplish tasks and efficiently solve problems.<\/p>\n\n\n\n
              One practical example of the abstraction process letting us harness the complexity of computers and use them in accessible, understandable ways can be seen in the form of programming languages<\/strong>.<\/p>\n<\/section>\n\n\n\n
              \n
              Programming Languages<\/h2>\n\n\n\n
              Programs are sets of instructions that a computer can follow to perform a given task. These instructions are provided in one or more programming languages<\/em>.<\/p>\n\n\n\n
              \n
              Programming Languages<\/h4>\n\n\n\n
              A programming language is a medium that instructions can be written in that a computer can interpret to execute a given task.<\/p>\n\n\n\n
              Like human languages, most programming languages have certain structures and concepts in common but each has its own syntax and vocabulary.<\/p>\n<\/div>\n\n\n\n
              Different languages are used for different things. Python, Java, and C++ are good general-purpose languages and can be used for a wide range of tasks. JavaScript is mainly used to give interactivity to web pages. Some languages have very specific functions: R is built for statistical analysis, and MATLAB is meant for matrix-based math.<\/p>\n\n\n\n
              Low-level vs. High-level<\/h3>\n\n\n\n
              A programming language may be referred to as a low-level<\/em> or high-level<\/em> language. This refers to how much abstraction there is between the code you write and what it’s telling the computer hardware to do.<\/p>\n\n\n\n
              A low-level language like C++ has fewer layers of abstraction between the code and hardware,<\/em><\/strong> which means it can be used for more performance-intensive tasks because less of the computer’s processing power is needed to interpret and execute the code. This is why high-performance programs like Adobe Photoshop and many video games are written in C++.<\/p>\n\n\n\n
              A higher-level language like JavaScript has more layers of abstraction<\/em>.<\/strong> It is not as good at maximizing performance, but in exchange, many technical tasks are handled automatically (like managing program memory, clearing out old variables, etc.) so the programmer doesn’t need to worry about them.<\/p>\n\n\n\n
              \n
              Java and JavaScript are different!<\/strong><\/p>\n\n\n\n
              Despite very similar names, Java and JavaScript are two completely different, unrelated languages!<\/p>\n\n\n\n
              The general-purpose language Java<\/em> was developed in the early 1990s and quickly became extremely popular among programmers.<\/p>\n\n\n\n
              A few years later, as web sites and internet access became more widespread, a new language was developed to provide interactivity for web pages, which had previously been strictly text and images.<\/p>\n\n\n\n
              The developers of this new language named it JavaScript<\/em>, in hopes of cashing in on the growing popularity of Java.<\/p>\n\n\n\n
              This choice has led to widespread confusion ever since!<\/p>\n<\/div>\n\n\n\n
              Popular Languages and Their Uses<\/h3>\n\n\n\n
              \n
              Name<\/strong><\/th>Used For<\/strong><\/td>Pros<\/strong><\/td>Cons<\/strong><\/td>Who should learn<\/strong><\/th>How hard to learn<\/strong><\/th><\/tr>
              C\/C++<\/td>General programming, especially good for applications where it’s important to get the most out of hardware, such as media applications and video games<\/td>Very efficient, can be compiled and run on many platforms<\/td>Moderately complex, requires programmers to manage many things themselves like memory allocation, interacting with hardware devices, etc.<\/td>People doing performance-intensive coding, systems programmers<\/td>
              \u2605\u2605\u2605\u2605\u2606<\/td><\/tr>
              Java<\/td>One of the most widely used programming languages today. It is used for everything: servers, medical equipment, Android apps, games, Blu-Ray players, smart-home accessories, etc.<\/td>All-purpose language, “write once, run anywhere” philosophy.<\/td>The syntax can be unnecessarily lengthy, and there is a lot of conflicting information about best practices.<\/td>CS majors, Android developers, people who want to learn all aspects of programming.<\/td>\u2605\u2605\u2605\u2606\u2606<\/td><\/tr>
              JavaScript<\/td>Providing interactivity and functionality on the web.<\/td>Making web pages interactive, creating many of the elements we associate with the internet today. Reasonably straightforward to learn, and you can see results right away. Good for newer programmers.<\/td>Some of the syntax rules can be inconsistent. Not always great for performance. Need to know HTML and CSS to get the most out of it. Requires a web browser (usually).<\/td>Anyone interested in learning to code.<\/td>\u2605\u2605\u2605\u2606\u2606<\/td><\/tr>
              Python<\/td>One of the most popular general-purpose programming languages in recent times. Widely used in artificial intelligence, machine learning, data analysis, and many other data-related tasks.<\/td>Syntax is easier to read than many other languages. Has a huge number of libraries and code snippets that make life easier. Very approachable for people with no previous coding experience.<\/td>Because it’s so popular, it can be hard to know where to start, or where to find answers to specific questions.<\/td>People learning to code, machine learning\/AI coders, data scientists<\/td>\u2605\u2605\u2606\u2606\u2606<\/td><\/tr>
              HTML<\/td>Creating and structuring content for web pages.<\/td>Simple syntax, extremely practical skill to have. Nearly all rich-text editors (e.g. Canvas, WordPress, etc) offer a way to directly edit HTML, which can be helpful when formatting content online<\/td>Not a ‘traditional’ programming language, so it lacks things like variables, functions, loops, conditionals, etc.<\/td>People interested in making websites, or programmers who will be making apps used on the web.<\/td>\u2605\u2606\u2606\u2606\u2606<\/td><\/tr>
              CSS<\/td>Applying visual style to HTML content.<\/td>Flexible, rich set of tools for styling text, images, and providing limited interactivity<\/td>Not a ‘traditional’ programming language. Can be tricky to understand how style rules get applied.<\/td>Designers who want to learn relevant coding skills, people interested in making websites, or programmers who will be making apps used on the web.<\/td>\u2605\u2605\u2606\u2606\u2606<\/td><\/tr>
              PHP<\/td>Creating web-based apps and dynamic web sites.<\/td>Extremely popular choice for building dynamic web sites, pretty straightforward to get started with, can be integrated into existing web pages without much fuss, good for working with MySQL databases<\/td>Syntax can be unintuitive, some confusing elements in the built-in functions,<\/td>People looking to get immediate results, built dynamic websites, work with databases, or learn to develop tools for platforms like WordPress and Drupal<\/td>\u2605\u2605\u2605\u2606\u2606<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n\n
              Learning a Programming Language<\/h3>\n\n\n\n
              Becoming proficient in a programming language is similar to learning a spoken language:<\/p>\n\n\n\n
                \n
              1. Learn the syntax<\/li>\n\n\n\n
              2. Build a vocabulary<\/li>\n\n\n\n
              3. Become familiar with the patterns, idioms, and style of the language<\/li>\n<\/ol>\n\n\n\n
                Syntax<\/h4>\n\n\n\n
                The way the different parts of a programming language go together is called the language’s syntax<\/strong>.<\/p>\n\n\n\n
                Correct syntax is essential with programming. Unlike with spoken languages, where most of the time you can still communicate even if things are phrased incorrectly, computer programs will not function with incorrect syntax.<\/strong><\/p>\n\n\n\n
                Most programming languages are made up of the same components: variables, functions, loops, etc. The specific way you assign a variable or declare a function varies from language to language according to its syntax. The first step in learning a programming language is to become familiar with how these fundamentals are written.<\/p>\n\n\n\n
                Vocabulary<\/h4>\n\n\n\n
                Once you know how to write statements correctly, the next step is to build a vocabulary. This usually starts with learning the functions and operations most commonly used in that language.<\/p>\n\n\n\n
                For example, in JavaScript, programmers frequently need to identify a particular HTML element by its ID attribute and save it to a variable.<\/p>\n\n\n\n
                A very common way this is done is by using the function document.getElementById() like so:<\/p>\n\n\n\n
                \n
                <em><strong>var myElement = document.getElementById("article-body");<\/strong><\/em><\/code><\/pre>\n<\/div>\n\n\n\n
                The first few times you encounter this construction, it will most likely take some effort to step through each piece and figure out what is going on.<\/p>\n\n\n\n
                As you become more familiar with the language, you’ll be able to look at this statement and understand at a glance what it’s doing, rather than having to stop and puzzle through each piece.<\/p>\n\n\n\n
                As your vocabulary grows and more phrases become second nature, you’ll require less and less active mental energy to read and write code. You won’t need to consciously translate your intent (e.g. “I want to save a variable so I can use it later – what function do I need to use for that again?”) and instead you will be able to express your intentions fluidly in code on the fly.<\/p>\n\n\n\n
                Patterns, Idioms, and Style<\/h4>\n\n\n\n
                Once you have decent working vocabulary in a language, you may start to notice different constructions and conventions pop up.<\/p>\n\n\n\n
                For example, in JavaScript there is a very common design pattern called a callback function<\/em>, where an argument passed to one function is an entire function in itself:<\/p>\n\n\n\n
                \n
                <strong><em>document.getElementById("article-body").addEventListener("click", function() {\n    document.getElementById("demo").innerHTML = "Hello World";\n  });<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                There are other ways to accomplish this same task, but knowing that the preferred way of handling a function-within-a-function is to use one of these callbacks, you can write concise, understandable code structures that are more efficient and easier for other JavaScript programmers to make sense of.<\/p>\n\n\n\n
                Every language has its own distinct patterns and conventions. The more familiar you become with a language, the better you are able to use it in a more native, expressive way.<\/p>\n<\/section>\n\n\n\n
                \n
                Code Anatomy: Data<\/h2>\n\n\n\n
                Every programming language is different, but there are some concepts and ideas that are common to most languages we encounter. This section will explore some of the most common and relevant elements of programming.<\/p>\n\n\n\n
                Variables<\/h3>\n\n\n\n
                Variables are containers that store data so that it can be used or processed somewhere else in the program.<\/strong><\/p>\n\n\n\n
                A variable has two parts:<\/p>\n\n\n\n
                  \n
                • A name or identifier<\/em> – how you refer to it<\/li>\n\n\n\n
                • A value<\/em> – the data it holds<\/li>\n<\/ul>\n\n\n\n
                  \n
                  Most languages reserve special keywords that cannot be used as names for variables for functions.<\/p>\n\n\n\n
                  For example, in Python, the keywords and<\/em>, or<\/em>, and not<\/em> are reserved.<\/p>\n\n\n\n
                  Different languages have different reserved keywords<\/p>\n<\/div>\n\n\n\n
                  \n
                  Variables<\/h4>\n\n\n\n
                  Variables are virtual containers that are used to hold data so that it can be used elsewhere in a program.<\/p>\n\n\n\n
                  They have a name<\/em> (or identifier<\/em>), and contain a value<\/em>.<\/p>\n\n\n\n
                  Data is almost always assigned to a variable using the assignment operator<\/em>, which is a single equals sign: =<\/p>\n\n\n\n
                  Examples:<\/p>\n\n\n\n
                  \n
                  <em><strong>x = 23<\/strong><\/em><\/code><\/pre>\n<\/div>\n\n\n\n
                  \n
                  <strong><em>var myName = "Bucky"<\/em><\/strong><\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
                  Most of the time data is assigned to a variable using the equals sign (=), which is sometimes called the assignment operator<\/em>.<\/p>\n\n\n\n
                  Different languages have different rules around how variables are named and assigned, but the process usually looks like one of the following:<\/p>\n\n\n\n
                  Python:<\/p>\n\n\n\n
                  \n
                  <em><strong>x=3<\/strong><\/em><\/code><\/pre>\n<\/div>\n\n\n\n
                  PHP:<\/p>\n\n\n\n
                  \n
                  <strong><em>$my_name = "Bucky";<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                  Java:<\/p>\n\n\n\n
                  \n
                  <strong><em>int myAge = 20;<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                  JavaScript:<\/p>\n\n\n\n
                  \n
                  <strong><em>var yourAge = 21;<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                  Each of these has the identifier on the left and the value on the right. Some languages use a keyword like var or a data type designator (e.g. int, String, etc.) when assigning a variable a value. Some languages require variable names to start with symbol like $.<\/p>\n\n\n\n
                  The specific syntax will change from language to language, but nearly all languages assign variables using =<\/p>\n\n\n\n
                  Data Types<\/h3>\n\n\n\n
                  An important concept to understand in programming is the idea of a data type<\/em>.<\/p>\n\n\n\n
                  Computers have instructions built into them that tell them how to manipulate data, but they are very particular about the kind of data they operate on. Trying to perform an operation on the wrong kind of data could cause the program to work incorrectly or not at all, or could even cause other parts of the system to malfunction.<\/p>\n\n\n\n
                  Just like how you can pour a liquid (e.g. milk), but you can’t pour a solid (e.g. a piece of pizza), some computing operations can only be performed on certain types.<\/p>\n\n\n\n
                  A computer can multiply two numbers (with data type integer<\/em>) together, but if we asked it to multiply two words (which have the data type of String<\/em>), it would crash because it doesn’t know how to handle that data type for that operation.<\/p>\n\n\n\n
                  \n
                  Data Types<\/h4>\n\n\n\n
                  A data type indicates the kind of information that is being referenced\/stored.<\/p>\n\n\n\n
                  Common data types include integers<\/strong> (numbers with no decimals), strings<\/strong> (text), floats<\/strong> (numbers with decimals), Boolean<\/strong> (true\/false), and arrays<\/strong> or lists<\/strong> (containers with multiple items).<\/p>\n\n\n\n
                  Some programming languages require the programmer to explicitly indicate the type of any data they are storing or accessing. Other languages will try to infer it based on the data being stored\/accessed.<\/p>\n<\/div>\n\n\n\n
                  Some languages like C++ and Java require programmers to specify the data type for every variable they assign, which is called static typing<\/strong>.<\/p>\n\n\n\n
                  This is an example of assigning variables using Java (a static-typed language), where we declare a numeric variable of type integer<\/em> or int<\/em> and a text variable of type String<\/em>:<\/p>\n\n\n\n
                  \n
                  <strong><em>int myAge = 20;\nString myName = "Jamie";<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                  Other languages like Python and JavaScript try to infer the data type of a variable at the time the program is run, based on the value stored in it. This is called dynamic typing<\/strong>.<\/p>\n\n\n\n
                  Here is an example of assigning int and string variables in the dynamic-typed language Python:<\/p>\n\n\n\n
                  \n
                  <strong><em>myAge = 20\nmyName = "Jamie"<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                  Notice how the variables do not need a type designation at the start.<\/p>\n\n\n\n
                  Common Data Types<\/h4>\n\n\n\n
                  The following are some of the most common types of data you are likely to encounter as a programmer:<\/p>\n\n\n\n
                  \n
                  Type<\/strong><\/td>Description<\/strong><\/td>Examples<\/strong><\/td><\/tr>
                  String<\/td>A string of letters, numbers, and\/or symbols. These are usually written in quote marks ‘like this’ or “like this”<\/td>“Jamie”
                  “1234”
                  ‘Wait 3-5 minutes’<\/td><\/tr>
                  Integer<\/td>Whole numbers without a decimal component, up to approximately 4 billion (232<\/sup>) values.<\/td>7
                  1024<\/td><\/tr>
                  Long<\/td>An integer that can represent numbers over 4 billion.<\/td>7
                  6,4096,1024,2048<\/td><\/tr>
                  Float (or floating-point<\/em>)<\/td>Numbers that have a decimal point component<\/td>2.5
                  117.0
                  3.1415<\/td><\/tr>
                  Double (or double-precision float<\/em>)<\/td>A more precise version of a float<\/td>2.5
                  117.0
                  3.1415<\/td><\/tr>
                  Boolean<\/td>A special data type that can only store one value: true<\/em> or false<\/em>.<\/td>true, false<\/td><\/tr>
                  Character (or char<\/em>)<\/td>A single letter, number, or symbol character.<\/td>“g”
                  “Y”<\/td><\/tr>
                  Array (also called a List<\/em>)<\/td>A special data type that can store multiple values, in a specific order. Often written using square brackets [ ], with the values separated by commas. The individual items are often accessed using the index<\/em>, which is their position in the list, e.g. myData[3]<\/td>[“apple”,”banana”,”cherry”]<\/td><\/tr>
                  Dictionary (also called an Associative Array<\/em>)<\/td>Like an array, but each item is stored as a key-value pair. Similar to an array, but order does not matter, and values are accessed using their key instead of their position in the list, e.g. myData[“name”]<\/td>[“name”: “Bucky”,
                  “age”: 20,
                  “city”:”Madison, WI”]<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n<\/section>\n\n\n\n
                  \n
                  Code Anatomy: Behavior<\/h2>\n\n\n\n
                  Operators<\/h3>\n\n\n\n
                  Most programming languages have a set of built-in functions that can be used to manipulate or evaluate data in basic ways. These include things like performing math operations, making logic comparisons like AND<\/em> and OR<\/em>, or incrementing numbers.<\/p>\n\n\n\n
                  Mathematical Operators<\/h4>\n\n\n\n
                  Most languages use specific characters for performing math operations on data. The following are commonly used math operators across languages<\/p>\n\n\n\n
                  \n
                  Symbol<\/th>Operation<\/th>Example<\/th><\/tr>
                  +<\/td>Addition<\/td>2 + 3<\/td><\/tr>
                  –<\/td>Subtraction<\/td>3 – 1<\/td><\/tr>
                  *<\/td>Multiplication<\/td>4 * 8<\/td><\/tr>
                  \/<\/td>Division<\/td>8 \/ 2<\/td><\/tr>
                  ^<\/td>Exponent<\/td>2^5<\/td><\/tr>
                  **<\/td>Exponent (Python only)<\/td>2**5<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n\n
                  These operations can be used on raw numbers:<\/p>\n\n\n\n
                  \n
                  <strong><em>x = 3 + 2<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                  They can also be used on variables:<\/p>\n\n\n\n
                  \n
                  <strong><em>x = 3\ny = 2\n\nz = x * y <\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                  Logical and Comparison Operators<\/h4>\n\n\n\n
                  Comparing different statements or expressions is another extremely common operation in programming languages, and most languages have dedicated operators for making these comparisons.<\/p>\n\n\n\n
                  Some of them compare quantities (less than\/greater than, equals, etc.), while others do logic comparisons, for things like AND and OR.<\/p>\n\n\n\n
                  The following table shows common comparisons and their respective operators in different languages:<\/p>\n\n\n\n
                  \n
                  Operation<\/th>Definition<\/th>Operator<\/strong><\/td>Example<\/th><\/tr>
                  Equals<\/td>Evaluates whether two items (numbers, strings, booleans, arrays) are equivalent. Returns the value TRUE if so, or FALSE if not.
                  This is often used for IF statements and other program control flow.<\/td>                  		==
                  (Note the TWO equals signs – not one!)<\/td>                  		3 == 2+1
                  (True)

                  3 == 7
                  (False)<\/td><\/tr>
                  Is Not Equal To<\/td>Evaluates whether two items (numbers, strings, booleans, arrays) are NOT equivalent. Returns the value TRUE if so, or FALSE if not.
                  This is often used for IF statements and other program control flow.<\/td>                  		!=<\/td>3 != 1
                  (True)

                  3 != 2+1
                  (False)<\/td><\/tr>
                  Greater Than<\/td>Evaluates whether the item on the left is greater than the item on the right and returns TRUE if so, FALSE if not.<\/td>><\/td>7 > 3
                  (true)

                  2 > 5
                  (false)<\/td><\/tr>
                  Less Than<\/td>Evaluates whether the item on the left is less than the item on the right and returns TRUE if so, FALSE if not.<\/td><<\/td>3 < 7
                  (true)

                  5 < 2
                  (false)<\/td><\/tr>
                  AND<\/td>Used in logic comparisons to evaluate whether multiple statements are true\/false. Returns TRUE if all statements are true, otherwise returns false.<\/td>Java<\/em>: &&
                  JavaScript<\/em>: &&
                  C\/C++<\/em>: &&
                  Python<\/em>: and<\/td>                  		13 < 17
                  &&
                  pizza == “food”
                  (true)<\/td><\/tr>
                  OR<\/td>Used in logic comparisons to evaluate whether any statement is true, when given multiple statements. Returns TRUE if any statement is true, otherwise returns false if all are false.<\/td>Java<\/em>: ||
                  JavaScript<\/em>: ||
                  C\/C++<\/em>: ||
                  Python<\/em>: or<\/td>                  		13 > 17
                  ||
                  “pizza” == “food”
                  (true)<\/td><\/tr>
                  Logical NOT<\/td>Inverts the truth of the statement it precedes (e.g. !true is equal to false).
                  This is often used when evaluating the result from a function that returns a true\/false response.<\/td>                  		!<\/td>!(“pizza” == “food”)
                  (false)<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n\n
                  \n
                  = and == are different!<\/h4>\n\n\n\n
                  =<\/strong> (a single equals sign) is the assignment operator, used to assign values to variables.<\/p>\n\n\n\n
                  ==<\/strong> (two equals signs) is the equality comparison operator, used to see whether two items are equal.<\/p>\n\n\n\n
                  They are not the same thing!<\/p>\n\n\n\n
                  This is one of most common and easiest mistakes for programmers to make. Even seasoned professionals will accidentally mix these up from time to time.<\/p>\n<\/div>\n\n\n\n
                  Specialty Operators<\/h4>\n\n\n\n
                  Some operations are (relatively) common in programming languages but not so much in non-programming contexts. It’s helpful to know the symbols for these operations as you learn to program, even if you may not need to use them frequently.<\/p>\n\n\n\n
                  \n
                  Symbol<\/strong><\/td>Operation<\/strong><\/td>Definition<\/strong><\/td>Example<\/strong><\/td><\/tr>
                  ++<\/td>Increment (add 1)<\/td>Increases an integer or variable by 1. Frequently used in loops and when counting iterations of a task.<\/td>For variable myNumber<\/em>:
                  myNumber++<\/td><\/tr>
                  —<\/td>Decrement (subtract 1)<\/td>Decreases an integer or variable by 1. Frequently when repeating a task a set number of times.<\/td>For variable myNumber<\/em>:
                  myNumber–<\/td><\/tr>
                  %<\/td>Modulo (sometimes called modulus<\/em> or remainder<\/em>)<\/td>Returns the whole-number remainder of division between two integers<\/td>15 % 6
                  returns 3
                  (15 \u00f7 6 = 2, remainder 3)<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n\n
                  Functions<\/h3>\n\n\n\n
                  Functions are one of the foundational concepts in programming. Nearly every language has some concept of functions, though the syntax varies from language to language<\/p>\n\n\n\n
                  \n
                  Functions<\/h4>\n\n\n\n
                  A function is a block of instructions that can be reused in a program without needing to be rewritten every time.<\/p>\n\n\n\n
                  The programmer first declares<\/em> the function, which means giving the function a name and writing the code that it will execute.<\/p>\n\n\n\n
                  Once it has been declared, the programmer can then call<\/em> the function elsewhere in the program.<\/p>\n\n\n\n
                  Functions can take input, called arguments<\/em> or parameters<\/em>, and give output, called return values.<\/em><\/p>\n<\/div>\n\n\n\n
                  A function can take one or more arguments<\/strong>, or input. These are a way to get data from outside the function, into the function so it can be processed. They are also sometimes called parameters<\/em>.<\/p>\n\n\n\n
                  Functions can also have a return value<\/strong>, or output. This is data the function spits out when the program calls it.<\/p>\n\n\n\n
                  Not every function needs a return value, but it is generally good practice to have a function return<\/em> when it is done running its code.<\/p>\n\n\n\n
                  For most programming languages, functions are called by using the function name followed by parentheses, e.g. myFunction() which contain any arguments the function may take, or are blank if no arguments are needed.<\/p>\n\n\n\n
                  An example of a function (with no arguments) being declared and called in JavaScript:<\/p>\n\n\n\n
                  \n
                  <strong><em>function myFunction() {\n    console.log("I am a function!");\n    return;\n}\n\nmyFunction(); \/\/ Prints out 'I am a function!' to the browser console.<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                  An example of a function (with an argument and a return value) being declared and called in Python:<\/p>\n\n\n\n
                  \n
                  <strong><em>def myFunction(myName):\n    outputText = print("My name is" + myName)\n    return outputText \n    \nmyText = myFunction("Bucky") # Assigns the return value of the function to the variable myText\nprint(myText) # Prints out "My name is Bucky" to the screen<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                  Examples<\/h4>\n\n\n\n
                  Let’s say we are writing a program and want to take a person’s name as input and spit out a line of text that says, “Hello, [person’s name]!”. We’ll be outputting this line many places in our program, so it would be helpful to write a function that we can reuse and save ourselves time.<\/p>\n\n\n\n
                  To create the function we need to do the following:<\/p>\n\n\n\n
                    \n
                  1. Give the function a name (or declare<\/em> it) so we can call it later.<\/li>\n\n\n\n
                  2. Make sure it can accept input data (an argument<\/em>).<\/li>\n\n\n\n
                  3. Write the behavior<\/em> of the function (aka what it does: assemble the text, formatted the way we want it)<\/li>\n\n\n\n
                  4. Output (or return<\/em>) our line of text<\/li>\n<\/ol>\n\n\n\n
                    This is how you might write that function in JavaScript:<\/p>\n\n\n\n
                    \n
                    <strong><em>var sayHello = function(myName) {\n    var outputName = myName; \/\/ Create a variable and set it to be the value from the argument\n    var outputText = "Hello, " + outputName + "!"; \/\/ Create the string of text to return.\n    return outputText; \/\/ Output the variable as a return value\n}\n    \nvar ourText = sayHello("Bucky"); \n\/\/ Creates a variable named 'ourText', and assigns it a value\n\/\/ The value being assigned is the output of the function - in this case, 'Hello, Bucky!'\n\nconsole.log(ourText); \/\/ Output 'Hello, Bucky!' to the browser console.<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                    In Python, the code might look like this:<\/p>\n\n\n\n
                    \n
                    <strong><em>def sayHello(myName):\n    outputName = myName # Create a variable and set the function's argument as its value\n    outputText = "Hello, " + outputName + "!" # Create the string of text to output\n    return outputText # Output the variable as a return value\n\nourText = sayHello("Bucky") # Create a variable, 'ourText', and assign the function output to it\n\nprint(ourText) # Output the contents of the 'text' variable to the command prompt.<\/em><\/strong><\/code><\/pre>\n<\/div>\n<\/section>\n\n\n\n
                    \n
                    Code Anatomy: Syntax and Program Structure<\/h2>\n\n\n\n
                    Expressions and Statements<\/h3>\n\n\n\n
                    Just as words need to be combined into sentences to fully convey meaning, Variables, Data types, and Operators are not particularly useful until they are combined into statements<\/strong> or expressions.<\/strong> These are units of code that convey an instruction to the computer.<\/p>\n\n\n\n
                    They are subtly different (specifically, an expression has a value associated with it, while a statement does not), but for the purposes of this manual, they can be used interchangeably.<\/p>\n\n\n\n
                    \n
                    Statements and Expressions<\/h4>\n\n\n\n
                    Statements and expressions are short blocks of code that produce some behavior in a program and usually involve variables and\/or operators.<\/p>\n\n\n\n
                    They are slightly different (specifically, a statement is a unit of code that produces behavior, an expression has a value associated with it), but most of the time the terms can be used interchangeably.<\/p>\n<\/div>\n\n\n\n
                    Most of the code that programmers write is a series of statements or expressions.<\/p>\n\n\n\n
                    Ending a Statement<\/h3>\n\n\n\n
                    Different languages end statements in different ways.<\/p>\n\n\n\n
                    Languages like JavaScript and Java whose syntax is based on the language C usually use a semicolon to end their statements. This means a single statement or expression can extend over multiple lines, and only ends when the interpreter encounters the semicolon character.<\/p>\n\n\n\n
                    In the example below, the statement (which is assigning 3 variables in a single statement), is split over multiple lines.<\/p>\n\n\n\n
                    \n
                    <strong><em>var myName = 'Bucky',\n    myAge = 20,\n    currentCourse = 'CS 400';<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                    Python uses the line-endings to indicate the end of a statement. That means statements can’t extend onto multiple lines.<\/p>\n\n\n\n
                    \n
                    <strong><em>myName = "Bucky"\nmyAge = 20<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                    Blocks<\/h3>\n\n\n\n
                    Most programming languages have some concept of a block<\/em>, or a section of code that is treated as a unit. Things like functions and IF statements (which we will cover later) use blocks to differentiate their code from the rest of the program.<\/p>\n\n\n\n
                    Languages based on C, like Java and JavaScript, use curly braces { } to indicate a block.<\/p>\n\n\n\n
                    An example of an IF block in JavaScript:<\/p>\n\n\n\n
                    \n
                    <strong><em>if (x == 3) {\n    x = x + 1; \n    console.log("X now equals 4!");\n}<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                    Python is different, in that it uses indentation to indicate blocks:<\/p>\n\n\n\n
                    The same block as written in Python:<\/p>\n\n\n\n
                    \n
                    <strong><em>if x == 3:\n    x = x + 1\n    print("X now equals 4")<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                    Whitespace<\/h3>\n\n\n\n
                    Spaces and linebreaks in code are referred to as whitespace<\/em>.<\/p>\n\n\n\n
                    Some languages like Python care about how the whitespace in statements is formatted and structured, while others like Java and JavaScript do not.<\/p>\n\n\n\n
                    Consider the following examples that use JavaScript. These three bits of code will produce identical results even though the formatting is dramatically different:<\/p>\n\n\n\n
                    \n
                    <strong><em>if (x == 3) {\n    x = x + 1; \n    console.log("X now equals 4!");\n}<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                    \n
                    <strong><em>if \n(x == 3) \n{\nx = \nx + 1; \nconsole\n.log("X now equals 4!");\n}<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                    \n
                    <strong><em>if(x==3){x=x+1;console.log("X now equals 4!");}<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                    The spacing is there to improve readability for the humans working on the code, but as far as the computer is concerned, it does not matter.<\/p>\n\n\n\n
                    Python, on the other hand, cares a lot about spacing and indentation.<\/p>\n\n\n\n
                    Python sees the end of a line as the end of a statement, and it uses indentation to recognize where a block starts and stops.<\/p>\n\n\n\n
                    The following bit of code will produce an error if you try to run it because the IF statement block is formatted incorrectly:<\/p>\n\n\n\n
                    \n
                    <strong><em>if x == 3:\nx = x + 1\nprint("X now equals 4")<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                    The correct formatting is as follows (note the indentation):<\/p>\n\n\n\n
                    \n
                    <strong><em>if x == 3:\n    x = x + 1\n    print("X now equals 4")<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                    Many people consider Python easier to read because it requires programmers to use a certain level of formatting consistency.<\/p>\n\n\n\n
                    Comments<\/h3>\n\n\n\n
                    Nearly all programming languages have a way to add comments<\/em> to a program.<\/p>\n\n\n\n
                    Comments are bits of text that are ignored by the computer but help humans who are reading the code understand what it the program is doing.<\/p>\n\n\n\n
                    Different languages have different ways to indicate comments.<\/p>\n\n\n\n
                    Python uses the # character:<\/p>\n\n\n\n
                    \n
                    <strong><em>myName = 'Bucky' \n# Comments are ignored by the computer.<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                    JavaScript, Java, C++, and many others use \/\/ to create a comment.<\/p>\n\n\n\n
                    \n
                    <strong><em>var myName = 'Bucky';\n\/\/ Comments are ignored by the computer<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                    It is good practice to add comments to code that you are writing, to make it clear why that part of the program is coded the way it is.<\/p>\n\n\n\n
                    Comments are essential if you are working with other people on the same code base, but they are also important when working on projects by yourself. Every programmer has had the experience of writing code, then coming back to it a few weeks later and thinking “What does this do again? Why did I write it this way?” and having to re-discover what their own code is doing.<\/p>\n\n\n\n
                    Comments save time and help you stay organized, even when it’s just you working on a project yourself.<\/p>\n\n\n\n
                    Objects<\/h3>\n\n\n\n
                    A concept that is extremely common in modern programming is something called an object<\/strong>.<\/p>\n\n\n\n
                    An object is a structure in programming that has its own self-contained data<\/em> and behavior<\/em> – its own variables and functions. Objects are extremely helpful for keeping code organized and limiting the complexity of a program by abstracting away details that the programmer doesn’t need to know about in order to use the code.<\/p>\n\n\n\n
                    Variables and functions have special names when they belong to objects. A variable that belongs to an object is a property<\/em>, and a function that belongs to an object is a method<\/em>.<\/p>\n\n\n\n
                    \n
                    Object names almost always begin with a capital letter. This is not required, but it is a very widely used convention to make it easier for programmers to understand when an object is being used.<\/p>\n<\/div>\n\n\n\n
                    Dot Syntax<\/h3>\n\n\n\n
                    In JavaScript, Python and many other languages, properties and methods are referenced by using the object’s name, followed by a dot and then the name of the property or method. This is known as dot syntax<\/em>.<\/p>\n\n\n\n
                    They can be referenced different ways in different languages, but dot syntax is what you are most likely to encounter.<\/p>\n\n\n\n
                    The following examples use an imaginary object, Bucky (which is an instance of the class Badger), that has the property name and the method sayHello()<\/p>\n\n\n\n
                    \n
                    <strong><em>Bucky = new Badger;\nconsole.log(Bucky.name); \/\/ Outputs the property 'name'.\nBucky.sayHello(); \/\/ Calls the method\/function sayHello() and executes its code<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                    You will frequently run into Objects when using different libraries<\/em>, or pre-written packages of code that can be incorporated into your own projects.<\/p>\n\n\n\n
                    For example, there is a Math object in JavaScript that allows us to use common math functions like rounding and max\/min and constants like pi without having to write them ourselves.<\/p>\n\n\n\n
                    \n
                    <strong><em>var p = Math.PI; \/\/ Assigns the variable p the value of pi\nvar x = Math.round(3.7); \/\/ Assigns 4 to the variable x\nvar y = Math.sqrt(16); \/\/ Assigns the square root of 16 (4) to variable y<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                    Classes<\/h3>\n\n\n\n
                    Every object is an instance of a class<\/em>. A class is basically a blueprint that specifies the properties and methods object built constructed from it will have.<\/p>\n\n\n\n
                    Programmers only need to write the definition for the class once, and then every time they create an object based on that class, the object will automatically inherit all of that code for free.<\/p>\n\n\n\n
                    As you get started learning how to program, you will probably not immediately need to know how to write classes of your own, but it is helpful to have an idea of what they are and to know how an object is made or instantiated<\/em> from one.<\/p>\n\n\n\n
                    Instantiating Objects<\/h3>\n\n\n\n
                    Most of the time an object is brought into the program by assigning it to a variable using the new keyword, and referencing a class name:<\/p>\n\n\n\n
                    \n
                    <strong><em>Bucky = new Badger;<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                    This is saying “create an instance of an object called Bucky, and build it according to the blueprint laid out in the class called Badger.”<\/p>\n\n\n\n
                    You will see this construction frequently when using libraries written by other programmers.<\/p>\n<\/section>\n\n\n\n
                    \n
                    Code Anatomy: Control Flow<\/h2>\n\n\n\n
                    This section will look at different ways to direct the code towards the outcomes we want, using two extremely common programming concepts: conditionals<\/em> and loops<\/em><\/p>\n\n\n\n
                    \n\n\n\n
                    One of the most useful things we can do with programming is have different code execute based on different conditions.<\/p>\n\n\n\n
                    The most common way to trigger different code paths is using an if statement.<\/p>\n\n\n\n
                    IF statements<\/h3>\n\n\n\n
                    Say we are writing a weather app and want to customize the message that the user receives depending on the current temperature.<\/p>\n\n\n\n
                    If the current temperature is higher than average, we want it to say one thing, and if it’s lower than average, we want it to say something else.<\/p>\n\n\n\n
                    To accomplish this, we use something called a conditional<\/strong>, also known as an IF statement<\/strong>.<\/p>\n\n\n\n
                    For the weather example, the conditionals might look like the following:<\/p>\n\n\n\n
                    (Note: this example does not use a real programming language. It is written in ‘pseudocode’, which means it is using normal human language, but formatted as it would be in a program)<\/em>.<\/p>\n\n\n\n
                    \n
                    <strong><em>If the temperature is higher than normal:\n    Say, "It sure is warm today!"\n\nOr, if the temperature is lower than normal:\n    Say, "It's cold out!"\n\nOtherwise, \n    Say "It's typical weather for today."<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                    Syntax<\/h4>\n\n\n\n
                    The specific syntax for IF statements varies from language to language, but they all tend to follow a basic convention.<\/p>\n\n\n\n
                    We will now step through and explain the following example of a conditional written in JavaScript:<\/p>\n\n\n\n
                    \n
                    <strong><em>if (todayTemp > averageTemp) {\n    console.log("It sure is warm today!");\n}\nelse if (todayTemp < averageTemp) {\n    console.log("It's cold out!");\n}\nelse {\n    console.log("It's typical weather for today.");\n}<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                    The first line of the code sets up the conditional:<\/p>\n\n\n\n
                    \n
                    <strong><em>if (todayTemp > averageTemp) {<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                    The if keyword tells the computer that the next block should only be run if a certain condition is met.<\/p>\n\n\n\n
                    The condition that determines whether the code will run is laid out in the parentheses immediately after the if keyword. This is basically just a yes-or-no question, written out in code. This expression is an example of a Boolean<\/em>, meaning the computer will look at whatever is in the parentheses and evaluate as being true or false.<\/p>\n\n\n\n
                    In this example, the question we are asking is “Is the number in the variable todayTemp<\/em> larger than the number in the variable averageTemp<\/em>?”<\/p>\n\n\n\n
                    If the answer is yes – meaning the expression in parentheses evaluates to true – the computer will execute the code block laid out by the curly braces { }<\/p>\n\n\n\n
                    If the expression in the first set of parentheses is true, the computer executes the code in the first set of braces, ignores the next two blocks, and moves on with its life.<\/p>\n\n\n\n
                    If the expression is false, the computer looks to see if any other conditions have been specified and proceeds to check those.<\/p>\n\n\n\n
                    The ways we can set up those additional conditions are using the else if and else keywords.<\/p>\n\n\n\n
                    The else if keyword is setting up another yes-no question that will only be asked if the first conditional in the initial if statement is false.<\/p>\n\n\n\n
                    The else keyword sets up code to execute in the event that none of the conditions laid out in the if or else if statements are true.<\/p>\n\n\n\n
                    \n
                    <strong><em>If (condition A) is true, do this.\n\nOtherwise, check if condition B is true. If so, do this other thing.\n\nIf neither A nor B is true, check if condition C is true. If so, do this third thing.\n\nIf none of those are true do this last thing.<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                    The else code is only executed if none of the other conditions that have been specified are true.<\/p>\n\n\n\n
                    Loops<\/h3>\n\n\n\n
                    One of programming’s superpowers is the ability to quickly do the same task multiple times with a single block of code.<\/p>\n\n\n\n
                    Say you had a list of 100 people. In this list, each entry has three pieces of information: their first name, their last name, and their job title.<\/p>\n\n\n\n
                    You want to output each person’s name and job title as a single item, formatted a particular way:

                    Last, First: Title<\/p>\n\n\n\n
                    Doing this by hand would require multiple steps for each entry:<\/p>\n\n\n\n
                      \n
                    • Copy their last name<\/li>\n\n\n\n
                    • Paste their last name into a new location<\/li>\n\n\n\n
                    • Add a space after their name<\/li>\n\n\n\n
                    • Copy their first name<\/li>\n\n\n\n
                    • Paste it after the space<\/li>\n\n\n\n
                    • Add a colon : and a space after their first name<\/li>\n\n\n\n
                    • Copy their job title<\/li>\n\n\n\n
                    • Paste their job title after the colon and space<\/li>\n\n\n\n
                    • Output the new item with their name and job title.<\/li>\n<\/ul>\n\n\n\n
                      That’s a 9-step process, for each name in the list – 900 steps in total!<\/p>\n\n\n\n
                      Even if a human were able to perform each step at a consistent (also unrealistic) rate of half a second each, it would still take them 7 and a half minutes to complete.<\/p>\n\n\n\n
                      With a computer, we could go through and complete that task in a fraction of a second using something called a loop.<\/p>\n\n\n\n
                      \n
                      Loop<\/h4>\n\n\n\n
                      A loop is a way to have a computer repeat a block of code multiple times according to a set of conditions provided by the programmer.<\/p>\n\n\n\n
                      The types of loops you will most often see are for<\/em> loops (most common) and do<\/em>\/while<\/em> loops.<\/p>\n<\/div>\n\n\n\n
                      With loops, we only need to tell the computer how to do the ‘last name-first name-job title’ process once, and then as long as the list of data we give it is formatted in a predictable way, it can repeat it as many times as we need.<\/p>\n\n\n\n
                      For Loops<\/h3>\n\n\n\n
                      One of the most common loops we see in programming is called a for loop.<\/p>\n\n\n\n
                      These specify a set of condition using the for keyword (as in, ‘for the following conditions, do X’), and then have a block of code that will be repeated until the conditions are fulfilled.<\/p>\n\n\n\n
                      In pseudocode, a for loop is the following:<\/p>\n\n\n\n
                      \n
                      <strong><em>for (these conditions), repeat the following:\n    code statement 1\n    code statement 2\n    code statement ...<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                      To write a for loop for the above example (e.g. take a list and output each item in the format “Last name, First name: Job Title”) in JavaScript, the code would look something like this:<\/p>\n\n\n\n
                      \n
                      for(var i = 0; i < 30; i++) {\n    outputText = myList[i].lastName + ", " + myList[i].firstName + ": " + myList[i].jobTitle;\n    console.log(outputText)\n}<\/code><\/pre>\n<\/div>\n\n\n\n
                      This initial statement sets up the whole for block:<\/p>\n\n\n\n
                      \n
                      <strong><em>for(var i = 0; i < 100; i++)<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                      This construction is common in languages that use syntax based on the language C, like C++, Java, and JavaScript. Python does for loops a little bit differently, and we’ll go through that in a moment.<\/p>\n\n\n\n
                      The for keyword lets the computer know it’s a loop, and the piece inside the parentheses sets the conditions.<\/p>\n\n\n\n
                      But what do those conditions mean? The code in the for( … ) piece is a little unusual at first – let’s unpack it.<\/p>\n\n\n\n
                      It’s actually three separate statements:<\/p>\n\n\n\n
                      \n
                      <strong><em>var i = 0;<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                      \n
                      <strong><em>i < 100;<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                      \n
                      <strong><em>i++;<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                      The first statement:<\/p>\n\n\n\n
                      \n
                      <strong><em>var i = 0;<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                      initializes a variable, i, and sets it to 0. This is just a regular variable and could be called anything, but the convention with for loops is to name it i (for index<\/em> or iterator<\/em>). If there are loops within loops (which is not uncommon), the subsequent variables are often called j, k, etc. as a cue to people looking at the code that it is a sub-loops within the first i.<\/p>\n\n\n\n
                      The second piece:<\/p>\n\n\n\n
                      \n
                      <strong><em>i < 100;<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                      sets up the condition when the loop should end. In this case, as long as i is less than 100, the loop should continue. Once i reaches 100, the loop will stop repeating.<\/p>\n\n\n\n
                      But how does i change?<\/p>\n\n\n\n
                      That’s what the third piece does:<\/p>\n\n\n\n
                      \n
                      <strong><em>i++;<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                      That statement increments<\/em> i by one – meaning it adds one to the current value of i. It is functionally the same as i = i + 1, but it is such a frequently done operation that it has its own operator, ++.<\/p>\n\n\n\n
                      So summing up the for statement construction:<\/p>\n\n\n\n
                      \n
                      for(var i = 0; i < 100; i++) { [code statements] }<\/code><\/pre>\n<\/div>\n\n\n\n
                        \n
                      1. for(…) tells the computer to initiate the loop<\/li>\n\n\n\n
                      2. var i = 0; runs before the loop starts and sets up the index\/iteration counter that will be used to see whether to continue running the loop<\/li>\n\n\n\n
                      3. i < 100; runs before each iteration and checks whether the condition has been met (e.g. if i is still less than 100). If not, it executes the next iteration<\/li>\n\n\n\n
                      4. i++ runs after each iteration and increments the counter.<\/li>\n\n\n\n
                      5. The { } block contains the code that will be repeated on each iteration.<\/li>\n<\/ol>\n\n\n\n
                        \n
                        <strong><em>myList = [ {"firstName": "Bucky", "lastName" : "Badger", "jobTitle": "Mascot"}, {"firstName": "Terry", "lastName" : "Tortoise", "jobTitle": "Slowpoke"}, {"firstName": "Spongebob", "lastName" : "Squarepants", "jobTitle": "Fry cook"} ]<\/em><\/strong><\/code><\/pre>\n<\/div>\n<\/section>\n\n\n\n
                        \n
                        The Coding Process<\/h2>\n\n\n\n
                        Editors and IDEs<\/h3>\n\n\n\n
                        Most programming languages use standard, plain text files for their code scripts. Because these are just regular text, you can open and view most code files with any text editor – Notepad, TextEdit, or even Microsoft Word.<\/p>\n\n\n\n
                        Even though it’s technically possible to write programs using Notepad or TextEdit, the experience of writing code is improved immensely by using an editor that’s specifcally intended for code.<\/p>\n\n\n\n
                        Some of the quality-of-life enhancements that code editors provide include:<\/p>\n\n\n\n
                          \n
                        1. Syntax highlighting.<\/strong> Different parts of the code using different colors or fonts to let you visually differentiate between things like variable names, functions, IF statements, etc. at a glance.<\/li>\n\n\n\n
                        2. Code completion.<\/strong> Many code editors will auto-complete things like function names or variables that you have created as you type them. This can saves time and can help prevent bugs that come from mis-typing the name of a variable or function.<\/li>\n\n\n\n
                        3. Linting\/syntax-checking.<\/strong> Code editors let you use something called linting<\/em>, which is the term for making sure your code follows all correct syntax and style conventions. Linters help you find errors before running the program, so you don’t need to spend time debugging easy to miss errors like forgetting a semicolon at the end of a statement or not closing an IF block.<\/li>\n\n\n\n
                        4. Debugging Tools.<\/strong> Many code editors offer tools like debuggers that let you step through code line by line and see what each statement is doing. These can help you figure out why a program isn’t working as expected.<\/li>\n\n\n\n
                        5. Project\/file management.<\/strong> Many code editors make it easy to find files and see the folder structure for your project at a glance, as well as things like having multiple files open side-by-side in the editing window.<\/li>\n<\/ol>\n\n\n\n
                          Code Editors<\/h4>\n\n\n\n
                          There are a variety of editors available, and they all have different strengths and uses.<\/p>\n\n\n\n
                          Some of the most popular general-purpose code editors as of early 2021 include:<\/p>\n\n\n\n
                            \n
                          1. Visual Studio Code<\/li>\n\n\n\n
                          2. Sublime Text<\/li>\n\n\n\n
                          3. Atom<\/li>\n\n\n\n
                          4. Brackets<\/li>\n\n\n\n
                          5. Nova<\/li>\n\n\n\n
                          6. Notepad++<\/li>\n\n\n\n
                          7. BBEdit<\/li>\n<\/ol>\n\n\n\n
                            Most of these are free and support many different programming languages, from the big ones (C, Java, JavaScript, Python, etc.) to more esoteric ones (Go, Rust, etc.)<\/p>\n\n\n\n
                            Many code editors support extensions or plugins, which allow you to expand the functionality of the editor to do things like custom code highlighting, pre-written snippets, API documentation, and more.<\/p>\n\n\n\n
                            IDEs<\/h4>\n\n\n\n
                            Some languages are made easier by using an IDE, or Integrated Development Environment.<\/em><\/p>\n\n\n\n
                            An IDE is a code editor with more features. They include things like comprehensive syntax-checking, code-completion, documentation for the current programming langage\/API, as well as tools like compilers and package managers. These are extremely important for compiled languages like Java, C++, and Swift, which require the additional step of compiling the code into an application before it can be run.<\/p>\n\n\n\n
                            Many IDEs will have a tool set that focuses on a primary language like Java or Objective-C, but support the syntax and tooling for many other languages.<\/p>\n\n\n\n
                            Examples of IDEs include:<\/p>\n\n\n\n
                              \n
                            1. Eclipse (Java)<\/li>\n\n\n\n
                            2. IntelliJ (Java)<\/li>\n\n\n\n
                            3. PhpStorm (PHP)<\/li>\n\n\n\n
                            4. XCode (Swift and Objective-C)<\/li>\n\n\n\n
                            5. Aptana (general purpose)<\/li>\n<\/ol>\n\n\n\n
                              Libraries and APIs<\/h3>\n\n\n\n
                              It’s rare for a programmer to write every single line of code that a program uses, especially when working on a large code base. Most programmers incorporate libraries<\/em> into their programs. Libraries are packages of code written by other people, that solve a particular problem or perform a certain function so the programmer doesn’t have to write it themselves from scratch.<\/p>\n\n\n\n
                              \n
                              Libraries<\/h4>\n\n\n\n
                              Libraries are collections of code that are meant to be incorporated into other programs to add functionality or make the programmer’s job easier.<\/p>\n\n\n\n
                              Libraries can range from simple one-or-two line utilities that add basic features, to comprehensive tool kits that provide extensive new functionality to a language.<\/p>\n<\/div>\n\n\n\n
                              Standard Library<\/h4>\n\n\n\n
                              Most languages have something called a standard library<\/em> that is packaged with the interpreter\/compiler. The specific functions in a standard library vary from language to language, but they are all doing the same thing: providing features that are not present natively in the core language syntax.<\/p>\n\n\n\n
                              Features in a standard library can include things like file input\/output, functions to sort the items in an array or list, math functions like min\/max, randomize, etc.<\/p>\n\n\n\n
                              Some languages have comprehensive standard libraries. Others include only a few basic functions in the standard library, and programmers will include additional packages and libraries when they need more features.<\/p>\n\n\n\n
                              APIs<\/h4>\n\n\n\n
                              Another term that is common in programming the Application Programming Interface<\/em>, or API.<\/p>\n\n\n\n
                              An API is a set of features that provide access to certain functions without the programmer having to write the code themselves. An API is similar to a library, but often more standardized and more comprehensive. It is an example of abstraction, where it allows the programmer to use functionality without having to know the details of how it is implemented.<\/p>\n\n\n\n
                              For example, the API for Swift and Objective-C (the programming languages used for MacOS and iOS app development) includes functions (also called methods<\/em>) that let the programmer do things like take a photo with the camera in an iPhone without having to know anything about the technical details of the camera itself.<\/p>\n\n\n\n
                              The process of an iPhone camera producing a digital photograph involves many, many complicated steps and requires a complex interplay between the phone’s hardware and software. Engineers at Apple did the hard work of finding solutions to these processes, and they provided a straightforward way to use that functionality via a command in the API. An everday programmer coding an iPhone app can use the function in the API without having to know any of the complicated aspects of the mechanisms involved.<\/p>\n\n\n\n
                              In JavaScript, the common function document.GetElementByID() is part of the API for working with documents in a web browser.<\/p>\n\n\n\n
                              Coders don’t need to know anything about how the browser manages page memory, interacts with the operating system, parses the structure of the HTML, or any of the other countless things involved in displaying and accessing the contents of a website. They can simply use that command and it will return the requested item within the page.<\/p>\n\n\n\n
                              Version Control<\/h3>\n\n\n\n
                              In situations where the code base grows more complicated than one person can easily keep track of or when multiple people are working on a project, it is essential to incorporate version control<\/strong> into the development process.<\/p>\n\n\n\n
                              Version control means keeping a record of all the changes that have been made over the lifespan of a project. This is helpful if the coder wants to refer to a previous version of the program, or if they make a change that breaks something and want to identify where the bug occured. When new code is added or old features are removed, so the coder can revert to previous<\/p>\n\n\n\n
                              One of the other main features of version control is the ability to create branches<\/em> of a project. A branch is a parallel version of the code that have different sections included. Branches are helpful for testing out new features without affecting the rest of the code.<\/p>\n\n\n\n
                              Version control is essential when multiple people are working on a project, because it allows everyone’s changes to be consolidated into one central set of code without overwriting the work of the other collaborators.<\/p>\n\n\n\n
                              git and GitHub<\/h4>\n\n\n\n
                              The most common version control system in use today is called git<\/em>. Git is an open-source tool that can be installed in a project folder and can be used to keep track of all files, chnages, and updates over the lifetime of the project. A git project is known as a file repository<\/em> or repo<\/em> for short.<\/p>\n\n\n\n
                              GitHub is a popular online platform for hosting and collaborating on shared git projects. It is used extensively for collaboration on open source code projects, but it is also used by individuals as a cloud-based way to manage their code.<\/p>\n\n\n\n
                              \n
                              Git and GitHub are Different!<\/h4>\n\n\n\n
                              Git<\/em> is an open source tool that anyone can download and use locally on their computer.<\/p>\n\n\n\n
                              GitHub<\/em> is an online service\/platform that is owned by Microsoft that is used to facilitate working together on shared git projects.<\/p>\n\n\n\n
                              The terms are often used interchangeably, but you do not need GitHub to use git on your projects<\/strong>. GitHub is the most popular platform for collaborating on code projects, but there are other services you can use as well, such as BitBucket, SourceForge, and Launchpad.<\/p>\n<\/div>\n<\/section>\n\n\n\n
                              \n
                              References<\/h2>\n\n\n\n
                              \n
                              Computer Program<\/h3>\n\n\n\n
                              A computer program<\/em> is any collection of code that has been written to instruct a computer how to do something. Computer programs go by many names, including scripts, applications\/apps, algorithms, and more.<\/p>\n\n\n\n
                              Anything from a simple 1-line script to a professional application containing millions of lines of code can be considered a program.<\/p>\n<\/div>\n\n\n\n
                              <\/p>\n\n\n\n
                              \n
                              Bit<\/h3>\n\n\n\n
                              A bit, which is short for binary digit<\/em>, is a unit of information that can be in one of two states (on\/off, true\/false, 0\/1, etc.).<\/p>\n\n\n\n
                              It is the fundamental building block of computing and is the basis of binary code, which is how computers read and interact with information.<\/p>\n<\/div>\n\n\n\n
                              <\/p>\n\n\n\n
                              \n
                              Byte<\/h3>\n\n\n\n
                              A byte is the fundamental unit of computer storage and information processing. Bytes (usually) consist of 8 bits, and form the smallest unit that can be stored in computer memory.<\/p>\n\n\n\n
                              Computer memory and storage space are measured in bytes, usually with a prefix indicating a multiple of ten (kilobyte = approximately one thousand bytes, gigabyte = 1 billion bytes, etc.)<\/p>\n<\/div>\n\n\n\n
                              <\/p>\n\n\n\n
                              \n
                              Abstraction<\/h3>\n\n\n\n
                              Abstraction<\/strong> is the process of providing a way to accomplish a task, which does not require knowledge of how the task is achieved.<\/p>\n\n\n\n
                              It allows users to employ potentially complicated, multi-step technical processes without having to know the implementation details of how the task is accomplished.<\/p>\n<\/div>\n\n\n\n
                              <\/p>\n\n\n\n
                              \n
                              Programming Languages<\/h3>\n\n\n\n
                              A programming language is a medium that instructions can be written in that a computer can interpret to execute a given task.<\/p>\n\n\n\n
                              Like human languages, most programming languages have certain structures and concepts in common but each has its own syntax and vocabulary.<\/p>\n<\/div>\n\n\n\n
                              <\/p>\n\n\n\n
                              \n
                              Variables<\/h3>\n\n\n\n
                              Variables are virtual containers that are used to hold data so that it can be used elsewhere in a program.<\/p>\n\n\n\n
                              They have a name<\/em> (or identifier<\/em>), and contain a value<\/em>.<\/p>\n\n\n\n
                              Data is almost always assigned to a variable using the assignment operator<\/em>, which is a single equals sign: =<\/p>\n\n\n\n
                              Examples:<\/em><\/p>\n\n\n\n
                              \n
                              <strong><em>x = 23<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                              \n
                              <strong><em>var myName = "Bucky"<\/em><\/strong><\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
                              <\/p>\n\n\n\n
                              \n
                              Data Types<\/h3>\n\n\n\n
                              A data type indicates the kind of information that is being referenced\/stored.<\/p>\n\n\n\n
                              Common data types include integers<\/strong> (numbers with no decimals), strings<\/strong> (text), floats<\/strong> (numbers with decimals), Boolean<\/strong> (true\/false), and arrays<\/strong> or lists<\/strong> (containers with multiple items).<\/p>\n\n\n\n
                              Some programming languages require the programmer to explicitly indicate the type of any data they are storing or accessing. Other languages will try to infer it based on the data being stored\/accessed.<\/p>\n<\/div>\n\n\n\n
                              <\/p>\n\n\n\n
                              \n
                              Functions<\/h3>\n\n\n\n
                              A function is a block of instructions that can be reused in a program without needing to be rewritten every time.<\/p>\n\n\n\n
                              The programmer first declares<\/em> the function, which means giving the function a name and writing the code that it will execute.<\/p>\n\n\n\n
                              Once it has been declared, the programmer can then call<\/em> the function elsewhere in the program.<\/p>\n\n\n\n
                              Functions can take input, called arguments<\/em> or parameters<\/em>, and give output, called return values.<\/em><\/p>\n<\/div>\n\n\n\n
                              <\/p>\n\n\n\n
                              \n
                              Statements and Expressions<\/h3>\n\n\n\n
                              Statements and expressions are short blocks of code that produce some behavior in a program and usually involve variables and\/or operators.<\/p>\n\n\n\n
                              They are slightly different (specifically, a statement is a unit of code that produces behavior, an expression has a value associated with it), but most of the time the terms can be used interchangeably.<\/p>\n<\/div>\n\n\n\n
                              <\/p>\n\n\n\n
                              \n
                              Loop<\/h3>\n\n\n\n
                              A loop is a way to have a computer repeat a block of code multiple times according to a set of conditions provided by the programmer.<\/p>\n\n\n\n
                              The types of loops you will most often see are for<\/em> loops (most common) and do<\/em>\/while<\/em> loops.<\/p>\n<\/div>\n\n\n\n
                              <\/p>\n\n\n\n
                              \n
                              Libraries<\/h3>\n\n\n\n
                              Libraries are collections of code that are meant to be incorporated into other programs to add functionality or make the programmer’s job easier.<\/p>\n\n\n\n
                              Libraries can range from simple one-or-two line utilities that add basic features, to comprehensive tool kits that provide extensive new functionality to a language.<\/p>\n<\/div>\n<\/section>\n","protected":false},"author":19,"featured_media":0,"template":"","meta":{"_acf_changed":false,"_uw_seo_meta_title":"","_uw_seo_meta_description":"","_uw_seo_twitter_card_type":"summary_large_image","_uw_seo_meta_image":"","_uw_seo_meta_image_url":"","_uw_seo_meta_image_sizes":[],"_uw_seo_custom_meta_tags":[],"footnotes":""},"categories":[3],"class_list":["post-418","manual","type-manual","status-publish","hentry","category-coding-and-data"],"acf":[],"_links":{"self":[{"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/manual\/418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/manual"}],"about":[{"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/types\/manual"}],"author":[{"embeddable":true,"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/users\/19"}],"version-history":[{"count":2,"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/manual\/418\/revisions"}],"predecessor-version":[{"id":942,"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/manual\/418\/revisions\/942"}],"wp:attachment":[{"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/media?parent=418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/categories?post=418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}