JavaScript

Welcome to the second class of 0 to 0.1 JavaScript

Prepared by : Abdul Qadir

 JavaScript Display Possibilities

JavaScript can "display" data in different ways:

 Writing into the HTML output using document.write().
 Writing into an alert box, using window.alert().
 Writing into the browser console, using console.log().
 Writing into an HTML element, using innerHTML.

window.alert()

This JavaScript output method displays the given data in an alert-box. A

small pop-up box appears with a closing button, and after clicking it, it
disappears. This method is great for short and rapid informative messages
which can be instantly closed.

Window => representing main window of website … alerts are called on

windows

document.write()
document.write() function is convenient for testing purposes. It's primary
function is to delete all HTML whenever the HTML document is loaded. You
have to be very careful with this JavaScript output method.

Note: use the document.write() method only for testing!

console.log()
You should use the console.log() function to display data straight in the
console. The JavaScript console.log() function is mainly used for debugging
your code as it makes the JavaScript print to console.

console.log(12 + 3);

Using innerHTML
To access an HTML element, JavaScript can use the
document.getElementById(id) method.

The id attribute defines the HTML element. The innerHTML property defines
the HTML content:

JavaScript Input Possibilities

Prompt()

The prompt() method displays a dialog box that prompts the visitor for input.
A prompt box is often used if you want the user to input a value before
entering a page.

Note: When a prompt box pops up, the user will have to click either "OK" or
"Cancel" to proceed after entering an input value. Do not overuse this
method, as it prevents the user from accessing other parts of the page until
the box is closed.

The prompt() method returns the input value if the user clicks "OK". If the
user clicks "cancel" the method returns null.
Syntax
prompt(text, defaultText)
Confirm()

The confirm() method displays a dialog box with a specified message, along
with an OK and a Cancel button.
A confirm box is often used if you want the user to verify or accept
something.
Note: The confirm box takes the focus away from the current window, and
forces the browser to read the message. Do not overuse this method, as it
prevents the user from accessing other parts of the page until the box is
closed.

The confirm() method returns true if the user clicked "OK", and false
otherwise.
 Return A Boolean, indicating whether "OK" or "Cancel" was clicked in
Value: the dialog box:

 true - the user clicked "OK"

 false - the user clicked "Cancel" (or the "x" (close)
button in the top right corner that is available in all
major browsers, except Firefox)

Quick practice Question write all display methods and input methods and
see which appear when

Undefined

Undefined is the value given to variables that have not been assigned a value.
We’ve already seen it used earlier in this chapter when variables are declared
without being assigned a value. It can also occur if an object’s property doesn’t
exist or a function has a missing parameter. It is basically JavaScript’s way of
saying "I can’t find a value for this."

Null

Null means “no value”. It can be thought of as a placeholder that JavaScript uses
to say "there should be a value here, but there isn’t at the moment."
If this reminds you a lot of undefined then this is because they are both “nonvalue”
values, meaning they are similar, but behave slightly differently. For
example, if you try to do sums with them:

null is coerced to be 0, making the sum possible whereas undefined is coerced to

NaN, making the sum impossible to perform.
In general, values tend to be set to undefined by JavaScript, whereas values are
usually set to null manually by the programmer.

javaScript Hoisting
Hoisting is JavaScript's default behavior of moving declarations to the top.

JavaScript Declarations are Hoisted

In JavaScript, a variable can be declared after it has been used.
In other words; a variable can be used before it has been declared.

Scope
Scope is an important concept in programming. It refers to where a constant or
variable is accessible by the program. There are two common scopes that are often
referred to in programs: global scope and local scope.

ES2015 introduced two important new JavaScript keywords: let and const.

These two keywords provide Block Scope variables (and constants) in JavaScript.
Before ES2015, JavaScript had only two types of scope: Global Scope and Function
Scope.

Global Scope
Variables declared Globally (outside any function) have Global Scope.
Example

var carName = "Volvo";

// code here can use carName

function myFunction() {

// code here can also use carName

Global variables can be accessed from anywhere in a JavaScript program.

Function Scope
Variables declared Locally (inside a function) have Function Scope.

Example

// code here can NOT use carName

function myFunction() {

var carName = "Volvo";

// code here CAN use carName

// code here can NOT use carName

Local variables can only be accessed from inside the function where they are
declared.

JavaScript Block Scope

Variables declared with the var keyword can not have Block Scope.
Variables declared inside a block {} can be accessed from outside the block.

Example

var x = 2;

// x CAN be used here

Before ES2015 JavaScript did not have Block Scope.

Variables declared with the let keyword can have Block Scope.
Variables declared inside a block {} can not be accessed from outside the block:

Example

let x = 2;

// x can NOT be used here

JavaScript Let Variable

variables defined with let are not hoisted to the top.

Using a let variable before it is declared will result in a ReferenceError.

The variable is in a "temporal dead zone" from the start of the block until it is
declared:
let x = 2; // Allowed

{
let x = 3; // Allowed
}

{
let x = 4; // Allowed
}
Javasript const variable

in contrast, using const means you can’t reassign the variable to another value.
That means that if a variable is assigned to a primitive data type, then the value
can’t be changed, and will result in an error if you attempt to:

If the variable references a non-primitive data type, such as an array, function or

object, then using const will not make it immutable. This means the data inside the
object can change (known as mutating the object).

const x = 2; // Allowed
const x = 3; // Not allowed
x = 3; // Not allowed
var x = 3; // Not allowed
let x = 3; // Not allowed

{
const x = 2; // Allowed
const x = 3; // Not allowed
x = 3; // Not allowed
var x = 3; // Not allowed
 let x = 3; // Not allowed
}
 String Properties and Methods
let name = "helloWorld"
console.log(name.length) // retrieve the name variable’s length property

//upercase string
console.log(name.toUpperCase())

//lowercase string
console.log(name.toLowerCase())

console.log(name.charAt(1)) //If you want to know which character is at a certain

position,
// you can use the charAt() method

console.log(name.indexOf('e')) // return index of char

console.log(name.indexOf('z')) // return -1 if char does,nt appear

console.log(name.lastIndexOf('l')) // last occurance of char

console.log(name.includes('z')) //return true or false

console.log(name.includes('h')) // return true of false

console.log(name.startsWith('H')) //ES6 added a couple of methods to check

//if a string starts or ends in a particular character.
// return true or false

console.log(name.startsWith('h'))
//return true or false

console.log(name.endsWith('d'))
//return true or false

let str2 = 'babu'.concat('soft') //The concat() method can be used to

//concatenate two or more strings together:
console.log(str2)

str2 = " babusoft "

console.log(str2)
console.log(str2.trim()) //The trim() method will remove any
//whitespace from the beginning and end of a string:
var str = " please locate where 'locate occurs!"
var pos = str.search('locate') // The search() method searches a string for
//a specified value and returns the position of the match:
console.log(pos)

var str = "Apple, Banana, Kiwi";

var res = str.slice(7, 13); // slice() extracts a part of a string and returns
//the extracted part in a new string.
console.log(res)

var str = "Apple, Banana, Kiwi";

var res = str.substr(7, 6); //substr() is similar to slice().
//The difference is that the second parameter specifies the length of the extracted
part.
console.log(res)

str = "Please visit Microsoft!";

var n = str.replace("Microsoft", "W3Schools"); //The replace() method replaces a
specified
//value with another value in a string:
console.log(n)

//A string can be converted to an array with the split() method:

var txt = "b,a|b,u s,o|f,t"; // String
console.log(txt.split(",")); // Split on commas
console.log(txt.split(" ")); // Split on spaces
console.log(txt.split("|")); // Split on pipe