Tutorial

April 1, 2023

JavaScript Fundamental

JavaScript Where To

Code inserted between <script> and </script> tags.

Scripts can be placed in the <body> or in the <head> section of an HTML page, or in both.

<!-- Script in head -->
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

<!-- Script in body -->
<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

Placing scripts at the bottom of the element improves the display speed, because script interpretation slows down the display.

External JavaScript

Practical when the same code is used in many different web pages.

External scripts cannot contain <script> tags.

Cached JavaScript files can speed up page loads

myScript.js

1
2
3

function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

example.html

<!DOCTYPE html>
<html>
<body>

<h2>Demo External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="myScript.js"></script>
<!-- Add several script files to one page use several script tags -->
<script src="myScript2.js"></script>
<script src="myScript3.js"></script>  
</body>
</html>

External References

Can be referenced in 3 ways:

With a full URL (a full web address)

1	<script src="https://www.w3schools.com/js/myScript.js"></script>

With a file path (like /js/)

1	<script src="/js/myScript.js"></script>

Without any path
1
<script src="myScript.js"></script>

JavaScript Output

JavaScript can “display” data in different ways

Writing into an HTML element, using innerHTML, a common way to display changing data in HTML.

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My First Paragraph.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

Writing into the HTML output using document.write(), for testing purposes, it is convenient to use it. ONLY USE FOR TESTING PUPORSE!

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<p>Never call document.write after the document has finished loading.
It will overwrite the whole document.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

Using document.write() after an HTML document is loaded, will delete all existing HTML:

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>
</html>

documentwrite()

Writing into an alert box, using window.alert()

Use alert box to display data.
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>
You can skip the window keyword.

In JavaScript, the window object is the global scope object. This means that variables, properties, and methods by default belong to the window object. This also means that specifying the window keyword is optional

window.alert(5+6); is the same as alert(5+6);

Writing into the browser console, using console.log()

<!DOCTYPE html>
<html>
<body>

<h2>Activate Debugging</h2>

<p>F12 on your keyboard will activate debugging.</p>
<p>Then select "Console" in the debugger menu.</p>
<p>Then click Run again.</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>

JavaScript Print

JavaScript does not have any print object or print methods so you cannot access output devices from JavaScript.

But you can call the window.print() method to print the content of the current window.

<!DOCTYPE html>
<html>
<body>

<h2>The window.print() Method</h2>

<p>Click the button to print the current page.</p>

<button onclick="window.print()">Print this page</button>

</body>
</html>

JavaScript Statement

let x, y, z;  // Statement 1
x = 5;        // Statement 2
y = 6;        // Statement 3
z = x + y;    // Statement 4

// Let the browser to write "Hello Dolly." inside an HTML element with id="demo"
document.getElementById("demo").innerHTML = "Hello Dolly.";

// JavaScript ignores multiple spaces
let person = "Hege";
let person="Hege";

// JavaScript Code Blocks
function myFunction() {
  document.getElementById("demo1").innerHTML = "Hello Dolly!";
  document.getElementById("demo2").innerHTML = "How are you?";
}

JavaScript Syntax

// How to create variables:
var x;
let y;

// How to use variables:
x = 5;
y = 6;
let z = x + y;

The JavaScript syntax defines two types of values

Fixed values, are called Literals文字

Numbers are written with or without decimals

Eg.

10.50 is equal to 10.5

Strings are text, written within double or single quotes

Eg.

“John Doe”

‘John Doe’

Variable values, are called Variables

JavaScript uses the keywords var, let and const to declare variables

// Output: 50
var x;
x = 5;
document.getElementById("demo").innerHTML = x * 10;

// Output: John Doe
document.getElementById("demo").innerHTML = "John" + " "  + "Doe";

Identifiers are JavaScript names, used to name variables and keywords, and functions.

A JavaScript name must begin with:

A letter (A-Z or a-z)
A dollar sign ($)
Or an underscore (_)

Numbers are not allowed as the first character in names.

Hyphens are not allowed in JavaScript. They are reserved for subtractions.

Eg.

Not Allowed

first-name, last-name, master-card, inter-city

Allowed

first_name, last_name, master_card, inter_city

FirstName, LastName, MasterCard, InterCity.

firstName, lastName, masterCard, interCity.

JavaScript Comments

// Single line comment

/* 
Multiple 
Line
Comment
*/

JavaScript Variables

4 ways to declare a variable:

Using var
1
var x = 5;

Using let

  let y = 6;

- Using `const`

- Using nothing

  ```javascript
  x = 5;
  y = 6;
  z = x + y;

Which way should I use to declare a variable?

Always declare JavaScript variables with var,let, orconst.

The var keyword is used in all JavaScript code from 1995 to 2015.

The let and const keywords were added to JavaScript in 2015.

If you want your code to run in older browsers, you must use var.

If you want a general rule: always declare variables with const.

If you think the value of the variable can change, use let.

const price1 = 5;
const price2 = 6;
let total = price1 + price2;

// Multi line declaration
let person = "John Doe",
carName = "Volvo",
price = 200;

// A variable declared without a value will have the value undefined
let carName; // Here carName have the value undefined

Re-Declaring Variables

You cannot re-declare a variable declared with let or const

Eg.

1 2	let carName = "Volvo"; let carName;

JavaScript Let

Introduced in ES6 (2015)
Variable defined with let can not be re-declared.
Variable defined with let must be declared before use.
Variables defined with let have block scope.

// Not working
let x = "John Doe";
let x = 0;

// Works
var x = "John Doe";
var x = 0;

Block Scope

Before ES6 (2015). JavaScript had Global Scope and Function Scope.

ES6 introduced two important new JavaScript keywords: let and const.

These two keywords provide Block Scope in JavaScript.

Variables declared inside a { } block cannot be accessed from outside the block

Variables declared with the var keyword can NOT have block scope.

Variables declared inside a { } block can be accessed from outside the block.

{
  let x = 2;
  var y = 2;
}
// x can NOT be used here
// y CAN be used here

About this Post

This post is written by Andy, licensed under CC BY-NC 4.0.

#JavaScript