IP352F16A

From CourseWiki

(Redirected from IP352)
Jump to: navigation, search

Programming Mechanics and Mindset


Overview

Mechanics

With modern tools you can create a web page, or even an entire web site without knowing anything about programming - but - to get beyond simply adding content to pre-made templates you do need to know what is going on below the surface: You need to know about programming. Even if you don't intend to write programs, an understanding of the fundamentals will demystify many of the technologies you will encounter in web development. That’s the mechanics.

Mindset

We will also explore the mindset of programming. That is: The aptitudes, attitudes, and interactions with other programmers and users that are so important to being a successful programmer.

Course Description

We explore a big picture view of the Internet and identify centres of technology. It is in these centres of technology that various kinds of programming take place. We then look at high level programming concepts: variables, scope, control structures, sub procedures and functions and discuss scripting, compiled and hybrid languages and concepts related to object oriented programming. And learn what it is to think like a programmer.

Duration: 18 hours (6 evening sessions)

Register for this course: Programming Mechanics and Mindset

Theoretical Objectives

You will learn concepts and terminology related to programming, and understand where these are used in web development. At the end of this course you should be able to:
  • Explain Programming in General
  • Compare and contrast Scripting and Programming
  • Discuss High/Low level languages
  • Define and provide examples of
    • Sequence
    • Branching
    • Iteration
    • Variables
    • Procedures/ Procedural Abstraction /Functions
    • Parameters
    • Return Values
  • Explain State and Statelessness on the web
  • Define Object Oriented Programming
    • Distinguish a Class from an Object
    • Define Encapsulation
    • Contrast Properties and Variables
    • Compare Methods and Functions
    • Explain Polymorphism
    • Illustrate Inheritance

Practical Objectives

You will learn how to read programming/scripting code in several environments and recognize the application of the concepts shown in the Theoretical Objectives. (left panel on this page).
You will developed critical thinking skills and research strategies that you can take into the future as you learn to think like a programmer. You will learn the general layout of a integrated software development environment tool and create a simple website.

Prerequisites

Access to the internet is required to complete assignments.

Computer Equipment

The sessions are conducted in a computer lab, and you will have a computer provided for your use. You are welcome to bring your own computer to the lab sessions if you prefer to use that. Wireless access is available in the lab.

Please note that at times you will be doing a fair bit of typing and you will want to have a large enough screen and separate physical keyboard so that you can view content and type at the same time.

If it appears that you are having challenges with your own device, we will ask you to use the computer provided for you in the lab.

Storage

Please plan to use your own cloud based storage SkyDrive, DropBox, iCloud (or similar) or a USB storage key.

Instructional Methods

  • Hands-on labs
  • Discussion
  • Online collaboration
  • Homework assignments submitted online
  • Lecture

Course Materials

  • Web site
  • Course notes
  • Printed copies of on-screen lecture notes available on request during lectures

No Recording or Pictures in the Lab

Please note: Taking pictures or video during the course sessions is not permitted. All the course materials and lecture notes are available in physical form and on the web.

Requirements for Completion
  • Attend all sessions
  • Participate in class workshops with others (pairs and small group work)
  • Complete assignments: Typically these involve:
    • Reading articles
    • Writing - due by midnight Mondays
    • Online collaboration - due by 5:00 pm Wednesdays
  • Questions and Answers on PeerWise
    • Creating questions online: minimum 1 per week - due by midnight Mondays
    • Answering questions online: minimum 5 per week - due by 5:00 pm Wednesdays
  • There will be a brief final assignment due a week after the last class

See tabs for each week.



Computer Programmer

Jim's Start Up Resources


Coming Soon
Courses coming

Follow JimUBC on Twitter for latest course updates
Follow JimUBC on Twitter for latest course updates



The course blog



Contents

Things to do right away
Set up Development Platform

Note the session content schedule is subject to change.
The main topics and general order will remain, but what is covered in each session may vary from what is shown here.



Register for this course



Session One

  • The Big Web
    • You will be able to trace the path of a web based transaction identifying the points along the way, where programming and other technologies are employed.


The Big Web - Objectives At the end of this session you should be able to:
  1. Start with the picture above and draw the path from request to completed response.
  2. Describe what is happening at each step along the way.
  3. Identify the activity or processing that is being done in each of the coloured areas in the picture.
  4. Explain when that activity occurs (before, during, after the interaction with a user).
  5. Identify where programs are running.

  • Expert Mind
    • You will be able to identify differences in the way experts and novices approach problem solving

Expert and Novice At the end of this session you should be able to:
  1. Describe how an expert in a particular field approaches a problem.
  2. Describe how a novice in a particular field would approach the same problem.
  3. Identify key differences in the way that an expert and a novice think about problems.
  4. Set a goal for what you would like to be able to do with respect to [whatever brought you here].
  5. Write down how you will know when you have reached the goal.

  • Wiki pages
    • You will create and edit your own wiki page, and learn how to edit other participants' wiki pages
  • Programming Alphabet Soup
    • Programming related Acronyms: Exploration and discussion about acronyms and how to research them
  • Where Do I See Programming
    • Brief Discussion
  • Polyglot Programming
    • Why you need to know the principles as much as the details.
  • Front End Back End
    • You will understand the idiom and classify activities that fall into these two broad categories
  • PeerWise
    • You will create your account in PeerWise
    • You will be able to create new questions
    • You will be able to answer questions

Journal

  1. What do I already know about programming?
  2. Take a couple of minutes to think about a subject that you know really well (you are an expert), and how you go about solving problems that come up in that subject.
    How is that different from someone who is new to the subject (a novice).



To prepare for this session we will Review Survey Answers

Requirements for Completion
  • Attend all sessions
  • Participate in class workshops with others (pairs and small group work)
  • Complete assignments: Typically these involve:
    • Reading articles
    • Writing - due by midnight Mondays
    • Online collaboration - due by 5:00 pm Wednesdays
  • Questions and Answers on PeerWise
    • Creating questions online: minimum 1 per week - due by midnight Mondays
    • Answering questions online: minimum 5 per week - due by 5:00 pm Wednesdays
  • There will be a brief final assignment due a week after the last class

See tabs for each week.



Things to do right away
Set up Development Platform

This is probably the most time-intensive assignment of the whole course. There are four required parts that could take 10-90 minutes each, and then some optional things to do that could take another hour.

Why have time budgets?
We are early in the course and I don't want you to feel overwhelmed or to get frustrated if you get stuck.
1. Shared Notes

Please read and add a comment to our shared Session One Notes

Time budget: 10-15 minutes

You will do the rest of your written work in your wiki page. Your login name and password are in your notes.

2. Read & Write

Read The Seven Habits of Highly Effective Programmers

Write up to 500 words in total about two or three things that you have learned, and how you will program differently because of that learning.

Time budget: 60-90 minutes

3. Write Instructions

Write a paragraph or several to describe how to perform a task. You are giving someone detailed instructions on how to solve a problem. He or she must rely on the instructions you provide. You will not be available to help or clarify when she or he is doing the task.. You may use point form.

This should not take longer than an hour to finish - or rather - when you have invested an hour, jot down what you have at that point.

Examples of tasks you could describe:

  • Baking a cake.
  • Enter your house to house-sit and feed a pet.
  • Wash your car.
  • Tidy your house.
  • Write a song.

Time budget: 60-90 minutes

4. Help / Comment

Review the other students' work. Edit where necessary and add discussion notes to the pages for at least four students.

There is a link on your wiki page to the other Students' wiki pages.

At the top right of your wiki page you will find guidelines to help you.

Time budget: 30-90 minutes

  • Login in to PeerWise :IP352S15A
  • Create at least one new question.
  • Answer at least five questions.
    • Correct your answers if necessary.
      • Confirm your answers as you go along.
    • Help where you can to improve explanations.
    • Add comments in the questions.
    • Rate the questions.

Detailed Instructions

Reflect in the course blog


Please click the picture above and answer the following questions in the course blog.

Highlights / Metacognition
  • What did you think was the most valuable thing that happened for you tonight?
  • What did you learn from that?
  • What will you do with that knowledge?
Questions?
  • Now that we've had our session together, what do you want to know?
  • What could we have done better?

Course Blog Tutorial (video)

External links / resources


If you have time, after you have created your account, go the the DreamSpark Student Downloads page and download and install Visual Studio 2013. Instructions: DreamSpark Download Visual Studio

Note: This takes about 5 gigabytes of space on your hard drive.

We will be using Visual Studio in our lab sessions later in the course, and if you want to explore those ideas in more detail, you will appreciate having Visual Studio installed on your computer.

A little video
  • Optional, but very enlightening. You can watch this while downloading Visual Studio

The Cloud Will Change Everything

Approximate time: 60 minutes.

A little extra reading


Course Overview / Introduction

Internet Programming Overview

Programming Basics

Big Web


The Big Web - Objectives At the end of this session you should be able to:
  1. Start with the picture above and draw the path from request to completed response.
  2. Describe what is happening at each step along the way.
  3. Identify the activity or processing that is being done in each of the coloured areas in the picture.
  4. Explain when that activity occurs (before, during, after the interaction with a user).
  5. Identify where programs are running.


Expert Mind?

Follow Expert and Novice

Expert and Novice At the end of this session you should be able to:
  1. Describe how an expert in a particular field approaches a problem.
  2. Describe how a novice in a particular field would approach the same problem.
  3. Identify key differences in the way that an expert and a novice think about problems.
  4. Set a goal for what you would like to be able to do with respect to [whatever brought you here].
  5. Write down how you will know when you have reached the goal.

Front End Back End

Preparation for the final assignment.


Front End / Back End At the end of this session you should be able to:
  1. Define in general terms: Front End, Back End
  2. Write the kinds of programming that you expect happen at the Front End.
  3. Write the kinds of programming that you expect happen at the Back End.
  4. Talk briefly with a partner about which kind of programming you would prefer to do.
  5. Write a note to yourself to remind you of your thinking about this at this point so that you can consider it again at the end of the course.


Wiki Pages

— Working collaboratively.


Assignment

  1. Assignments
  2. PeerWise Questions and Answers

Session Two

  • States and Statelessness
    • You will be able to compare these concepts to real-life situations, and see the impact that these ideas will have on your future programming
Programming Concepts
  • You will be able to distinguish between (compiled) Programming and Scripting
  • You will be able to describe high level and low level abstractions
Programming Structures

You will have an introduction to the following concepts to prepare you for research that you will be doing in this week's assignment

  • Variables
  • Arrays
  • Sequence
  • Selection
  • Iteration
Design

We will discuss some basic Design Concepts

  • User Centred Design
  • User Interface Design

Journal

  1. What were the most challenging ideas in the readings (7 Principles)
  2. Did I look at anything differently this week as I interacted with the web or other devices where programming was involved?
  3. How did I feel about having others looking at and possibly editing my work?
  4. How much time did it actually take to do the homework?



To prepare for this session we will Review assignments

Group work discussion around challenging concepts

Review PeerWise results.

Share impressions from the assignments

Lessons learned from

  • Readings
  • Wiki skills
  • Preparing Instructions
  • How does this relate to programming?
Expert Mind
  • Geeks and Repetitive Tasks
  • Programmers' Virtues
  • The Programmer's mind
  • Discussion: How does this affect your perception of programming


Show and Tell Lab
  • How did we do with PeerWise
  • Team up and Show your pages to a partner.
  • Talk about
    • What you did: Issues and challenges you encountered while doing the work.
    • What you learned.
    • How you will apply what you learned.
Outcomes

At the end of this session you should be able to

  • Identify the concepts that you used in the page you are sharing with your partner
  • Discuss the challenges you had to overcome to make it work
  • Describe what you learned
  • Discuss how you will apply what you learned in another context
  • Help your partner by suggesting solutions or improvements where appropriate

1 Programmers (Read and Write)

Read What Makes Bad Programmers Different? — Andrew Binstock

Read The Programmer's Virtues — Tommy Morgan

Write up to 500 words in total about two things that you have learned, and how you will program differently because of that learning.

Read Do We Really Need to Learn to Code

Write in your wiki page the answers to these questions:

  1. What will be the most valuable skill(s) for programmers in the future?
  2. How soon should a learner be acquiring that / those skills?
  3. How applicable is/are those skills today?
2. Programming Structures
Finish Assignment One

Make changes (edits and additions) to your Session One assignment Instructions.

2.2 Research

Do some research on the web and do what you can to get a sense of the following terms.

  • Variables
  • Arrays
  • Sequence
  • Selection / Conditional Branching
  • Iteration

Add these terms to your assignment page, write definitions and be sure to provide links to your sources.

===== Variables =====


===== Arrays =====


===== Sequence =====


===== Selection / Conditional Branching =====


===== Iteration =====

2.3 Application

Review your first assignment in which you wrote instructions to complete a task. Read the note below.

Define the Problem Completely

For a lot of people "define the problem completely" seems pretty obvious as the only right way to do things. To others, especially lately, there seems to be an idea that one should throw something together based on partial understanding, take it to the end user to see where they are, and then go to the next step. This really seems like a waste of time to me. Oh to be sure there are often times when the end user doesn't know what they want when a project is started. Someone commented earlier that "Walking On Water and Writing a Software is easy, if the Water and Specifications are FROZEN." There is some truth to that.

Historically software developers have lived with the idea that the specification will change and things will be come if not clearer at least different. That often makes it difficult, if not impossible, to define the whole system before starting.

But actually all of that is both a digression and a missing of the point. While for some people this proverb means understanding the whole system that is often, some would say always, a problem. And I think looking at that large a picture misses the point. I think that at some point one has to reach a granularity for which this proverb makes complete sense. That granularity is when one reaches a point when the amount to be coded by one person is reached. Is that a method? A class? A module? A complete program or even a small system? At that point it is a mistake not to have the problem defined and understood completely. To do otherwise is to ensure that the code will break when it comes into contact with expectations of the user or of other code. Code that is checked in with other code and does not work as expected means that the problem was not defined completely enough and someone started coding too early. There is no excuse for that in my opinion.

This idea of defining the problem completely has interesting ramifications for the teaching/learning environment. When a teacher defines a project for an assignment or an exercise for a test they assign to students there is an obligation to spell out the requirements completely. If there is ambiguity it should be there on purpose and to allow some leeway in problem solving. Students have an obligation to read and understand the definition completely before beginning to write code. Alas they seldom do. They are a lot like some professionals I have worked with I am afraid.

What I used to say to students was "I am much too lazy to write a lot of extra words so if they are there you'd better read them all." Assumptions are risky business and no less so where graded work is involved. I encouraged questions and often I re-wrote project assignments to make sure I answered those questions in the future. This was valuable both to the student, who learned to ask questions, and for me as I learned to better specify what I wanted. We never stop learning.

What is the problem? What are your inputs? What are your outputs? What do you need to know and to do to get from the inputs to the outputs? Unless those things are defined it is much too early to write code.

Source: Define the Problem Completely


Write a definition of the problem that you were trying to solve with the instructions you wrote last week.

Identify where you used (or could have used) these concepts.

  • Variables
  • Arrays
  • Sequence
  • Selection / Conditional Branching
  • Iteration
2.4 Real Life Examples

Then write examples where your instructions use these concepts.

Write about a real-life example that illustrates each of the following concepts:

  • Variables / Arrays
  • Sequence
  • Selection / Conditional Branching
  • Iteration
3. More Commentary
  • Look at several other participants' pages and see how they did matching terms to their instructions.
  • As before, feel free to fix spelling and grammar issues.
  • Leave comments.
  • Add comments to the discussion pages for at least three of your classmates.
  • Respond to comments left by others on your discussion page.

See all of your Classmates' pages


4. Light Reading

Not quite reading but News report from 1981 about the Internet 2:17 minutes for perspective

Just a little light reading...

The Rise of the Brogrammer

Building a Motivated Team (11 ways to motivate a geek)


DreamSpark Download Visual Studio

  • Login in to PeerWise :IP352F16A
  • Create at least one new question.
  • Answer at least five questions.
    • Correct your answers if necessary.
      • Confirm your answers as you go along.
    • Help where you can to improve explanations.
    • Add comments in the questions.
    • Rate the questions.

Detailed Instructions

Reflect in the course blog


Please click the picture above and answer the following questions in the course blog.

Highlights / Metacognition
  • What did you think was the most valuable thing that happened for you tonight?
  • What did you learn from that?
  • What will you do with that knowledge?
Questions?
  • Now that we've had our session together, what do you want to know?
  • What could we have done better?

Course Blog Tutorial (video)

External links / resources


How learning to code might improve writing skills quick article

The Requirements Blog
Check out this Why Requirements Management?
A little video
  • Optional, but very enlightening. You can watch this while downloading Visual Studio

The Cloud Will Change Everything

Approximate time: 60 minutes.



Seven Habits

Plus / Minus / Interesting
  • What were the most challenging ideas for you?
  • What were the most helpful?
  • What were the most interesting?

More information deBono PMI

Quick idea - the problem with cut and paste

The problem with cut & paste
What could be so wrong with a practice that is used universally in computing? Or is it?

Reviewing Assignment to Write Instructions

  1. Review assignments - Group Discussion
  2. Discuss

More Wiki Skills

  1. Mini in class assignment - add images for Image:BigWeb01.jpg and Image:WebService01.jpg (two volunteers). Then all add to their individual wiki pages.
  2. Wiki Help for Lists (bullets and numbers)
  3. How to do a link - examples below.

UBC   [http://ubc.ca UBC]

CBC is a great website   [http://www.cbc.ca/ CBC is a great website]

Expert Mind - Programmers

Geeks and Repetitive Tasks


Source: Bruno Oliveira

Programmers' Virtues?
laziness, impatience, hubris
One of the first bits of wisdom I ran across in my career as a programmer was Larry Wall‘s “Three Great Virtues of a Programmer.” For those of you who aren’t familiar, Larry Wall is famous as being the creator of the Perl programming language. In the first edition of his book Programming Perl, Wall wrote: “We will encourage you to develop the three great virtues of a programmer: laziness, impatience, and hubris.”
— Source Programmer's Virtues — Tommy Morgan

And later defined:
Laziness
The quality that makes you go to great effort to reduce overall energy expenditure. It makes you write labor-saving programs that other people will find useful, and document what you wrote so you don’t have to answer so many questions about it. Hence, the first great virtue of a programmer.
Impatience
The anger you feel when the computer is being lazy. This makes you write programs that don’t just react to your needs, but actually anticipate them. Or at least pretend to. Hence, the second great virtue of a programmer.
Hubris
Excessive pride, the sort of thing Zeus zaps you for. Also the quality that makes you write (and maintain) programs that other people won’t want to say bad things about. Hence, the third great virtue of a programmer.

Programming Alphabet Soup

Let's understand some acronyms.

Where Do I See Programming

Brief discussion.

Polyglot Programming

Why you need to know the principles as much as the details.

Thinking like an Expert

Windows PowerShell Unplugged with Jeffrey Snover

Start at 2:00 — 6:10


PeerWise: Questions and Answers

  1. PeerWise Questions and Answers

Front End Back End

Preparation for the final assignment.


Front End / Back End At the end of this session you should be able to:
  1. Define in general terms: Front End, Back End
  2. Write the kinds of programming that you expect happen at the Front End.
  3. Write the kinds of programming that you expect happen at the Back End.
  4. Talk briefly with a partner about which kind of programming you would prefer to do.
  5. Write a note to yourself to remind you of your thinking about this at this point so that you can consider it again at the end of the course.


Internet Technologies

Internet Technologies Overview - very quick discussion - no notes.

Stateless Environment

Stateful / Stateless (page 10)

Programming Concepts

Programming Concepts (page 11)

  • Programming / Scripting
  • High / Low Abstraction

Programming Structures Introduction

  • Variables
  • Arrays
  • Sequence
  • Selection / Conditional Branching
  • Iteration

Design

  1. User Centered Design

More reading: Usability in the Development Process

See UBC Course: User Interface Design for the Web

Storyboarding with PowerPoint

PowerPoint 2007 and later and requires that you have Visual Studio installed.


Storyboard your ideas using PowerPoint

Storyboard of Programming Mechanics & Mindset page. Click to see it in PowerPoint.





Assignment (2)

Assignment 2

Session Three

Share impressions from the assignments

Lessons learned from

  • Research (definitions)
  • How does this relate to programming?


By the end of this session you should be able to:

  1. Recognize common programming structures in everyday language
    • Variables, Arrays, Sequence, Selection, Iteration
  2. Distinguish between common datatypes in variables
Design

We will discuss some basic Design Concepts

  • User Centred Design
  • User Interface Design

Journal

  1. What were the most challenging aspects of doing the research into Variables, Arrays, Sequence, Selection, Iteration?
  2. What were the hardest ideas to understand?
  3. Did I look at anything differently this week as I interacted with the web or other devices where programming was involved?



To prepare for this session we will Review assignments

Group work discussion around challenging concepts

Review PeerWise results.

Programming Concepts Revisit and refine our understanding
Show and Tell Lab
  • How did we do with PeerWise
  • Team up and Show your pages to a partner.
  • Talk about
    • What you did: Issues and challenges you encountered while doing the work.
    • What you learned.
    • How you will apply what you learned.
Outcomes

At the end of this session you should be able to

  • Identify the concepts that you used in the page you are sharing with your partner
  • Discuss the challenges you had to overcome to make it work
  • Describe what you learned
  • Discuss how you will apply what you learned in another context
  • Help your partner by suggesting solutions or improvements where appropriate

Corrections and Updates

Now that we have discussed programs concepts like variables, arrays, sequence, selection, iteration, and procedures please review and if necessary, correct your assignment submission for last week,

Read

Read one true bracket style. Read this for light understanding. You do not need to know any of this in detail. Just look at formatting of the code examples. You don't have to understand what the code is doing, or all the terminology. You are looking at the examples for the visual presentation.

If you want to read more about this (optional) see indent style — wikipedia.


Read / Write

Please read all of these short articles. Then pick two and write about them. See the copy/paste outline below.

  1. Managed Coder: On Software Developers — Code Magazine Ted Neward
  2. The Requirements Payoff — Doctor Dobbs Journal Karl Wiegers
  3. Commenting Code - two short articles count as one.

In your wiki page,

  • Note any questions that come to mind as you read this article.
  • Pick at least two ideas that were significant to you and comment on them.

You can Copy and Paste the outline below into your wiki page:

===Assignment Three Read / Write  Part 1 MeWare, ThemWare, UsWare ===
Read: [http://www.code-magazine.com/article.aspx?quickid=0911141&page=1 Managed Coder: On Software Developers] — Code Magazine Ted Neward 
 
==== Questions that came to mind as I read this ====
#
#
#
#
 
==== Significant Ideas ====
*
*
 
==== Read / Write Part 2 Requirements Payoff ====
Read: [http://www.drdobbs.com/architecture-and-design/225702520 The Requirements Payoff] — Doctor Dobbs Journal Karl Wiegers
 
==== Questions that came to mind as I read this ====
#
#
#
#
 
==== Significant Ideas ====
*
*
 
==== Read / Write Part 3 Commenting Code ====
Read:
*[http://visualstudiomagazine.com/articles/2011/01/06/to-comment-or-not-to-comment.aspx To Comment or Not to Comment]  — Visual Studio Magazine AND 
*[http://visualstudiomagazine.com/articles/2013/06/01/roc-rocks.aspx Why You Shouldn't Document Code] — Visual Studio Magazine
 
 
==== Questions that came to mind as I read this ====
#
#
#
#
 
==== Significant Ideas ====
*
*

Coding

Revisit the examples you wrote in jsbin. http://jsbin.com

  1. log in to jsbin using the credentials you wrote in your notes
  2. Look at your class work (click Bins, My Bins)
    Image:JsbinJavaScript007.png
    Here is an example showing the JavaScript and Output windows.
    Image:JsbinJavaScript008.png
  1. Change the examples enough to assure yourself that you understand what you are doing.

  • Login in to PeerWise :IP352F16A
  • Create at least one new question.
  • Answer at least five questions.
    • Correct your answers if necessary.
      • Confirm your answers as you go along.
    • Help where you can to improve explanations.
    • Add comments in the questions.
    • Rate the questions.

Detailed Instructions

Reflect in the course blog


Please click the picture above and answer the following questions in the course blog.

Highlights / Metacognition
  • What did you think was the most valuable thing that happened for you tonight?
  • What did you learn from that?
  • What will you do with that knowledge?
Questions?
  • Now that we've had our session together, what do you want to know?
  • What could we have done better?

Course Blog Tutorial (video)

External links / resources


Women in Computing

We are all familiar with success stories of men who code, but where are the women? As of now, female developers are few and far between in technology, and unfortunately it’s getting worse:

Women make up half of the U.S. workforce, but hold just 25% of the jobs in technical or computing fields.In 1984, women represented 37% of all computer science graduates. Today, that number has dropped to only 12%."
Trend to Follow: Women in Computer Science

Computing in the Cloud

Windows Azure and DreamSpark

Optional but highly recommended

If you have time, after you have created your account, go the the DreamSpark Student Downloads page and download and install Visual Studio 2013. Instructions: DreamSpark Download Visual Studio

Note: This takes about 5 gigabytes of space on your hard drive.

We will be using Visual Studio in our lab sessions later in the course, and if you want to explore those ideas in more detail, you will appreciate having Visual Studio installed on your computer.



Design

(pulled forward from last session)

  1. User Centered Design

More reading: Usability in the Development Process

See UBC Course: User Interface Design for the Web

Storyboarding with PowerPoint

PowerPoint 2007 and later and requires that you have Visual Studio installed.


Storyboard your ideas using PowerPoint

Storyboard of Programming Mechanics & Mindset page. Click to see it in PowerPoint.







Data Types and Syntax

Scripting and Data Types

Enter a simple numbertext1
Another simple numbertext2
Another numbertext3
Click for the total text4
Click for the total text5

Related reading: An Introduction To Programming Type Systems

Syntax

Lines of JavaScript with out semi colons (sic) are a challenge
to the JavaScript interpreter; like this is in English.

that that is is that that is not is not is that it it is


Automatic Semicolon Insertion

Although JavaScript has C style syntax, it does not enforce the use of semicolons in the source code, so it is possible to omit them.

JavaScript is not a semicolon-less language. In fact, it needs the semicolons in order to understand the source code. Therefore, the JavaScript parser automatically inserts them whenever it encounters a parse error due to a missing semicolon.

– Javascript-Garden[1]

var foo = function() {
} // parse error, semicolon expected
test()
Insertion happens, and the parser tries again.
var foo = function() {
}; // no error, parser continues
test()

Going forward put opening curly brace immediately after the function definition parentheses

function myFunction() {
// function statements here
};

Do not put the opening curly brace on a separate line.

function myFunction() 
{
// function statements here
};


Beautiful Syntax

From: idiomatic.js Beautiful Syntax

// if/else/for/while/try always have spaces, braces and span multiple lines
// this encourages readability
 
// 2.A.1.1
// Examples of really cramped syntax
 
if(condition) doSomething();
 
while(condition) iterating++;
 
for(var i=0;i<100;i++) someIterativeFn();
 
// 2.A.1.1
// Use whitespace to promote readability
 
if ( condition ) {
  // statements
}
 
while ( condition ) {
  // statements
}
 
for ( var i = 0; i < 100; i++ ) {
  // statements
}
 
// Even better:
 
var i,
  length = 100;
 
for ( i = 0; i < length; i++ ) {
  // statements
}
 
// Or...
 
var i = 0,
  length = 100;
 
for ( ; i < length; i++ ) {
  // statements
}
 
var prop;
 
for ( prop in object ) {
  // statements
}
 
if ( true ) {
  // statements
} else {
  // statements
}

– Source: idiomatic.js[1]

Computer Bug
Computer Bug

Programming Fundamentals

You will find these basic concepts throughout many modern programming languages. Programming Fundamentals (page 12)

Variables

  • Consider this statement:

We create variables when we write our programs to anticipate and store changing values while the program runs. This is one of the distinctions between design-time and run-time.


  • Temporary storage for data
  • Data types
  • Early / Late Binding
  • Casting Data Types
  • Scope
Common variable/data types
  • Boolean
  • Date
  • Char
  • String
  • Byte
  • Short
  • Integer
  • Long
  • Single
  • Double
  • Decimal


Programming Concepts
  • Review, refine, extend

References:

Variable/Data Types

Strictly Typed

Loosely/Weakly Typed

Other related notes

Arrays

  • Collection of variables of like type
    • Indexed
    • Number of dimensions is based on number of specifiers required to locate an element.
      • One dimensional fruit[1] (second item in the list)
      • Two dimensional parkingLot[3,2] (fourth floor, third parking spot)
    • Associative Arrays key:value or name=value pairs (<img name="Fred" src="....jpg">

Music CD



Sequence

  • One step at a time in order

Image: Dance Steps.png


Selection / Conditional Branching

  • If
    if
Pseudocode example

IF today is Wednesday
THEN
I will go to school
ELSE
I will stay home


General Form (C style languages)
if (logical expression) 
{ //statements in the THEN block
.
.
.
}
else 
{ //statements in the ELSE block
.
.
.
}


Visual Basic example
if (today = Wednesday) then
' I will go to school (code to execute this would follow)
else
' I will stay home (code to execute this would follow)
end if

Iteration

  • Round and round we go
Lather, rinse, repeat is a phrase that is a common part of the instructions on shampoo bottles. It is sometimes also used as a humorous way of saying that a certain set of instructions should be repeated until an explicit or implicit goal is reached, or as sardonic commentary on some people's practice of taking descriptions, instructions or expressions literally and without common sense. Often the phrase is shortened to simply "Rinse and repeat".

— source: lather, rinse, repeat


Iteration Notes

Image:JavaScriptIteration.png Reference: JavaScript Iteration Example

Hands On JavaScript

  1. Create an account with jsbin — Write down your credentials so you can continue your explorations later.
    Image:jsbinJavaScript001.png
  2. Close the HTML tab and open the Console Tab
    Image:jsbinJavaScript002.png
  3. Ready to go
    Image:jsbinJavaScript003.png
  4. Quick tips:
    • Clear the Console: ctrl-l (L)
    • Clear the Output window: click the Run with JS button


Things to try in the console. Do not be concerned about intermediate responses showing undefined . The important outputs will be displayed in the Output window.

var x = 2 ;
 
var y = 3 ;
 
var z = x + y ;
 
document.write ( z ) ;

Clear the Output window (click the button Run with JS)

var x = 2; 
 
var y = "hello" ;
 
z = x + y ;
 
document.write ( z ) ;
Note
From this point forward the URLs shown in jsbin will not match what you see on your screen.

Open the JavaScript window, close the Console, and enter the following

var x = 2 ;
var y = 3 ;
var z = x + y ;
console.log ( z ) ;
window.alert ( z ) ;
document.write ( z ) ;


Conditional Branching with IF

Open the JavaScript window, close the Console, and enter the following

var diners = 4 ;
var reward = "Congratulations, you get a discount!" ;
var incentive = "You need more diners to get a discount." ; 
if ( diners > 5 )
{ document.write ( reward ) ; }
else 
{ document.write ( incentive ); }


Image:JsbinJavaScript004.png

live version - conditional branching

Iteration

Do you love school?: I love school

Iterations with FOR
for (var i = 0 ; i < 5 ; i ++ ) {
  document.write ("Hello from JavaScript");
  document.write ("<br>");
}

Image:JsbinJavaScript005.png

live version - iteration

Iterations with WHILE and DO ... WHILE
console.clear();
 
var x = 0;
// counting up with while
while (x < 5) {
  x ++ ;
  console.log( x ) ;
}
// counting down with do ... while
do {
 console.log ( x ) ; 
 x --  ;
} while (x < 5 && x > 0) ;
 
// hair washing with while  
var washes = 0 ;  
var hair = "dirty";
while (hair == "dirty") {
  washes += 1 ;
  if (washes == 2) {
    hair = "clean" ; 
  } 
  console.log( "hair is " + hair + " after " + washes + " washes" ) ;
  }
 
// hair washing with do ... while  
hair = "dirty" ;
washes = 0 ;
do {
  washes += 1 ;
  hair = hairStatus( hair, washes ); 
} while (hair == "dirty") ; 
 
 
// after discussing this - use hairStatus at line 20... 23
function hairStatus(hair, washes){
  var washplural = "" ;
  if (washes == 2) { 
    hair = "clean" ;
    washplural = "es";   
  } 
console.log(   "hair is " + hair + " after " + washes + " wash" + washplural ) ;
 return hair;   
}

live version exploring iteration with while and do ... while


Arrays introduction
// declare an array and display one value 
var fruit = [ "apples", "peaches", "pears", "plums" ] ;
document.write ( fruit [3] ) ;
document.write ( "<hr>") ;
 
// iterate over the array and display each value
for ( var i = 0 ; i < fruit.length ; i ++) {
  document.write ( fruit [i] ) ;
  document.write ( "<br>") ;
}

Image:JsbinJavaScript006.png

live version - arrays



Assignment (3)

Assignment 3


Session Four

Share impressions from the assignments

Lessons learned from

  • Reading and writing assignments
  • How does this relate to programming?


By the end of this session you should be able to:

  1. Recognize common programming structures in everyday language
    • Variables, Arrays, Sequence, Selection, Iteration
  2. Distinguish between common datatypes in variables
  3. Write simple scripts in JavaScript
    1. Declare variables
    2. Send outcomes to a browser window
    3. Use Conditional Branching
    4. Write an iterative loop
Design

We will discuss some basic Design Concepts

  • User Centred Design
  • User Interface Design
Object Oriented Programming
  • Classes
  • Objects
  • Encapsulation
  • Properties
  • Methods
  • Polymorphism

Journal

  1. What were the most challenging ideas in the readings from this week.
  2. What were the hardest ideas to understand?
  3. Did I look at anything differently this week as I interacted with the web or other devices where programming was involved?



To prepare for this session we will Review assignments

Group work discussion around challenging concepts

Review PeerWise results.

Programming Concepts Revisit and refine our understanding
Show and Tell Lab
  • How did we do with PeerWise
  • Team up and Show your pages to a partner.
  • Talk about
    • What you did: Issues and challenges you encountered while doing the work.
    • What you learned.
    • How you will apply what you learned.
Outcomes

At the end of this session you should be able to

  • Identify the concepts that you used in the page you are sharing with your partner
  • Discuss the challenges you had to overcome to make it work
  • Describe what you learned
  • Discuss how you will apply what you learned in another context
  • Help your partner by suggesting solutions or improvements where appropriate

Object Oriented Programming

Background reading:

Your Tasks

Object Oriented Programming for a Six Year Old

In your wiki page:

  • In less than 1000 words describe object oriented programming - in terms that could be understood by someone six years old. Do not use any technical terms.

==== Object Oriented Programming for a Six Year Old ====


Technical Terms for those who like them

  • Write a short paragraphs about each of

==== The distinction between a Class and an Object ====

==== Encapsulation ====

==== Properties ====

==== Methods ====

==== Polymorphism ====


Optional Viewing

  • Login in to PeerWise :IP352F16A
  • Create at least one new question.
  • Answer at least five questions.
    • Correct your answers if necessary.
      • Confirm your answers as you go along.
    • Help where you can to improve explanations.
    • Add comments in the questions.
    • Rate the questions.

Detailed Instructions

Reflect in the course blog


Please click the picture above and answer the following questions in the course blog.

Highlights / Metacognition
  • What did you think was the most valuable thing that happened for you tonight?
  • What did you learn from that?
  • What will you do with that knowledge?
Questions?
  • Now that we've had our session together, what do you want to know?
  • What could we have done better?

Course Blog Tutorial (video)



Before we start something new, let's look at those fundamental ideas, and then look at some examples.

Programming Fundamentals

  • Variables
    • Data Types
    • Scope
  • Arrays
  • Control
    • Sequence
    • Selection
    • Iteration

Fast Review from Last Time

  1. Create an account with jsbin — Write down your credentials so you can continue your explorations later.
    Image:jsbinJavaScript001.png
  2. Close the HTML tab and open the Console Tab
    Image:jsbinJavaScript002.png
  3. Ready to go
    Image:jsbinJavaScript003.png
  4. Quick tips:
    • Clear the Console: ctrl-l (L)
    • Clear the Output window: click the Run with JS button


Things to try in the console. Do not be concerned about intermediate responses showing undefined . The important outputs will be displayed in the Output window.

var x = 2 ;
 
var y = 3 ;
 
var z = x + y ;
 
document.write ( z ) ;

Clear the Output window (click the button Run with JS)

var x = 2; 
 
var y = "hello" ;
 
z = x + y ;
 
document.write ( z ) ;
Note
From this point forward the URLs shown in jsbin will not match what you see on your screen.

Open the JavaScript window, close the Console, and enter the following

var x = 2 ;
var y = 3 ;
var z = x + y ;
console.log ( z ) ;
window.alert ( z ) ;
document.write ( z ) ;


Conditional Branching with IF

Open the JavaScript window, close the Console, and enter the following

var diners = 4 ;
var reward = "Congratulations, you get a discount!" ;
var incentive = "You need more diners to get a discount." ; 
if ( diners > 5 )
{ document.write ( reward ) ; }
else 
{ document.write ( incentive ); }


Image:JsbinJavaScript004.png

live version - conditional branching

Iteration

Do you love school?: I love school

Iterations with FOR
for (var i = 0 ; i < 5 ; i ++ ) {
  document.write ("Hello from JavaScript");
  document.write ("<br>");
}

Image:JsbinJavaScript005.png

live version - iteration

Iterations with WHILE and DO ... WHILE
console.clear();
 
var x = 0;
// counting up with while
while (x < 5) {
  x ++ ;
  console.log( x ) ;
}
// counting down with do ... while
do {
 console.log ( x ) ; 
 x --  ;
} while (x < 5 && x > 0) ;
 
// hair washing with while  
var washes = 0 ;  
var hair = "dirty";
while (hair == "dirty") {
  washes += 1 ;
  if (washes == 2) {
    hair = "clean" ; 
  } 
  console.log( "hair is " + hair + " after " + washes + " washes" ) ;
  }
 
// hair washing with do ... while  
hair = "dirty" ;
washes = 0 ;
do {
  washes += 1 ;
  hair = hairStatus( hair, washes ); 
} while (hair == "dirty") ; 
 
 
// after discussing this - use hairStatus at line 20... 23
function hairStatus(hair, washes){
  var washplural = "" ;
  if (washes == 2) { 
    hair = "clean" ;
    washplural = "es";   
  } 
console.log(   "hair is " + hair + " after " + washes + " wash" + washplural ) ;
 return hair;   
}

live version exploring iteration with while and do ... while


Arrays introduction
// declare an array and display one value 
var fruit = [ "apples", "peaches", "pears", "plums" ] ;
document.write ( fruit [3] ) ;
document.write ( "<hr>") ;
 
// iterate over the array and display each value
for ( var i = 0 ; i < fruit.length ; i ++) {
  document.write ( fruit [i] ) ;
  document.write ( "<br>") ;
}

Image:JsbinJavaScript006.png

live version - arrays


Terms to discuss

  • Relational Integrity: Tables and Joins
  • What is the downside to learning new programs that are "too new", author wants you to wait till it's been around for a few cycles?

Development Methodologies

Waterfall Model

Waterfall Model — Wikipedia
Waterfall development model

Agile Software Development
Free eBook
Free eBook

Agile Software Development — Wikipedia
Agile Software Development Methodology

Scripting Examples

JS Bin


JavaScript class example

IP352 Code Snippets See the simple form example.

Add JavaScript


Hands On Visual Basic

In Visual Studio create a new website

  • Visual Basic
  • Empty Website

Create a Webform called IfDemo

Create a Visual Basic Website

Image:Visual Studio New Website Visual Basic Empty.png

Input Form ifDemo.aspx

Image:IfDemoVB.png


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="IfDemo.aspx.vb" Inherits="IfDemo" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>IfDemo</title>
 
<style>
body {
    font-family:Arial,Verdana;
    }
 
label {
	display: block;
	float: left;
	width: 150px;
	text-align: right;
	margin-right: 10px;
}
input {
	padding:5px;
	width:50px;
}
.input{
    width:30px;    
}
</style>
</head>
<body>
<form id="form1" runat="server">
        <label>Numbers of Diners</label>
        <asp:TextBox ID="txtDiners" runat="server" ></asp:TextBox>
        <br />
        <asp:Button ID="btnCalcDiscount" runat="server" Text="Click" />
        <br />
        <label>Discount</label><asp:TextBox ID="txtDiscount" runat="server" ></asp:TextBox>
</form>
 
</body>
</html>


Code Behind ifDemo.aspx.vb
Partial Class IfDemo
    Inherits System.Web.UI.Page
 
 
    Protected Sub btnCalcDiscount_Click(sender As Object, e As EventArgs) Handles btnCalcDiscount.Click
        If txtDiners.Text > 5 Then
            txtDiscount.Text = "10%"
        Else
            txtDiscount.Text = "0%"
        End If
        'txtDiscount.Text = discount(txtDiners.Text)
    End Sub
 
    Function discount(NumberOfPeople As String) As String
        Dim discRate As String
        Dim quantity As Integer = CInt(NumberOfPeople)
        Select Case quantity
            Case Is > 15
                discRate = 20
            Case Is > 10
                discRate = 10
            Case Is > 5
                discRate = 5
            Case Else
                discRate = 0
        End Select
        discount = discRate & " %"
    End Function
 
End Class

Examples with JavaScript

<html>
<head>
 
 
</head>
<body>
 
<script>
 
var myName = "";
window.alert("Hello " + myName);
 
</script>
 
 
 
 
</body>
 
</html>

<html>
<head>
 
 
</head>
<body>
 
<script>
 
 
var myName = "Fred";
 
myName=window.prompt("What is your name",myName);
 
window.alert("Hello " + myName);
 
</script>
 
 
 
 
</body>
 
</html>

Types of Bugs


Adapted from Know Your Bugs: Three Kinds of Programming Errors — msdn.microsoft.com


Even the most experienced programmers make mistakes, and knowing how to debug an application and find those mistakes is an important part of programming. Before you learn about the debugging process, however, it helps to know the types of bugs that you will need to find and fix.

Programming errors fall into three categories: compilation errors, run-time errors, and logic errors. The techniques for debugging each of these are covered in the next three lessons.

Compilation Errors

Compilation errors, also known as compiler errors, are errors that prevent your program from running. When you press F5 to run a program, Visual Basic compiles your code into a binary language that the computer understands. If the Visual Basic compiler comes across code that it does not understand, it issues a compiler error.

Most compiler errors are caused by mistakes that you make when typing code. For example, you might misspell a keyword, leave out some necessary punctuation, or try to use an End If statement without first using an If statement.

Good Code Editors can help you to identify these mistakes before you try to run the program.

Run Time Errors

Run-time errors are errors that occur while your program runs. These typically occur when your program attempts an operation that is impossible to carry out.

An example of this is division by zero. Suppose you had the following statement:

Speed = Miles / Hours

If the variable Hours has a value of 0, the division operation fails and causes a run-time error. The program must run in order for this error to be detected, and if Hours contains a valid value, it will not occur at all.

When a run-time error does occur, you can use the debugging tools to determine the cause. These kinds of tools are frequently found in an integrated development environment.


Logic Errors

Logic errors are errors that prevent your program from doing what you intended it to do. Your code may compile and run without error, but the result of an operation may produce a result that you did not expect.

For example, you might have a variable named FirstName that is initially set to a blank string. Later in your program, you might concatenate FirstName with another variable named LastName to display a full name. If you forgot to assign a value to FirstName, only the last name would be displayed, not the full name as you intended.

Logic errors are the hardest to find and fix.



Course Home Page


Assignment (4)

Assignment 4 Object Oriented Programming Concepts

Session Five

Share impressions from the assignments

Lessons learned from

  • Research (definitions)
  • How does this relate to programming?


By the end of this session you should be able to:

Discuss Object Oriented Programming — Specifically:

  • The distinction between a Class and an Object
  • Encapsulation
  • Properties
  • Methods
  • Polymorphism
  • Inheritance
Browser
  • Objects
  • Methods
JavaScript
  • Objects
  • Methods
Events in the Browser

Journal

  1. What were the most challenging aspects of doing the research into Objects, Classes, Encapsulation, Methods, Polymorphism?
  2. What were the hardest ideas to understand?
  3. Did I look at anything differently this week as I interacted with the web or other devices where programming was involved?



To prepare for this session we will Review assignments

Group work discussion around challenging concepts

Review PeerWise results.

Programming Concepts Revisit and refine our understanding
Show and Tell Lab
  • How did we do with PeerWise
  • Team up and Show your pages to a partner.
  • Talk about
    • What you did: Issues and challenges you encountered while doing the work.
    • What you learned.
    • How you will apply what you learned.
Outcomes

At the end of this session you should be able to

  • Identify the concepts that you used in the page you are sharing with your partner
  • Discuss the challenges you had to overcome to make it work
  • Describe what you learned
  • Discuss how you will apply what you learned in another context
  • Help your partner by suggesting solutions or improvements where appropriate

Read / Write

Read 'at least' the pages 3-6 inclusive of this article. Read more if you like.

Eliminate the Testing Bottleneck

Comment on at least one points that seemed significant to you as a programmer. Copy/paste this outline into your wiki page.


==== The Testing Bottleneck ====
Reading: [http://dotnet.tech.ubc.ca/programming/content/Borland_-_eliminate_testing_bottleneck_whitepaper.pdf Eliminate the Testing Bottleneck]
 the following points were interesting to me:
===== change the heading for the first point =====

===== change the heading for a second point =====



Read: The Stress Of Being A Computer Programmer Is Literally Driving Many Of Them Crazy

Thinking About Objects

Do this by Monday so others' can view your work and comment

Create a class called human.

  • Do not use programming code.
  • List the properties and methods you would assign to the class.
  • Add comments to explain what data is in the properties
  • Add comments to explain what the methods do
  • Note if any of the properties would be read only. Copy/paste section below into your wiki page, and then extend it.
==== Class: Human ====
===== properties =====
* id : read only
** assigned at birth
* dateOfBirth : read only
** assigned at birth
* firstName 
* lastName
* 
===== methods =====
* sayHello
** says "Hello, my name is " firstName

Now create a subclass of human. It will inherit all the properties and methods of human but it will have at least two properties and one method that human does not have.


==== Class: fill in the name of the class ====
inherits '''human'''
===== properties =====
*  propertyName  : optional - readOnly
** comments
*  propertyName  : optional - readOnly
** comments
===== methods =====
* 
** comments

Comment and Help

Review at least three other students' work on these classes. Comment and help where possible.



Catch Up

Go back and fill in anything in the previous assignments that you have not done.

  • Login in to PeerWise :IP352F16A
  • Create at least one new question.
  • Answer at least five questions.
    • Correct your answers if necessary.
      • Confirm your answers as you go along.
    • Help where you can to improve explanations.
    • Add comments in the questions.
    • Rate the questions.

Detailed Instructions

Reflect in the course blog


Please click the picture above and answer the following questions in the course blog.

Highlights / Metacognition
  • What did you think was the most valuable thing that happened for you tonight?
  • What did you learn from that?
  • What will you do with that knowledge?
Questions?
  • Now that we've had our session together, what do you want to know?
  • What could we have done better?

Course Blog Tutorial (video)

External links / resources


Computing in the Cloud

Windows Azure and DreamSpark

Optional but highly recommended

If you have time, after you have created your account, go the the DreamSpark Student Downloads page and download and install Visual Studio 2013. Instructions: DreamSpark Download Visual Studio

Note: This takes about 5 gigabytes of space on your hard drive.

We will be using Visual Studio in our lab sessions later in the course, and if you want to explore those ideas in more detail, you will appreciate having Visual Studio installed on your computer.



Notes from PeerWise this week

for (var i = 0 ; i < 5 ; i ++ ) {
 
   j = i+5;
   k = j*2;
 
   if(j <7) {
     document.write (k);
   }
   else {
     document.write (k-1);
   }
 
   document.write (" ");
}


Classes of objects and instances of objects https://www.youtube.com/watch?v=IBpZBI_8QAE

Function Overloading https://msdn.microsoft.com/en-us/library/5dhe1hce.aspx

Types of Polymorphism http://en.wikipedia.org/wiki/Polymorphism_%28computer_science%29#Types_of_polymorphism

I like this one better: http://home.cogeco.ca/~ve3ll/jatutor4.htm


Pulled forward from Session Four

Types of Bugs


Adapted from Know Your Bugs: Three Kinds of Programming Errors — msdn.microsoft.com


Even the most experienced programmers make mistakes, and knowing how to debug an application and find those mistakes is an important part of programming. Before you learn about the debugging process, however, it helps to know the types of bugs that you will need to find and fix.

Programming errors fall into three categories: compilation errors, run-time errors, and logic errors. The techniques for debugging each of these are covered in the next three lessons.

Compilation Errors

Compilation errors, also known as compiler errors, are errors that prevent your program from running. When you press F5 to run a program, Visual Basic compiles your code into a binary language that the computer understands. If the Visual Basic compiler comes across code that it does not understand, it issues a compiler error.

Most compiler errors are caused by mistakes that you make when typing code. For example, you might misspell a keyword, leave out some necessary punctuation, or try to use an End If statement without first using an If statement.

Good Code Editors can help you to identify these mistakes before you try to run the program.

Run Time Errors

Run-time errors are errors that occur while your program runs. These typically occur when your program attempts an operation that is impossible to carry out.

An example of this is division by zero. Suppose you had the following statement:

Speed = Miles / Hours

If the variable Hours has a value of 0, the division operation fails and causes a run-time error. The program must run in order for this error to be detected, and if Hours contains a valid value, it will not occur at all.

When a run-time error does occur, you can use the debugging tools to determine the cause. These kinds of tools are frequently found in an integrated development environment.


Logic Errors

Logic errors are errors that prevent your program from doing what you intended it to do. Your code may compile and run without error, but the result of an operation may produce a result that you did not expect.

For example, you might have a variable named FirstName that is initially set to a blank string. Later in your program, you might concatenate FirstName with another variable named LastName to display a full name. If you forgot to assign a value to FirstName, only the last name would be displayed, not the full name as you intended.

Logic errors are the hardest to find and fix.



Course Home Page


Scripting Examples

JS Bin


Object Oriented Programming

Discussion Points

  • The distinction between a Class and an Object
  • Encapsulation
  • Properties
  • Methods
  • Polymorphism
  • Inheritance

Object Oriented Programming - Class discussion notes

Objects in the Browser

Show properties for
location document navigator window clear


Methods of Browser window()

Show methods for
location document navigator window (!ie) clear


Using Methods of browser window()

Very simple example of methods of the Window object

More examples of methods of the Window object

In this example as you fire the click events of the buttons below, we call various window methods. Check out the textarea for insights into what is happening when you click the buttons




Methods of JavaScript string prototype (object)

Methods of the JavaScript string object

str.toUpperCase() str.toLowerCase()

String.prototype.toLowerCase() String.prototype.toUpperCase()

str.replace("old value","new value")

String.prototype.replace()


Events in the Browser

Show events for
document window clear


Assignment: Object Oriented Programming

Procedural Abstractions

Functions

Create a function in JavaScript.

<script>
 function functionName(parameter1[,parameter2]...)
{
  var output;
  // write the core functionality here. 
  return output;
} 
</script>

direct link to this example in jsbin

High Level Languages

Declarative Languages

NormalizedDeNormalized

Normalized

deNormalized

Normalized

deNormalized

Tables

Queries

  1. sql.ppt
  2. sqlMySQL.ppt
  3. sqlMySQL2.mht
  4. sqlMySQL2.ppt



  • Discussion: Three Programming Models: Procedural, Object Oriented, Declarative

jQuery


Programming in the Cloud

(optional discussion)

Using Windows Azure and WebMatrix.

  1. Start by logging in to https://manage.windowsazure.com/
  2. Create a website
  3. Open the website with WebMatrix
  4. (Optional - also open the site locally with Visual Studio)

Web Technologies Revisited

(optional discussions)

Assignment

Assignment 5

Session Six

Share impressions from the assignments

Lessons learned from

  • Research (definitions)
  • How does this relate to programming?


By the end of this session you should be able to:

Discuss

  • HTML Frameworks
  • JavaScript Libraries / Frameworks
  • .NET / Java
  • Integrated Development Environments

Build

  • Web pages that include
    • Client side programming (JavaScript)
    • Server side programming

Journal



To prepare for this session we will Review assignments

Group work discussion around challenging concepts

Review PeerWise results.

Programming Concepts Revisit and refine our understanding
Show and Tell Lab
  • How did we do with PeerWise
  • Team up and Show your pages to a partner.
  • Talk about
    • What you did: Issues and challenges you encountered while doing the work.
    • What you learned.
    • How you will apply what you learned.
Outcomes

At the end of this session you should be able to

  • Identify the concepts that you used in the page you are sharing with your partner
  • Discuss the challenges you had to overcome to make it work
  • Describe what you learned
  • Discuss how you will apply what you learned in another context
  • Help your partner by suggesting solutions or improvements where appropriate


Questions

by Monday

Add one more question in PeerWise. You should have at least six questions from you.

by Wednesday

Answer at all unanswered questions that you find there.

Finishing Up

Go over your previous assignments and make corrections and complete your work as necessary.

Writing

What kind of programmer

Are you more likely to be a front-end or back-end programmer. Why? Or - if neither - then why.

Please reply in your wiki page.

  • Login in to PeerWise :IP352F16A
  • Create at least one new question.
  • Answer at least five questions.
    • Correct your answers if necessary.
      • Confirm your answers as you go along.
    • Help where you can to improve explanations.
    • Add comments in the questions.
    • Rate the questions.

Detailed Instructions

Reflect in the course blog


Please click the picture above and answer the following questions in the course blog.

Highlights / Metacognition
  • What did you think was the most valuable thing that happened for you tonight?
  • What did you learn from that?
  • What will you do with that knowledge?
Questions?
  • Now that we've had our session together, what do you want to know?
  • What could we have done better?

Course Blog Tutorial (video)

External links / resources


Computing in the Cloud

Windows Azure and DreamSpark

Optional but highly recommended

If you have time, after you have created your account, go the the DreamSpark Student Downloads page and download and install Visual Studio 2013. Instructions: DreamSpark Download Visual Studio

Note: This takes about 5 gigabytes of space on your hard drive.

We will be using Visual Studio in our lab sessions later in the course, and if you want to explore those ideas in more detail, you will appreciate having Visual Studio installed on your computer.


Download Sample Files for this session



HTML5 Frameworks

When it comes to HTML5, a framework will guarantee a level of validity and certainty that hand-coding may not, particularly if you aren’t an HTM5 expert. Many bundle additional and necessary components such as CSS3 styles and jQuery scripts for enhanced functionality for responsive layouts and multimedia.
You may have a very specific workflow and prefer to start from scratch every time, but the fact is that frameworks can speed up your development process and provide the additional benefit of a consistent structure to every project you undertake.
Here are 10 essential HTML5 frameworks you should have in your designer arsenal right now if you are serious about adopting HTML5 development into your daily workflow. Each was chosen for its attention to HTML5 standards, exceptional structure and ease of use.

10 Essential HTML5 Frameworks

Search results for



JavaScript Libraries / Frameworks

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

jquery

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

modernizr

.NET


Integrated Development Environments

Expression Blend (Silverlight)

Expression Blend

Expression Web (Web sites - HTML / HTML 5)

Expression Web

WebMatrix (free) Webmatrix website

WebMatrix

Visual Studio Express (free) Visual Studio Express website

Visual Web Developer Express

Visual Studio Visual Studio website

Visual Studio

Downloads

Class Human

We're only human.

Public Class Human
    Private _LastName As String
    Private _FirstName As String
    Private _IQ As Integer
    Private _BirthDate As Date
    Private _Age As Integer
 
 
    Public Property LastName() As String
        Get
            Return _LastName
        End Get
        Set(ByVal value As String)
            _LastName = value
        End Set
    End Property
 
    Public Property FirstName() As String
        Get
            Return _FirstName
        End Get
        Set(ByVal value As String)
            _FirstName = value
        End Set
    End Property
    Public Property IQ() As Integer
        Get
            Return _IQ
        End Get
        Set(ByVal value As Integer)
            _IQ = value
        End Set
    End Property
 
    Public ReadOnly Property BirthDate() As Date
        Get
            Return _BirthDate
        End Get
    End Property
 
    Public Function AgeCalc() As Integer
        'uses datediff - http://msdn2.microsoft.com/en-us/library/b5xbyt6f.aspx
        Dim elapsedDays As Single = DateDiff(DateInterval.Day, _BirthDate, Now)
        Return Int(elapsedDays / 365.24) ' last completed year
    End Function
 
    Public Sub New(ByVal LastName As String, ByVal FirstName As String, ByVal IQ As Integer, ByVal BirthDate As Date)
        _LastName = LastName
        _FirstName = FirstName
        _IQ = IQ
        _BirthDate = BirthDate
    End Sub
 
    Public Function NameTag() as String
        Dim greeting As String = _
        String.Format("Hello, my name is {0} {1}, IQ = {2}. I am {3} years old", _
                      _FirstName, _LastName, _IQ, AgeCalc().ToString)
        Return greeting
    End Function
 
End Class

Lab Session

IP 352 Visual Studio Lab Session

Note: You may need the

2007 Office System Driver: Data Connectivity Components

Microsoft Access Database Engine 2010 Redistributable X64 bit version

or

Microsoft Access Database Engine 2010 Redistributable 32 bit version

to run the database demo that uses Microsoft Access file people.accmdb

or SQL Server Express for the database demo that uses SQL Server

Sample Files

Assignment(6)

Assignment 6

Optional Reading

Visual Studio


Assignments

Assignment 1

To be completed before Monday September 19, 2016 (your part, then add comments to other students' wiki pages)


This is probably the most time-intensive assignment of the whole course. There are four required parts that could take 10-90 minutes each, and then some optional things to do that could take another hour.

Why have time budgets?
We are early in the course and I don't want you to feel overwhelmed or to get frustrated if you get stuck.
1. Shared Notes

Please read and add a comment to our shared Session One Notes

Time budget: 10-15 minutes

You will do the rest of your written work in your wiki page. Your login name and password are in your notes.

2. Read & Write

Read The Seven Habits of Highly Effective Programmers

Write up to 500 words in total about two or three things that you have learned, and how you will program differently because of that learning.

Time budget: 60-90 minutes

3. Write Instructions

Write a paragraph or several to describe how to perform a task. You are giving someone detailed instructions on how to solve a problem. He or she must rely on the instructions you provide. You will not be available to help or clarify when she or he is doing the task.. You may use point form.

This should not take longer than an hour to finish - or rather - when you have invested an hour, jot down what you have at that point.

Examples of tasks you could describe:

  • Baking a cake.
  • Enter your house to house-sit and feed a pet.
  • Wash your car.
  • Tidy your house.
  • Write a song.

Time budget: 60-90 minutes

4. Help / Comment

Review the other students' work. Edit where necessary and add discussion notes to the pages for at least four students.

There is a link on your wiki page to the other Students' wiki pages.

At the top right of your wiki page you will find guidelines to help you.

Time budget: 30-90 minutes

Assignment 2

To be completed before Monday September 26, 2016 (your part, then add comments to other students' wiki pages)

1 Programmers (Read and Write)

Read What Makes Bad Programmers Different? — Andrew Binstock

Read The Programmer's Virtues — Tommy Morgan

Write up to 500 words in total about two things that you have learned, and how you will program differently because of that learning.

Read Do We Really Need to Learn to Code

Write in your wiki page the answers to these questions:

  1. What will be the most valuable skill(s) for programmers in the future?
  2. How soon should a learner be acquiring that / those skills?
  3. How applicable is/are those skills today?
2. Programming Structures
Finish Assignment One

Make changes (edits and additions) to your Session One assignment Instructions.

2.2 Research

Do some research on the web and do what you can to get a sense of the following terms.

  • Variables
  • Arrays
  • Sequence
  • Selection / Conditional Branching
  • Iteration

Add these terms to your assignment page, write definitions and be sure to provide links to your sources.

===== Variables =====


===== Arrays =====


===== Sequence =====


===== Selection / Conditional Branching =====


===== Iteration =====

2.3 Application

Review your first assignment in which you wrote instructions to complete a task. Read the note below.

Define the Problem Completely

For a lot of people "define the problem completely" seems pretty obvious as the only right way to do things. To others, especially lately, there seems to be an idea that one should throw something together based on partial understanding, take it to the end user to see where they are, and then go to the next step. This really seems like a waste of time to me. Oh to be sure there are often times when the end user doesn't know what they want when a project is started. Someone commented earlier that "Walking On Water and Writing a Software is easy, if the Water and Specifications are FROZEN." There is some truth to that.

Historically software developers have lived with the idea that the specification will change and things will be come if not clearer at least different. That often makes it difficult, if not impossible, to define the whole system before starting.

But actually all of that is both a digression and a missing of the point. While for some people this proverb means understanding the whole system that is often, some would say always, a problem. And I think looking at that large a picture misses the point. I think that at some point one has to reach a granularity for which this proverb makes complete sense. That granularity is when one reaches a point when the amount to be coded by one person is reached. Is that a method? A class? A module? A complete program or even a small system? At that point it is a mistake not to have the problem defined and understood completely. To do otherwise is to ensure that the code will break when it comes into contact with expectations of the user or of other code. Code that is checked in with other code and does not work as expected means that the problem was not defined completely enough and someone started coding too early. There is no excuse for that in my opinion.

This idea of defining the problem completely has interesting ramifications for the teaching/learning environment. When a teacher defines a project for an assignment or an exercise for a test they assign to students there is an obligation to spell out the requirements completely. If there is ambiguity it should be there on purpose and to allow some leeway in problem solving. Students have an obligation to read and understand the definition completely before beginning to write code. Alas they seldom do. They are a lot like some professionals I have worked with I am afraid.

What I used to say to students was "I am much too lazy to write a lot of extra words so if they are there you'd better read them all." Assumptions are risky business and no less so where graded work is involved. I encouraged questions and often I re-wrote project assignments to make sure I answered those questions in the future. This was valuable both to the student, who learned to ask questions, and for me as I learned to better specify what I wanted. We never stop learning.

What is the problem? What are your inputs? What are your outputs? What do you need to know and to do to get from the inputs to the outputs? Unless those things are defined it is much too early to write code.

Source: Define the Problem Completely


Write a definition of the problem that you were trying to solve with the instructions you wrote last week.

Identify where you used (or could have used) these concepts.

  • Variables
  • Arrays
  • Sequence
  • Selection / Conditional Branching
  • Iteration
2.4 Real Life Examples

Then write examples where your instructions use these concepts.

Write about a real-life example that illustrates each of the following concepts:

  • Variables / Arrays
  • Sequence
  • Selection / Conditional Branching
  • Iteration
3. More Commentary
  • Look at several other participants' pages and see how they did matching terms to their instructions.
  • As before, feel free to fix spelling and grammar issues.
  • Leave comments.
  • Add comments to the discussion pages for at least three of your classmates.
  • Respond to comments left by others on your discussion page.

See all of your Classmates' pages


4. Light Reading

Not quite reading but News report from 1981 about the Internet 2:17 minutes for perspective

Just a little light reading...

The Rise of the Brogrammer

Building a Motivated Team (11 ways to motivate a geek)


DreamSpark Download Visual Studio


Assignment 3

To be completed before Monday October 3, 2016 (your part, then add comments to other students' wiki pages)


Corrections and Updates

Now that we have discussed programs concepts like variables, arrays, sequence, selection, iteration, and procedures please review and if necessary, correct your assignment submission for last week,

Read

Read one true bracket style. Read this for light understanding. You do not need to know any of this in detail. Just look at formatting of the code examples. You don't have to understand what the code is doing, or all the terminology. You are looking at the examples for the visual presentation.

If you want to read more about this (optional) see indent style — wikipedia.


Read / Write

Please read all of these short articles. Then pick two and write about them. See the copy/paste outline below.

  1. Managed Coder: On Software Developers — Code Magazine Ted Neward
  2. The Requirements Payoff — Doctor Dobbs Journal Karl Wiegers
  3. Commenting Code - two short articles count as one.

In your wiki page,

  • Note any questions that come to mind as you read this article.
  • Pick at least two ideas that were significant to you and comment on them.

You can Copy and Paste the outline below into your wiki page:

===Assignment Three Read / Write  Part 1 MeWare, ThemWare, UsWare ===
Read: [http://www.code-magazine.com/article.aspx?quickid=0911141&page=1 Managed Coder: On Software Developers] &mdash; Code Magazine Ted Neward 
 
==== Questions that came to mind as I read this ====
#
#
#
#
 
==== Significant Ideas ====
*
*
 
==== Read / Write Part 2 Requirements Payoff ====
Read: [http://www.drdobbs.com/architecture-and-design/225702520 The Requirements Payoff] &mdash; Doctor Dobbs Journal Karl Wiegers
 
==== Questions that came to mind as I read this ====
#
#
#
#
 
==== Significant Ideas ====
*
*
 
==== Read / Write Part 3 Commenting Code ====
Read:
*[http://visualstudiomagazine.com/articles/2011/01/06/to-comment-or-not-to-comment.aspx To Comment or Not to Comment]  &mdash; Visual Studio Magazine AND 
*[http://visualstudiomagazine.com/articles/2013/06/01/roc-rocks.aspx Why You Shouldn't Document Code] &mdash; Visual Studio Magazine
 
 
==== Questions that came to mind as I read this ====
#
#
#
#
 
==== Significant Ideas ====
*
*

Coding

Revisit the examples you wrote in jsbin. http://jsbin.com

  1. log in to jsbin using the credentials you wrote in your notes
  2. Look at your class work (click Bins, My Bins)
    Image:JsbinJavaScript007.png
    Here is an example showing the JavaScript and Output windows.
    Image:JsbinJavaScript008.png
  1. Change the examples enough to assure yourself that you understand what you are doing.

Assignment 4

By Friday
Reflections on your learning this session: Please add a comment in the IP352 Session Four Notes.
Object Oriented Programming Concepts

To be completed before Monday October 10, 2016 (your part, then add comments to other students' wiki pages)

Object Oriented Programming

Background reading:

Your Tasks

Object Oriented Programming for a Six Year Old

In your wiki page:

  • In less than 1000 words describe object oriented programming - in terms that could be understood by someone six years old. Do not use any technical terms.

==== Object Oriented Programming for a Six Year Old ====


Technical Terms for those who like them

  • Write a short paragraphs about each of

==== The distinction between a Class and an Object ====

==== Encapsulation ====

==== Properties ====

==== Methods ====

==== Polymorphism ====


Optional Viewing

Assignment 5

To be completed by Monday October 17, 2016

Read / Write

Read 'at least' the pages 3-6 inclusive of this article. Read more if you like.

Eliminate the Testing Bottleneck

Comment on at least one points that seemed significant to you as a programmer. Copy/paste this outline into your wiki page.


==== The Testing Bottleneck ====
Reading: [http://dotnet.tech.ubc.ca/programming/content/Borland_-_eliminate_testing_bottleneck_whitepaper.pdf Eliminate the Testing Bottleneck]
 the following points were interesting to me:
===== change the heading for the first point =====

===== change the heading for a second point =====



Read: The Stress Of Being A Computer Programmer Is Literally Driving Many Of Them Crazy

Thinking About Objects

Do this by Monday so others' can view your work and comment

Create a class called human.

  • Do not use programming code.
  • List the properties and methods you would assign to the class.
  • Add comments to explain what data is in the properties
  • Add comments to explain what the methods do
  • Note if any of the properties would be read only. Copy/paste section below into your wiki page, and then extend it.
==== Class: Human ====
===== properties =====
* id : read only
** assigned at birth
* dateOfBirth : read only
** assigned at birth
* firstName 
* lastName
* 
===== methods =====
* sayHello
** says "Hello, my name is " firstName

Now create a subclass of human. It will inherit all the properties and methods of human but it will have at least two properties and one method that human does not have.


==== Class: fill in the name of the class ====
inherits '''human'''
===== properties =====
*  propertyName  : optional - readOnly
** comments
*  propertyName  : optional - readOnly
** comments
===== methods =====
* 
** comments

Comment and Help

Review at least three other students' work on these classes. Comment and help where possible.



Catch Up

Go back and fill in anything in the previous assignments that you have not done.



That includes making comments on on at least two other peoples' discussion pages.

Assignment 6 - Final

To be completed by Wednesday October 26, 2016


Questions

by Monday

Add one more question in PeerWise. You should have at least six questions from you.

by Wednesday

Answer at all unanswered questions that you find there.

Finishing Up

Go over your previous assignments and make corrections and complete your work as necessary.

Writing

What kind of programmer

Are you more likely to be a front-end or back-end programmer. Why? Or - if neither - then why.

Please reply in your wiki page.


More Resources

Wiki Pages

You will create a wiki page under your name, and you will write all of your work on this page.

Related Downloads

MindMaps Optional

You have a hard copy of the MindMaps in your notes.

  • Optional: View MindMaps on your computer

[[Category:IP352F16A]]




Views
Personal tools
Navigation
Toolbox