#1 JavaScript Crash Course

What is JavaScript?

A scripting or programming language that allows you to implement complex features on web pages

Every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies

 Let’s take a simple text label as an example. We can mark it up using HTML to give it structure and purpose:

<p>Player 1: Chris</p>

Then we can add some CSS into the mix to get it looking nice:

p {
  font-family: 'helvetica neue', helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0,0,200,0.6);
  background: rgba(0,0,200,0.3);
  color: rgba(0,0,200,0.6);
  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

And finally, we can add some JavaScript to implement dynamic behaviour:

What can JavaScript do?

The core client-side JavaScript language consists of some common programming features that allow you to do things like:

• Store useful values inside variables
• Operations on pieces of text called strings
• Running code in response to certain events occurring on a web page
• And much more!

What happens when you run JavaScript code on your web browser?

 When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).

The JavaScript is executed by the browser’s JavaScript engine, after the HTML and CSS have been assembled and put together into a web page.

A common use of JavaScript is to dynamically modify HTML and CSS to update a user interface. If the JavaScript loaded and tried to run before the HTML and CSS were there to affect, then errors would occur.

Variables

A variable is a container for a value.
This value can be a number we might use in a sum, or a string that we might use as part of a sentence.
One special thing about variables is that their contained values can change.

To use a variable, you’ve first got to create it — more accurately, we call this declaring the variable and then initialize it by assigning a value.

var name; // Declare a variable
name = 'Susan'; // Initialize it

or, 

var name = 'Susan';
console.log( name );

name = 'Smit';
console.log( name );

 Back when JavaScript was first created, there was only var. This works basically fine in most cases, but it has some issues in the way it works — its design can sometimes be confusing or downright annoying. So, let was created in modern versions of JavaScript

Variables aren’t the values themselves; they are containers for values. You can think of them being like little cardboard boxes that you can store things in.

var name = 'Bob';
var isMale = true;
var age = 35;

Constants

A value that once declared can’t be changed.

Using contact helps in security (if a third party script changed such values it could cause problems) to debugging and code comprehension (it is harder to accidentally change values that shouldn’t be changed and mess things up). In the early days of JavaScript, constants didn’t exist. In modern JavaScript, we have the keyword const

const daysInWeek = 7;
const hoursInDay = 24;

Data Types

There are six Primitive data types according to ES6 :

• Boolean ( True / False )
• String ( Text )
• Number
• Number-
• Null ( If we declare a var and assigned it to null e.g var x = null ; this means var is assigned but has no value this is called null ,, )
• Undefined  ( If we declare a var but dont assign any value to it , or we dont declrae a variable then it is undefined  e.g var x ; this means var is undefined  )
• Symbols ( Unique Identifiers )

B-Boolean
U-Undefined
N-Number
N-Null
S-String
S-Symbols

Statements ,Expressions and Keywords

Statements : are the executable line or block of code that are often wrapped in {} or end with ;

var form = document.querySelector( ‘ form ‘ );       // this is a statement

Expressions : are parts/ group of statements that produce a value or are value themselves.

function() { ……}       // the whole fuctions and the code written inside them is an expression.

APIs

The functionality built on top of the client-side JavaScript language, called Application Programming Interfaces (APIs) provide you with extra superpowers to use in your JavaScript code.

APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. They do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself

Types of APIs

• Third Party APIs
• Browser APIs

a. Third Party APIs

Third party APIs are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example:

• The Twitter API allows you to do things like displaying your latest tweets on your website.
• The Google Maps API and OpenStreetMap API allows you to embed custom maps into your website, and other such functionality.

b. Browser APIs

Browser APIs are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. For example:

• The DOM (Document Object Model) API allows you to manipulate HTML and CSS, creating, removing and changing HTML, dynamically applying new styles to your page, etc.
• The Geolocation API retrieves geographical information. This is how Google Maps is able to find your location and plot it on a map.
• The Canvas and WebGL APIs allow you to create animated 2D and 3D graphics
• Audio and Video APIs like HTMLMediaElement and WebRTC allow you to do really interesting things with multimedia, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else’s computer.