c_meyer/pxt-calliope
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

A few touches to 'js writing code' (#1447)

Browse Source 
* A few touches to 'js writing code'

* Typo, spelling

* Add gif for auto-format

* Adjust pro tip
This commit is contained in:
Galen Nickel 2018-10-17 05:37:25 -07:00 committed by Peli de Halleux
parent 7521e78815
commit a1e60e8949
2 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
docs/courses/blocks-to-javascript/writing-code.md
View File

@ -2,11 +2,11 @@
## ~ avatar
The syntax of JavaScript may seem daunting at first, but we've got help to get you over it.
The syntax of JavaScript may seem daunting at first, but we've got help to get you through it.
## ~
Programming languages are quite picky with the syntax, a single character can prevent your program to work! Let's review a few tools available in MakeCode to make your coding experience better.
Programming languages are quite picky with _syntax_ (the format of the code text), a single character can prevent your program from working! Let's review a few tools available in MakeCode to make your coding experience better.
## JavaScript toolbox
@ -16,26 +16,26 @@ Just like the blocks toolbox, you can drag and drop snippets of JavaScript. It's
## Suggestions and auto-completion
When you start typing, you will quickly notice a menu of suggestion poping up right under the cursor. The editor is giving possible snippets of code based on what you've just written (This is something that professional developer use every day!).
When you start typing, you will quickly notice a menu of suggestions poping up right under the cursor. The editor is giving you possible snippets of code based on what you've just written (this is something that professional developer uses every day!).
When you see the option you were trying to type, press **Enter** to insert it... rather than typing it entirely.
When you see the option for what you were trying to type, press **Enter** to insert it... rather than typing it entirely.
![Auto completion with the keyboard](/static/courses/blocks-to-javascript/jsautocompletion.gif)
## Pairing brackets
Brackets and parenthesis always come in pairs, an opener and a closer. However, with so many brackets and parenthesis, it is can be challenging to match both.
Brackets and parenthesis always come in pairs, an opening one and a closing one. However, with so many brackets and parenthesis all over the place, it's challenging to match both of them up.
**Place your cursor on a bracket or parenthesis** and the editor will highlight the pair!
**Place your cursor on a bracket or parenthesis** and the editor will highlight the matching pair! Nice, thanks editor!
![Bracket matching](/static/courses/blocks-to-javascript/jsbracketmatch.gif)
## Indentation lines
Once you have many nested loops and if statements, it can be challenging to see which "level"
you are in.
After a while you might have many nested loops and if statements, it can be difficult to see which "level"
you are in. Code inside the loops and if statements is indented to show that it belongs in there. This helps your eye keep track of where things are.
Check the **indentation lines** to find your way back.
Check the **indentation lines** to find your way back to the higher code "levels". Also, when loops or if statements are inside of each other, this is called "nesting".
![Indentation](/static/courses/blocks-to-javascript/jsscope.png)
@ -43,16 +43,18 @@ Check the **indentation lines** to find your way back.
When the editor detects a syntax error, it puts red squiggles where it thinks the error is.
Place your mouse over the squiggle to get a detailled error message.
Place your mouse over the squiggle to get a detailled error message to help you fix the problem.
![A squiggle message](/static/courses/blocks-to-javascript/jssquiggles.gif)
### ~ hint
Pro tip: always look at the first error and fix that one. All the other ones might be due to that one.
**Pro tip**: always look at the first error and fix that one. The other errors could be due to that one.
### ~
## Auto-formatting
Press ``Shift + Alt + F`` to auto-reformat your code and keep it tidy.
Does your code look shifted badly or isn't showing the levels properly? Press ``Shift + Alt + F`` to auto-format your code and keep it tidy.
![Reformat the code](/static/courses/blocks-to-javascript/jsreformat.gif)

BIN
docs/static/courses/blocks-to-javascript/jsreformat.gif vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB