Scribd
Upload
4 views

JavaScriptNotes_2

JavaScript is a lightweight, cross-platform programming language primarily used for web development. It can be embedded in HTML documents using <script> tags, placed in the head or body sections, or linked as external files. Key features include various methods for output (like innerHTML, console.log, document.write, and alert) and the ability to handle user input through prompt dialogs.

Uploaded by

Technosoft Academy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

JavaScriptNotes_2

JavaScript is a lightweight, cross-platform programming language primarily used for web development. It can be embedded in HTML documents using <script> tags, placed in the head or body sections, or linked as external files. Key features include various methods for output (like innerHTML, console.log, document.write, and alert) and the ability to handle user input through prompt dialogs.

Uploaded by

Technosoft Academy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

JavaScript

Introduction to JavaScript
What is JavaScript ?
JavaScript isa lightweight, cross-platform, single-threaded, and interpreted
compiled programming language. It is also known as the scripting language for webpages.
It is well-known for the development of web pages, and many non-browser environments
also use it.

How to Add JavaScript in HTML Document?

JavaScript code is embedded within <script> and </script> tags when incorporated into an
HTML document. These scripts can be positioned within the body or head sections of an
HTML page, or even in both.
Alternatively, JavaScript can also be placed outside the HTML file and linked by specifying
its source in the script tag.
This basic HTML code includes JavaScript implementations using various approaches.

<!DOCTYPE html>
<html>

<head>
<title>
Add JavaScript Code inside Head
Section
</title>
</head>

<body>
<h2>
Adding JavaScript in HTML Document
</h2>

<h3 id="demo" style="color: green">


GeeksforGeeks
</h3>

<button type="button" onclick="myFun()">


Click Here
</button>
</body>

</html>

Examples of Adding JavaScript in HTML Document

JavaScript code is placed inside the <head> section of an HTML page and uses
the <script> element. This ensures the script is loaded and executed when the page loads.
Example: This example shows the addition of a script file inside the head section.
<!DOCTYPE html>
<html>

<head>
<title>
Add JavaScript Code inside Head Section
</title>

<script>
function myFun() {
document.getElementById("demo").innerHTML = "Content
changed!";
}
</script>
</head>

<body>
<h2>
Add JavaScript Code
inside Head Section
</h2>

<h3 id="demo" style="color:green;">


GeeksforGeeks
</h3>

<button type="button" onclick="myFun()">


Click Here
</button>
</body>

</html>

JavaScript inside <body> Tag


JavaScript Code is placed inside the body section of an HTML page and in this
also we use <script> </script> tag inside and above the closing tag of </body>.
Example: This example shows showing the addition of a script file inside the
body section.

<!DOCTYPE html>
<html>

<head>
<title>
Add JavaScript Code inside Body Section
</title>
</head>

<body>
<h2>
Add JavaScript Code
inside Body Section
</h2>

<h3 id="demo" style="color:green;">


GeeksforGeeks
</h3>

<button type="button" onclick="myFun()">


Click Here
</button>

<script>
function myFun() {
document.getElementById("demo")
.innerHTML = "Content changed!";
}
</script>
</body>

</html>

External JavaScript
JavaScript can also be used in external files. The file extension of the JavaScript file will
be .js. To use an external script put the name of the script file in the src attribute of
a <script> tag. External scripts cannot contain script tags.
Example: This example shows showing the linking of an external script file inside the head
section.

[File : ExtJavascript.html]

<!DOCTYPE html>
<html>

<head>
<title>
External JavaScript
</title>
<script src="script.js"></script>
</head>

<body>
<h2>
External JavaScript
</h2>

<h3 id="demo" style="color:green;">


GeeksforGeeks
</h3>

<button type="button" onclick="myFun()">


Click Here
</button>
</body>

</html>

------------------------------------------- ***************** -------------------------------------


 [File : jscript.js]

function myFun ()
{
document.getElementById('demo').innerHTML = 'Content Changed'
}

Advantages of External JavaScript


 Cached JavaScript files can speed up page loading.
 It makes JavaScript and HTML easier to read and maintain.
 It separates the HTML and JavaScript code.
 It focuses on code reusability which is one JavaScript Code that can run in various
HTML files.
External JavaScript References
We can reference an external script in three ways in javascript:
 By using a full URL:
src = https://www.geeksforgeek.org/js/script.js

 By using a file path:


src = "/js/script.js"

 Without using any path:


src = "script.js"

JavaScript Statements

JavaScript statements are made of: Values, Operators, Keywords,


Expressions, and Comments. JavaScript statements are executed
in the same order as they are written, line by line.
Examples of JavaScript Statements
Semicolons
 Semicolons separate JavaScript statements.
 A semicolon marks the end of a statement in JavaScript.
Example: In this example, we have shown the use of Semicolons.

let a, b, c;
a = 2;
b = 3;
c = a + b;
console.log("The value of c is " + c + ".");

Multiple statements on one line are allowed if they are separated with a
semicolon.
a = 2; b = 3; z = a + b;

Code Blocks
JavaScript statements can be grouped together inside curly brackets. Such
groups are known as code blocks. The purpose of grouping is to define
statements to be executed together.
Example: In this example, we have shown Code Blocks.
function myFunction()
{
console.log("Hello");
console.log("How are you?");
}

myFunction()
Keywords:

Keywords are reserved words and cannot be used as a variable name. A


JavaScript keyword tells about what kind of operation it will perform.
Some commonly used keywords are:
Keyword Description

var Used to declare a variable

let Used to declare a block variable

const Used to declare a block constant

if Used to decide if certain block will get executed or not

switch Executes a block of codes depending on different cases

for Executes a block of statements till the condition is true

function Used to declare a function

return Used to exit a function

try Used to handle errors in a block of statements

break Used to terminate a loop

continue Used to continue a loop

1. JavaScript innerHTML Property


The innerHTML property is used with HTML element. JavaScript can be used to select an
element using the document.getElementById(id) method , and then use the innerHTML
property to display the output on the specified element (selected element).
Syntax:
document.getElementById("id").innerHTML;

Example: The document.getElementById(id) method with innerHTML property is used to


display the output.

<!DOCTYPE html>
<html lang="en">

<head>
<title>JavaScript Output</title>
</head>

<body>
<h2>
Display Output using innerHTML Property
</h2>

<p id="GFG"></p>

<!-- Script to use innerHTML -->


<script>
document.getElementById("GFG").innerHTML
= "Hello Geeks!";
</script>
</body>

</html>

2. JavaScript console.log() Method


The console.log() method is used for logging messages to the console. It
is a debugging tool available in most web browsers. It is used during
development to output information about the state of the program.
Syntax:
console.log();

<!DOCTYPE html>
<html lang="en">

<head>
<title>JavaScript Output</title>
</head>

<body>
<h2>
Display Output using console.log() Method
</h2>

<!-- Script to use console.log() -->


<script>
console.log("Hello Geeks!");
</script>
</body>

</html>

3. JavaScript document.write() Method


To use the document.write(), simply call this method and provide the content you want to
be written to the document. This method is often used for directly adding content to the
HTML document while it is being parsed.
Note: If we use document.write() after the HTML document is loaded, it will delete all
existing HTML.
Syntax:

document.write();
Example :
<!DOCTYPE html>
<html lang="en">

<head>
<title>JavaScript Output </title>
</head>

<body>
<h2>
Display Output using document.write() Method
</h2>

<!-- Script to uses document.write() -->


<script>
document.write("Hello Geeks!");
</script>
</body>

</html>

4. JavaScript window.alert() Method


The window.alert() method is used to display an alert box with a specified output (or
message) and an OK button.
Syntax:
window.alert();

<!DOCTYPE html>
<html lang="en">

<head>
<title>JavaScript Output</title>
</head>

<body>
<h2>
Display Output using window.alert() Method
</h2>

<!-- Script to use window.alert() -->


<script>
window.alert("Hello Geeks!");
</script>
</body>

</html>

JavaScript window.print() Method


The window.print() method is used to open the browser’s print dialog, allowing the user to
print the current page. JavaScript does not contain any default print object or methods.
Syntax:
window.print();
Example: The window.print() method prints the current page.
<!DOCTYPE html>
<html>

<body>
<h2>JavaScript window.print() Method</h2>

<button onclick="window.print()">
Click here to Print
</button>
</body>

</html>

JavaScript window.prompt() Method

The window.prompt() method is used to display a dialog box that prompts the user input.
It returns the text entered by the user as a string. It doesn’t display output directly but
captures user input.
Note: This method is not used for output, it only use to take input from user.
Syntax:
window.prompt();
Example: The window.prompt() method to take user input and display the entered data
used alert() method.
<!DOCTYPE html>
<html lang="en">

<head>
<title>JavaScript Output</title>
</head>

<body>
<h2>
Display prompt box for user input
</h2>

<script>
let userInput = window.prompt("Please Enter your Input");

if (userInput !== null) {


window.alert("Hello, " + userInput + "!");
} else {
window.alert("You clicked Cancel or closed the prompt.");
}
</script>
</body>

</html>

You might also like