Loading...

​​JavaScript Crash Course

​​If you’re new to JavaScript, you’ve been “thrown in the deep end” of the JavaScript pool.

​​

​​What follows is a whirlwind tour of some of the elements of JavaScript that are used in sketch.js​.

​​

​​You can also ask for help from the Fellows and from me.

​​Objects

​​This defines is a JavaScript object. It contains properties  x​ and y​:

​​const point = {

​​  x: 10,

​​  y: 20

​​}

​​

​​This assigns the object to a variable named point​:

​​const point = {x: 10, y: 20};

​​

​​The syntax obj.prop​ extracts the property named prop​  from the object named obj​. The following code prints x is 10​ in the JavaScript console:

​​console.log('x is', point.x);

​​

​​Objects can be nested –an object can contain another object:

​​const rect = {

​​  topLeft: {x: 10, y: 20},

​​  bottomRight: {x: 120, y: 400}

​​};

​​console.log('width =', rect.bottomRight.x - rect.topLeft.x);

​​Arrays

​​The following code creates an array, and prints Wednesday​. (Notice that the first element of an array is indexed by 0, not 1.) 

​​const weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

​​console.log(weekdays[2]);

​​

​​An array can contain arrays:

​​const weekdays = [['Monday', '星期一'], ['Tuesday', '星期二'], ]'Wednesday', '星期三'], ['Thursday', '星期四'], ['Friday', '星期五'], ['Saturday', '星期六'], ['Sunday', '星期天']];

​​const monday = weekdays[0];

​​console.log(monday[1], 'is Chinese for', monday[0]);

​​Arrays and Objects

​​An array can contain objects:

​​const weekdays = [

​​  {english: 'Monday', chinese: '星期一'],

​​  {english: 'Tuesday', chinese: '星期二'},

​​  {english: 'Wednesday', chinese: '星期三'},

​​  {english: 'Thursday', '星期四'},

​​  {english: 'Friday', '星期五'},

​​  {english: 'Saturday', chinese: '星期六'},

​​  {english: 'Sunday', chinese: '星期天'}

​​];

​​const monday = weekdays[0];

​​console.log(monday.chinese, 'is Chinese for', monday.english);

​​

​​An object can have properties whose values are arrays. Here’s another way to represent a rectangle, where each point is represented just as an array of [x, y]​, instead of as an object.

​​const rectangle = {