An Introduction To Computer Programming On Your Mac

Hi, this is Gary with MacMost.com. Here's an introduction to computer programming using an app you already have on your Mac. 

MacMost is supported by more than 500 viewers just like you. Go to MacMost.com/patreon. There you can read more about the Patreon Campaign. Join us and get exclusive content.

So when I started with computers in the early '80s it was easy to learn programming. Computers, like the Apple II, greeted with a blinking cursor when you turned them on and you could start playing around with code. Computers today come with a lot of great functionality but it's hard for somebody to get started learning how to program. However, Mac's come with an app called ScriptEditor. You can use ScriptEditor to get started with computer programming just like you could with those early personal computers. Here's a short mini-course, divided into six quick lessons, that can get you started with programming even if you've never written a line of code before.

So to launch ScriptEditor use Spotlight, Command Space and then type ScriptEditor and hit Return. Then go to File, New to create a new document. In ScriptEditor you can work in two different programming languages. By default the window will be set to AppleScript. You want to change that to JavaScript. JavaScript is a modern programming language that's used on just about every webpage you have ever been to. But more importantly it looks very similar to most other modern computer languages. So skills you learn in JavaScript you can then apply to any language you want to learn after that. One thing I really like about ScriptEditor is just like computers in the early '80s you can type a command and immediately see the results. So you can type 1+1 here and then use the Run button here at the top and you'll see the result in the bottom. If you don't see an area here at the bottom you can click this button here. Now 1+1 isn't very hard for a human to calculate so it's not too impressive when a computer can do it. But you can type something much more difficult like something like this which would be a little harder for a person to calculate but the computer can do it easily. Instead of hitting this Run button I'm going to use Command R, the shortcut, and you can see there is the result at the bottom.

In JavaScript and other computer languages you can use different symbols from mathematical equations. For instance the plus symbol will add numbers together. The dash or the minus symbol will subtract them.  You use the asterisk to multiply and then as we saw before a slash that will divide. While it's nice to see the output from a program at the bottom of the screen instantly, this result area will only give you one output. So if you're writing a more complex program that is going to output several different things this isn't going to work. Instead we can use the command console.log and put the equation in parentheses. What we want to do now is switch at the bottom here. Click on this button to switch to a more complex output area here and go to Messages. Now when we run it we'll see the output from every console.log. So we can have multiple lines here like this. When I run that you can see all three results. When doing multiple lines in JavaScript the convention is to use a semi-colon after each line. 

So note you can do more than just numbers. You can use regular characters when outputting things. So I can do console.log and then in quotes I can put some text. Now when I run it you'll see that the fourth line there outputs that text. When you have text in quotes like this it's called a string. Two main types of variables that you use are numbers and strings.

So think of variables as little boxes that hold information. You could store different things in there. You can store a number. You could store a string and you could store other types of data as well. For instance we can create a variable in JavaScript by just coming up with any name we want for it. We could just use a single letter like the letter a and we could assign the value to it by using the equal symbol.  So 

a = and then give it a value. So let's do a value like this and that's all we need to do. Now a is going to contain that value when we run this program. We can test it by using console.log looking at the value of a. When I run that you can see there's a result.

We can create as many variables as we need. So let's create another variable like that. Then we can create a third variable and actually store in it the results of the calculation like a/b. Then we can look at the results by outputting the value of that variable. When we run it we see we get the result of the calculation. 

We could also use strings in variables. So in this case I've placed the word Hello in variable a. I've placed the word World in variable b. I'm going to perform an operation on the two strings. As it turns out the plus symbol can also be used to concatenate two strings, have them run together. So when we look at the result of this we could see we get the two strings run together. Note that there's no space between them because we didn't tell JavaScript to add a space. We can make this calculation a bit more complex by adding a space there. Just double quotes with a space in the middle of them. Then if we run it now we can see we get the results of Hello plus a space plus world. 

Variables really come in useful when you change the values of them. So, for instance, here we've got the variable a with that number, b with this number and then we calculate the result, c. d is going to be the output. What we're going to do is a string calculation. We're going to take a and we're going to add a string to it. That's going to make JavaScript treat a like a string. Then we're going to add b as well. Then another string with an equal sign in it. We're going to put the results, c. We're going to put all of these together and when we run it here is the result. We can see we have the number with the divide symbol with the second number and then the equal symbol and then the result. The great thing about this is we can change one number here, just the value of a, and now when we run it we could see both output calculation and the result are changed because we're using the variable a in two different places. Here and here. This is a very simple example but you may use a variable in several or even hundreds of different places and be able to change that one value can come in very handy.

So a quick detour to talk about User Input because we're going to use User Input in the next lesson. So in ScriptEditor with JavaScript you have to add a few advanced looking commands in order to ask the user for input. This isn't really part of learning how to program but sometimes you need to learn very specific things to work with whatever program environment you're in. This is one of those cases. These first two lines you'll find in front of a lot of JavaScript programs, in ScriptEditor, and in Automator. It basically says you can use some system type functions like prompting for user input. This is the command that actually will prompt for user input. It's going to use app.displayDialog. Here you can see what the prompt is and you have to include a default answer here in curly brackets in order for there to be a blank space for the user to type something. This says we want to get whatever the value is back from this prompt and then we're going to store that in this variable. We're going to use a console.log to test this. So if I run this you can see it's going to prompt for something. I could type an answer. I can hit Return or OK and you can see the result there. 

So branching is when you test for a condition. When you test for a condition you may ask is this variable equal to this number or this text. If it's true then you execute a few lines of code. If it's false you execute a different few lines of code. So here's an example. You can see at the top here I've got the code just to accept input but this time we're asking for the user's favorite color. Then we're doing a test using the command if. Then we're looking at the condition here. We put it in parentheses and then we compare a variable to a potential value for that variable. So the result from the user input here is going to be stored in the variable color and then we're going to test to see if the color is equal to red. Notice that when we test to see if something is equal we use two equal signs. A single equal sign is an assignment. You want to assign a number to a variable. But two equal signs is asking to perform a test to see if two things are equal. 

If this is true then we're going to run all the lines of code between the first set of curly brackets like that which in this case is just one line. Then we're going to use an else statement. You don't have to use an else with if. You can simply have it end here like that and only run this code if this is true. But in this case we want to also run something if this test proved to be false. So we're going to output something else here. This is just one line but it could be many lines of code in here between these curly brackets. So when we run this it's going to ask for a favorite color. If I type red you could see I get a result there. It's actually going to use the same display dialogue command but this time it's going to do something much simpler. It's not going to have a default answer. So it's just going to basically put some text into a box for us. Now you notice if I don't type red it's going to run this code here. So I'll run it and type something else and I get a different result. It branches depending upon the value of color.

Here's a different example. In this case we're asking for a number and then we're going to branch based on whether the number meets this condition. Whether it's greater than 99. If it's greater than 99 this is the code that's executed. If it's not greater than 99 then this is the code. So I could run it here and if I typed 9 that's what I get. If I run it and type 100 then I get something different. Also notice now that we've looked at two different conditions. We've used the two equal signs to see if something is the exact equivalent. We've used the greater than symbol to see if it's greater than. But you could also use less than. You could use greater than or equal to. Or less than or equal to. 

Now computers are great at repetitive tasks. When you want the computer to repeat parts of your program it's called a loop. A very simple loop in JavaScript is called a do while loop. It would look like this. You would have the word do and then a curly bracket just like with the if statement and then at the end you would have the other side of the curly bracket and then a condition like a==1 like that. Now what happens here is this will loop forever while this condition is true. So you want to have things in here that actually maybe effect the value of a so that it does eventually equal this value and the loop finishes and the code continues on.

Here's an example. We're going to set the value of the variable i to 1. Then we're going to start a loop. In the loop we're going to do something. We're going to output the value of i. So in this case it would be 1. Then we're going to perform a calculation. We're going to set i equal to the value of i plus 1. We're going to continue looping while i is less than or equal to 10. So let's run it and see if it works. If it works we should get ten output lines numbers one through ten. You can see that's exactly what we get here at the bottom. Now note a shorthand way to write a line like this is to simply do plus plus. Plus plus basically takes a variable and adds exactly one to it. Likewise you could do things like plus equals then a number and then it would add that number to it. So this would go from one to six to eleven etc. But using this here makes a lot more sense and you can see it's easier to write. If we run it we get the same result. 

Now the do command isn't the only way to loop in JavaScript. We can also use the for command which is commonly found throughout almost all computer languages. In this case for and inside of parentheses you have three different parts separated by semi-colons. The first part is what's the initial setup for this loop. In this case when we want to set it up we're going to set the variable to i equal to 1. Then we're going to look at the condition the same as what we saw in that while part of the do loop. So the condition is that i needs to remain less than or equal to ten for this loop to continue. Then we've got something that changes every single time through the loop. In this case one is going to be added to i every time through the loop. So this for loop performs exactly like that do while loop we had before. All we need to do is just simply add the console.log command and we get exactly the same result when we run it.

Now simply counting isn't very exciting. But you can perform a calculation inside of a loop. Here we're going to ask for user input to enter a number. Then we're going to loop ten times just like before. But this time we're going to output something similar to something we're using before. We're going to take that value and divide it by each number through the loop. So divide by 1, then divide by 2, then divide by 3, etc. Then we're going to output console.log that shows us both those values a and i and the result. So when I run this it'll ask for a number. I can enter something here. Hit OK and you can see the results here. 42 divided by1, 42/2, 42/3, etc.

So in addition to loops another way that computers excel is to process a whole set of data. A simple way to have a set of data in a program is to use what's called an array. So an array is a list of values. Here you can see I'm taking a variable a and I'm assigning, instead of a number or a string to it, a set of values. I'm going to use a square bracket and inside of it a list of values separated by commas. In this case just four numbers. But it could be hundreds of numbers. I'm going to loop here through those four values. Now I want to start at zero because array's start at zero. The first value is value zero. The second value is value one. This is true in almost all computer languages. So we start with i=0 and we're going to continue while i is less than the total length of a. We get that value by doing dot length. So a.length, in this case, is going to return 4. So we're going to start with zero and continue while i is less than 4. So 0, 1, 2, 3. Incrementing one each time using ++. Now we're just going to output each value. So when I run this we just see each value on its own line. So notice to get a value in the array you also use square brackets. So use the variable name and then inside the square brackets you give it a number for the element. So if I wanted to get the first element of the array I could just put a zero in there. If I wanted to get the fourth one I could put a 3 in there. In this case since I'm going through the loop I'm going to use the variable i inside of the square brackets to get 0, 1, 2, and 3 as it goes through the loop. But I could easily also perform a calculation in here. So I could do five times the value in the array. When I run it now you can see I get the values multiplied by 5.

We could also, of course, store strings in an array. So in this case I've got four pieces of text in an array in variable a. I'm going to loop through them just like before but this time I'm going to perform a calculation that's going to create a string with some text before and after what is in each element of the array. So when I run it I get four different lines generated by this loop. 

So I want to show you one more thing in this introduction to programming. You can break up your code into groups called Functions. These are reusable pieces of code and here's an example of why you may need them. In this case I'm calculating two prices and I'm using this calculation here to say maybe add sales tax to each one. Then I'm outputting them. So if I run it I get these results. But let's say I have hundreds of these throughout an entire complex  program. Each time I'm multiplying by something performing a calculation that's the same. Let's say that changes. Now I have to go through and change that hundreds of times. What's better is to store this calculation in a function and simply call that function.

So you can create a function in JavaScript by simply using the word function and then giving the function a name. So we can say calcTax for instance. Then in parentheses you can include variables for input. So I'm going to put a variable here called price but what's going to happen is I'm going to pass a number into this function and that number will be assigned to the variable price. I'm going to use curly brackets just like we did for loops and branching. Inside of the curly brackets are going to be the commands we want to perform in this function. In this case we want to calculate a new price, let's call that final amount. The final amount will be equal to price times and then a number.

Now just calculating it isn't enough. This function needs to return a value. We're going to use the return command for that. We're going to return final amount like that. Now anything we pass into calcTax will show up inside of the function as price. Then whatever the result of final amount is passed out of function. So we can change this to calcTax and then the value. We could do the same thing here. So price one is equal to the number 16 passed into calcTax. calcTax takes that number, uses it as the variable price, calculates final amount equals price times a constant there, then returns the final amount. So the final amount is returned here an put into price one. Then the same thing is done here very easily with a different value. So when we run this we can see the same results. But this calculation here only appears once inside of this function. So if we were to calculate tax in hundreds of places in our program, all of those would call calcTax, and all of those would use this same calculation here. If we needed to change the calculation we could do it in one place instead of hundreds of places throughout the program.

Functions can actually be much more complex than that. In this case I'm actually looking at the value passed into the function and performing one calculation if it's greater than 50. Otherwise another calculation if it's less than 50. Now if I was to do that every time I wanted to calculate the price without a function it would be adding all these lines of code every single time. But here I can encapsulate that all inside of a function in one place in my program. When I run it, in this case, it's using this function twice but in a more complex program it could be using the same function hundreds or millions of times.

So there's my quick introduction to computer programming on the Mac. Hopefully this inspires you to play around with some code and maybe even go on to learn some more.