6/24/2025
WEB DEVELOPMENT
Lecture Outline
What is JavaScript?
Why use JavaScript? OR What JavaScript can do?
Using JavaScript in your HTML
Where to Put your Scripts
JavaScript Syntax
Generating Output in JavaScript
What is JavaScript?
JavaScript is a programming language well-known for the development
of web pages.
Initially developed as LiveScript by Netscape in the mid 1990s
It was later renamed to JavaScript and became an ECMA (European
Computer Manufacturers Association) standard in 1997.
JavaScript has nothing to do with Java.
1
6/24/2025
What can JavaScript Do?
JavaScript can react to events.
JavaScript can read and write HTML elements..
JavaScript can be used to validate data.
JavaScript can be used to detect the visitors.
Browser detection.
Pop-up windows.
Status bar messages c
Adding JavaScript to Your Web Pages
There three way to add JavaScript to web pages:
o Internal JavaScript
o External JavaScript
o Inline JavaScript
Internal JavaScript
To add internal JavaScript to <!DOCTYPE html>
<html>
an HTML file, — just before <head>
the closing </body> tag: add <title>Apply JavaScript example</title>
the following script element. </head>
<body>
<script> <button>Click me</button>
// JavaScript goes here <script>
function createParagraph() {
</script> const para = [Link]("p");
In a web document, code is [Link] = "You clicked the button!";
usually loaded and executed [Link](para);
}
in the order in which it appears const buttons =
in the HTML file. Therefore, [Link]("button");
o placing JavaScript at the buttons[0].addEventListener("click",createParagraph);
</script>
bottom ensures that all </body>
HTML elements are </html>
loaded.
2
6/24/2025
External JavaScript and Inline JavaScript
External JavaScript
To include an external JavaScript file, the script tag is used with the attribute
src.
The value for the src attribute should be the path to your JavaScript file.
o <script src="[Link]"></script>
The script tag should either be included between the <head> tags or
just before the closing </body> tag in your HTML document.
Inline JavaScript
Placing the JavaScript code directly inside an HTML tag, as in the following
example
o <button me!</button>
Where to Put your Scripts
Scripts can be placed in the HEAD or in the BODY
o In the HEAD, scripts are run before the page is displayed
o In the BODY, scripts are run as the page is displayed
The HEAD is the right place to define functions and variables that are
used by scripts within the BODY
Using JavaScript in your HTML
JavaScript in <head> JavaScript in <body>
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <body>
<script> <h1>My Web Page</h1>
function myFunction() { <p id="demo">A Paragraph</p>
[Link]("demo").innerHTML =
"Paragraph changed."; <button type="button"
} it</button>
</script> <script>
</head> function myFunction() {
[Link]("demo").innerHTML =
<body>
"Paragraph changed.";
<h1>My Web Page</h1> } </script>
<p id="demo">A Paragraph</p> </body>
<button type="button" Try </html>
it</button>
</body> </html>
3
6/24/2025
JavaScript Syntax
JavaScript statements are separated by semicolons.
Example
var x = 5;
var y = 6;
var z = x + y;
JavaScript is case-sensitive.
o For example, the variable myVar must be typed myVar
not MyVar or myvar.
o Similarly, the method name getElementById() must be typed with the
exact case not as getElementByID()
10
JavaScript Syntax
JavaScript Comments
JavaScript support single-line as well as multi-line comments.
o Single-line comments begin with a double forward slash (//)
Example
// Single line comments in JavaScript program
o A multi-line comment enclosed between /*) and */.
Example
/* This is my first program
in JavaScript */
11
Generating Output in JavaScript
For example, you want to see the value of a variable.
Write a message to the browser console to debug a problem in
your JavaScript code.
There are several ways to generate/display output in JavaScript.
o writing output to a browser window or browser console,
o displaying output in dialog boxes,
o Writing the output to an HTML element,
12
4
6/24/2025
Writing Output to Browser Console
[Link]() method
// Printing a simple text message
[Link]("Hello World!");
o Hello World!
// Print value of a variable
var x = 15;
var y = 25;
var sum = x + y;
[Link](sum);
o 40
13
Displaying Output in Alert Dialog Boxes
Alert Dialog box
//Displaying a simple text message
[Link]("Hello World!"); //Outputs: Hello World!
//Displaying a variable value
var x = 15;
var y = 25;
var sum = x + y;
[Link](sum); // Outputs: 40
14
Writing Output to the Browser Window
[Link] Method
// Printing a simple text message
[Link]("Hello World!"); //Prints: Hello World!
//Printing a variable value
var x = 10;
var y = 20;
var sum = x + y;
[Link](sum); //Prints: 30
15
5
6/24/2025
Inserting Output Inside an HTML Element
using the element's innerHTML property.
<p id="greet"> </p>
<p id="result"> </p>
<script>
[Link]("greet").innerHTML = "Hello World!";
// Writing a variable value inside an element
var x = 10;
var y = 20;
var sum = x + y;
[Link]("result").innerHTML = sum;
</script>
16
JavaScript Print
JavaScript does not have any print object or print methods.
The only exception is that you can call the [Link]()
method in the browser to print the content of the current
window.
<!DOCTYPE html>
<html>
<body>
<button this
page</button>
</body>
</html>
17
JavaScript Output
1) Writing into an alert box, using [Link]().
o <script> [Link](5 + 6); </script>
2) Writing into the HTML output using [Link]().
o <script> [Link](5 + 6); </script>
o If you use the [Link]() method after the page has been loaded, it will
overwrite all the existing content in that document.
3) Writing into the browser console, using [Link]().
o <script> [Link](5 + 6); </script>
4) Writing into an HTML element, using innerHTML.
o <p id="demo"></p>
o [Link]("demo").innerHTML = 5 + 6;
18
