Javascript
What is JavaScript?
JavaScript was designed to add interactivity to HTML pages
JavaScript is a scripting language
A scripting language is a lightweight programming language
JavaScript is usually embedded directly into HTML pages
JavaScript is an interpreted language (means that scripts execute without preliminary
compilation)
Everyone can use JavaScript without purchasing a license
What can a JavaScript do?
JavaScript gives HTML designers a programming tool - HTML authors are normally not
programmers, but JavaScript is a scripting language with a very simple syntax! Almost
anyone can put small "snippets" of code into their HTML pages
JavaScript can put dynamic text into an HTML page - A JavaScript statement like this:
[Link]("<h1>” " + name + "</h1> ") can write a variable text into an HTML page
JavaScript can react to events - A JavaScript can be set to execute when something happens,
like when a page has finished loading or when a user clicks on an HTML element
JavaScript can read and write HTML elements - A JavaScript can read and change the content
of an HTML element
JavaScript can be used to validate data - A JavaScript can be used to validate form data before
it is submitted to a server. This saves the server from extra processing
JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the
visitor's browser, and - depending on the browser - load another page specifically designed for
that browser
JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve
information on the visitor's computer
The Real Name is ECMAScript
JavaScript's official name is ECMAScript.
ECMAScript is developed and maintained by the ECMA organization.
ECMA-262 is the official JavaScript standard.
The language was invented by Brendan Eich at Netscape (with Navigator 2.0), and has
appeared in all Netscape and Microsoft browsers since 1996. The development of ECMA-262
started in 1996, and the first edition of was adopted by the ECMA General Assembly in June
1997. The standard was approved as an international ISO (ISO/IEC 16262) standard in 1998.
To insert a JavaScript into an HTML page, we use the <script> tag. Inside the <script> tag
we use the type attribute to define the scripting language.
So the <script type=”text/javascript”> and </script> tells where the JavaScript starts and
ends:
The [Link] command is a standard JavaScript command for writing output to a
page.
By entering the [Link] command between the tags, the browser will recognize it as
a JavaScript command and execute the code line. In this case the browser will write Hello
World! to the page:
Where to Put the JavaScript
JavaScripts in a page will be executed immediately while the page loads into the browser.
This is not always what we want. Sometimes we want to execute a script when a page loads,
or at a later event, such as when a user clicks a button. When this is the case we put the
script inside a function.
Scripts in <head>
Scripts to be executed when they are called, or when an event is triggered, are placed in
functions.
Put your functions in the head section, this way they are all in one place, and they do not
interfere with page content.
Scripts in <body>
If you don't want your script to be placed inside a function, or if your script should write
page content, it should be placed in the body section.
Using an External JavaScript
If you want to run the same JavaScript on several pages, without having to write the same
script on every page, you can write a JavaScript in an external file. Save the external
JavaScript file with a .js file extension.
Syntax
<script src="url_of_js_file"> </script>
Multiple Script files can also be added to one page using several <script> tags.
<script src="[Link]"> </script>
<script src="[Link]"> >/script>
<html>
<head>
<title>External JavaScript Example</title>
<script src="[Link]"></script>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
</body>
</html>
// Filename: [Link]
let h2 = [Link]("demo");
[Link] = "This text is added by External JavaScript";
Output
In this example
This HTML file contains a <button> element. When clicked, it calls the showMessage() function
defined in the external JavaScript file ([Link]).
[Link]("demo"): Finds the HTML element with the ID demo. However, in
this code, there's no element with the id="demo", so this part of the code will cause an error
unless the element is added to the HTML.
[Link] = "This text is added by External JavaScript";: Changes the inner text of the
element to display the message.
Advantages
Reusability: The same JavaScript file can be linked to multiple HTML pages, improving code
reuse.
Better organization: Separates HTML structure from JavaScript, keeping the code cleaner and
more maintainable.
Faster load times: Browsers cache external JavaScript files, making subsequent page loads faster.
Disadvantages
Additional HTTP request: Each external file requires an extra request to the server, which can
slightly increase load time for the first visit.
File path issues: If the file path is incorrect, the script won’t load, leading to errors.
Dependency on external file: If the external file is missing or fails to load, the JavaScript won’t
work.