reading-notes

Class 6 - Activate Web Pages with JavaScript

What is JavaScript?

• a lightweight, interpreted, or just-in-time compiled programming language with first-class functions

---

How to Include JavaScript in My Code?

• Internal - input JS into the HTML file using the <script> and </script> tags
• External - create a separate JS file such as scipt.js and link it to the HTML file using: <script src="[file-name].js">

---

Output

• alert - the alert() function will show a pop-up in the browser with the text

<script language="javascript"> 
alert("Hello World"); 
</script>

• document.write - We have some text (First line), then the JS code, and then some more text (Last line). The JS code uses the document.write function to change the content of the page. It will embed the html snippet <h1>Hello World</h1> after the “First line”, but before the “Last line”.

First line 
<script>  
document.write("<h1>Hello World</h1>"); 
</script>  
Last line

• console.log - Most of the web browsers provide what is called a “JavaScript console”. It is an additional window which is normally not visible, where the browser can print out warnings and errors generated by the execution of the JS code. The developer can also print information to this console using the console.log() call. In order to see the console you’ll need to open it. If you happen to use Chrome on OSX you can open the console using: Command-Option-J.

<script>
console.log("Hello World");
</script>

---

Input

• prompt - This will show a pop-up window with the text provided as the first parameter and with a textbox the user can fill in. When the user presses OK, the value in the text box will be returned by the prompt() function. Then, in this example we use the document.write method to update the HTML with the text. The textbox will be pre-filled with the content of the second parameter. This can be very useful if we would like to ask the user to edit some value. We can pre-fill the box with the old value.

<script>
var name = prompt("Your name:", "");
document.write("Hello ", name);
</script>

• confirm - Calling the confirm() function will show a pop-up window with the provided texts and with two buttons. If the user presses OK the confirm() function will return true, if the user presses cancel or hits the ESC key, the function will return false.

<script>
if (confirm("Shall I print Hello World?")) {
    document.write("Hello World");
} else {
    document.write("OK, I won't print it.");
}
</script>

---

Variables

• Variable - containers for storing values
• Variables are containers for storing values.
• All JavaScript variables must be identified with unique names. These unique names are called identifiers and are case-sensitive.
• Define a variable by using:
  • var - old way of defining variables
  • let - If you think the value of the variable can change, use let
  • const - If you want a general rule: always declare variables with const

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

---

The Assignment Operator

• In JavaScript, the equal sign = is an “assignment” operator, not an “equal to” operator.
• This is different from algebra. The following does not make sense in algebra:

x = x + 5

• In JavaScript, however, it makes perfect sense: it assigns the value of x + 5 to x. (It calculates the value of x + 5 and puts the result into x. The value of x is incremented by 5.)

---

Strings

• JavaScript variables can hold numbers like 100 and text values like “John Doe”
• In programming, text values are called text strings
• Strings are written inside double or single quotes. Numbers are written without quotes
• If you put a number in quotes, it will be treated as a text string

const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

• If you put a number in quotes, the rest of the numbers will be treated as strings, and concatenated

let x = 2 + 3 + "5";

---

Declaring Variables

• Creating a variable in JavaScript is called “declaring” a variable
• After the declaration, the variable has no value (technically it is undefined)
• Can create multiple variables at a time, separated by a comma:

let person = "John Doe", carName = "Volvo", price = 200;

---

Special Characters

• JavaScript treats a dollar signs and underscores as letters, identifiers containing $ and _ are valid variable names:

let $ = "Hello World";
let $$$ = 2;
let _lastName = "Johnson";
let _x = 2;