INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.
-
Upload
deirdre-parker -
Category
Documents
-
view
227 -
download
5
Transcript of INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.
![Page 1: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/1.jpg)
INTRODUCING COMPUTER SCIENCE
CSCI N341: Client-Side Programming
![Page 2: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/2.jpg)
By the end of this lecture you should …
… understand Computer Science as the study of algorithms
… recognize HIPO charts as one of several tools available for problem analysis
… understand how programming languages work in general
… recognize different categories of programming languages
… understand the program development cycle
Goals
![Page 3: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/3.jpg)
One Dimension of Web Programming
Personal Computer - a computer operated by one person at a time, i.e. “Client” computer. N341 focuses on Client-Side computing
Server – a computer whose resources and processors are shared by multiple users. N342 focuses on Server-Side programming
![Page 4: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/4.jpg)
What is Computer Science?
NOT about coding or hardware or software!
Computer Science is about PROBLEM SOLVING
Computer Science is about DEVELOPING ALGORITHMS to solve complex problems
Computers are merely tools for solving problems!
![Page 5: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/5.jpg)
Algorithms
Well-developed, organized approaches to solving complex problems
Test of a good algorithm: Does the algorithm solve the stated
problem? Is the algorithm well-defined? Does the algorithm produce an output? Does the algorithm end in a reasonable
length of time?
![Page 6: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/6.jpg)
Developing an Algorithm
1. Identify the Inputs What data do I need? How will I get the data? In what format will the data be?
2. Identify the Processes: How can I manipulate data to produce meaningful
results?
3. Identify Outputs: What outputs do I need to return to the user? What format should the outputs take?
![Page 7: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/7.jpg)
Developing an Algorithm
4. Develop a HIPO chart – Hierarchy, Input, Processing, Output
![Page 8: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/8.jpg)
Developing an Algorithm
5. Identify relevant modules How can I break larger problems into
smaller, more manageable pieces? What inputs do the modules need? What processes need to happen in the
modules? What outputs are produced by the
modules?
![Page 9: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/9.jpg)
Programs
Sets of instructions that get the computer to do something
Instructions are translated, eventually, to machine language using an interpreter or a compiler (or both!). You can think of an interpreter as translating one “line” of code at a time, while a compiler translates an entire program before executing it
Programs may be a few lines or millions of lines of code
![Page 10: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/10.jpg)
Programming Tasks
All computer programs are written so they can take data, manipulate and then produce a result.
This process uses three distinct tasks: INPUT – getting data from an external source (the user,
a database, a file, etc.) PROCESSING – actual manipulation of the data OUTPUT – reporting the results of data manipulation
back (using the monitor, writing information to a database, etc.)
![Page 11: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/11.jpg)
Categories of Languages
Machine Language Binary digits (bits – 1s and 0s) which are translated to
electrical impulses that get the computer to do something
“Native” language of computers Assembly Languages
Group of basic commands, written as mnemonics, ie, jmp, hlt, etc.
Tied to specific processors Still need to be translated to machine language
![Page 12: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/12.jpg)
Categories of Languages
High Level Languages In terms of syntax, very close to human
language (mostly English) Lower error rate than writing machine
language or assembly language programs Need to be translated to machine language
before execution Compilers Interpreters
![Page 13: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/13.jpg)
More on High-Level Languages Features common to all HL languages:
Sequential Operations – Operations in which lines of code execute in order, one right after another
Control Structures Conditional Operations – Operations in which execution
depends on the outcome of a previous condition (usually evaluated to be TRUE or FALSE)
Looping Operations – Operations designed to repeat until a given condition is satisfied.
Branching Operations – Operations designed to identify mutually exclusive sections of code
Data Structures – allow programming optimization, ie, arrays, linked lists, etc.
![Page 14: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/14.jpg)
More Features
Variables – named storage locations for data Data types – integers, strings, boolean, etc. Delimiters – symbols that designate beginning and
endings of programming structure, ie, “;”, “{“, etc. Modularity – section of code that performs a task Comments – Information for programmers for better
code maintenance Input and output – mechanisms for moving
information in and out of a program Key reserved words – words with predefined
meaning within a language
![Page 15: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/15.jpg)
Levels of High-Level Languages Procedural Languages
Early high level languages Focus on structures Examples include QuickBasic, Fortran,
Pascal, Visual Basic (early versions) Object-Oriented languages (OOP)
More recent development Focus on data, not structures (Primacy of
Data) Examples include Java, C#, C++, Visual
Basic.Net
![Page 16: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/16.jpg)
The Programming Development Cycle Done after identifying inputs, processing &
outputs Steps
1. Analyze the problem using customer input and technical training
2. Plan a solution to the problem (algorithm)3. Design the user interface4. Prototype design to customer5. Revise design based on customer feedback6. Iterate and test to product release7. Maintenance cycle8. Product Obsolescence
![Page 17: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/17.jpg)
Notes on Development Cycle
1. Analyze the Problem: Questions to ask: Who is my intended audience? What SPECIFIC outcomes does my audience
expect? What business rules do my audience expect
to have incorporated into the solution? What is the SCOPE of the problem?
![Page 18: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/18.jpg)
2. Plan a Solution (Algorithm) What types of programming structures are
needed? Sequential structures Conditional structures Looping structures
What data structures are needed? Variables Lists Arrays
![Page 19: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/19.jpg)
3. Design the User Interface
i.e. , The “UI” Is the UI “learnable”? Is it simple? (Limit user choices) Does the UI promote error-proof use? Is the layout of the UI arranged in a
fashion conducive to the user’s culture and expectations?
![Page 20: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/20.jpg)
4. Code the Solution
Develop an actual program from an algorithm
Should be the “easiest” part of the process – all the work should already be done!
![Page 21: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/21.jpg)
5. Test & Debug the Solution Alpha Testing – Internal testing done with
expected client data (NOT LIVE DATA) Beta Testing – Testing done at the client
site with their data (USUALLY LIVE DATA) Try to predict common user errors Test subjects should be Power Users,
Normal Users and Neophytes
![Page 22: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/22.jpg)
6. Make Sure Documentation is Complete
User Documentation: User Manual Technical Documentation (for System Administrators)
Internal Documentation: Documentation comments Code comments Procedural comments Should be done while coding!
![Page 23: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/23.jpg)
7. Plan Next Release
What bugs need to be fixed? Are bugs “critical”? (Need to be fixed in a
minor release) If bugs are not critical, they can be fixed in
next major release What product enhancements do the
users want for the next release?
![Page 24: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/24.jpg)
Internal Commenting
Comments are non-executable lines (the computer ignores them) which are used to communicate valuable information about code to others
Types of Internal Commenting: Documentation Comments Code Comments Procedural Comments
Comment Syntax: C-like Syntax (C, C++, Java, JavaScript):
/* This will work for multi-line comments */
// This is a single-line comment
![Page 25: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/25.jpg)
Documentation Comments
Used to given specific information about a program
Usually found at the beginning of a code window
Include information about the author, creation date, purpose, modification date & modification history
![Page 26: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/26.jpg)
Documentation Comment
/* •TITLE: Hello World, v2.0* AUTHOR: Susie Student* PURPOSE: To demonstrate changing of textbox properties using event procedures.* CREATED ON: 09.10.2002* LAST MODIFIED ON: 09.18.2002* LAST MODIFIED BY: RSM* MODIFICATION HISTORY:* 08.12.2009 - Renamed form to frmMain to conform with accepted naming standards (MJK) *11.18.2008 - Created a Clear Button enabling users to clear output (RSM)
*/
![Page 27: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/27.jpg)
Code Comments
“Tell the story” of the code, in English For this class, you should use code
comments to indicate what lines of code do Define how variables are being used Describe sections of code
![Page 28: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/28.jpg)
Code Comments
/* Initialize loop counter to 1 */var counter = 1;/* Set loop to repeat 10 times */while(counter <= 10){ /* Display loop number*/ alert(“You are on loop number” + counter); /* update counter*/ counter++;} /* end while */
![Page 29: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/29.jpg)
Procedural Comments
Identify purpose, arguments & return values for procedures
Can be used in: Event Procedures Sub-Procedures Function Procedures
![Page 30: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/30.jpg)
Procedural Comments
/* Function touchRockUsed to capture user name and produce custom greeting. If name is provided, upon image mouse click change image to happy rock*/Function touchRock(){ var userName = prompt(“What is your name?”, “Enter your name here.”); if (userName) { alert(“It is good to meet you, “ + userName + “.”); document.getElementById(“rockImg”).src = “rock_happy.png”; } //end if} // end function touchRock
![Page 31: INTRODUCING COMPUTER SCIENCE CSCI N341: Client-Side Programming.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649e215503460f94b0e34b/html5/thumbnails/31.jpg)
Questions?