JavaScript

Expectations

HTML, CSS & JS

HTML is the skeleton. It provides the basic structure of sites.

CSS is the body. It is used to control the design of the site.


JavaScript is the movements. It is used to control the behavior of the elements.

What is JavaScript?

JavaScript, JS, is a scripting programming language that can be used to modify website content. It can response to user's action, you often see in confirmation boxes, call-to-action, popups and much more.
JavaScript is understood by the browser. It operates on the client side which means that JavaScript programs run immediately on the users computer.
JavaScript can..

A program, a script, is a serie of statements.

  • remove elements and style instructions
  • add elements
  • change elements
  • repeat code blocks
  • and so much more

Hello console?

It is important to debug your code when making JS. If there are one error will the code not be showing.
There you must use the console. It is also there where you can write JS elements, and see them, when you write it in your document, if you debug your code.

Hello world!

The only way to learn JavaScript is to try it. Therefore we most try and write Hello world on you console. You can't see JavaScript, except when you tell JavaScript to show it self. But the browser has a 'console' where you can debug your code. Which is important.
To print Hello World! you must write:

console.log("Hello World!");
Example: 3.1.1

Make a blank site

Write: about:blank in the URL

Comments in JS

We eant to help our friends and developers, like in HTML and CSS, therefore do we need to add comments

//single comments - not more than one line 

/* many lines of comments
just like
CSS*/
Example: 3.1.2

Variable

Variables are used to store values (var myName = "Rikke") or expressions (var sum = x + y)
In JavaScript are there 3 ways to declare a variable.

variable
var a, b, c; //Declare 3 variables
a = 5; //Assign the value 5 to a
b = 10; //Assign the value 10 to b;
c = a + b //Assign the sum of a and b to c

When the computer are reading the code is it from left to right. The variable is on the left side of the = where the value is on the right side.

Var

Var is a variable. You declare it with the keyword var.
Var are used if you have a variable globally or locally, and can be changed, by declaring it later again.

var name = "Rikke"; 
var ham = true;
var eggs = 5;
var sunny = true;
var sunny = false;
console.log(sunny); //false
var sunny = true;
sunny = false;
console.log(sunny); //??
Example: 3.1.3

Here have we re-declared or update the same variable, so what should we expect to be visible in the console?

let

let is also an variable. You declare it with the keyword let
let allows you declare variables that are limited to the scope of a block statement or expression. A block is a chunck of code inside { and } .
Therefore is a variable inside a block only available for that block.

let sunny = true;
let sunny = false;
console.log(sunny); //error
let sunny = true;
sunny = false;
console.log(sunny); //??
Example: 3.1.4

Const

Const is also an variable. You declare it with the keyword const Const can not be assignes a new value. If you try, you will get an error. They are, like let, block scoped

const numberOfLetters = 29; 
const sunny = true;
const school = "IBA";
const sunny = true;
const sunny = false;
console.log(sunny); //??
const sunny = true;
sunny = false;
console.log(sunny); //??
Example: 3.1.5

Nameing JavaScript elements

When naming variables is it important to give meaningful names to the variable. Therefore you should not call them things like "s" or "variableName". The name should start with a letter and are case sensitive.

var studentname; 
var studentName;
Example: 3.1.6

JavaScript Reserved Words

There are some some words that can not be used in JavaScript, beacuse they are used by JavaScript

alert break case continue typeof with
default do else false/true if for
function in null return switch this
//DON'T 
var false = true;
var this = 5;
var null = "hello";

Datatypes

There are 7 fundamental data types. These are:

  • String
  • Number
  • Boolean
  • Null
  • Undefined
  • Object
  • Symbol

String

String is textal data. The first element is at index 0, and the next is at index 1.

var eggs = "This is a string"
typeof(eggs);
console.log("hello, Jane Doe");
var person = prompt("What is your first name?");
console.log(person);
var quote = `this quote is 
typed over several lines`
console.log(quote);
Example: 3.1.7

String concatenation

When we wish to concatenate to strings, we can use the + sign as well:

console.log("Hello " + "- what's your name?");
Example: 3.1.8
let greeting = "Hello ";
let question = "- what's your name?";
console.log(greeting + question);
Example: 3.1.9

String interpolation

Introduced in ES2015, string interpolation is done using template literals:

let name = prompt("What's your name?");
console.log(`Well, hello there ${name} !`);
Example: 3.1.10

The use of backticks instead of normal quotation marks, and 2: that the name of the variable is wrapped in ${ }.

Number

Number can go from - (253 − 1) and 253 − 1)

var ham = 5;
typeof(ham);
var age = 23;
console.log(age);
let number = 2.5; 
console.log(number);
Example: 3.1.11

Boolean

Is a primitive value and have tru values true or false

var x = false; 
typeof(x);
Example: 3.1.12

Null

The null type has one value, and that is null

var str = 'sky';
console.log(str.match(/[aeiou]/)); //null
Example: 3.1.13

Undefined

A variable that has not been assigned a value, will have the value undefined

Where to put JS?

When making a file is it important, that the file ends with a .js and not a .html or .css
Here are some ways to insert JavaScript.

External JavaScript File

You can add a script file with the script tag

<script type="text/javascript" src="path-to-javascript-file.js"></script>
Example:3.1.15

In HTML head

You can place it in HTMl head, but rememeber defer

<!doctype html> 
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="../js/script.js" defer> </script>
</head>
<body> ... </body>
</html>
Example: 3.1.16

Before body tag

You can also place it before the body tag end

<!doctype html> 
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<section>
</section>
<script src="js/script.js" > </script>
</body>
</html>
Example: 3.1.17

Local JavaScript code

Insted of using a external file you can also make JavaScript inside a file with the use of a script tag.

<!doctype html> 
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<section>
</section>
<script>
alert("hello world");
</script>
</body>
</html>
Example: 3.1.18

Always use strict

Every time you make a JavaScript file or script tag you need to add this code:

'use strict';