How do i link javascript to my website?

Back to Class 9 page »

Including JavaScript in your page is a fairly simple process.

First, What Is JavaScript?

From the W3C Schools Site:

  • 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

Including the JavaScript

You can include JavaScript in your HTML in two ways:

  • Writing the code in your HTML
  • Including it as a link to an external file

For the most part, you will include the JavaScript as an external file.

The Script Tag

The

When using the script tag, we must always use the attribute name and value of type="text/javascript".

Using the script tag to include an external JavaScript file

To include an external JavaScript file, we can use the script tag with the attribute src. You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file.

This script tag should be included between the tags in your HTML document.

JavaScript Files

JavaScript files are not HTML files or CSS files.
  • Always end with the js extension
  • Only include JavaScript

It's customary to put all JavaScript files in a folder called js on websites, like so:

How do i link javascript to my website?

Simple Demo of Including JavaScript

Here's a very simple demonstration of how to include an external JavaScript file into an HTML page.

  • Basic JavaScript Example

Other People's JavaScript

For this class you are not expected to write any actual JavaScript code. Lucky for you, many of people have already written lots of JavaScript and even allow you to use it for free.

JavaScript Frameworks

A Framework is basically a library of code for a certain language. Generally, the framework abstracts common tasks and makes it easier and faster for designers and developers to write their specific code. Frameworks don't really do anything by themselves, they just provide an easier platform for people to build on.

Common JavaScript Frameworks:

  • JQuery
  • Prototype
  • MooTools
  • script.aculo.us

Of these frameworks, JQuery is currently the most popular one. It's also the one you're most like to encounter being used as a buzz word.

JavaScript File Sizes

Many JavaScript files can tend to be rather large, which can slow down the load time of your page. Popular frameworks usually offer a "minified" version of their code. You should always use this version in your pages because it will have a smaller file size.

Back to Class 9 page »

 JavaScript is a very popular scripting language which is used both on the client-side as well as on the server-side. JavaScript is necessary for our web pages as it makes our web page interactive.

There are three basic requirements to become a front-end developer:

  • HTML,
  • CSS,
  • JavaScript

HTML is shortened for Hyper text markup language that provides structure to our webpage and CSS gives style to our pages. Finally, JavaScript as mentioned earlier makes our webpage interactive. JavaScript also helps in altering Html and CSS.

Now a question arises that how can we link/connect JavaScript with HTML. Today in this article we will explore almost all the ways we can link JavaScript to HTML.

What is a script tag?

Before going into the solution of how to link JavaScript to HTML, let’s look at the script tag.

The tag either inside the head of the HTML or at the end of the body. It is totally up to us where we want to put it and when we want JavaScript to load.  Programmers usually call the script tag whenever they want to generate content or apply some action. So by looking at the following code, it is a good practice to load javaScript after the HTML body.

Let’s look at an example:

Example

In this example, first, we created a button in HTML. We set an event to click. Whenever a user clicks on this button the myFunc() function will get activated. After that we put a

We referenced the “code.js”  file using the src attribute of