Javascript

JavaScript adds interactivity and visual appeal. Without JS, you wouldn't have interactive elements, animated graphics, and more!

How do you add JavaScript to your webpage?

In HTML, JavaScript code is inserted between the <script> and </script> tag.

Old JavaScript examples may use a type attribute <script type="text/javascript">. The type attribute is not required. JavaScript is the default scripting language in HTML.

Where do you add Javascript in HTML?

You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

Javascript Functions and Events

function functionName() { ... } A JavaScript function is a block of JavaScript code, that can be executed when called for by referencing the functionName followed by open and closed parantheses.

An HTML event can be something the browser or a user does. An example of HTML events are an input field was changed or button was clicked. Javascript functions can be used to add event handlers to HTML elements.

<element event='functionName()'> adds an event handler, with JavaScript code, to the HTML element using the event attribute.

Examples

Button Click

In this example, a JavaScript function is placed in the <head> section of this HTML page. The function is invoked (called) when a button is clicked. The same function can be added in the <body> section.

The function name is buttonClick and it is called from an onclick event like onclick="buttonClick()"

The function logic document.getElementById("demo").innerHTML = "Paragraph changed!" changes the HTML content of an element with id="demo".

Example of content in <p> tag changed from a button click event.

Input Change

In this example, a JavaScript function is placed in the <body> section of this HTML page. The function is invoked (called) when an input is changed. The same function can be added in the <head> section.

The function name is inputChange and it is called from an onchange event like onchange="inputChange()"

The function logic alert("Your favorite color is " + val + "!"); displays an alert box with content and the user provided value.

Example of content captured in <input> tag displayed in an alert notification from an input change event.

Type your favorite color then press enter or click outside the field to fire the onchange event.

Add script to a JavaScript file

Scripts can also be placed in external files.
Javascript files have the file extension .js.

Javascript defined in a JS file can be referenced in 3 different ways

With a full URL like <script src="https://kendra-intro-to-web-dev-winter-23.glitch.me/javascript.js"></script>
If the file is in a different directory from your HTML files, reference from the file path like <script src="/js/javascript.js"></script>
Without any path like <script src="javascript.js"></script>

Placing scripts in external files has some advantages

Improves code readability and maintainability by separting HTML and Javascript code.
Prevents code duplication! Code duplication is when the same code is used in many different web pages.
You can add several script files to one page by using several script tags. Each script is referenced by it's function name.

Example

I added the buttonClick() Javascript function to the javascript.js file. If I add this code snippet <script src="javascript.js"></script> to the <body> or <head> section, the function will be called from the element the calling function is tied to.