Introduction to JavaScript
• 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.
Output
• Writing into an HTML element, using innerHTML.
<p id = "demo"> </p>
<script> document.getElementById("demo").innerHTML = 5 + 6;
</script>
• Writing into the HTML output using document.write().
<script> document.write(5 + 6); </script>
<button type="button" onclick="document.write(5 + 6)"> Try it
</button>
• Writing into an alert box, using window.alert().
<script> window.alert(5 + 6); </script>
• Writing into the browser console, using console.log().
For debugging purposes, you can call the console.log() method in the
browser to display data.
• JavaScript printing window.print().
<button onclick="window.print()">Print this page</button>
Program / Statement
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.
JavaScript Statements. JavaScript statements are composed of: Values,
Operators, Expressions, Keywords, and Comments.
JavaScript programs (and JavaScript statements) are often called JavaScript
code.
Semicolon ( ; )
This separates JavaScript statements:
Multiple Lines
<p id = "demo1"> </p>
<script>
let a, b, c;
a = 5;
b = 6;
c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>
Single Line
<p id = "demo1"> </p>
<script>
let a, b, c;
a = 5; b = 6; c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>
JavaScript Code Blocks
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:
<button type="button" onclick="myFunction()">Click Me!"> </button>
<p id = "demo1"> </p>
<p id = "demo2"> </p>
<script>
function myFunction() {
document.getElementById("demo1").innerHTML = "Hello Dolly!";
document.getElementById("demo2").innerHTML = "How are you?";
}
</script>
JavaScript Keywords
JavaScript statements often start with a keyword to identify the JavaScript
action to be performed.
Keywords Descriptions
var Declares a variable, but same usage as
let
let Declares a block variable, but same
usage as var
const Declares a block constant
if Marks a block of statements to be
executed on a condition
switch Marks a block of statements to be
executed in different cases
for Marks a block of statement to be
executed in a loop
function Declares a function
return Exit a function
try Implement error handling to a block of
statements
JavaScript Values
The JavaScript syntax defines two types of values:
• Fixed Values are called Literals. – You are just declaring values to your code.
Can be numbers (whole or with decimal) & string (single or double quoted).
<script> document.getElementById("demo").innerHTML = 10.50;
</script>
<script> document.getElementById("demo").innerHTML = ‘John Doe’;
</script>
• Variable values are called Variables.
<p id = "demo"> </p>
<script>
let x;
x = 6;
document.getElementById("demo").innerHTML = x;
</script>
JavaScript Operators
!!NOTE – Remember PEMDAS in using these operators.
Operators Description
+ Addition
- Subtraction
* Multiplication
/ Division
= Assign
JavaScript Expressions
An expression is a combination of values, variables, and operators, which
computes to a value. The computation is called an evaluation.
Number to Number:
<p id = "demo1"> </p>
<script>
document.getElementById("demo1").innerHTML = 5 * 10;
</script>
Variable to Number:
<p id = "demo2"> </p>
<script>
var x;
x = 5;
document.getElementById("demo2").innerHTML = x * 10;
</script>
<p id = "demo3"> </p>
<script>
document.getElementById("demo3").innerHTML = “John” + “ ” + “Doe”;
</script>
JavaScript Comment
Commenting is same as in C++ // and /* */ but will be used inside the
<script> tag.
!!Note – JavaScript is a case sensitive language.
!!Tips – In naming variables it’s important to use:
• Underscores (_)
• Pascal Case (PascalCase)
• Camel Case (camelCase)
