JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
JavaScript Syntax
JavaScript syntax is the set of rules, for how JavaScript programs are created:
Example
// How to create variables:
var x;
let y;
// How to use variables:
x = 5;
y = 6;
let z = x + y;
JavaScript Values
The JavaScript syntax specifies two types of values:
1) Fixed values.
2) Variable values.
Fixed values are called Literals.
Variable values are called Variables.
JavaScript Literals
The two important syntax rules for fixed values are:
1) Numbers are written with or without decimals:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Number can be written with or without decimals.</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = 10.50;
</script>
</body>
</html>
Output
JavaScript Numbers
Number can be written with or without decimals.
2) Strings are text, written inside the double or single quotes:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Strings can be written with double or single quotes.</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = ‘John Doe’;
</script>
</body>
</html>
Output
JavaScript Strings
Strings can be written with double or single quotes.
JavaScript Variables
In a programming language, variables are stored in data values.
JavaScript uses the keywords var, let, and const to declare variables.
An equal sign assigns values to variables.
In this example, x specifies as a variable. Then, x is assigned (given) the value 6:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>In this example, x is defined as a variable.
Then, x is assigned the value of 6:</p>
<p id=”demo”></p>
<script>
let x;
x = 6;
document.getElementById(“demo”).innerHTML = x;
</script>
</body>
</html>
Output
JavaScript Variables
In this example, x is defined as a variable. Then, x is assigned the value of 6:
JavaScript Operators
JavaScript uses arithmetic operators ( + – * / ) to compute values:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Operators</h2>
<p>JavaScript uses arithmetic operators to compute values (just like algebra).</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = (5 + 6) * 10;
</script>
</body>
</html>
Output
JavaScript Operators
JavaScript uses arithmetic operators to compute values (just like algebra).
JavaScript uses an assignment operator ( = ) to assign values to variables:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Assigning JavaScript Values</h2>
<p>In JavaScript the = operator is used to assign values to variables.</p>
<p id=”demo”></p>
<script>
let x, y;
x = 5;
y = 6;
document.getElementById(“demo”).innerHTML = x + y;
</script>
</body>
</html>
Output
Assigning JavaScript Values
In JavaScript the = operator is used to assign values to variables.
11JavaScript Expressions
An expression is a combination of values, variables, and operators, which computes a value.
The computation is called an evaluation.
For example, 5 * 10 evaluates to 50:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Expressions</h2>
<p>Expressions compute to values.</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = 5 * 10;
</script>
</body>
</html>
Output
JavaScript Expressions
Expressions compute to values.
Expressions can also contain variable values:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Expressions</h2>
<p>Expressions compute to values.</p>
<p id=”demo”></p>
<script>
var x;
x = 5;
document.getElementById(“demo”).innerHTML = x * 10;
</script>
</body>
</html>
Output
JavaScript Expressions
Expressions compute to values.
15The values are of various types, such as numbers and strings.
For example, “John” + ” ” + “Doe”, evaluates to “John Doe”:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Expressions</h2>
<p>Expressions compute to values.</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = “John” + ” ” + “Doe”;
</script>
</body>
</html>
Output
JavaScript Expressions
Expressions compute to values.
John DoeJavaScript Keywords
JavaScript keywords identify actions to be performed.
The let keyword indicates the browser to create variables:
Example
<!DOCTYPE html>
<html>
<body>
<p>The <b>let</b> Keyword Creates Variables</p>
<p id=”demo”></p>
<script>
let x, y;
x = 5 + 6;
y = x * 10;
document.getElementById(“demo”).innerHTML = y;
</script>
</body>
</html>
Output
The let Keyword Creates Variables
110The var keyword also tells the browser to create variables:
Example
<!DOCTYPE html>
<html>
<body>
<p>The var Keyword Creates Variables</p>
<p id=”demo”></p>
<script>
var x, y;
x = 5 + 6;
y = x * 10;
document.getElementById(“demo”).innerHTML = y;
</script>
</body>
</html>
Output
The var Keyword Creates Variables
180
JavaScript Comments
All JavaScript statements are not “executed” .
Code after double slashes // or between /* and */ is treated as a comment.
Comments are ignored, and will not be executed:
Example
<!DOCTYPE html>
<html>
<body>
<p>JavaScript Comments are NOT Executed</p>
<p id=”demo”></p>
<script>
let x;
x = 5;
// x = 6; I will not be executed
document.getElementById(“demo”).innerHTML = x;
</script>
</body>
</html>
Output
JavaScript Comments are NOT Executed
JavaScript Identifiers / Names
Identifiers are JavaScript names.
Identifiers are named variables and keywords, and functions.
The rules for legal names are the same in most programming languages.
A JavaScript name should begin with:
1) A letter (A-Z or a-z).
2) A dollar sign ($).
3) Or an underscore (_).
Subsequent characters may be letters, digits, underscores, or dollar signs.
JavaScript is Case Sensitive
All JavaScript identifiers are case-sensitive.
The variables lastName and lastname, are two different variables:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript is Case Sensitive</h2>
<p>Try to change lastName to lastname.</p>
<p id=”demo”></p>
<script>
let lastname, lastName;
lastName = “Doe”;
lastname = “Peterson”;
document.getElementById(“demo”).innerHTML = lastName;
</script>
</body>
</html>
Output
JavaScript is Case Sensitive
Try to change lastName to lastname.
DoeJavaScript and Camel Case
Historically, programmers use different ways of joining multiple words into single variable name:
Hyphens:
first-name, last-name, master-card, inter-city.
Hyphens are not allowed in JavaScript. They are reserved for subtractions.
Underscore:
first_name, last_name, master_card, inter_city.
Upper Camel Case (Pascal Case):
FirstName, LastName, MasterCard, InterCity.
Lower Camel Case:
JavaScript programmers tend to use camel case that starts with a lowercase letter:
firstName, lastName, masterCard, interCity.