Spring 2017 – Week 11 Class Notes

Sorry I did not get this out in a timely manner. However, there is not much to talk about.


Be working on your shopping cart this week. Almost out of class days!


This week do the next chapter – “Inductors and Capacitors in Circuits” and do the problems.


There is no class this week so I will post the assignment in the next class notes.

Spring 2017 – Week 10 Class Notes

Great week everyone! We only have five classes left!


First of all, if anyone needs to send a program via email, this is sometimes more difficult than it should be. Email programs tend to be wary of people attaching programs to emails. Therefore, to send one, you need to (a) rename the file so it doesn’t end in .js or .html. Just rename the file to .txt. Then (b) compress the file into a zip file (this can usually be done by right-clicking on the file).

Now to this week. For those who missed it, this week we practiced using the programmable web – using URLs to fetch JSON files, parse them, and use their data in our own programs. Below are the two files we typed in:

What this code does is go to the EventElf website, get a JSON feed of an event, and pull down some of the information into a web page. The things we used are:

  • XMLHttpRequest – this object allows us to make connections to other websites for data.  We have to use new to get a new copy of this object.  The onload property should be set to a callback that will trigger when the data is finished loading, and then the actual data itself will be in the responseText property.  The open function tells the method (usually “GET” sometimes “POST”) and the URL to obtain.  Then, the send function actually makes the call.
  • JSON.parse – the data retrieved from XMLHttpRequest is just a string.  JSON.parse will take the string and, if it is a JSON object, parse it into a JavaScript object.

From there, we just use document.getElementById like we normally do.

There are a huge number of things on the web accessible by JSON feeds in this way.  When you find one, you read the documentation, and it will tell you how to construct URLs to access their data, and what the data looks like.  This is known as the API.  Unfortuantely, a lot of APIs require you to perform tasks to authenticate yourself and your program, which adds a lot of complexity to the task, especially for new programmers.

We did not talk much about our web store system, but will get more into that next week.


  1. Work on your cart program
  2. Modify the program we typed in this week to display even more data about the event (the pieces of data you want to display are your choice).  The easiest way to see what data is available is to either log the parsed javascript object to your console, or just go to the feed URL in your browser to see what it is giving you.
  3. Alternatively, you can find another API to interface with.  I have been trouble finding an API that is all of (a) easy to use, (b) works with your browser’s security, and (c) does not have any inappropriate content.  That is proving difficult 🙂  I will update this if I find one.  I found several joke APIs, but they often have both regular and inappropriate jokes.  I found a “cat facts” API, but it doesn’t work with your browser’s security.  Anyway, if you find one you want to use, feel free to do so!


This week we went into further depth on inductors.  If you have not read chapter 22, you should do so.  The “apply” section at the end is this week’s homework.  I should have the next chapter out this weekend, but the homework will be for chapter 22, which is already there. UPDATE – chapter has been updated on the site.


This week we covered trig substitutions in more depth.  I am still working on plans for this week’s homework and next week’s lesson.  More information hopefully over the weekend.

Spring 2017 – Week 9 Class Notes

We are getting close to the end! Unfortunately, I don’t think we are going to get through everything I had hoped, but I think that we will make a solid finish to the year.

Computer Programming

This week we talked a little bit about how websites talk to servers. The most common file format used for communication on the Internet is called JSON, and it is more-or-less just a JavaScript object like you would write in a program. There are a few extra rules that make it easier for other programs to read and write, but it should definitely be recognizable.

However, remember that, for a computer, it doesn’t know what type of data it has until you tell it. Remember, if someone types a number into an input box, it is just treated as a string until you tell it to parseInt or parseFloat. Similarly with JSON. To convert a JavaScript object to a JSON string, using JSON.stringify(myobject). To convert a JSON string to a JavaScript object use JSON.parse(mystring).

You can test this out in your browser console. Just open up the JavaScript console and type the following:

var myitem, mystring, myobj;
myitem = {name: "Product", price: 10};
mystring = JSON.stringify(myitem);
myobj = JSON.parse(mystring);

We also talked about how pages communicate with servers using form tags and input tags. The form tag has an “action” attribute which tells the pag the server URL to talk to. The “method” attribute is either “GET” (for retrieval of information) or “POST” for sending data to the server. The input fields each have a name to identify to the server what field it is. For text fields, the value of the field is what the user types in. Hidden fields can be used for the page to send its own data using the “value” attribute.

YOUR ASSIGNMENTS: (1) If you did not get last week’s cart assignment working, SEND IT TO ME SO I CAN CHECK IT. (2) This week’s cart assignment is to have the “add” button actually add the item to an array. You don’t have to do anything with it yet, just be sure it gets added to some sort of global cart array. (3) Go to the following URL in your browser: https://www.eventelf.com/events/482 Hit the “continue” button to see the activities for this event. Now go look at the JSON feed describing the event: https://www.eventelf.com/events/482.json Copy and paste this to your editor, and reformat it so that you can better read it. See how much of it you can understand. Look back at the page and see which pieces of data are being used on the page. (4) Read PayPal’s documentataion on how to create a form that allows people to ask for money. The documentation is here. See how much of it you understand. (5) Look at the form listed under the heading “Sample HTML Code for Filling Out FORMs Automatically for Buyers”. It doesn’t actually work if you type it in because of some issues with PayPal and non-website-based pages, but this is basically how PayPal buttons are created.


This week we finished our Capacitor series and will move on to inductors. There will be a quiz next week. I will cover RC time circuits and period/frequency, but nothing that is quite as intensive as last week’s homework. The chapter on inductors should be ready this weekend. Right now there is a start of a chapter, but it is not even well-written.


This week we covered how to do trig substitutions. I will try to get a chapter up this weekend, but at least I will post problems.

Spring 2016 – Week 8 Class Notes

We are over halfway done with the semester, and coming upon the end of the year! We are getting tight for time to work on things, but I don’t want to rush things, either.

Computer Programming

This week we discussed your project. Here is what I would like to see for next week in addition to the homework below:

  • Start with an array of objects representing products.
  • Build a program to generate an HTML product list from the array.
  • The product list should include a “Buy” button.
  • The “Buy” button can simply show an alert, but it must show product information.

That last bit was what we talked about this week. We’ve discussed it before, but it bears repeating. The problem is that (a) all of the buttons share the same code for creating the onclick function, (b) the onclick function takes no parameters, but (c) we have to be able to grab the data that is specific to the button that was created. There are two primary ways to do this:

1) Store the data on the HTML element

When you create the button, attach extra data to the HTML button element either containing the whole product object, or at least the code of the product so you can look it up. Then, use the “this” implicit parameter within your function to refer to the product.

2) Create a new scope to store the information, and create the onclick function in that scope. This way, any information present in that scope will be available within the onclick function.

The homework this week is to type out two programs that illustrate this point. Please take some time to think through the programs and understand how they work. Then you can implement the ideas in the project for the week. Please bring both these typed out programs and the work on your project so far to class next week.

Program 1 (attaching information to the button) – HTML and Javascript

Program 2 (using a new scope) – Javascript (HTML is the same)


I’m glad everyone got their tone generator working in class! This week, we covered the differences between making light outputs and sound output. The two big differences were that (a) we used a capacitor to convert our DC Biased oscillations into pure AC oscillations, and (b) we calculated the power output in watts, because the speakers have a resistance to them. We didn’t actually do the calculations in class, but they are just the same as the calculations previously – the current to the headphones times the voltage across the headphone’s resistance. Some of you had really loud projects – I would suggest increasing the output resistor in that case. Even though the picture is with a 9V battery, I actually designed the circuit around a 5V source, and didn’t think about what the adjustment would be. You might take a look at the calculations and retry them for a 9V source to see just how much power is flowing through there.

This week, read Chapter 21 and do the exercises. NOTE – even if you read the chapter last week, you should re-read it this week, as it is quite different.


This week was L’Hospital’s Rule. Read and do the homework on chapter 28. I will try to post the answers for Chapter 21 later this week.

Spring 2016 – Week 7 Class Notes

Next week is Spring Break! Don’t come to class because we are not having it! You can spend the time catching up on things you had issues with. Don’t forget to email me if you have questions on the material.


This week we spent some more time on the program that we worked on last time. We are a little behind, so don’t worry about the assignment that is due on the syllabus. I think we are going to go over it in stages starting next week.

If you have not finished last week’s homework, do so this week. If you only got part-way, see if you can go further. If you have everything working, try to trace through the program, and list out every variable (in every scope!) to make sure that you know what is happening. See what happens every time it goes through the loop, and make sure you understand how the scoping mechanisms keep the different positions of the different things on the screen from bumping into each other.


If you did not do the homework for the previous week, focus on that this week. There is a new chapter to read, but I am still going to add updates to the same chapter for next week. Don’t do the problems yet, as they will probably change, and I am going to be a little more specific on some of the math. Nonetheless, you should read it for our next class together.


I will add questions to the chapter you all read last week this weekend. So check back in next week for the problems.

Spring 2017 – Week 6 Class Notes

Greetings students! We managed to pack a lot in this week, and I hope you all had as good of a time as I did. As always, email me if you get stuck or have questions.


This week we looked at animations using absolute positioning, as well as applying animations to arbitrary HTML elements. A few things to remember:

  • The CSS style “position: absolute” means that your element will be laid out on the current coordinate space somewhat independent of where it exists in your document.
  • The CSS style “position: relative” defines a new coordinate space for absolutely positioned elements (the default coordinate space being the whole document).
  • The CSS styles “left” and “top” are used to mark how many pixels from the left and from the top you are. “left” is like the x-coordinate. “top” is like the y-coordinate, except that it increases as it moves down. “left: 0px; top: 0px;” positions your element at the top-left corner of the coordinate space.
  • Remember that we can use function-creating-functions to create new local variable spaces which can store information so that it doesn’t have to be passed in a function.
  • The setTimeout function is used for animation. For the animation to work, it has to both move the things, and call setTimeout.

Since we didn’t have time for everyone to finish the movement app, the assignment this week will focus on typing that in. I have screenshotted the code (so you have to retype it, hahahahaha!). What I want you to do this week is:

  1. Type in the code for the app. The HTML is here. The JavaScript is here.
  2. If you have any problems with it, be sure to use your browser’s JavaScript console to see where the problem might be.
  3. After you get it working, see if you can create a function that can be attached to “onclick” methods of elements so that, if clicked, the element starts to move using this function.
  4. Create a page with at least three different elements that get onclick’s attached so that they can move like this.
  5. If you are really adventurous, try creating your own animation that you can apply when clicked. Even try animating something other than position. You can use this CSS reference to find CSS attributes you might want to animate.
  6. Electronics

    This week we took our knowledge of RC time circuits and applied them to oscillating circuits. We learned to use the NE555 timer, which continually charges and discharges a capacitor to measure the timing for its oscillations.

    This week, read chapter 20, which provides a more in-depth explanation of oscillator circuits. This chapter is a little more math heavy, but it is mostly just an extension of the RC time circuit calculations that we did in the last chapter.


    Many apologies to my calculus class for the numerous interruptions during class time, and for issues with the book last week.

    As we mentioned last week, we have done a lot of work and covered many topics this year. There are a few I want to revisit, but I also want to see how well you all do on other people’s calculus problems. Therefore, we are going to start looking at AP Calculus exams to see how well you are progressing.

    So, for this week, I want you to:

    1) Read chapter 22 (Advanced Uses of the Integral). There are no problems in this section, but you should work through the examples.

    2) Download the AP Calculus exam. Look through the AB exam (not the BC). Work through the problems you know how to do, and make note of which ones you don’t. We will bring these to class to discuss.

Spring 2017 – Week 5 Class Notes

URGENT MESSAGE – NO CLASS NEXT WEEK – IF YOU ARE A STUDENT READING THIS TELL YOUR PARENTS ABOUT IT RIGHT NOW. I’ll email you later this week about it, but just wanted to put that out there up front.

As always, if you need more information or get stuck on anything, please feel free to email me!


This week in programming we looked at other properties of HTML elements we could modify using JavaScript. We made things move by modifying their CSS padding (you may want to look at the CSS chapter again), and then we animated the movement using the setTimeout function. setTimeout has two parameters – the first is the function you want to run, and the second is the number of milliseconds it should wait until it runs your function. Remember to just send the name of the function to run, or a function declaration (i.e., function(){ /* function here */ }). If you call the function when you send it, it does not do the right thing! In other words, we did setTimeout(moveme, 20);. We DID NOT do setTimeout(moveme(), 20); The latter one would call moveme once, and setTimeout would probably signal an error because it would receive a null (the function’s return value) instead of the function itself.

We are basically past the end of the book at this point (we skipped one chapter that we may return to), so for your reading this week we are going to start reading web tutorials. Most of what you need to learn to program is available on the web, and practicing learning from other people’s documentation is a good habit to learn.

One thing we did not cover in class is why we had to use setTimeout instead of a simple loop. The main reason is that JavaScript does a lot of stuff for us while we aren’t looking (watching for button clicks, scrolling the page, redrawing the screen, etc.). However, it can’t do these things while we are occupying the processor. So, when we do a setTimeout, we are allowing the computer to go about its business doing other necessary things (including drawing the change we made) while we wait for the next time to do our iteration. However, the same sorts of things we have in loops are needed with setTimeout – we need initialization, we need a condition to know when we need to stop, etc. It’s just that, in this case, “stopping” is just not calling setTimeout again.

So, for your reading this week, I want you to read through these two documents:

  • A list of JavaScript HTML events (focus on the “mouse events” section, but also look around to see what the other possibilities are; also note that the event name in the list is mouseout but in JavaScript we will install the handler with an “on” prefix, like element.onmouseout = myfunction;)
  • A list of CSS styles (you don’t need to read all of them, but pick out 2 or 3 sections of this to read in detail; remember to use the camelcased name of the CSS style in JavaScript, and to attach it to the element’s style property)

What I want you to do this week is read through these, and then write two short programs demonstrating these new event handlers and CSS properties. As an example, there is a double-click event. There is a font CSS property. So, I could have a program that, on double-click of something, changed the font. If you can add in animations, that would be good for practice as well.


This week we did RC (resistor-capacitor) circuits, focusing on the RC time constant (note – it takes 5 RC time constants to fully charge a capacitor). I rechapterized the book this week, so previous chapter numbers do not apply. The chapter to read / work this week is Chapter 19. I would like everyone to bring in their box the final project in the chapter, whose schematic is in Figure 19.4 or as best/close as you can. Next week we will introduce oscillators.

Also, this week we are using the voltage comparator chip. Since it is still winter, you all have static electricity in your bodies that can damage the chip, so be sure to touch something metal before working with the comparator chip to discharge any static electricity and keep the chip intact.


This week we went through infinite series again using both Taylor series and McLaurin series. I’ll have more here and in the book later this week.

Spring 2017 – Week 4 Class Notes

All of the classes have finished our reviews from the last semester, and are heading out into new material. Be thinking about what sort of classes you all might be interested in over the summer. Last summer we did all entry-level projects, but this summer we will have students that have the skills to do more advanced work if you all are interested.

Computer Programming

This week we focused on HTML generation from an array. We looked at how to (a) look at a web page and find structural repetitions, (b) convert those into data items, and (c) write JavaScript functions that convert the data into HTML. Not only is this a good programming exercise, this sort of technique is at the core of how the web is built. It may not seem useful with small datasets, but as the datasets grow larger, the ability to separate out what the data is and how it works together in a page is crucial to working with data of all kinds. Eventually, you learn how to convert those arrays of data into databases, and then you will be able to have other people add items to your database, and have it generate pages for you. At the core of all of this is what we did in class today.

Also remember that we looked at several methods for attaching functions to objects. The one we focused on today used the “this” implicit parameter. We also talked about how you can store JavaScript objects into HTML elements. This is a great technique, though store data objects into HTML elements is a bit clunky. The other method we looked at involved calling a function and creating variables that our callback function will have access to. We will go more in-depth on that next week. In any case, you will need to do one of these two methods for your final class project.

For this week, we are again looking at chapter 15. Do the final exercise in that chapter for class next week. Also, just to remind you, we used the “onmouseover” and “onmouseout” events to do the colors, and used the “style.color.backgroundColor” field of our element to change out the background colors.


This week we started capacitors. A new version of the book is ready to download, and capacitors are in Chapter 17. I’m not sure if this is anywhere in the book, but remember that:

  • milli means 1/1,000
  • micro means 1/1,000,000
  • nano means 1/1,000,000,000
  • pico means 1/1,000,000,000,000
  • just for fun, femto means 1/1,000,000,000,000,000, but you would never use it unless you were developing integrated circuits

Next week we will build timers and oscillators with capacitors.


This week we covered infinite series and solving unsolvable integrals with them. The type of series we used today were called Maclaurin series. Next week, we will look at a more general type of series representation.

For homework, I will load the “Integration by Parts” chapter with homework problems this weekend.

The most important thing to remember is that if someone says something is impossible, there are usually implicit boundaries that are making it impossible, and perhaps the impossible becomes possible when those boundaries are removed.

Have a great week everyone!

Spring 2017 – Week 3 Class Notes

After this week, the review time for all the classes will be over. Next week – all new things!

Computer Programming

This week we covered more about interacting with web pages. We worked with manipulating HTML elements on the page, including adding events to divs and inputs. The onclick event for buttons allows us to attach a function to a button. The onmouseup event allows us to perform an action whenever someone types something in an input field. The onmouseover and onmouseout events allow us to track when the mouse is over any HTML element. There are numerous events you can use. They all pretty much have are used the same way – use document.getElementById() to find the element in the page, then set its event function to be whatever function it is you want it to do. You can also use the function() keyword to create a function right there and it doesn’t need a name.

You can also access an HTML element’s style information through its “style” property. You can do elem.style.backgroundColor to set the background color to whatever you want. It can use pretty much any CSS value, you just have to convert the dashed named to camelcase (i.e., “background-color” becomes “backgroundColor”).

Also, we covered document.createElement() to create new HTML elements and using appendChild to attach them to existing elements on a page.

We also talked about the Model/View/Controller paradigm. The “View” is what you see – the HTML page. The “model” is how you conceptualize what is happening. Then, the “controller” shuffles data and actions back and forth between the model and the view.

We are doing chapter 15 again, trying to get further on the problems. You can save #3 for next week.


We reviewed diodes and covered power again. Most complicated circuits in the “real world” are really just the simple circuits we learn here put together in a variety of ways. Therefore, being familiar with how these different circuits operate, and being able to spot them, will help you beyond just this class.

For diode circuits, we talked about using them to (a) regulate the direction of current, (b) provide a fixed voltage reference, and (c) using LEDs to make lights. Current limiting resistors are almost always needed in diode circuits because otherwise the diodes will form a short circuit.

For power, we talked about energy, work, and power. This week, read chapter 15 and do the problems on power.

Next week, we will begin our look at small-signal AC circuits, looking at how capacitors work.

I forgot to do videos last week. Here are some diode videos:

Here are some videos on electric power:


This week we covered integration by parts. That is chapter 21. Remember, integration by parts doesn’t solve the integral, it rewrites the Integral into a new one that is hopefully easier to solve. Also remember that you may have to do integration by parts multiple times!

Spring 2017 – Week 2 Class Notes

Another week is in the bag! It was good to see you all, and I’m glad to see you all keeping up with your work.

Computer Programming

This week we reviewed objects (and a little arrays) and then talked about the built-in objects in JavaScript for interfacing with web pages. The main object used is “document”, and the main function that bridges the gap between JavaScript and HTML is “getElementById”. A lot of you kept thinking that the “innerHTML” function plays a role, probably because of the word “HTML” in the function name. “innerHTML” is actually rarely used. getElementById takes a string, and finds and returns an HTML element having that string as an ID. It doesn’t matter what your variable is called, it only matters that the string you pass to getElementById matches the string you put in the id=”” attribute of your HTML element.

Another thing I noticed is that I think there was some confusion on the “return” statement. When a “return” happens – that’s the end of the function! Nothing else occurs after the “return” statement. We often put it at the end of our function (and there is usually one there), but technically you can return from anywhere in your function. There can even be multiple returns, based on conditions. But as soon as the return runs, the function is over.

This week we are working on chapter 15. Don’t forget to email if you run into trouble!


This week we reviewed diode action and practiced our measurement skills with our multimeter. Every did well. This week review chapter 8 and do the problems at the end. Next week we will focus on power.


Read chapters 18 and 19. I don’t have problems for that yet, but I might get some done over the weekend so check back Monday.