Run >
<p> JavaScript Syntax and
JavaScript Comments </p>
GROUP 7;
Learning Objectives:
• Understand the basic syntax of JavaScript
• Identify and use JavaScript variables, operators, and
data types.
• Write simple JavaScript statement and expressions.
• Use comments to documents JavaScript code.
• Apply JavaScript syntax rules to avoid error coding.
What is JavaScript?
• JavaScript syntax is the set of rules, how JavaScript
programs are constructed:
// How to create variables:
var x;
let y;
// How to use variables:
x = 5;
y = 6;
let z = x + y;
< Previous Next >
JavaScript Values
The JavaScript syntax defines two types of values:
1. Fixed Values
2. Variable Values
Fixed values are called Literals.
Variable values are called Variables
< Previous Next >
JavaScript Literals
The two most important syntax rules for fixed values are:
1. Numbers are written with or without decimals:
10.50
1000
Try it Yourself >
// EXAMPLE // OUTPUT
< !DOCTYPE html >
<html>
<head>
<title> Numeric Literal Example
</title>
</head>
Numeric Literal in JavaScript
<body>
<h1>Numeric Literal in JavaScript The number is: 1000
</h1>
<p> The number is: <span
id=“number”> </span> </p>
<script>
document.getElementById(“number”).t
extContent = 1000;
</script>
</body>
</html>
// EXAMPLE // OUTPUT
< !DOCTYPE html >
<html>
<body>
<h2>JavaScript Numbers</h2> JavaScript Numbers
<p>Number can be written with or
without decimals.</p> Number can be written with or without
<p> id=“demo”></p> decimals.
<script>
document.getElementById(“demo”).inn 10.5
erHTML = 10.50;
</script>
</body>
</html>
JavaScript Literals
The two most important syntax rules for fixed values are:
2. Strings are text, written within double or single quotes:
“John Doe”
‘John Doe’
Try it Yourself >
// EXAMPLE // OUTPUT
< !DOCTYPE html >
<html>
<body>
<h2>JavaScript Strings</h2>
JavaScript Strings
<p> id=“demo”></p>
John Doe
<script>
document.getElementById(“demo”).inn
erHTML = ‘John Doe’;
</script>
</body>
</html>
JavaScript Variables
> In a programming language, variables are used to store data values.
> JavaScript uses the keywords var, let and const to declare variables.
> An equal sign is used to assign values to variables.
> In this example, x is defined as a variable. Then, x is assigned the
value 6.
let x;
Try it Yourself >
x = 6;
// EXAMPLE // OUTPUT
< !DOCTYPE html >
<html>
<body>
<h2>JavaScript Variables</h2>
JavaScript Variables
<p> id=“demo”></p>
<script> 6
let x;
x = 6;
document.getElementById(“demo”).inn
erHTML = x;
</script>
</body>
</html>
JavaScript Operators
JavaScript uses arithmetic operators (+, -, *, / ) to compute values
(5 + 6) * 10
Try it Yourself >
// EXAMPLE Run > // OUTPUT
< !DOCTYPE html >
<html>
<body>
<h2>JavaScript Operators</h2>
JavaScript Operators
<p> id=“demo”></p>
<script> 110
document.getElementById(“demo”).inn
erHTML = (5 + 6) * 10;
</script>
</body>
</html>
JavaScript uses assignment operators (=) to assign values to variables:
let x, y;
x = 5;
y = 6;
Try it Yourself >
JavaScript Expressions
An expression is a combination of values, variables, and operators, which computes to a value.
The computation is called an evaluation.
5 * 10 x * 10
Try it Yourself >
// EXAMPLE // EXAMPLE Run >
< !DOCTYPE html > < !DOCTYPE html >
<html> <html>
<body> <body>
<h2>JavaScript Expressions</h2> <h2>JavaScript Expressions</h2>
<p> Expressions compute to values. </p> <p> Expressions compute to values. </p>
<p> id=“demo”></p> <p> id=“demo”></p>
<script> <script>
document.getElementById(“demo”).innerHTML var x;
= 5 * 10; x = 5;
</script> document.getElementById(“demo”).innerHTML
= x * 10;
</body> </script>
</html>
</body>
</html>
// OUTPUT
JavaScript Expressions
Expressions compute to values.
50
JavaScript Keywords
JavaScript keywords are used to identify actions to be performed.
The let keyword tells the The var keyword also tells the
browser to create variables browser to create variables
let x, y; var x, y;
x = 5 + 6; X = 5 + 6;
y = x * 10; y = x * 10;
Try it Yourself >
// EXAMPLE Run > // OUTPUT
< !DOCTYPE html >
<html>
<body>
<h2> The let Keyword Creates
Variables</h2>
The let Keyword Creates
<p> id=“demo”></p> Variables
<script> 110
var x, y;
x = 5 + 6;
y = x * 10;
document.getElementById(“demo”).inn
erHTML = y;
</script>
</body>
</html>
JavaScript Identifiers/Names
Identifiers are used to name variables and keywords,
and functions.
A JavaScript name must begin with:
• A letter (A–Z or a-z)
• A dollar sign sign ($)
• Or an underscore (_)
< Previous Next >
JavaScript is Case Sensitive
>All JavaScript identifiers are case sensitive.
>The variables lastName and lastname, are two different variables.
let lastName, lastname;
lastName = “Riego”;
lastname = “Montefalco”;
Try it Yourself >
JavaScript is Case Sensitive
>All JavaScript identifiers are case sensitive.
>The variables lastName and lastname, are two different variables.
>JavaScript does not interpret LET or Let as keyword let
let lastName, lastname;
lastName = “Riego”;
lastname = “Montefalco”;
Try it Yourself >
JavaScript and Camel Case
Historically, programmers have used different ways of joining
multiple words into one variable:
1. Underscore:
• first_name, last_name, master_card, inter_city.
2. Upper Camel Case (Pascal Case):
• FirstName, lastName, masterCard, InterCity.
3. Lower Camel Case:
• firstName, lastName, masterCard, interCity.
< Previous Next >
JavaScript Comments
JavaScript comments can be used to explain JavaScript code, and
to make it more readable.
JavaScript comments can also be used to prevent execution, when
testing alternative codes
< Previous Next >
JavaScript Comments
Single Line Comments
• Single line comments start with //.
• Any text between // and the end of the will be ignored by
JavaScript.
Multi-line Comments
• Multi-line commnets start with /* and end with */
• Any text between /* and */ will be ignored by JavaScript.
< Previous Next >
JavaScript Comments
Examples of Single Line Comments:
// Change heading: let x = 5; //
document.getElementById( Declare x, give it
“myH”).innerHTML = “My the value of 5
First Page”;
let y = x + 2; //
//Change paragraph: Declare y, give it
document.getElementById( the value of x + 2
“myP”).innerHTML = “My
First Page”;
JavaScript Comments
Example of Multi-line Comments:
/*
The code below will change the heading with id =
“myH” and the paragraph with id = “myP” in my web
page:
*/
document.getElementById(“myH”).innerHTML = “My First
Page”;
document.getElementById(“myP”).innerHTML = “My First
Page”;
