introducing computer science csci n341: client-side programming

INTRODUCING COMPUTER SCIENCE

CSCI N341: Client-Side Programming

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

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

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!

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?

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?

Developing an Algorithm

4. Develop a HIPO chart – Hierarchy, Input, Processing, Output

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?

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

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.)

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

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

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.

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

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

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

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?

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

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?

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!

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

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!

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?

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

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

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)

*/

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

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 */

Procedural Comments

Identify purpose, arguments & return values for procedures

Can be used in: Event Procedures Sub-Procedures Function Procedures

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

Questions?