let foo = 42; // foo is now a number foo = 'bar'; // foo is now a string foo = true; // foo is now a boolean
| JavaScript types | ||
| Boolean type: | True | False |
| Null type: | Null | |
| Undefined type: | Undefined | |
| Numeric type: | Number | BigInt |
| Number type | 2^-1074 | -(2^53 − 1) |
| String type | "Name" | "String" |
| Symbol type | Symbol() | Symbol('foo') |
| Objects type | let obj = {} | let obj = new Object() |
| Prerequisites: | Basic computer literacy, a basic understanding of HTML and CSS. |
| Objective: | To gain familiarity with what JavaScript is, what it can do, and how it fits into a web site. |
const p =
document.querySelector('p');
p.addEventListener(
'click', updateName
);
function updateName() {
const name =
prompt('Enter a new name');
p.textContent =
`Player 1: ${name}`;
}
Here we are selecting a text paragraph (line 1), then attaching an
event listener to it (line 3) so that when the paragraph is clicked,
the updateName() code block (lines 5–8) is run. The updateName()
code block (these types of reusable code blocks are called
"functions") asks the user for a new name, and then inserts that
name into the paragraph to update the display.
// This returns true;
isNaN('Hello');
// This returns false;
Number.isNaN('Hello');
Number.NEGATIVE_INFINITY
<!DOCTYPE html>
<html>
<head>
<title>
Javascript breaking lines of code
<title>
<head>
<body>
<script>
// using \n
console.log(
"let us see how to break lines
injavascript,\n what can we do?"
);
<script>
<body>
<html>
var geek;
undefined
console.log(geek)
Undeclared:
//ReferenceError:
myVariable is not defined
console.log(myVariable)
<script>
function GFG(){
//'use strict'
verifies that no undeclared
// variable's present in our code
'use strict';
x = "GeeksForGeeks";
}
GFG();
//accessing the above function
</script>
Output:
ReferenceError: x is not definedExample 2: This example checks whether a given variable is undefined or not.
<!DOCTYPE html>
<html>
<body>
<style>
h1 {
color: green;
}
</style>
<h1>UNDEFINED OR NOT.</h1>
<button onclick="checkVar()">
Try it
</button>
<p> id="gfg"></p>
<script>
function checkVar() {
if (
typeof variable === "undefined"
){
string = "Variable is undefined";
} else {
string = "Variable is defined";
}
document.getElementById("gfg")
.innerHTML = string;
}
</script>
</body>
</html>
Output:
let a=50, b=40;
function main()
{
console.log(
"a = %d and b=%d",a,b
);
}
| Global Variable | Local Variable |
| Global variables are declared outside all the function blocks. | Local Variables are declared within a function block. |
| The scope remains throughout the program. | The scope is limited and remains within the function only in which they are declared. |
| Any change in global variable affects the whole program, wherever it is being used. | Any change in the local variable does not affect other functions of the program. |
| A global variable exists in the program for the entire time the program is executed. | A local variable is created when the function is executed, and once the execution is finished, the variable is destroyed. |
| It can be accessed throughout the program by all the functions present in the program. | It can only be accessed by the function statements in which it is declared and not by the other functions. |
| If the global variable is not initialized, it takes zero by default. | If the local variable is not initialized, it takes the garbage value by default. |
| Global variables are stored in the data segment of memory. | Local variables are stored in a stack in memory. |
| We cannot declare many variables with the same name. | We can declare various variables with the same name but in other functions. |
prompt(text, defaultText)Return Value
| Parameter | Description |
| A string | If the user clicks "OK", the input value is returned. Otherwise null is returned. |
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Support | Support | Support | Support | Support | Support |
| In an object method, this refers to the object. |
| Alone, this refers to the global object. |
| In a function, this refers to the global object. |
| In a function, in strict mode, this is undefined. |
| In an event, this refers to the element that received the event. |
| Methods like call(), apply(), and bind() can refer this to any object. |
fullName : function() {
return this.firstName +
" " +
this.lastName;
}
<html>
<body>
<script>
function delayFunction() {
//display message on web after
3 secondson calling delayFunction
document.write('<h3>
Welcome to JavaTpoint
</h3>');
}
</script>
<h4>
Example of delay the
execution of function
<h4>
<button onclick =
"setTimeout(delayFunction, 3000)">
Click Here </button>
</body>
</html>
Output
On clicking the Click Here button, the remaining code will execute after 3 seconds. A message Welcome to javaTpoint will display on the web after 3 seconds (3000 milliseconds).
console.log(1 === 1);
// expected output: true
console.log('hello' === 'hello');
// expected output: true
console.log('1' === 1);
// expected output: false
console.log(0 === false);
// expected output: false
console.log("hello" === "hello");
// expected output: true;
console.log("hello" === "hola");
// expected output: false;
console.log(3 === 3);
// expected output: true;
console.log(3 === 4);
// expected output: false;
console.log(true === true);
// expected output: true;
console.log(true === false);
// expected output: false;
console.log(null === null);
// expected output: true;
console.log("3" === 3);
// expected output: false;
console.log(true === 1);
// expected output: false;
console.log(null === undefined);
// expected output: false;
const object1 = {
name: "hello"
}
const object2 = {
name: "hello"
}
console.log(object1 === object2);
// expected output: false;
console.log(object1 === object1);
// expected output: true;
| Chrome | Edge | Firefox | Opera | IE |
| Support | Support | Support | Support | Support |
document.forms["myform"].submit();But, how to identify a form? Give an id attribute in the form tag Here is the code to submit a form when a hyperlink is clicked:
<form name="myform"
action="handle-data.php">
Search:
<input type='text' name='query' />
<a href="javascript: submitform()">
Search
</a>
</form>
<script type="text/javascript">
function submitform()
{
document.myform.submit();
}
</script>
var element =
document.getElementById('element');
element.classList.add('class-1');
element.classList.add
('class-2', 'class-3');
element.classList.remove('class-3');
document.getElementById("MyElement")
.classList.add('MyClass');
document.getElementById("MyElement")
.classList.remove('MyClass');
if
(
document.getElementById("MyElement")
.classList.contains('MyClass')
)
{
document.getElementById("MyElement")
.classList.toggle('MyClass');
fs.readFile ( file_name, encoding, callback_function )
fs.writeFile ( file_name, data, options, callback )
var fs = require("fs");
console.log(
" Writing into an file "
);
// Sample.txt is an empty file
fs.writeFile(
"sample.txt",
"Let's write a few
sentences in the file",
function (err) {
if (err) {
return console.error(err);
}
// If no error the remaining
code executes
console.log(" Finished writing ");
console.log(
"Reading the data that's written"
);
// Reading the file
fs.readFile("sample.txt", function
(err, data) {
if (err) {
return console.error(err);
}
console.log(
"Data read : " + data.toString()
);
});
}
);
Output
<script type = "text/javascript">
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
document.write("Hello World\n");
</script>
Using Loops
In Loop, the statement needs to be written only once and the loop will be executed 10 times as shown below:
<script type = "text/javascript"<
var i;
for (i = 0; i < 10; i++)
{
document.write("Hello World!\n");
}
</script>
while (boolean condition)
{
loop statements...
}