- Assigning operators
- Comparation operators
- Logical operators
- Concatenation operator for strings
- The conditional operator (Ternary)
- Operators precedence

With **operators** we can manipulate, combine and modify data in a program or script. There are many kinds of operators, in this lesson it is presented the types of operators used in JavaScript.

Operator | Example |
---|---|

Addition: + |
let a = 8; let b = 3; document.write(a + b); // 11 |

Subtraction: - |
let a = 8; let b = 3; document.write(a - b); // 5 |

Multiplication: * |
let a = 8; let b = 3; document.write(a * b); // 24 |

Division: / |
let a = 9; let b = 3; document.write(a / b); // 3 |

Operator | Description /Example |
---|---|

Modulo: % | - It determines the rest of the division of two numbers.
let a = 8; let b = 3; document.write(a % b); // 2 |

Increment : ++ | - Increases the value by one unit.
let a = 9; a++; document.write(a); // 10 |

Decrement: -- | - Substract the value by one unit.
let a = 9; a--; document.write(a); // 8 |

Operator | Example |
---|---|

= |
let a = 8; document.write(a); // 8 |

+= |
let a = 8; a += 3; //Same with: a = a+3 document.write(a); // 11 |

-= |
let a = 8; a -= 3; //Same with: a = a-3 document.write(a); // 5 |

*= |
let a = 8; a *= 3; //Same with: a = a*3 document.write(a); // 24 |

/= |
let a = 84; a /= 4; //Same with: a = a/4 document.write(a); // 21 |

%= |
let a = 8; a %= 3; //Same with: a = a%3 document.write(a); // 2 |

A commonly used comparison operator is the identity operator, represented by two equal signs '=='. It's different from simple '=' (this it assigns a value).

The '==' operator compares two values to determine whether they are the same, equal in value.

- List with comparation operators:

Operator | Description /Example |
---|---|

== | - Identical as value.
let a = '4'; //string let b = 4; //number document.write( (a == b) ); //true |

=== | - Identical, as value and data type.
let a = '4'; //string let b = 4; //number document.write( (a === b) ); //false |

!= | - Different as value.
let a = 9; let b = 4; document.write( (a != b) ); //true |

!== | - Different as value or data type.
let a = 4; let b = 4; document.write( (a !== b) ); //false |

> | - Bigger.
let a = 9; let b = 4; document.write( (a > b) ); //true |

< | - Smaller.
let a = 9; let b = 4; document.write( (a < b) ); //false |

>= | - Bigger or identical.
let a = 4; let b = 4; document.write( (a >= b) ); //true |

<= | - Smaller or identical.
let a = 5; let b = 4; document.write( (a <= b) ); //false |

Operator | Description /Example |
---|---|

&& | - (AND), compares two expressions and return TRUE if both are true, otherwise it returns FALSE.
var x = 9; var y = 4; document.write( (x>7 && y<8) ); //true |

|| | - (OR), compares two expressions and return TRUE if at least one of them is true, otherwise it returns FALSE.
var x = 9; var y = 4; document.write( (x>12 || y<8) ); //true |

! | - not, unary operator, uses a single expression and returns TRUE if the expression is false, if the expression is true, returns FALSE.
var x = 9; var y = 9; document.write( !(x == y) ); //false |

- Example:

let str1 ='WebSite: '; let str2 ='CoursesWeb.net'; document.write(str1 + str2); //WebSite: CoursesWeb.net

- Example:

let x = 8; //number let y ='9' //string document.write(x + y); //89

Syntax:

variable = (condition) ? val1 :val2

- First, it evaluates the condition, if it returns True, the variable takes the 'val1' value, otherwise it takes the value 'val2'.Here is an example:

let age = 17; let copt = (age < 18) ? 'Young' :'Mature'; document.write(copt); // Young

When in expressions are used many operators, the JavaScript takes into account the precedence (the importance) of each operator. As in arithmetic, in an equation with multiplication and addition (2 + 3 * 4), if there aren't parentheses, multiplication is performed first. The same thing is for the programming operators, too. If there are several operators with the same precedence, JavaScript will evaluate them from left to right. The following table apresents in order the precedence of the operators:

Operator | Description |
---|---|

() | grouping |

! ++ -- | negation, increment, decrement |

* / % | multiplication, division |

+ - | addition, subtraction |

< <= > >= | comparison |

== != | equality |

&& | logical AND |

|| | logical OR |

? : | conditional /Ternary |

= += -= *= /= %= | assigning |

Which tag renders as emphasized text, displaying the text oblique?

<strong> <pre> <em><p>Web development courses: <em>CoursesWeb.net</em></p>

Which CSS property defines the space between the element border and its content?

margin padding positionh3 { padding: 2px 0.2em; }

Click on the method which returns the first element that matches a specified group of selectors.

getElementsByName() querySelector() querySelectorAll()// gets first Div with class="cls", and shows its content var elm = document.querySelector("div.cls"); alert(elm.innerHTML);

Indicate the PHP variable that contains data from a form sent with method="post".

$_SESSION $_GET $_POSTif(isset($_POST["field"])) { echo $_POST["field"]; }

- JavaScript code and PHP
^{(29597)} - PHP PDO - Select query, fetch
^{(23900)} - Variables, Comments and trace()
^{(1095)} - Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS
^{(107212)} - PHP Image with text on New Lines
^{(1588)}

- Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS
^{(455)} - Register and show online users and visitors
^{(324)} - PHP-MySQL free course, online tutorials PHP MySQL code
^{(247)} - JavaScript Course - Free lessons
^{(237)} - querySelector and querySelectorAll
^{(224)}