CHAPTER 5

Tuesday, 12 December 2023

5:01 pm

VARIABLES
• Containers for storing data values
• Means anything that can vary

IDENTIFIERS
• The unique names used to identified variables
• Can be short names (like x and y) or
• more descriptive names (like age, sum, total)

4 WAYS TO DECLARE VARIABLES

USING :
• VAR
o Used to declare variables since JavaScript was created
o It is confusing and error-prone when using variables declared using var.

• WHEN TO USED VAR?

o Used for declaring variables in all JavaScript code from 1995 to 2015
o The let and const keywords were only added to JavaScript in 2015
o Used when created web sites will be used in older browsers

• LET
o Removes the confusion and error of var.
o The new and recommended way of declaring variables

• CONST
o Used to declared a constant variable that cannot be change once assigned a value
o Must be declared and initialized at the same time

• WHEN TO USED LET AND CONST?

o Use const if the value of the variable will not be changed within the program.
o Use let if the value of the variable can be change within the program.

• NOTHING
o Variables can be declared and initialized without the var or let keywords. However
the value must be assigned to a variable declared without the var keyword.

NOTES IN DECLARING VARIABLES IN JAVASCRIPT

• You can assign a value to a variable using the " = " when you declare it or after the declaration and
before accessing it.

o EXAMPLE
Let msg;
msg = "Hello JavaScript";

▪ The msg variable is declared first and then assigned a string value in the next lines

• You can declare variable and assign a value to it in the same line. Values can be of any datatypes
such as string, numeric, boolean, etc.

o EXAMPLE:
Let name = "Juan";
Let num = 100;
Let is active = true;

• Multiple variables can be declared in a single line, as shown below

Let name = "Juan", num = 100, is active = true;

• You can copy the value of one variable to another variable

Let num1 = 100;
 Let num2 = num1;

• JavaScript allows multiple white spaces and line breaks when you declare a variables.
Let name = "Juan",
num = 100,
is active = true;

• You cannot redeclare a variable using let keyword .

• Variable names are case-sensitive in JavaScript.
• Although variables can have the same name declared with the var keyword

GENERAL RULES FOR CONSTRUCTING VARIABLE NAMES

• The variable names msg, MSG, Msg, mSg are considered separate variables
• Variable names can contain letters, digits, sysmbols $ and __
• A variable name cannot start with a digit 0-9.
• A variable name cannot be a reserved keyword in JavaScript.

DYNAMIC TYPING
• JavaScript is a loosely type language. It means that you don't need to specify what data type a
variable will contain.
• JavaScript variables can hold numbers and text values or string
• String are declared by placing them inside double or single quotes.
• Numeric Values are declared without quotes

VARIABLE SCOPE

• GLOBAL VARIABLE
o Variables declared out of the function are called global variable.
o They can access anywhere in the JavaScript code

• LOCAL VARIABLE
o Variables declared inside a function are called local variables.
o They can only be access in the function where they are declared but not outside.

DECLARE VARIABLES WITHOUT VAR AND LET KEYWORDS

• Variables can be declared and initialized without the var or let keywords. However the value
must be assigned to a variable declared without the var keyword.
• The variables declare without the var keyword become global variables
• It is recommended to declare variable using let keyword
• EXAMPLE:
o function myfunction(){
msg = "Hello JavaScript";
}
myfunction();
alert(msg); //msg become global variable so can be accessed here

UNDEFINED VALUES IN VARIABLES

• In computer programs, variables are often declared without a value.
• A variable declared without a vale will have the value undefined.

JAVASCRIPT OPERATORS
• Includes operators same as other languages.
• An Operator performs some operation on single or multiple operands(data value) and produces a
result.
TYPES OF JAVASCRIPT OPERATORS

• ARITHMETIC OPERATORS

o Operator precedence describes the order in which operation are performed in arithmetic
expressions.
o Multiplication (*) and division (/) have higher precedence than addition (+) and subtraction (-).
MDAS rule.

• ASSIGNMENT OPERATORS

• LOGICAL OPERATORS
o Used to combine two or more conditions
 o

• COMPARISON OPERATORS
o Provides comparison operators that compare two operands and return a boolean value
true or false

o
CHAPTER 6
Tuesday, 12 December 2023
8:34 pm
FUNCTIONS
• A block of code designed to perform a particular task
• JavaScript Function is executed when "something" invokes or calls it.

TWO KINDS OF FUNCTIONS

• BUILT-IN
o EXAMPLES:
▪ concat()
▪ date()
▪ lenght()

• DEVELOPER CREATED

CALLING A FUNCTION
• code inside a function will execute when something invokes or calls the function
o When an event occurs (ex. When a user clicks a button)
o When it is called from JavaScript code

FUNCTION SYNTAX
• Defined with the function keyword, followed by parenthesis ().
• Function names contain letters, digits, underscores, and a dollar signs.
• The parenthesis may include parameter names separated by commas.
o (parameter1, parameter2….)
• The code to be executed, by the function, is placed inside
curly brackets {}

• EXAMPLE:
o Function name (parameter1, parameter2, parameter3) {
//code to be executed
}

• PARAMETERS
o Are listed inside the parenthesis() in the function definition

• FUNCTION ARGUMENTS
o Are the values received by the function when it is called.

• Output of the operations done using parameters are sent back to the program using the return
statement.

JAVASCRIPT EVENTS
• HTML events are the "things" that happen to HTML elements
• When JavaScript in used in HTML pages, JavaScript can "react" on these events.
• HTML can be something the browser does or the something the user does

• EXAMPLES OF HTML EVENTS

o When a user clicks the mouse
o When a webpage has loaded
o When an image has been loaded
o When the mouse moves over an element
o When an input field is changed
o When an HTML form is submitted
o When a user strokes a key

COMMON HTML EVENTS

• ONCHANGE
o An HTML events has been changed

• ONCLICK
o An element, like a button, in the webpage is clicked

• ONMOUSEOVER
o The user moves the mouse over an HTML element

• ONMOUSEOUT
o The user moves the mouse away from an HTML element

• ONKEYDOWN
o The user pushes a keyboard key
 • ONLOAD
o The browser has finished loading the page

PROCESSING INPUT USING PROMPT

• WINDOW PROMPT
o We can get user input using JavaScript prompt() method

o PROMPT()
▪ Method displays a dialog box that prompts the user input
▪ Returns the input value if the user clicks "OK", otherwise it returns null.

PROCESSING INPUT USING FIELDS

• We can get user input through fields by using functions and events