DEV Community

Cover image for Watch and Code: Javascript
Helen Kent
Helen Kent

Posted on

Watch and Code: Javascript

Notes from the watchandcode.com Practical JavaScript course.

I've started Gordon Zhu's watchandcode.com Practical Javascript course. In the course you work on building a todo list, so here are some of the commands and notes about them so I remember them!

Its best to work in chrome. Open a new tab (about:blank) and right click and choose inspect then click on console.

How to store the to do list:

var todos = ['item 1', 'item 2', 'item 3']
Enter fullscreen mode Exit fullscreen mode
  • todos is the name of my variable.
  • The items are in an array. Which is like a list of items.

How to display the to do list:

console.log('My to do list:', todos)
Enter fullscreen mode Exit fullscreen mode
  • Console.log() prints whatever is in the brackets.
  • You can join items between the brackets.
  • If you put quotation marks it prints whatever is inside them.
  • As todos isn't in quotation marks it prints out the contents of the variable.

Adding new todos:

todos.push('item 4')
Enter fullscreen mode Exit fullscreen mode
  • You can add items to the array by calling the variable and 'pushing' another item to the end of the array.
  • When you press enter, the console returns the number of items in the array.

Changing an item in an array:

todos[0] = 'item 1 updated'
Enter fullscreen mode Exit fullscreen mode
  • To edit the array item you call the variable and in square brackets put the item number you want.
  • Computers start counting at zero so item number one is item 0.
  • Then you just put what you want the new value to be after an equals sign in quotation marks.

Deleting an item in the array:

todos.splice(0, 1)
Enter fullscreen mode Exit fullscreen mode
  • Call the array and then use splice
  • To use this you need brackets.
  • The first number is the position at which you start deleting, the second number is how many items you delete.
  • In this example, you just delete the first item in the array.

Top comments (2)

Collapse
 
sophiabrandt profile image
Sophia Brandt •

Great example of how to engage with the learning material.
Good luck on your coding journey.

Collapse
 
helen8297 profile image
Helen Kent •

Thank you!