Difference between revisions of "Programming Basics"

From RunWiki
Jump to: navigation, search
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
[[Category:Tutorials]]
 
If you’re new to programming, I’ll quickly introduce some of the vocabulary. Don’t worry if it doesn’t sink in immediately. The jargon will seem dense at first. But over time, you’ll pick up more. The best way to learn is by doing. So, with each time you play around with it, the programming terms will make more sense.
 
If you’re new to programming, I’ll quickly introduce some of the vocabulary. Don’t worry if it doesn’t sink in immediately. The jargon will seem dense at first. But over time, you’ll pick up more. The best way to learn is by doing. So, with each time you play around with it, the programming terms will make more sense.
 +
 +
== Classes and instances ==
  
 
Programmers talk about the blueprint or general idea of a car as the class definition. Then many instances can exist, driving around in the world.
 
Programmers talk about the blueprint or general idea of a car as the class definition. Then many instances can exist, driving around in the world.
  
/image
+
[[image:car.png|500px|center|middle|thumb]]
 +
 
 +
 
  
 
To differentiate between the two:
 
To differentiate between the two:
 
+
*Class definitions use a capital first letter, <span style="color: rgb(224, 62, 45);" >Car</span>
Class definitions use a capital first letter, Car
+
*Instances use a lowercase first letter, <span style="color: rgb(224, 62, 45);" >car</span>
Instances use a lowercase first letter, car
+
The '''class definition''', on the left, is what all cars share. The '''instance''', on the right, is a person’s car.
The class definition, on the left, is what all cars share. The instance, on the right, is a person’s car.
 
  
 
You can select any name you like for an instance:
 
You can select any name you like for an instance:
  
/code
+
<syntaxhighlight lang="javascript">
 +
const myCar = new Car()
 +
const eleanor = new Car()
 +
const batMobile = new Car()
 +
</syntaxhighlight>
  
  
 +
The common thing is that instances use a lowercase first letter. If you want to have a second or third word in the instance name, capitalize the first letter of each of the following words. That is called, camel case: <code>heresAnEntireSentenceWrittenInCamelCase</code>.
  
The common thing is that instances use a lowercase first letter. If you want to have a second or third word in the instance name, capitalize the first letter of each of the following words. That is called, camel case: heresAnEntireSentenceWrittenInCamelCase.
+
The instance name isn’t recorded by the car itself; the instance name is just how you refer to it in code. If you want the car to remember its name and to be able to ask the computer to tell you the car’s name, you’re going to have to set a property on the car. But first, let’s back up and think about, what really is a car, anyway?
  
The instance name isn’t recorded by the car itself; the instance name is just how you refer to it in code. If you want the car to remember its name and to be able to ask the computer to tell you the car’s name, you’re going to have to set a property on the car. But first, let’s back up and think about, what really is a car, anyway?
+
== Attributes and actions ==
  
 
Cars have attributes and actions. An attribute would be the car’s color. And an action would be like when you tell the car to drive. Here’s a quick explanation for both:
 
Cars have attributes and actions. An attribute would be the car’s color. And an action would be like when you tell the car to drive. Here’s a quick explanation for both:
 +
*For an attribute, like color, developers refer to that as a property. You set properties with an assignment: <code>car.color = "red"</code>. Then, you check on the value of a property: <code>car.color</code> … and the computer responds: <code>"red"</code>.
 +
*For an action, like <code>drive(howFast)</code>, programmers refer to that as a method. You call a method: <code>car.drive(55)</code>. The thing inside the parentheses, <code>(in here)</code>, is referred to as a parameter. You use a parameter to pass something into the method. Methods can also have multiple parameters: <code>playMusic(song, volume)</code>. In that method, you’re passing in settings to adjust the stereo system.
  
 +
== Creating a car ==
  
*For an attribute, like color, developers refer to that as a property. You set properties with an assignment: car.color = "red". Then, you check on the value of a property: car.color … and the computer responds: "red".
+
When you want to manufacture a car, you call the ''initializer'', alternatively known as the constructor: <code>new Car()</code>. The initializer is a method, so it can accept parameters:
*For an action, like drive(howFast), programmers refer to that as a method. You call a method: car.drive(55). The thing inside the parentheses, (in here), is referred to as a parameter. You use a parameter to pass something into the method. Methods can also have multiple parameters: playMusic(song, volume). In that method, you’re passing in settings to adjust the stereo system.
 
When you want to manufacture a car, you call the initializer, alternatively known as the constructor: new Car(). The initializer is a method, so it can accept parameters:
 
 
 
/code
 
  
 +
<syntaxhighlight lang="javascript">
 +
// 1
 +
class Car {
 +
  // 2
 +
  init(color) {
 +
    // 3
 +
    this.color = color
 +
  }
 +
}
 +
</syntaxhighlight>
  
  
 
Here’s what’s happening:
 
Here’s what’s happening:
 +
#You annotate your code with comments using two forward slashes, <code>//</code>. Then the rest of that line following the comment won’t affect your code. Class definitions are preceded by the keyword, <code>class</code>, and they use a capital first letter. You enclose the code inside both classes and methods with curly braces, <code>{ }</code>. Inside a class or method, you indent the lines to make the code easier to read so that people can differentiate what belongs inside.
 +
#The initializer for <code>Car</code> accepts one parameter, <code>color</code>. You’ll call an initializer like this: <code>const car = new Car("blue")</code>. With that, you’re the owner of a shiny blue car and you can talk tell your friends about, “my blue car”. The <code>const</code> keyword is short for constant reference to a value. It means that the instance, <code>car</code>, will always be the same object. While you cannot reassign it to a different object, you can still change its properties.
 +
#The keyword, <code>this</code>, is a reference to the object itself. So the initializer takes the <code>color</code> that you pass in and then sets the <code>color</code> property on the object. The property on the left side of the equals sign is what you are assigning the value on the right side: <code>property = value</code>.
  
 +
== Where to go from here ==
  
#You annotate your code with comments using two forward slashes, //. Then the rest of that line following the comment won’t affect your code. Class definitions are preceded by the keyword, class, and they use a capital first letter. You enclose the code inside both classes and methods with curly braces, { }. Inside a class or method, you indent the lines to make the code easier to read so that people can differentiate what belongs inside.
 
#The initializer for Car accepts one parameter, color. You’ll call an initializer like this: const car = new Car("blue"). With that, you’re the owner of a shiny blue car and you can talk tell your friends about, “my blue car”. The const keyword is short for constant reference to a value. It means that the instance, car, will always be the same object. While you cannot reassign it to a different object, you can still change its properties.
 
#The keyword, this, is a reference to the object itself. So the initializer takes the color that you pass in and then sets the color property on the object. The property on the left side of the equals sign is what you are assigning the value on the right side: property = value.
 
 
With that short introduction, you’ve gotten a taste of JavaScript. You’re well on your way towards building jigs. Plus, you can always hop back to this section when you stumble across some code you don’t yet understand.
 
With that short introduction, you’ve gotten a taste of JavaScript. You’re well on your way towards building jigs. Plus, you can always hop back to this section when you stumble across some code you don’t yet understand.
  
 
[[Tutorial 1_-_Intro_to_jigs_that_run_on_Bitcoin:_Mocknet_and_Web_Console#Uploading_a_jig|Go back to the first tutorial]]
 
[[Tutorial 1_-_Intro_to_jigs_that_run_on_Bitcoin:_Mocknet_and_Web_Console#Uploading_a_jig|Go back to the first tutorial]]

Latest revision as of 12:56, 22 March 2023

If you’re new to programming, I’ll quickly introduce some of the vocabulary. Don’t worry if it doesn’t sink in immediately. The jargon will seem dense at first. But over time, you’ll pick up more. The best way to learn is by doing. So, with each time you play around with it, the programming terms will make more sense.

Classes and instances

Programmers talk about the blueprint or general idea of a car as the class definition. Then many instances can exist, driving around in the world.

Car.png


To differentiate between the two:

  • Class definitions use a capital first letter, Car
  • Instances use a lowercase first letter, car

The class definition, on the left, is what all cars share. The instance, on the right, is a person’s car.

You can select any name you like for an instance:

const myCar = new Car()
const eleanor = new Car()
const batMobile = new Car()


The common thing is that instances use a lowercase first letter. If you want to have a second or third word in the instance name, capitalize the first letter of each of the following words. That is called, camel case: heresAnEntireSentenceWrittenInCamelCase.

The instance name isn’t recorded by the car itself; the instance name is just how you refer to it in code. If you want the car to remember its name and to be able to ask the computer to tell you the car’s name, you’re going to have to set a property on the car. But first, let’s back up and think about, what really is a car, anyway?

Attributes and actions

Cars have attributes and actions. An attribute would be the car’s color. And an action would be like when you tell the car to drive. Here’s a quick explanation for both:

  • For an attribute, like color, developers refer to that as a property. You set properties with an assignment: car.color = "red". Then, you check on the value of a property: car.color … and the computer responds: "red".
  • For an action, like drive(howFast), programmers refer to that as a method. You call a method: car.drive(55). The thing inside the parentheses, (in here), is referred to as a parameter. You use a parameter to pass something into the method. Methods can also have multiple parameters: playMusic(song, volume). In that method, you’re passing in settings to adjust the stereo system.

Creating a car

When you want to manufacture a car, you call the initializer, alternatively known as the constructor: new Car(). The initializer is a method, so it can accept parameters:

// 1
class Car {
  // 2
  init(color) {
    // 3
    this.color = color
  }
}


Here’s what’s happening:

  1. You annotate your code with comments using two forward slashes, //. Then the rest of that line following the comment won’t affect your code. Class definitions are preceded by the keyword, class, and they use a capital first letter. You enclose the code inside both classes and methods with curly braces, { }. Inside a class or method, you indent the lines to make the code easier to read so that people can differentiate what belongs inside.
  2. The initializer for Car accepts one parameter, color. You’ll call an initializer like this: const car = new Car("blue"). With that, you’re the owner of a shiny blue car and you can talk tell your friends about, “my blue car”. The const keyword is short for constant reference to a value. It means that the instance, car, will always be the same object. While you cannot reassign it to a different object, you can still change its properties.
  3. The keyword, this, is a reference to the object itself. So the initializer takes the color that you pass in and then sets the color property on the object. The property on the left side of the equals sign is what you are assigning the value on the right side: property = value.

Where to go from here

With that short introduction, you’ve gotten a taste of JavaScript. You’re well on your way towards building jigs. Plus, you can always hop back to this section when you stumble across some code you don’t yet understand.

Go back to the first tutorial