Monthly Archives: February 2017

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!

Programming

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.

Electronics

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.

Calculus

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.

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.

Electronics

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.

Calculus

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!

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.

Electronics

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:

• Make Presents: The Diode
• What is a Diode?
• How does a Diode Work?

Here are some videos on electric power:

• Khan Academy on Power
• SparkFun’s Discussion of Power
• Intro to Electric Power

Calculus

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!