Intro to JavaScript

Beyond HTML and CSS, JavaScript is a programming language that is used to bring your website to life

Origins

JavaScript was created during the browser wars in the mid 90's. In an ambitious maneuver to outperform Microsoft's Internet Explorer (IE), the team behind Netscape Navigator commissioned Brendan Eich to create a powerful, dynamic, language that could run in the browser. In 1995, Eich created JavaScript in 10 days to add dynamic elements and interactivity to websites.

He first named the language Mocha, then LiveScript and then JavaScript (in order to benefit from the growing popularity of Java).

Microsoft reverse engineered Netscape's JavaScript interpreter and dominated the market-share by including IE with Windows.

Netscape had to cease its operations. As a last move, they open sourced JavaScript. Brendan and others behind Netscape Navigator went on to co-found the Mozilla foundation, the creators of the Firefox browser.

Browser

As JavaScript evolved, a need was seen to create a standard to make sure that web pages could work across different browsers.

ECMA, a standards organization, developed ECMAScript as the standard for scripting languages to be run in the browser. Although JavaScript it is the most prominent implementation of the standard, it is versions of the standard that are officially supported. Versions use ES as a prefix: ES5, ES7, ES2022.

It is the browser that loads HTML pages and builds up the DOM. It runs JavaScript code as it encounters it when it runs through the page it is loading.

Adding JavaScript in HTML

Where can we place JavaScript code in the HTML document?

In-line

Attached to a window event such as onclick

<button onclick="alert('Inline JavaScript!')">
    Click me for JS
<button>

Internal

Inside the <script> tag.

The <script> tag is normally placed just before the end of the <body>.

<body>
    <h1>Welcome to our site!</h1>
    
... rest of the body

    <script>
        console.log('JavaScript inside the HTML document!');
    </script>
</body>

Technically, the <script>tag can be placed anywhere but its position matters.

Remember that the html document is parsed (processed) from top to bottom.

This means that the <script> tag will be executed as soon as the browser sees it in the html file.

If your JS script is manipulating DOM elements, make sure the browser has already added those elements to the DOM by the time your script is run.

Variable Types & Dynamic Typing

JavaScript is a dynamic typed language.

This means that you don't specify what type of data a variable holds, the JS engine figures it out when the code is run.

Because of this, the same variable can hold different types of values inside the same execution environment.

In contrast, in static typed languages such as Java or C#, variable types must declared and respected.

bool isNew = "hello!"; // gives an error in C#

However, in JavaScript the sequence of lines below are valid:

let isNew = true;			// holding a boolean
isNew = 1;					// now a number
isNew = "It's all good";	// now a string

For-loops

There are several ways of using for-loops in Js. We will focus on two approaches:

Classic for( ) loop
The for...of loop

Classic for-loop

Works similarly as other languages:

for...of

The for...of loop provides a method for directly accessing the items in the list (as opposed to using the array index).

While-loops

While-loops also work similarly as other languages:

If you prefer do...while loops, they also exist in JavaScript. See the do...while documentation for more info.

If Statements

If statements work similarly to other languages

Careful! The equality operator "==" behaves differently than most languages.

This is a design decision that Brendan Eich regrets. We will discuss this in a lecture next week.

Primitive Data Types

Primitive types are the most basic variable types in JavaScript.

A primitive type is a type of data that holds a single value. In other words, variables that are not objects (more on objects later).

Type	Description
`undefined`	Absence of a value. The use of `undefined` should be reserved for the JavaScript engine.
`null`	Lack of existence. Can be assigned to variables by developers.
`boolean`	`true` or `false`
`number`	The only number type available. It's a floating point number (some decimals are always attached)
`string`	A sequence of characters. Either ' ' or " " can be used. Most other languages consider strings as an array of characters, but in JavaScript it is a primitive type.
`BigInt`	Similar to numbers but can store much larger numbers. Not covered in this course.
`symbol`	New in ES6. Not covered in this course.

See JavaScript data types and data structures page by MDN web docs for more info on primitive types.

The undefined keyword.

Note that undefined is a special value in JavaScript and it means slightly different things when dealing with variables, methods or functions:

A variable that has not been assigned a value holds the value undefined.
A function returns undefined if a value was not returned.

Try the following code to see what is displayed in the Console tab of the Dev Tools

Undefined with variables:

let a;				// Variable declared but nothing assigned to it
console.log(a);		// undefined

Undefined with functions:

// Declare two functions
function sayHi(name){
  console.log("Hi there ", name);		// Return nothing but print to console
}

function hiMessage(name){
  return ("Hello my friend ", name);	// Returns a string
}

// Now run them
console.log( sayHi("Larry") );			// Logs string to console but then logs undefined 
                                        // because that is what is returned

console.log( hiMessage("Meghrig") );	// Logs the returned string to console

Functions

Function Declarations

Function declarations in JavaScript work similarly to other languages:

Start the declaration with the keyword function
Add a function name
Optionally return something with the keyword return
To invoke it use its name followed by parenthesis ( )

Major differences from other languages:

It is not necessary to specify the data type returned
JavaScript allows you to pass in any number of arguments to a function.
If you pass less arguments than there are parameters in the function definition, the remaining parameters will hold the value undefined. There will not be an error.
If you pass more, the extra arguments will be ignored (although technically there is a way to get the args array and see the extra ones too). If parameters are expected but not provided
This flexibility can lead to bugs as a developer might not have passed in a different number of arguments intentionally, for example.

References

JavaScript Reference Pages

JavaScript reference by MDN web docs.

Hands-on

Exercises (answers at the end of this page)

What will be logged to console when a page is loaded with this code in a script tag?
```
function test()
{
  console.log( "Hi" );
}
```

What will be logged to console when a page is loaded with this code in a script tag?

function test()
{
    console.log( "Hi" );
}

console.log ( "Hola" );
console.log ( test() );

Lab - ECMAScript latest version

When was the latest version of JavaScript released? What is the official name of the version of the standard?

Lab - Seat numbers

Theater seats often display a row and seat number to help theatergoers find their seats.

There are 6 rows (0 to 5) and 20 seats (1 to 20) in each row.

In a function, write a nested for loop to print to console all of the different seat combinations in the theater.

Example console output:

0-1

0-2

...

5-17

5-18

5-20

To concatenate strings use the '+' operator:

console.log(  myVariable + " " + myOtherVariable );

Answers - Exercises

nothing, the function is never called.
first Hola will be logged. Then Hi will be logged from the execution of the test function. Then the console will show undefined, when it logs the return of the call to test.

Hola

Hi

undefined

Remember, the lines of code in test will only be run when they are executed. Even if the test function is defined before the console.log("Hola"), console.log("Hola") is the first line of executed code. console.log("Hi") will only be run after, when test() is executed on the next line.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

1_Review_history_JSInHTML_Functions.md

1_Review_history_JSInHTML_Functions.md

Intro to JavaScript

Origins

Browser

Adding JavaScript in HTML

In-line

Internal

Variable Types & Dynamic Typing

For-loops

Classic for-loop

for...of

While-loops

If Statements

Primitive Data Types

The undefined keyword.

Functions

Function Declarations

References

JavaScript Reference Pages

Hands-on

Exercises (answers at the end of this page)

Lab - ECMAScript latest version

Lab - Seat numbers

Answers - Exercises

Files

1_Review_history_JSInHTML_Functions.md

Latest commit

History

1_Review_history_JSInHTML_Functions.md

File metadata and controls

Intro to JavaScript

Origins

Browser

Adding JavaScript in HTML

In-line

Internal

Variable Types & Dynamic Typing

For-loops

Classic for-loop

for...of

While-loops

If Statements

Primitive Data Types

The undefined keyword.

Functions

Function Declarations

References

JavaScript Reference Pages

Hands-on

Exercises (answers at the end of this page)

Lab - ECMAScript latest version

Lab - Seat numbers

Answers - Exercises