JS Beginner's Notes

JavaScript (JS) is one of the most popular and widely used programming languages in the world right now. It's growing faster than any other programming languages. For a long time, it was only used in browsers to build interactive web pages, but these days you can build full blown web or mobile apps as well as real-time networking apps like chats and video streaming services, command-line tools, or even games with JS.

JS can run in:
1.Browser (all browsers have a JS Engine)
2.Node (C++ program with Chrome's V8 JS Engine)

ECMA Script = specification (defines standards)
JS = programming language that confirms to this specification.

HTML is all about content,
JS is all about behavior of the content.

In order to write JS code in a HTML file, you need a script element. There are two places where you can add a script element:
<head> head section </head>
<body> body section </body>

The best practice is to put the script element at the end of the body section after all the existing elements, before </body>
This because of 2 reasons:
1. The browser parses a HTML file from top to bottom. If you put the script element in the head section, the browser might get busy parsing and executing that JS code rather than rendering the content of the page. This can create a bad user experience.
2. The code between the script elements almost always needs to talk to the elements on the web page. For example, we may want to show or hide some elements. So by adding the code at the end of the body section you can ensure that all these elements are rendered by the browser.

Sometimes you're using 3rd party code that has to be placed in the head section. But these are exceptions.


Browser>>Inspect Element>>Console
console.log('Hello world');

Statement: a piece of code that expresses an action to be carried out.
(In this case, we want to log a message on the console)
All statements in JS should be terminated by a semi colon ;

String: a sequence of characters

//comment (ignored by the JS engine, not executed)


Separation of concern:
JS code can be very long and look messy. So you don't want to write all the script between the script element. Instead you can store the code in a seperate file, and then reference it using the source (src) attribute.
So instead of <script> blabla </script>        <script src=code.js> </script>


......


Variables.
Keyword var or let (preferred)

let kdexample= 'Hi';
This is a declaration
kdexample= name/label
case sensitive, cannot containe space or reserved words, cannot start with number
'Hi'= value

This is called camelNotation.

Value of variable can change, value of constant can't change. You cannot reassign a constant.

const age= 19;


2 types of type
1. Primitives/value types
2. Reference types


Primitives/Value Types:
String
Numbers
Boolean (true or false)
undefined
null


JS is a dynamic language. Type of variable can change (based on assigned value)
In console
type of **variable name**
//Outputs the type of variable

E.g if value = 'Hi'. Type=string. If value=7 Type=number


No float or int in JS. All numbers are of type numbers


Variable types:
String e.g value of 'lolzzz'
Number e.g value of 7
Undefined e.g value of lolzzz
Boolean e.g value of true
Object e.g value of null


***Undefined can be a (type of) value but it's also a variable type***


.....


let name= 'KD;
let age= 30,

Instead of the above notation, we can write this using an object. Makes code look cleaner. The object here is a person. And name & age are properties/keys of this object (person)

Object literal syntax example: let x = {key&value pair};

let person= {
name: 'KD',
age:30
};

How to access properties instead of whole object
1. Dot notation (Recommended)
   person.name
   E.g console.log(person.name);
   Or to change the property   person.name= 'NotKd';

2. Bracket notation (For special cases)
   person.['name']
   E.g person.['name']= 'NotKd';

//Bracket notation useful when you don't know the property name. For example when the property name is determined by user input.
E.g   let selection = 'name';
      person.[selection] = 'yesKd';
      **using the bracket notation to access the property in a dynamic way***

console.log(person.name);
Output: yesKD


Once a variable is declared it can't be re-declared, only redefined.
For example: let age=20;
let age= 40 !!Error!! age has already been declared if you want to change the value you can re-define it e.g age=40 (without let or var)


Reference types: Array Object Function