Skip to content

Latest commit

 

History

History
216 lines (164 loc) · 6.31 KB

first-step.md

File metadata and controls

216 lines (164 loc) · 6.31 KB

First Steps

Comments

// This is a comment

Console

The Console object provides access to the browser's debugging console.
The console.log() methode outputs a message to the Web Console.
console.log("hello world universal sample");

For general output of logging information.

In the Browser Development Tools() of Firefox or Chrome etc.

> console.log("hello world in the browser");

Or run this in the terminal with node.js If you run node in the Terminal you will get a "Read Eval Print Loop"(REPL).

  $ node          // ->return
  > console.log("hello world node");
  hello world     // response
  undefined

Insert the console.log() function call into a "New Immediate Window" (click on plus sign in Cloud9 editor, there you will find "New Immediate Window")

 > console.log("hello world at Immediate Window");

Hint: Immediate Window is like a Browser Console prepared for you from Cloud9.

Variables

The "var" statement declares a variable,

var zero;

optionally initializing it to a value.

var zero = 0;

Strings

var myVariableAsString = "I am a String";
console.log(myVariableAsString);

Number

var myVariableAsNumber = 42;
console.log(myVariableAsNumber);

Objects and Arrays are explained later in detail !

var myVariableAsObject = { key: "value"};
console.log(myVariableAsObject.key);
var myVariableAsArray = ['cat', 'dog', 'bird'];
console.log(myVariableAsArray[0]);  // cat
console.log(myVariableAsArray[1]);  // dog
console.log(myVariableAsArray[2]);  // bird
console.log(myVariableAsArray[3]);  // undefined

Read the following lines only if you are interested in more details or come back later!

JavaScript reference

JavaScript Grammar and types

Document Object Model (DOM)

Window is the main JavaScript object root, aka the global object in a browser, also can be treated as the root of the document object model(DOM).

Browser or Node?

Are you able to distinguish if you are in a Node.js(Backend, Server) REPL or Browser(Frontend, Client) Console?

In the "Browser" console you can type

 > window    // window object which is the root of the document object model(DOM)
 Window {...}

or type

 > window.document    // window.document or just document is the main object of the "visible" document object model(DOM)
 #document
  <!DOCTYPE html>
  <html>
   <head>...<head>
   <body>...<body>
   ...
   </html>
 > window.screen    // window.screen is a small information object about physical screen dimensions
 Screen {...}
 >window.screen.width
 1920
 >window.screen.hight
 1200

but if you insert process

 > process    // you will see a "Reference Error" cause you asking for an object that only exists in Node.js(Backend)
 ReferenceError: process is not defined

In the "Node.js" console you can type

> global       // you will see the "Global Object" which is the root of Node.
 { global: [Circular],
  process: 
   process {
     title: 'node',
     version: 'v4.1.1',
     moduleLoadList: 
      [ 'Binding contextify',
        'Binding natives',
        'NativeModule events',...]

or

 > global.process    // you will see the "Process Object" which gives information about the Node process e.g. "arch: 'x64' and  platform: 'linux'"
process {
  title: 'node',
  version: 'v4.1.1',
  moduleLoadList: 
   [ 'Binding contextify',
     'Binding natives',
     'NativeModule events',
     ...
     'Binding os',
     'NativeModule string_decoder' ],
  versions: 
   { http_parser: '2.5.0',
     node: '4.1.1',
     v8: '4.5.103.33',
     uv: '1.7.4',
     zlib: '1.2.8',
     ares: '1.10.1-DEV',
     modules: '46',
     openssl: '1.0.2d' },
  arch: 'x64',
  platform: 'linux',
  release: 
   { name: 'node',
     sourceUrl: 'https://nodejs.org/download/release/v4.1.1/node-v4.1.1.tar.gz',
     headersUrl: 'https://nodejs.org/download/release/v4.1.1/node-v4.1.1-headers.tar.gz' },
  argv: [ '/home/ubuntu/.nvm/versions/node/v4.1.1/bin/node' ],
  execArgv: [],
  env: 
   {}}

If you insert window

 > window    // you will see a "Reference Error" cause you asking for an object that only exists in the Browser(Frontend)
 ReferenceError: window is not defined

Node.js:

Global Objects

Node console.log() method

Browser:

Window Object

Window.document

Console Object provides access to the browser's debugging console (e.g., the Web Console in Firefox).

Browser Console.log() method

Browser Developer Tools:

Google Chrome:

Devtools

Mozilla Firefox:

Page Inspector

Tools

Firebug

Microsoft Edge

F12 tools