Scribd
Upload
14 views

JSCommentsSyntaxGr.7

The document provides an overview of JavaScript syntax, including variables, operators, data types, and comments. It explains how to create and use variables, the importance of literals, and the structure of expressions. Additionally, it covers JavaScript keywords, identifiers, and the significance of comments for code readability and testing.

Uploaded by

marandijustine
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
14 views

JSCommentsSyntaxGr.7

The document provides an overview of JavaScript syntax, including variables, operators, data types, and comments. It explains how to create and use variables, the importance of literals, and the structure of expressions. Additionally, it covers JavaScript keywords, identifiers, and the significance of comments for code readability and testing.

Uploaded by

marandijustine
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 27

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”;

You might also like