JavaScript Part 2

Chapter 4

1
Topics
⚫ Constants
⚫ JavaScript Scope
⚫ Block scope
⚫ Function scope
⚫ Global scope
⚫ JavaScript Functions
⚫ Interaction Functions
⚫ Arrow Function
⚫ JavaScript source file

2
Constants
⚫ To declare a constant (unchanging) variable, use const
instead of let
⚫ Variables declared using const they cannot be reassigned. An
attempt to do so would cause an error
⚫ Such constants are named using capital letters and
underscores.
⚫ const COLOR_RED = "#F00";
⚫ const COLOR_GREEN = "#0F0";
⚫ const COLOR_BLUE = "#00F";
3
Note
⚫ We can declare variables to store data by using the var, let, or
const keywords.
⚫ The var keyword was used in all JavaScript code from 1995 to 2015.
⚫ The let and const keywords are a modern variable declaration were
added to JavaScript in 2015.

4
JavaScript Scope
⚫ Scope determines the accessibility (visibility) of variables.
⚫ JavaScript has 3 types of scope:
1) Block scope
2) Function scope
3) Global scope

5
Block Scope
⚫ Before ES6 (2015), JavaScript had only 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:
{
let x = 2;
// x can be used here
}
// x cannot be used here, outside of the block 6
Function Scope
⚫ Variables defined inside a function are not accessible (visible)
from outside the function.
⚫ Variables declared with var, let and const are quite similar
when declared inside a function.
⚫ They all have Function Scope:

function myFunction() {
let carName = "Volvo"; // Function Scope
}

7
Global Scope
⚫ Variables declared Globally (outside any function) have Global
Scope.
⚫ Global variables can be accessed from anywhere in a JavaScript
program.
⚫ Variables declared with var, let and const are quite similar when
declared outside a block.
let carName = "Volvo";
⚫ They all have Global Scope: // code here can use carName

function myFunction() {
// code here can also use carName
}
8
JavaScript Functions
⚫ A JavaScript function is a block of code designed to perform a
particular task.
⚫ A JavaScript function is executed when "something" invokes it
(calls it).
⚫ Must be contained between <script> and </script> tags

9
Functions(cont.)

⚫ Defining Custom Functions

⚫ A function definition consists of three parts:
⚫ Reserved word function followed by the function
name (identifier)
⚫ Parameters required by the function, contained
within parentheses following the name
▪ Parameters → variables used within the function
▪ Zero or more may be used
⚫ Function statements, delimited by curly braces { }

10
JavaScript Function Syntax

function name(parameter1, parameter2, parameter3)

{
// code to be executed
}

11
Example
// Function to compute the product of p1 and p2

function myFunction(p1, p2) {

return p1 * p2;
}

12
Calling Functions

⚫ Calling Functions
⚫ Function invocation or call
⚫ Statement including function name followed by a list
of arguments in parentheses
⚫ Parameter of function definition takes on value of
argument passed to function in function call

13
Calling Functions
function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}

let x = myFunction(4, 3); // Function is called, return value will end up in x

14
Interaction: alert, prompt, confirm
⚫ To interact with the user through a browser there are a couple
of functions could be used:
1) alert
2) prompt
3) confirm

15
1) alert
⚫ alert
⚫ It shows a message and waits for the user to press “OK”.
⚫ For example:
▪ alert("Hello");
⚫ The mini-window with the message is called a modal window.
⚫ The word “modal” means that the visitor can’t interact with the rest of the
page, press other buttons, etc, until they have dealt with the window. In this
case – until they press “OK”.

16
2) prompt
⚫ prompt
⚫ The function prompt accepts two arguments.
⚫ It shows a modal window with a text message, an input field for the
visitor, and the buttons OK/Cancel.
⚫ Example:
⚫ result = prompt(title, [default]);
▪ title
▪ The text to show the visitor.
▪ default
▪ An optional second parameter, the initial value for the input field.
▪ The square brackets around default in the syntax above denote that the
17
parameter is optional, not required.
prompt
When the user clicks OK, the value
typed by the user is returned to the
program as a string.
This is the prompt
to the user.

This is the text field in which If the user clicks

This is the default value that the user types the value. Cancel, the null
appears when the dialog value will be returned
opens. to the program and
no value will be
assigned to the
variable. 18
3) confirm
⚫ confirm
⚫ The function confirm shows a modal window with a question and two
buttons: OK and Cancel.
⚫ The syntax:
⚫ result = confirm(question);
⚫ The result is true if OK is pressed and false otherwise.
⚫ For example:
▪ let isBoss = confirm("Are you the boss?");
▪ alert(isBoss); // true if OK is pressed

19
Limitations
⚫ There are two limitations shared by all the methods above:
1) The exact location of the modal window is determined by the
browser. Usually, it’s in the center.
2) The exact look of the window also depends on the browser. We
can’t modify it.

20
JavaScript Arrow Function
⚫ Arrow functions were introduced in ES6.
⚫ Arrow functions allow us to write shorter function syntax:
Y hello = () => {
return "Hello World!";
} it

⚫ Before Arrow:
hello = function() {
return "Hello World!";
}

21
It gets shorter!
⚫ If the function has only one statement, and the statement
returns a value, you can remove the brackets and the return
keyword:
hello = () => "Hello World!";

⚫ Note: This works only if the function has only one statement.

22
Arrow Function With Parameters:
⚫ If you have parameters, you pass them inside the
parentheses:

hello = (val) => "Hello " + val;

23
Browser Support
⚫ The following table defines the first browser versions with full
support for Arrow Functions in JavaScript:

24
getElementById() & innerHTML
⚫ When you want to select one particular element by its ID,
JavaScript has an inbuilt method called
‘document.gerElementById()’.
⚫ This method is used to select one particular element with a
specific ID to either add some event listeners to it or some
style to it etc.
⚫ The innerHTML property sets or returns the HTML content
(inner HTML) of an element.

25
Example
<html>
<head>
<title>JS</title>
</head>
<body>
<p id="example">Nothing here.</p>
<script>
let myvariable = "Hello world!";
document.getElementById("example").innerHTML = myvariable;
</script>
</body>
</html>
26
Description

⚫ let myvariable = "Hello world!";

⚫ Declares a variable named myvariable and assigns it the string value
"Hello world!".
⚫ document.getElementById("example").innerHTML = myvariable;
⚫ document.getElementById("example"):
⚫ Selects the HTML element with the id example.
⚫ .innerHTML = myvariable;:
⚫ Changes the inner HTML (content) of the selected element to the value of
myvariable, which is "Hello world!".

27
28
getElementById & innerHTML…2
<html>
<head>
<title>JS</title>
</head>
<body>
<p id="example">Date and time appears here.</p>
<script>
document.getElementById("example").innerHTML = Date();
</script>
</body>
</html>

29
30
Including JavaScript in HTML
⚫ Two ways to add JavaScript to Web pages
1) JavaScript written directly inside <script> element
⚫ <script> alert("Hello World!") </script>
2) Include the script in an external file
⚫ Placed in an external (source) file
▪ Has file extension .js
▪ Contains only JavaScript statements

31
JavaScript Source File
⚫ Creating a JavaScript Source File
⚫ JavaScript source files
⚫ Use src attribute of <script> tag to denote source of JavaScript statements
⚫ Cannot include HTML tags in source file

<script language=“JavaScript” src=“/home/source.js”>

</script>

32
JavaScript Source File…
⚫ Advantages of JavaScript source files
⚫ Makes HTML document neater (less confusing)
⚫ JavaScript can be shared among multiple HTML files
⚫ Hides JavaScript code from incompatible browsers

33
28