JavaScript
Introduction
JavaScript accepts both single quote and double quote.
connect or change content of HTML using JS
[Link](”demo”).innerHTML = “Hello Javas
cript”
JavaScript and Java are completely different languages, both in concept
and design.
JavaScript was invented by Brendan Eich in 1995, and became an ECMA
standard in 1997.
ECMA-262 is the official name of the standard. ECMAScript is the official
name of the language.
In HTML, js is written between script tag
<script>
[Link]("demo").innerHTML = "My First JavaS
cript";
</script>
JS can be place in head or body of HTML
JS can be added as an external script
<script src="[Link]"></script>
Placing scripts in external files has some advantages:
1. It separates HTML and code
2. It makes HTML and JavaScript easier to read and maintain
JavaScript 1
3. Cached JavaScript files can speed up page loads
4. To add several script files to one page - use several script tags:
An external script can be referenced in 3 different ways:
1. With a full URL (a full web address)
<script src="[Link]
s"></script>
2. With a file path (like /js/)
<script src="/js/[Link]"></script>
3. Without any path
<script src="[Link]"></script>
JavaScript Display Possibilities
JavaScript can "display" data in different ways:
1. Writing into an HTML element, using innerHTML .
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = 5 + 6;
</script>
2. Writing into the HTML output using [Link]() . The
[Link]() method should only be used for testing.
<script>
[Link](5 + 6);
</script>
3. Writing into an alert box, using [Link]() .
JavaScript 2
<button type="button" onclick="[Link](5 +
6)">Try it</button>
<script>
[Link](5 + 6); //window keyword is optional
</script>
4. Writing into the browser console, using [Link]() . For debugging
purposes, you can call the [Link]() method in the browser to
display data.
<script>
[Link](5 + 6);
</script>
5. JavaScript doesn't have any print object or method. The only exception
is that you can call the [Link]() method in the browser to print the
content of the current window.
<button onclick="[Link]()">Print this page</but
ton>
JavaScript Programs : A computer program is a list of "instructions" to be
"executed" by a computer. In a programming language, these programming
instructions are called statements. A JavaScript program is a list of
programming statements. In HTML, JavaScript programs are executed by
the web browser.
JavaScript adds a semicolon at the end of each executable statement. On
the web, you might see examples without semicolons. Ending statements
with semicolon is not required, but highly recommended.
JavaScript ignores multiple spaces. You can add white space to your script
to make it more readable.
For best readability, programmers often like to avoid code lines longer than
80 characters.
JavaScript 3
If a JavaScript statement does not fit on one line, the best place to break it
is after an operator:
[Link]("demo").innerHTML =
"Hello Dolly!";
JavaScript statements can be grouped together in code blocks, inside curly
brackets {...}. The purpose of code blocks is to define statements to be
executed together. One place you will find statements grouped together in
blocks, is in JavaScript functions:
function myFunction() {
[Link]("demo1").innerHTML = "Hello Do
lly!";
[Link]("demo2").innerHTML = "How are
you?";
}
JavaScript Values:
syntax defines two types of values :
1. Fixed Values (also called literals)
2. Variable Values (also called Variables)
Fixed Values or JavaScript Literals :
1. Numbers are written with or without decimals
10.50
1001
2. Strings are text, written within double or single quotes
"John Doe"
'John Doe'
JavaScript Variables :
JavaScript 4
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.
JavaScript Operators: + - * /
JavaScript Expressions :
An expression is a combination of values, variables, and operators, which
computes to a value.
The computation is called an evaluation. e.g. 5*10 or x*10 or "John" + " " +
"Doe”
// and /* and */ are treated as a comment (ignored statement)
A JavaScript name must begin with:
A letter (A-Z or a-z)
A dollar sign ($)
Or an underscore (_)
Subsequent characters may be letters, digits, underscores, or dollar signs.
Numbers are not allowed as the first character in names.
This way JavaScript can easily distinguish identifiers from numbers.
JavaScript is case sensitive
JavaScript cannot use hyphen (-) in identifiers. its reserved for subtraction
JavaScript Variables
JavaScript Variables can be declared in 4 ways:
Automatically
x = 5;
y = 6;
z = x + y; //It is considered good
//programming practice to always declare variables befor
e use.
Using var
JavaScript 5
var x = 5;
var y = 6;
var z = x + y;
Using let
let x = 5;
let y = 6;
let z = x + y;
Using const
const x = 5;
const y = 6;
const z = x + y;
Mixed example :
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
The var keyword was used in all JavaScript code from 1995 to 2015.
The let and const keywords were added to JavaScript in 2015.
The var keyword should only be used in code written for older browsers.
When to Use var, let, or const?
1. Always declare variables
2. Always use const if the value should not be changed
3. Always use const if the type should not be changed (Arrays and Objects)
4. Only use let if you can't use const
5. Only use var if you MUST support old browsers.
JavaScript 6