1.
Inline JavaScript:
- JavaScript functions are written within the element.
- Reusability issues
- Separation
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline</title>
</head>
<body>
<h2>Click Print Button to Print Page.</h2>
<button onclick="window.print()">Print</button>
</body>
</html>
2. Embedded
- You can write JavaScript functions embedded within the page by using
<script>
</script>
- You can embed in <head> or <body>
FAQ: What is the MIME type for JavaScript?
a) text/javascript
b) text/module
c) text/babel
d) text/jsx etc..
<script type = "text/javascript">
</script>
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Embedded</title>
<script type ="text/javascript">
function PrintPage(){
window.print();
}
</script>
</head>
<body>
<h2>Click Print Button to Print Page.</h2>
<button onclick="PrintPage()">Print</button>
</body>
</html>
FAQ: What is JavaScript Strict Mode?
Ans: Strict mode will not allow developers to violate the standards of coding. It
will reduce code inconsistency.
- To turn on strict mode you have to write the following before any function or
statement. [As First Line] i.e. "use strict";
Syntax:
<script type="text/javascript">
"use strict";
x = 10;
[Invalid]
document.write("x="+x);
</script>
<script type="text/javascript">
"use strict";
var x;
x = 10;
[valid]
document.write("x="+x);
</script>
<script type="text/javascript">
//x not defined
x = 10;
[valid]
document.write("x="+x);
</script>
FAQ: How to target JavaScript for Legacy Browsers?
Ans: By writing the JavaScript code in HTML comments. [<!-- comments -->]
Ex:
<script>
<!--
"use strict";
var x;
x = 30;
document.write("x="+x);
-->
</script>
3. External File
- JavaScript functions are written in a separate file that have extension ".js"
- You have to link script files by using <script> element.
- You can access across pages.
- It increases the number of requests and page load time.
Ex:
1. Add a new file
"print.js"
"use strict";
function PrintPage(){
window.print();
}
2. External.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>External</title>
<script src="/print.js">
</script>
</head>
<body>
<h2>Click Print Button to Print Page.</h2>
<button onclick="PrintPage()">Print</button>
</body>
</html>
FAQ: What is Minification?
Ans: It is the process of compressing JavaScript file.
print.min.js
FAQ: When to use minified files?
Ans: Uncompressed files are used for "Development"
Minified files are used in "Production".
FAQ: What are drawbacks of JavaScript?
Ans: JavaScript is explicitly strictly typed.
JavaScript is not strongly typed.
JavaScript will not support complete OOP.
JavaScript is not an OOP language.
Security issues
Extensibility issues
Depends on lot of DOM manipulations
Lot of coding
Heavy on application
Explicitly handle browser compatibility
Solution:
- TypeScript
FAQ: How JavaScript take control over HTML elements?
Ans: By using various reference methods
All methods are written in next lecture notes
