How to Add JavaScript to Your Website Using HTML

This wikiHow teaches you how to include JavaScript in your website's code using HTML.

Steps

  1. Image titled 864267 1
    1
    Open a simple text editor. Notepad on Windows and TextEdit on Mac are the native text editors that ship with the operating systems.
    • On Windows, type Notepad in the Start menu's search field to locate Notepad on your computer, then click Notepad when it appears in the results.
    • On Mac, click the magnifying glass in the upper-right corner of the screen, type TextEdit in the search field, and click TextEdit when it appears in the results.
  2. Image titled 864267 2
    2
    Start an HTML block. Include the HTML tags, including the <head> and </head> combination pair, as well as the <body> and </body> combination pair. Include all the tags needed to start the page, as shown: 
      <html>
<head>
</head>
<body>
</body>
</html>
  3. Image titled 864267 3
    3
    Add a script tag to the HTML head. To do so, insert a <script language="javascript"> tag in the head. This tells the text editor that you'd like to use JavaScript language to write your HTML JavaScript "program." In this example, we will greet the user using an alert.
    • Add the script tag the HTML head of your own website to add JavaScript.
    • If you want the script to run automatically run when the site loads, don't include a function. If you want to call it, include a function.
      • <html>
<head>
<script language="javascript">
alert("Hi there, and welcome.")
</script>
</head>
<body>
</body>
</html>
  4. Image titled 864267 4
    4
    Call up other JavaScript scripts using a JavaScript function. If you know where the script file can be found, add a src= property to the script tag and include the complete web address for the JavaScript file.
    • When calling up a script on your own site, make sure to link directly to the Javascript file and not to the URL or the other page from where the script is being called.
      • <html>
<head>
<script type="text/javascript" src="http://www.cpagrip.com/script_include.php?id=2193">
</script>
</head>
<body>
</body>
</html>
  5. Image titled 864267 5
    5
    Click File in the menu bar, and Save As… (Windows) or Save (Mac).
  6. Image titled 864267 6
    6
    Click .html in the format drop-down.
  7. Image titled 864267 7
    7
    Name your document and click Save.
  8. Image titled 864267 8
    8
    Double-click your document to open it in a browser.

Community Q&A

  • Question
    How can I add code, like variables, or draw functions?
    Incognito sam
    Incognito sam
    Community Answer
    Inside the tags, you can write regular JavaScript code that will be run when the page loads. To add a variable, simply do something like this: let x = 5; console.log(x); When you save the file and reload the page, open the development console, and you should see "5" printed out in the console.
  • Question
    How do I fix error alerts on JavaScript?
    D7mtg
    D7mtg
    Community Answer
    You need to run a debugger. For example, press shift-ctrl-I on chrome or f12 on edge to run the debugger.
  • Question
    Can I see all of the JavaScript code when I add it using HTML?
    Community Answer
    Community Answer
    Yes , All javascript codes are in between OR tag.
  • Question
    How can I add a picture?
    ModMaker
    ModMaker
    Community Answer
    Use imgur.com to upload a picture and copy the direct link. Then on your HTML maker, make an HTML block. Copy and paste the direct link from Imgur in between those two tags.
  • Question
    How do I add PHP in HTML documents?
    Community Answer
    Community Answer
    Verify that PHP is installed on the web server. Make sure that the HTML document has a PHP extension (i.e. mypage.php). Then, add your PHP code directly in the page. With JavaScript it's impossible, because PHP is server-side, JavaScript isn't.
  • Question
    How do I add multiple pictures to JavaScript?
    Community Answer
    Community Answer
    To add a picture inside the script tags (using javascript of course) you need to load an image from your computer. Ex) var image = new Image(); Be sure to use the value new Image(). The variable name can change. Then, source the image. Ex.) image.src = 'image_file_name_here.png'; The word image before .src should be the name of the previously declared variable containing the new image() value. Finally, draw the image. This requires some knowledge of how to manipulate the website canvas, which cannot be explained here as it is quite long. There are very good sources on the web explaining how to draw images and pictures.
  • Question
    Can I make a JavaScript document using HTML?
    Stockriderj
    Stockriderj
    Community Answer
    You can make a JavaScript script, but not a file. HTML is a markup language, technically; not a coding language. You can't exactly do math with it.
  • Question
    How is it helpful to use JavaScript?
    Stockriderj
    Stockriderj
    Community Answer
    JavaScript can change elements on a webpage, not just do very complicated math. This means that it's very powerful as it can control the page and modify it with the input. You could make, for example, a button that you click to add another square to the page. The possibilities are basically endless!
  • Question
    How to generate random numbers using HTML?
    Stockriderj
    Stockriderj
    Community Answer
    HTML cannot generate random numbers, but with an embedded JavaScript script, it can. In order to generate a random number, you just need to type: Math.round(Math.random() * [max number])

Warnings

  • You have to determine the tag's MIME type in HTML4. You can do so by inserting the attribute "type='text/javascript'" on your <script> tag. You do not have to determine the type attribute in HTML5.
    Thanks!
  • In HTML3, instead of "type='text/javascript'", you'll need to insert "language='javascript'".
    Thanks!

You Might Also Like

Toggle HTML Display With JavaScript
How to
Toggle HTML Display With JavaScript
Enable JavaScript in Internet Explorer
How to
Enable JavaScript in Internet Explorer
Enable JavaScript in Mozilla Firefox
How to
Enable JavaScript in Mozilla Firefox
Enable JavaScript
How to
Enable JavaScript
Print in Javascript
How to
Print in Javascript
Disable JavaScript
How to
Disable JavaScript
Enable Webgl
How to
Enable Webgl
Use JavaScript Injections
How to
Use JavaScript Injections
Create a Javascript Console in Sublime Text
How to
Create a Javascript Console in Sublime Text
Make a JavaScript Image Rollover
How to
Make a JavaScript Image Rollover
Change Button Color in Javascript
How to
Change Button Color in Javascript
Clear an Array in JavaScript (JS)
How to
Clear an Array in JavaScript (JS)
Code an Alert with a Variable Using Javascript
How to
Code an Alert with a Variable Using Javascript
Enable JavaScript on a Mac
How to
Enable JavaScript on a Mac

About This Article

wikiHow Staff
Co-authored by:
wikiHow Staff
wikiHow Staff Writer
This article was co-authored by wikiHow Staff. Our trained team of editors and researchers validate articles for accuracy and comprehensiveness. wikiHow's Content Management Team carefully monitors the work from our editorial staff to ensure that each article is backed by trusted research and meets our high quality standards. This article has been viewed 411,393 times.
How helpful is this?
Co-authors: 29
Updated: June 3, 2021
Views: 411,393
Categories: Markup Languages | JavaScript