CS 40 Computing for the Web Art Lee January 20, 2015
Announcements Course web on Sakai Homework assignments submit them on Sakai Email me the survey: See the Announcements page on the course web for instructions Reading assignment for this and next week: Chapter 1 of Downey and HTML tutorial Take a break around 3:25pm 2
Goals Introduction to computer science Web programming using HTML, CSS, JavaScript, and Python Data programming using Python Learn how to solve a problem by: Defining (understanding) the problem Developing a solution (algorithm) Implementing the solution by writing a computer program Testing and fixing the programming solution Will do this by 1. Learning to program in Python 2. Developing web programs using HTML, CSS, JavaScript, and Flask through both client- and server-side programming to create both static and dynamic contents 3. Developing data analysis programs using Python in some select areas 3
Philosophy Welcome all majors and backgrounds! Provide a healthy mix of the practical and theory Develop problem solving skills 4
Still deciding? Prerequisites: none Known as "CS 40" - a taste of CS doing fun, practical programming This is intended for non-cs-majors. This course is an excellent way to get an introduction to what computer science is about and learn how to program If you later find yourself interested in more computer science, we will try to find a next level CS course After this course you will be ready to learn more about programming and computer science on your own 5
Take this course if you... like solving problems like building things (will) work with large data sets are curious about how Facebook, Google, Amazon, ebay, etc. work have never written a computer program before want to educate yourself to be a person to live in this 'Internet age' by tasting a good bit of CS in a semester writing some interesting, practical programs in some interesting domains using some fun languages 6
How to succeed in this class Attend class Not all information is in my lecture notes or in the book I draw a lot on the board Take the homework assignments seriously Start early Homework will take longer than you think Do the reading assignments and review the lecture notes and experiment with example code Learning to read code takes practice Try things out Ask questions if confused 7
Textbooks and references Think Python: How to Think Like a Computer Scientist, Version 2.0.12, by Allen B. Downey, May 2013 HTML: http://www.w3schools.com/html/default.asp CSS: http://www.w3schools.com/css/default.asp JavaScript: http://www.w3schools.com/js/default.asp Flask: Web Development: http://flask.pocoo.org/ I will post links to other references as we go 8
Homework There will be about one assignment per week Homework assignments will be posted to the course web You will turn in homework on Sakai Respect the homework assignments! Designed to challenge you in applying what you've learned so far Start early! Programming projects almost always take longer than expected Study the solutions and compare with your own work Read "How To Approach This Class" in the syllabus for detailed suggestions 9
Cooperation vs. cheating Cooperation (talking over problems) is a good way to learn and is encouraged Copying is not allowed on homework or exams no matter the source (written or verbal). When you submit your homework or tests, you are pledging that the work is your own and you have not copied it. You are also pledging that you have not allowed others to copy it. Read my exact policy on this matter in the course syllabus 10
Grading See the "Grading" section of the course web site for details Also browse the course web to see other info that I am not going over in class Go over the course web 11
What is computer science? A definition from the Internet: Computer science is the systematic study of computing systems and computation. The body of knowledge resulting from this discipline contains theories for understanding computing systems and methods; design methodology, algorithms, and tools; methods for the testing of concepts; methods of analysis and verification; and knowledge representation and implementation. 12
For us, we will Learn how to begin with a problem statement and design a computer program that solves the problem Write programs Using a programming language, Python in particular While interacting with a computer through an operating system such as DOS, Windows, or Unix/Linux/Mac OS X Execute the programs Using an interpreter in the case of Python While trying to understand what is happening in each step of the process Will do this for other languages: HTML, CSS, JavaScript 13
So,... We will learn how to write a program that solves a given problem We will learn enough of the programming language Python (and HTML, CSS, JavaScript) to write such programs Along the way we will learn many fundamental concepts in computer science that make all these possible We will use a Python interpreter as part of a programming environment called Canopy (will use other tools for HTML, CSS, and JavaScript) We will use some hardware, whatever computer that you happen to be using We will learn the entire lifecycle of program development: from a concept in your head to a program that executes 14
So,... (cont.) At the end of the semester you will be comfortable enough (?) to write Python (HTML, CSS, JavaScript) programs that solve fairly complex problems in the web and data programming domains You will have hopefully learned enough about computer science by then and be able to study more on your own if you want to pursue further In any event the CS concepts/fundamentals that you learn in the course will help you understand the concept of computing and some of the key technologies that underlie the real world computing systems that you see now and you will see in the future 15
What do computer scientists do? In general, computer scientists study many sub-areas, some of which include: Operating systems Programming languages Theory of computation Algorithms and data structures Parallel systems Distributed systems Web systems Software engineering Computer architecture Databases 16
(cont.) Artificial intelligence Computer graphics Human-Computer Interaction Natural language processing Speech recognition Computer vision Cryptography Computer security Networking Scientific computing Biocomputing... 17
Demo hello.html (a Hello World! program in HTML) hello.py (a Hello World! program in Python) Some web apps that students built last semester 18
The big picture of a computer Hardware CPU Memory I/O devices Disk Software Operating system (DOS, Windows, Unix/Linux/OSX) Applications Web apps Mobile apps hello.html, hello.py program Python interpreter Firefox, Chrome, Facebook, ebay, Amazon, etc. 19
What is a program? A sequence of instructions that specifies how to perform a computational task What is the computational task that we perform in hello.html? in hello.py? 20
What is programming? Programming is the process of writing a program using a programming language Also referred to as "writing code" or simply "coding Program execution: the act of carrying out the instructions contained in a program A computer is pretty dumb though Consequently, you have to give super clear and precise instructions A computer will happily do the same thing forever (on an infinite loop) if you tell it to do so, even if you didn't mean to! Learning to program is just like learning a "natural" language like Spanish. You have to LEARN the: Syntax: the words and rules in the language Semantics: the meaning of each word or phrase in the language 21
What is a programming language? A systematic set of rules used to describe computations in a format that is editable by humans A "formal" language as opposed to a "natural" language Python (cf. C, C++, Java, C#, Objective-C, Javascript, etc.) Basic instructions in a language: input, output, math, conditional execution, repetition, etc. High-level languages Low-level languages 22
Computer instructions: machine language Binary instruction (1's and 0's) Most instructions just move data around or perform simple arithmetic operations Binary programming is really hard and tedious but early programmers used to do this! Example: on Intel x86 processors, 1011000001100001 means to copy a 97 to a particular register 23
Computer instructions: assembly language Symbolic (meaningful) names for binary instructions and memory More readable Feasible for programmers to use Example: ADD DR, SR1, SR2 ; DR <- (SR1) + (SR2) LD DR, LABEL ; DR <= Mem[LABEL] LDR DR, BaseR, Offset ; DR <- Mem[BaseR + Offset] STI SR, LABEL ; Mem[Mem[LABEL]] <= SR 24
Computer instructions: high-level language Symbolic names for assembly instructions and memory Symbolic names for basic operations such as conditionals and looping Language constructs for abstracting a set of instructions Close to "natural" languages - close to being readable! Example: print("welcome to CS! ) y = a * x * x + b * x + c 25
Why use a high-level language? Conciseness high-level programming languages allow us to perform common operations in a concise and readable fashion Maintainability Modifying and maintaining code is much easier when the code is concise and easy to read (as compared to lengthy and difficult to read assembly or binary code) Portability Different CPU's accept different binary instructions Writing in a high-level language allows code to be translated or "compiled" into a platform-specific binary code 26
Why Python? Simple, simpler than Java (which is simpler than C++) "In 2003 I started teaching at Olin College and I got to teach Python for the first time. The contrast with Java was striking. Students struggled less, learned more, worked on more interesting projects, and generally had a lot more fun." -- Allen Downey Highly relevant to non-cs majors Python is a general-purpose programming language Packages such as NumPy and SciPy are heavily used by scientists Other packages are available for various domains Is a modern language with good support Popular for web applications (e.g., Facebook apps) Fun to program in Widely used: becoming one of the most popular languages http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html 27
Do these before next class Send me your survey form Read the course syllabus Read the course web Start reading Chapter 1 of Downey 28
Two pieces of advice 1. Attend every class! 2. Don t get behind! Next time Start HTML and Python programming Programming environment 29