Harvard CS50: Intro to Computer Science

Course Overview

• CS50 is Harvard University's introduction to computer science and the arts of programming.
• The course teaches algorithmic thinking and efficient problem-solving.
• Principles can be applied to various fields, including arts, humanities, and sciences
• The goal is to apply these principles to any field of interest, not just computer science

Instructor's Experience

• David Meen took CS50 in 1996 as a sophomore, initially concentrating in government.
• He discovered that computer science was about problem-solving and expressing oneself in code.
• Meen found the experience of solving bugs and mistakes in code incredibly gratifying and empowering.

Key to Success

• Allowing yourself enough time is important, as is starting work early in the week.
• Run into a wall, take a break, and come back to it later.
• Experience occasional frustration and a sense of accomplishment as part of the learning process.

Course Content

• Explores computational thinking and methodical problem-solving.
• Uses Scratch from MIT to explore computer science and programming ideas.
• Transitions to C, a lower-level language.
• Introduces Visual Studio Code (VS Code) for coding.
• Teaches about computer memory (RAM) and how data is stored.
• Covers debugging, algorithm design, and sorting algorithms.
• Uses metaphors like postal addresses to explain computer memory concepts.
• Highlights common computer issues like crashes and freezes caused by bugs in programs.
• Delves into data structures like hash tables, arrays, and linked lists.
• Introduces Python, a more modern, higher-level language, after C.
• Explores databases for large data storage.
• Offers an introduction to web development using HTML.
• Discusses Frameworks and libraries for web applications.

Course Progression

• Week 0 focuses on computational thinking using Scratch
• Week 1 transitions to coding in C and learning syntax
• Later, the course moves to Python and high-level coding concepts
• Discussed databases and web development concepts towards the end of the course

Course Goals

• Empower students to solve problems and analyze data in various fields.
• Help students understand the underlying concepts of computer science, even when using higher-level languages.
• Enable students to build interactive web applications and other projects.
• Provide the foundations to keep up with software design.
• Encourage students to apply computer science principles to their fields of interest.

Student Demographics

• Two-thirds of students have never taken a CS class before.
• Focus is on personal growth in CS, not comparison to classmates

Course Tradition

• CS50 Puzzle Day: A logic puzzle event that requires no prior experience in CS
• CS50 Hackathon: 12-hour event for students to collaborate on final projects.

CS50 Fair

• The CS50 Fair is an end-of-semester celebration and exhibition.
• It showcases student accomplishments from the course.
• Students exhibit their projects in person and on video.

Computer Science

• Computer science is the study of information.
• It involves representing information and processing it.
• Computational thinking applies computer science ideas to various problems.

Problem Solving

• Problem-solving involves an input (the problem).
• The goal is to generate an output (the solution).
• A "black box" represents the secret sauce (algorithm) that solves the problem.
• The representation of inputs and outputs and coding solutions are important.

Representing Information: Unary System

• Unary is a simple counting system using a single symbol (e.g., a finger).
• In unary, each item is represented by one symbol.
• Base one is a mathematical term for unary.

Representing Information: Binary System

• Computers use the binary system.
• Binary uses two digits: 0 and 1.
• A bit is a binary digit (0 or 1).
• Bits are physically represented using switches (transistors) inside computers.
• A light bulb being off represents 0, and on represents 1.
• Computers have millions of transistors that can be either on or off

Base Systems: Unary, Binary, Decimal

• Unary, binary, and decimal are all ways to represent information.
• Unary (base 1) uses one digit.
• Binary (base 2) uses two digits (bits).
• Decimal (base 10) uses ten digits (0-9).
• Computers use binary due to the on/off nature of electricity.
• Humans commonly use decimal.

Bits and Bytes

• A bit is a 0 or 1, a binary digit.
• A byte is eight bits.
• Bytes are used to measure file sizes (kilobytes, megabytes, gigabytes).
• With eight bits, a computer can represent the numbers 0 to 255.

Representing Text: ASCII

• Computers use numbers to represent letters.
• The American Standard Code for Information Interchange (ASCII) maps numbers to letters.
• 'A' is represented by the decimal number 65.
• 'B' is represented by 66, 'C' by 67, and so on.
• ASCII also represents numbers as other numbers, where typing "1" is stored as the decimal number 49.

ASCII Limitations

• ASCII is American-centric and doesn't support many non-English characters.
• Accented characters and many Asian alphabets aren't included.

Unicode

• Unicode is a broader character set that supports multiple languages.
• It uses multiple bytes to represent characters, including emoji.
• The Unicode Consortium aims to digitally capture all forms of human language.
• It can use as many as 32 bits to represent characters
• It contains room for more playful characters like Emojis

Emoji Representation

• Emoji are characters represented by specific bit patterns in Unicode
• Face with tears of joy emoji is a specific pattern chosen by the Unicode Consortium
• Different platforms (iOS, Android) may render emoji differently due to font variations
• Emojis skin tones are implemented by using a base Emoji code followed by a certain shade of color.
• A set of bits represents the characters that were chosen the Unicode folks.

Image Representation (RGB)

• Images are represented using the RGB color model (red, green, blue).
• Each dot (pixel) on the screen has values for red, green, and blue.
• Each color value is represented by a byte (0-255).
• Different combinations of red, green, and blue create different colors.

Video Representation

• A video consists of a sequence of images shown over time
• Films typically run at 24 frames per second (FPS).
• TV runs at 30 FPS often

Audio Representation

• Musical notes can digitize sound.
• Assign frequency values with numbers
• Could assign specific frequency values in Hertz
• Can use numbers that represent how hard a key has been pressed
• Also utilize how long the hold the key down

Abstraction in Problem Solving

• Abstraction simplifies something by hiding lower-level implementation details.
• A car is an abstraction, where most drivers don't need to know how the engine works.

Algorithms: Step-by-Step Instructions

• An algorithm is a step-by-step instruction for solving a problem.

Example: Searching a Phone Book

• A problem is searching for someone in a phone book
• A simple but slow algorithm is turning page by page.
• A better approach is to open the book in the middle and divide and conquer.

Algorithm Performance

• First algorithm (page by page): time to solve is directly proportional to the problem size (linear).
• Second algorithm skipping one page: faster but still linear
• Third algorithm (divide and conquer): time increases logarithmically with problem size.

Pseudo Code

• Pseudo Code is an English-like Syntax
• Pseudo code is an outline for ideas
• First, get a Phone book
• Then, open the page in the middle
• If and Else statements, otherwise known as conditional statements
• Using English verbs which are known in coding as Functions
• Use of Loops within the Pseudo Code.

Programming Concepts

• Algorithms = functions.
• if/else statements= conditionals
• The conditions create boolean statements that have two answers "yes" (1, true) or "no" (0, false).
• Use of Loops for algorithms.

Scratch Introduction

• Scratch is a graphical programming language from MIT's Media Lab.
• Users drag and drop puzzle pieces (blocks) to create animations and interactive software.

Scratch Interface

• The left side of the screen has a blocks palette with different colored blocks.
• The middle has the code area.
• The bottom right has the Sprite area, where sprites (characters) are located.
• The top right is the stage where the Sprite exists, you can zoom in as well.

Sprite Coordinate System

• Sprites exist in a 2D coordinate system.
• The center is (0, 0).
• The x-axis ranges from -240 to 240.
• The y-axis ranges from -180 to 180.
• Useful for having sense of direction and having the sprites move up down or left to right

Scratch: Creating a Simple Program

• Drag a "when green flag clicked" event block.
• Drag a "say hello world" looks block.
• Click the green flag to run the program.

Scratch: Key Points

• An event is user interaction like tapping, long press, click, drag that triggers action on screen.
• Terminology is all about inputs producing outputs which is known as the algorithm function. The algorithm is the implement of the function being used and actioned.
• In scratch programming you don't have to type out code in C or Python.
• The white oval is the opportunity to provide an input into the function.

Scratch: Interactive Program

• Use a sensing block to ask a question.
• Use a "say" block after the question is answered.
• Use the "join apple and banana" block to combine "hello" with the user's named

Scratch: Bugs

• The computer processes actions and it’s very fast, may need slower time to compute on the computer.

Refining the Program

• The refined program adds words together in the user's interfaces.
• Need to find a “smarter way” to utilize

Scratch: Function for speaking

• It has synthetic speeches that have text.
• Functions or code need to be correct where the code does what you want but isn’t the best designs to utilize

Building Function

• Loops are needed for different forms and use the different types of features.
• Refactor Code to allow copy and paste by ripping of code to put it into its own function.

Power of Function

• Functions need algorithms- are code that do something.
• When functions have an existence they can be reused under the name that it was given
• Is an abstraction - something to reuse without care to build

Improving on Scratch and Adding Control

• Adding control requires implementing option and giving the use the opportunity to choose
• There are boolean expressions and questions with true or false, 1 or 0 where you have to decide which to do based on questions or circumstances. Conditional statements,

Scratch example with video

• Use “video sensing” that creates the ability for a device to sense and view the camera

Ivy's hardest game

• There are four Sprites which creates the illusion of movement and helps change costume
• There are more loops and there’s variables like x, y, z
• Variables like scores and countdowns help store and keep the movement running

Visual C introduction to Source Code

• Source Code: human programs write source code, everything you’re about to see is code from the humans, what they write
• Machine Code consists of binary ones and zeros
• Computers need to understand not only the numbers but know how to execute them
• With computer there is special programs to solve this called, Compiles to use this conversion between machine code and source code

Code Evaluations

• Need to have good code, over a time of iterations, practice like anything else
• Is the code correct
• Does it do what it’s supposed to do?
• Does it have any mistakes?
• Does it have a better design?
• Easier and faster runs
• Code has Aesthetics, also known as Style
• Computers do not care about the sloppy format
• But learning assistants and other people viewing and assessing will need to see the code so that can be assessed.

VS Code

• Free text editor (visual studio)
• Popular for C, Python
• It’s designed to let you compile this code
• Install the software
• The code being assessed can be viewed
• Can create more interactive and better code to the version on the screen

Scratch introduction to function types

• Use of two arguments for a given situation
• Each argument must be the same, but must provide different content
• Input for said version takes in Hello
• Use nest the same
• Use set of all

VS Code Transition

• The goal is to transition students from a cloud-based environment to their own Mac and PC by the end of the semester
• This is to ensure students are equipped to write code independently after the course, using industry-standard tools
• VS Code will be the program used across all platforms (Mac, PC, and browser)
• VS Code's interface is divided into four main regions

Regions of VS Code

• Tabs for writing code, similar to those in Google Docs or Microsoft Word
• A terminal window providing a command-line interface
• A file explorer on the left, showing a hierarchical tree of files
• An activity bar on the far left, containing traditional menus and buttons

Command Line Interface (CLI) vs. Graphical User Interface (GUI)

• Most programmers prefer a CLI over a GUI for efficiency
• CLIs allow access to more computer features via keyboard
• Typing is often faster than pointing and clicking with a mouse
• The terminal window is where most commands are typed
• The GUI elements are generally hidden during class to focus on the practical aspects

Using VS Code

• To create a new file, use the command code followed by the file name (e.g., code hello.c)
• File names should be lowercase (e.g., hello.c)
• To compile the code, use the command make followed by the program name (e.g., make hello)
• The make command compiles source code into machine code
• If compilation is successful, no error messages will appear
• To run the program, use the command ./ followed by the program name (e.g., ./hello)
• The hello file is the compiled program created from hello.c

Common Errors and Troubleshooting

• Typographical errors are common and can cause compilation issues
• For example, typing studio.h instead of stdio.h will result in an error
• The computer will only execute instructions exactly as they are given
• Recognizing and correcting these errors becomes easier over time

Hello File Compilation

• When make hello is run, the source code in hello.c is compiled into machine code
• This machine code is saved in a file simply called hello
• The hello file contains zeros and ones that the server understands

Binary File Display

• VS Code does not display binary files or files with unsupported text encoding in the editor
• The hello file (compiled machine code) is a binary file
• It is possible to view the zeros and ones, it is generally not useful for humans, so VS Code does not show it

Syntax Highlighting

• VS Code and other programming environments use syntax highlighting
• Syntax highlighting analyzes code and color-codes different elements
• Keywords, functions, conditionals, loops, and variables are highlighted with distinct colors
• Syntax highlighting can be customized in VS Code settings
• It's not a specific color scheme but a feature to help developers read code

Scratch and C Equivalence

• The basic "hello, world" program in Scratch and C is equivalent
• In Scratch, the "when green flag clicked" block triggers the program
• The "say" block displays text on the screen
• In C, int main void along with curly braces is similar to the "when green flag clicked"
• The printf function in C is similar to the "say" block in Scratch

Printf Function

• printf stands for "formatted print"
• It is a function that formats text on the screen
• To use printf, enclose text in double quotes within the parentheses
• printf("hello, world\n"); prints "hello, world" followed by a new line
• The \n character is a special sequence that creates a new line

Semicolons

• Semicolons are required at the end of most statements
• Forgetting a semicolon is a common error
• The compiler will indicate the line number where the error occurred, and usually gives an error message

Backslash N Escape Sequence

• \n is a special escape sequence that represents a new line character
• Without \n, the next prompt will appear on the same line as the output
• If you hit "enter" in a string, it will cause an error

Include Statement

• The include <stdio.h>line includes the standard input/output library
• This library provides functions like printf
• Without this line, the compiler doesn't know what printf is
• The include statement informs the compiler to use functionality from the standard IO library
• Header files contain information about functions in a library

Manual Pages

• C has extensive documentation called manual pages.
• Manual pages are text-based documentation.
• Documentation is written by and for advanced programmers.

Overview of Harvard's CS50, an introduction to computer science. The course focuses on algorithmic thinking and problem-solving. Principles are applicable across arts, humanities, and sciences, empowering students to solve bugs in code and make an impact.