| 1 |
- javascript -- it's a language of programming for interactivity on web-pages. - the main tool for working is an editor of code. ** |
| 2 |
Preparation to the Working Process. Setting of the Working Space. * - Visual Studio Code: ^ it's an editor of code. ^ pluses of this editor: a) from microsoft (no need to crack) b) often updates c) collects in this editor installed plugins ^ donwload from 'https://code.visualstudio.com/' |
| 3 |
^ Tabs: a) Explorer (top-left; ctrl + shift + E) `it contains all open files and folders `in it we can create new files, folders and even reveal them b) Search (ctrl + shift + F) `it contains 'Search' and 'Replace' c) Source control (Git; ctrl+ shift + G) `here we can work in console d) Run and Debug (ctrl + shift + D) `for searching errs and debugging it |
| 4 |
e) Extensions (ctrl + shift + X) `it contains extensions or other plugins `here we can see a number of installed plugins, popular and recommended `Easy Less plugin for compilation of process .css (after installing we need to press 'reload') `auto close tag -- for automatic closing html/xml tags |
| 5 |
`auto complete tag -- for automatic adding tags we wrote before `auto rename tag -- if we change one of names of tags, we change the other at the same time `beautify -- makes code more beautiful. 'all highlight necessary 'PKM > Format document (shift+alt+F) `code runner -- for launching code from our editor of code (for testing your code) |
| 6 |
`git lense - git supercharged -- good addition when we work with git `import cost -- for knowing how many memory in our script `javascript (es6) code -- it allows to use contractions `live server -- we can in two click create a local server (useful) `multiple clipboards for vscode -- for editing several the same places |
| 7 |
`path autocomplete -- it helps choosing paths we have `reactjs code snippets `theme - oceanic next -- just for viewing of editor `vscode-icons `eslint -- it allows us edit the code to another format, checking it on mistakes `jshint -- it will show our mistakes in javascript code `emmet -- this plugin is built-in `all autocomplete `sass |
| 8 |
^IDEE: a) it's an integrated development environment, where programmer type code, see errs, and see results (you need to know for geekbrains.ru) b) it's got unnecessary thousands of functions, so it goes down your processor |
| 9 |
^ on highlighted: a) makes indent to the right 'tab' b) makes indent to the left 'shift + tab' |
| 10 |
* How to work with JSHint ^ npm and node.js ^ 'https://www.npmjs.com/' -- npm's site ^ node.js a) it's a server technology, written on javascript (analog php) b) site installer 'https://nodejs.org/en/' c) after installing on your computer it will be a terminal for install some packages (it's on Pusk) d) command in a terminal 'npm install -g jshint' |
| 11 |
^ npm allows us to download lots of plugins ^ site 'https://jshint.com/' |
| 12 |
^ jshint a) parametres of setting .jshintrc "https://jshint.com/docs/options/" |
| 13 |
b) we can set our rules for fixing code `create file in the same folder .jshintrc `sign some rules where my first example: { "camelcase" : true, "indent" : 2, "undef" : true, "quotemark" : false, "maxlen" : 80, "trailing" : true, "curly" : true, "strict" : false, "browser" : true, "jquery" : true, "esversion" : 6 } |
| 14 |
c) don't perceive it like directive (sometimes code can be proper, but jshint shows errs d) warnings are accessable |
| 15 |
^ View > appearance > show panel (ctrl + J) | in the down-left clicke on sign a) here we can see mistakes. |
| 16 |
** Basics of Javascript * Including JS to a page and variables ^ Javascript is different from other languages because of key words (it doesn't go to binar code) ^ Several methods of including JS to webpage a) in html where <script></script> over </body> (preferred) or over </head> |
| 17 |
b) more useful is in a separate file where we make linking between them from index.html <script src="script.js"></script> `file can be included locally or remotely (usually via CDN) ^ launch code in browser with 'Live Server' |
| 18 |
^ about 'console of developer' in Google Chrome: a) tab Elements `here we can see all layout of site, including variables `styles (css) `event listeners |
| 19 |
b) tab Console `here we can see errs, warnings and even messages from developers `we can also see description of mistake, title of file and line of mistake c) tab Sources `all materials which accessible to our site |
| 20 |
d) tab Network `we can track requests and similar to these things e) tab Performance `make tests of productivity f) tab Memory `a number of memory of the current page |
| 21 |
g) tab Application `see utilities (local storage, cookies..) h) tab Security `information about safety of the page i) additional tabs which included via plugins |
| 22 |
^ comments a) // for one line b) /*..*/ for several lines |
| 23 |
^ hotkeys in VS code a) copy line or selection (shift + alt + down/upArrow) b) move line up or down (alt + up/downArrow) c) jshint `open problems (ctrl + shift + M) `open output (ctrl + shift + U) `open (ctrl + J) |
| 24 |
d) select line (ctrl + L) e) highlight parent (shift + alt + rightArrow) vice versa (shift + alt + leftArrow) f) to the right file (ctrl + tab) vice versa (ctrl + shift + tab) |
| 25 |
^ variables a) it's signed repository of information b) 3 methods of switching on variables `var 'if var is in code, it exists till appearing of script, therefore goes down the loading of pages |
| 26 |
`let 'modern standard ES6 'let is created online then, when code goes up to this one (pages are quicker) 'let is seen only in block of code restricted with curly brackets |
| 27 |
`const 'modern standard ES6 'it creates constanta which can't be changeable, but there are some methods to change even 'const' in js 'in the left rest it's like 'let' |
| 28 |
c) name of variable can consists of: `letters `numerals `$ `_ (underscore) |
| 29 |
d) rules: `the first symbol mustn't be a numeral `names mustn't be used from reserved words of js (prompt..) `format 'camelcase' -- every next word of the variable should be Capital (leftBorderWidth) `name variable meaningfully `variables in different registers aren't the same (leftBorder is different from LeftBorder) |
| 30 |
^ Different codes a) console.log(let); `it outputs the definition of variable |
| 31 |
* Code Style ^ no space between function's name and bracket ^ no space between open between bracket and parametre ^ space between parametres ^ open curly bracket on the same line with space ^ indent in 2 spaces inside something |
| 32 |
^ space after 'for' ^ spaces around operators ^ always semicolon at the end of line ^ empty line between logical blocks ^ a length of a line no more than 80 symbols ^ } else { without going into another line ^ spaces around "nested calls" |
| 33 |
* JSHint Options ^ camelcase a) this option allows us to force all variable names to use either camelCase style or UPPER_CASE with underscores ^ curly |
| 34 |
** Classification of Types of Data in JS * Types of Data ^ 7 types of data ^ Simple types |
| 35 |
a) numbers `1, 2, 3, 1/5.. `Infinity 'it's a special number definition 'we can get it, e.g. 2/0 `NaN 'not a number 'we can get it, e.g. "something"/5 |
| 36 |
b) strings `'name', "string" 'no difference between double and single quotes 'don't forget about close ' or ", otherwise script won't work c) logical type `boolean: true/false 'it can be always true or false |
| 37 |
d) null `when something doesn't exist in code `in google browser > console of developre > Uncaught ReferenceError e) undefined `when object exists in code, but doesn't have any definition |
| 38 |
f) symbol `appeared in the last versions `used rarely ^ Objects a) it's a collection of data b) they can contain all the other types of data c) syntax is {} which can be called "property" or "method" `let = person { name: "John", Age: 27, isMarried: false }; console.log(person.name); // it will be John console.log(["Age"]); // it will be 27, the second method, better |
| 39 |
a) special `massives 'let arr = ['plum.png', 'orange.jpg', 'apple.bmp']; console.log(arr[1]); // it will be orange.jpg 'in js counting from 0 // 0, 1, 2 `functions `object of date `regular expressions `errs b) ordinary |
Комментарии