JavaScript - lexical structure

Besides numbers, strings, boolean and symbols, JavaScript also defines two trivial datatypes each with a single value:

• null - an empty object, it has no value
• undefined - doesn't exist because has no reference

JavaScript - lexical structure

In addition to primitive datatypes, JavaScript supports a composite datatype known as an object. An object represents a collection of values.

var person = {firstName:"John", lastName:"Doe", age:50};

"Consider a person as an object. Properties are the values associated with the object. The persons' properties include name, height, weight, age, skin tone, eye color, etc. All persons have these properties, but the values vary. Objects also have methods or functions. Methods are the actions that can be performed on objects. The persons' methods could be eat(), sleep(), work(), play(), etc." - w3schools - JS Objects

JavaScript - lexical structure

More JS Objects: Arrays and Functions

An array is an object that stores multiple values in a single variable.
An array may contain a string or numeric data.

var toys = ['ball', 'bat', 'puzzle', 'phone']
  

JavaScript - lexical structure

More JS Objects: Arrays and Functions

A function is an object with executable code, functions may be invoked to perform some kind of operation.

<script>
  var a = 5;
  var b = 6;
  function product(a, b) {
    return a*b;
  }
</script>

(A method is a fuction that is a property of an object.)

JavaScript - lexical structure

String variables
var greeting = "Hello, how are you?"
document.write(greeting);

Numeric Variables
var score = 0;

Array
May contain a string or numeric data.
var room = ['bed', 'dresser', 'mirror', 'lamp']

JavaScript - lexical structure

Operators are the symbols used to work with variables.

Arithmetic operators are used to perform arithmetic between variables and/or values.

Example Expression: x = y + 2

JavaScript - lexical structure

Operators are the symbols used to work with variables.

Assignment operators are used to assign values to JavaScript variables.

Assignment Operators: =, +=, -=, *=, /=, %=
The operator += adds the value on the right side to the variable on the left.
If variable count = 6, count += 1 sets count to 7.
count += 1 is the same as count = count + 1
View Table

JavaScript - lexical structure

Operators are the symbols used to work with variables.

Comparison operators are used in logical statements (such as an if statement) to determine equality or difference between variables or values.

Comparison Operators: ==, ===, !=, >, <, >=, <=
View Table

JavaScript - lexical structure

Operators are the symbols used to work with variables.

Logical operators are used to determine the logic between variables or values.

Logical Operators: &&, ||, ! (and, or, not)
View Table

JavaScript - lexical structure

Variable Incrementing and Decrementing

  ++x
  --y
  x += 22
  y -= 3
  

JavaScript - lexical structure

String Concatenation

  document.write("You have " + messages + "messages.")
  

If the variable messages is set to three, the document presents:

  You have 3 messages.
  

JavaScript - lexical structure

Escaping Characters

Escape characters (such as \ ) may be used to insert quotations marks in strings as well as various special characters such as tabs, new lines, carriage returns.
View Table

JavaScript - lexical structure

Variable Scope

Global variables are defined outside of any functions (or within functions but without the var keyword). Every part of a script can have access to a global variable.

  var a = 345; //Global scope

  function test() {
    var b = 678; //Local scope
    if (a == 345) var c = 910;  //Local scope
  }
  

JavaScript applied to the DOM

JS & Document Object Model

Objects - HTML elements that the browser interprets.

Properties - the values of HTML elements.

Methods - things that objects can do: buttons click(), windows open(), text may be selected(). Parentheses signals reference to a method. List of JavaScript Built-In Methods

JavaScript applied to the DOM

JS & Document Object Model

dot syntax - reference an object or describe a process by putting together objects, properties and methods separated by a period (getElementById, querySelector):

      document.getElementById("greeting").innerHTML =
        "Hello" + name + "!";
      OR
      document.querySelector("#greeting").innerHTML
    

JavaScript applied to the DOM

Handling Events

Events are actions that the user performs when visting a page, such as submitting a form or mouse over an image. JavaScript deals with events using commands called event attributes. An action by the user triggers an event attribute in your script.

w3schools List of Standard Event Attributes

JavaScript applied to the DOM

HTML - divs and spans & classes and ids

By breaking up a page content into semantic sections using using either HTML5 semantic tags or divs for block level elements and spans for inline elements, you are better able to target scripts to particular sections of a page.

Semantic tags, classes and ids are attributes used by both CSS and JavaScript. CSS to apply design rules and JavaScript to target specific elements and their behavior.

JavaScript applied to the DOM

Traversing the DOM

      getElementById()
      getElementsByClassName()
      getElementsByName()
      getElementsByTagName()

      querySelector()
      querySelectorAll()
    

JavaScript applied to the DOM

document.write()

document.write() is the method used to dynamically output HTML text into an HTML document while it is being loaded into the browser.

"Method" is the object oriented term for function or procedure. A method is a function that blongs to an object.

JavaScript applied to the DOM

<script> and </script>

Script tag is used to embed JavaScript code in an HTML file. It may be placed in the head tags or body tags. Place it in the head tags if you wish to execute a script when a page loads.

You may also include files of JavaScript code. Do so within the head tags:

<script src="script.js"></script>
<script src="http://www.othersite.script.js"></script>

JavaScript applied to the DOM

<script src="script.js" defer> </script>

The script tag has the defer attribute to not run a script until after page loads. This way you may nest the script tag in the head tags but not slow the rendering of the HTML.

JavaScript applied to the DOM

• Place library script such as the jQuery library in the head section.
• Place normal script in the head unless it becomes a performance/page load issue.
• Place script that impacts the render of the page at the end of the body (before the body closure) or use the defer attribute.
• If you cannot decide, put it in the head until you have a reason not to such as page blocking issues.

When JS NOT Available

noscript

  <noscript>
    <style>
        body {display:none;}
    </style>
    <div class="noscriptmsg">
    The web is happiest with JavaScript enabled.
    </div>
  </noscript>
  

The CSS inside the noscript tag will hide all of your page content, and instead display a "no JS" message that you write. (This IS NOT RECOMMENDED.)

Sources

Sources

• w3schools.com
• Learning PHP, MySQL, and JavaScript by Robin Nixon
• Eloquent JavaScript, A Modern Introduction to Programming by Marijn Haverbeke
• A Re-Introduction to Javascript, mozilla developer