Ready to dive into some code?

Overview of lesson

What do you need to know before starting?

• If you've never programmed anything before, we recommend going through our Intro to JS course to learn the concepts of variables, arrays, functions, and objects. And, of course, come back here when you're ready!
• If you've programmed before but not on Khan Academy, we recommend getting comfortable with our environment first by creating a new program here.
• If you've learned programming here on Khan Academy, perfect! Just review the concepts below and refresh yourself on any skills you're rusty on.
• This lesson touches on math concepts—equations for geometric transformations—appropriate for grade eight and above. You can review this concept in our sets and staging lesson.

Quick review of programming concepts you'll use

Variables

• This creates a variable called $\blue{\text{sulleysAge}}$start color #6495ed, start text, s, u, l, l, e, y, s, A, g, e, end text, end color #6495ed which stores the value $\green{15}$start color #28ae7b, 15, end color #28ae7b.

Arrays

• This creates an array called $\blue{\text{ages}}$start color #6495ed, start text, a, g, e, s, end text, end color #6495ed which stores three values $\green{2}, \pink{4}, \purple{8}$start color #28ae7b, 2, end color #28ae7b, comma, start color #ff00af, 4, end color #ff00af, comma, start color #9d38bd, 8, end color #9d38bd.
• $\blue{\text{ages}}[1]$start color #6495ed, start text, a, g, e, s, end text, end color #6495ed, open bracket, 1, close bracket holds the value $\pink{4}$start color #ff00af, 4, end color #ff00af.

Functions

• This creates a function called $\blue{\text{sayHello}}$start color #6495ed, start text, s, a, y, H, e, l, l, o, end text, end color #6495ed that will output the text $\text{\green{"Hello world!"}}$start text, start color #28ae7b, ", H, e, l, l, o, space, w, o, r, l, d, !, ", end color #28ae7b, end text at the screen coordinates $(\pink{100, 200})$left parenthesis, start color #ff00af, 100, comma, 200, end color #ff00af, right parenthesis when it's called.

• This $\blue{\text{sayHello}}$start color #6495ed, start text, s, a, y, H, e, l, l, o, end text, end color #6495ed function now has two input parameters, $\pink{x}$start color #ff00af, x, end color #ff00af and $\pink{y}$start color #ff00af, y, end color #ff00af, to define the coordinates of the text.

Objects

• This creates an empty object called $\blue{\text{snowman}}$start color #6495ed, start text, s, n, o, w, m, a, n, end text, end color #6495ed.

• The object $\blue{\text{snowman}}$start color #6495ed, start text, s, n, o, w, m, a, n, end text, end color #6495ed now contains three properties: $\text{\blue{snowman}.\green{age}} = \pink{2}$start text, start color #6495ed, s, n, o, w, m, a, n, end color #6495ed, point, start color #28ae7b, a, g, e, end color #28ae7b, end text, equals, start color #ff00af, 2, end color #ff00af and $\text{\blue{snowman}.\green{color}} = \pink{\text{"white"}}$start text, start color #6495ed, s, n, o, w, m, a, n, end color #6495ed, point, start color #28ae7b, c, o, l, o, r, end color #28ae7b, end text, equals, start color #ff00af, start text, ", w, h, i, t, e, ", end text, end color #ff00af. The third property of $\text{\blue{snowman}}$start text, start color #6495ed, s, n, o, w, m, a, n, end color #6495ed, end text is an array called $\text{\green{likes}}$start text, start color #28ae7b, l, i, k, e, s, end color #28ae7b, end text.

Have fun!