Where should i write javascript?

Where should i write javascript?

Where should i write javascript?

In this new video 🎬 I explain and show the 3 ways of how to write and execute your JavaScript code.

👩🏻‍💻 Where to write and execute JavaScript

  1. Writing and executing JavaScript directly in the Browser Console is the simplest way to get started. It's practical when you want to try something out, but not an option for real programming. Find out why in the video.
  2. The second option writing JavaScript code in the index.html file (called inline script) is better, but has some disadvantages in structuring and keeping HTML/CSS apart from your logic.
  3. The third and last way to write JavaScript code, is writing the code in a separate JavaScript file and linking this file in the HTML file. This is the way to go, because it is clean and practical when your application gets bigger.

👩🏻‍💻 Simple Text Editor vs. Special Code Editor
I also explain and show you the advantages of writing your JavaScript code in a special code editor instead of writing it in a simple text editor. One example is the highlighting of keywords or syntax error detection, which helps a lot in programming! 💯

👩🏻‍💻 Finally, understanding how files in real projects are structured and referenced will help you a lot when getting started.

Really understanding the above topics, will help you a lot when starting coding. 🙂


✅ I will upload a complete JavaScript Tutorial for absolute beginners. So if you are completely new to programming this will give you a step by step guide to learn JavaScript. You can subscribe on Youtube to get notified 🙂 ✅

I'm happy to connect with you on

  • Twitter
  • YouTube
  • Instagram

Chapter 1. Writing Your First JavaScript Program

By itself, HTML doesn’t have any smarts: It can’t do math, it can’t figure out if someone has correctly filled out a form, and it can’t make decisions based on how a web visitor interacts with it. Basically, HTML lets people read text, look at pictures, watch videos, and click links to move to other web pages with more text, pictures, and videos. In order to add intelligence to your web pages so they can respond to your site’s visitors, you need JavaScript.

JavaScript lets a web page react intelligently. With it, you can create smart web forms that let visitors know when they’ve forgotten to include necessary information. You can make elements appear, disappear, or move around a web page (see Figure 1-1). You can even update the contents of a web page with information retrieved from a web server—without having to load a new web page. In short, JavaScript lets you make your websites more engaging, effective, and useful.

Note

Actually, HTML5 does add some smarts to HTML—including basic form validation. But because not all browsers support these nifty additions (and because you can do a whole lot more with forms and JavaScript), you still need JavaScript to build the best, most user-friendly and interactive forms. You can learn more about HTML5 and web forms in Ben Henick’s HTML5 Forms (O’Reilly) and Gaurav Gupta’s Mastering HTML5 Forms (Packt Publishing).

Where should i write javascript?

Figure 1-1. The Interactive Ear (http://www.amplifon.co.uk/interactive-ear/), an interactive guide to human hearing, lets visitors learn about and explore the different parts of the human ear. New information appears in response to mouse movements and clicks. With JavaScript, you can create your own interactive effects.

Introducing Programming

For a lot of people, the term “computer programming” conjures up visions of super-intelligent nerds hunched over keyboards, typing nearly unintelligible gibberish for hours on end. And, honestly, some programming is like that. Programming can seem like complex magic that’s well beyond the average mortal. But many programming concepts aren’t difficult to grasp, and as programming languages go, JavaScript is a good first language for someone new to programming.

Still, JavaScript is more complex than either HTML or CSS, and programming often is a foreign world to web designers; so one goal of this book is to help you think more like a programmer. Throughout this book, you’ll learn fundamental programming concepts that apply whether you’re writing JavaScript, ActionScript, or even writing a desktop program using C++. More importantly, you’ll learn how to approach a programming task so you’ll know exactly what you want to do before you start adding JavaScript to a web page.

Many web designers are immediately struck by the strange symbols and words used in JavaScript. An average JavaScript program is sprinkled with symbols ({ } [ ] ; , () !=) and full of unfamiliar words (var, null, else if). In many ways, learning a programming language is a lot like learning another language. You need to learn new words, new punctuation, and understand how to put them together so you can communicate successfully.

Every programming language has its own set of keywords and characters, and its own set of rules for putting those words and characters together—the language’s syntax. You’ll need to memorize the words and rules of the JavaScript language (or at least keep this book handy as a reference). When learning to speak a new language, you quickly realize that placing an accent on the wrong syllable can make a word unintelligible. Likewise, a simple typo or even a missing punctuation mark can prevent a JavaScript program from working, or trigger an error in a web browser. You’ll make plenty of mistakes as you start to learn to program—that’s just the nature of programming.

At first, you’ll probably find JavaScript programming frustrating—you’ll spend a lot of your time tracking down errors you made when typing the script. Also, you might find some of the concepts related to programming a bit hard to follow at first. But don’t worry: If you’ve tried to learn JavaScript in the past and gave up because you thought it was too hard, this book will help you get past the hurdles that often trip up folks new to programming. (And if you do have programming experience, this book will teach you JavaScript’s idiosyncrasies and the unique concepts involved in programming for web browsers.)

In addition, this book isn’t just about JavaScript—it’s also about jQuery, the world’s most popular JavaScript library. jQuery makes complex JavaScript programming easier…much easier. So with a little bit of JavaScript knowledge and the help of jQuery, you’ll be creating sophisticated, interactive websites in no time.

What’s a Computer Program?

When you add JavaScript to a web page, you’re writing a computer program. Granted, most JavaScript programs are much simpler than the programs you use to read email, retouch photographs, and build web pages. But even though JavaScript programs (also called scripts) are simpler and shorter, they share many of the same properties of more complicated programs.

In a nutshell, any computer program is a series of steps that are completed in a designated order. Say you want to display a welcome message using the web-page visitor’s name: “Welcome, Bob!” There are several things you’d need to do to accomplish this task:

  1. Ask the visitor’s name.

  2. Get the visitor’s response.

  3. Print (that is, display) the message on the web page.

While you may never want to print a welcome message on a web page, this example demonstrates the fundamental process of programming: Determine what you want to do, then break that task down into individual steps. Every time you want to create a JavaScript program, you must go through the process of determining the steps needed to achieve your goal. Once you know the steps, you’ll translate your ideas into programming code—the words and characters that make the web browser behave how you want it to.

How to Add JavaScript to a Page

Web browsers are built to understand HTML and CSS and convert those languages into a visual display on the screen. The part of the web browser that understands HTML and CSS is called the layout or rendering engine. But most browsers also have something called a JavaScript interpreter. That’s the part of the browser that understands JavaScript and can execute the steps of a JavaScript program. The web browser is usually expecting HTML, so you must specifically tell the browser when JavaScript is coming by using the tag, it knows it’s reached the end of the JavaScript program and can get back to its normal duties.

Much of the time, you’ll add the

The

In fact, web browsers let you leave out the type attribute in HTML 4.01 and XHTML 1.0 files as well—the script will run the same; however, your page won’t validate correctly without the type attribute (see the box on Validating Web Pages for more on validation). This book uses HTML5 for the doctype, but the JavaScript code will be the same and work the same for HTML 4.01, and XHTML 1.

You then add your JavaScript code between the opening and closing

You’ll find out what this JavaScript does in a moment. For now, turn your attention to the opening and closing

The src attribute of the

You can (and often will) attach multiple external JavaScript files to a single web page. For example, you might have created one external JavaScript file that controls a drop-down navigation panel, and another that lets you add a nifty slideshow to a page of photos. On your photo gallery page, you’d want to have both JavaScript programs, so you’d attach both files.

In addition, you can attach external JavaScript files and add a JavaScript program to the same page like this:





My Web Page



Where should i write javascript?

Figure 1-2. Nike.com’s website uses JavaScript extensively to create a compelling showcase for their products. The home page (top) includes a row of navigation buttons along the top—Men, Women, Kids, and so on—that, when moused over, reveal a panel of additional navigation options. For example, mousing over the Sports button (circled in bottom image) reveals a panel listing different sports that Nike makes products for.

Just remember that you must use one set of opening and closing . The code should now look like this:



In this example, the stuff you just typed is shown in boldface. The two HTML tags are already in the file; make sure you type the code exactly where shown.

  • Launch a web browser and open the hello.html file to preview it.

    A JavaScript Alert box appears (see Figure 1-3). Notice that the page is blank when the alert appears. (If you don’t see the Alert box, you probably mistyped the code listed in the previous steps. Double-check your typing and read the following Tip.)

    Tip

    When you first start programming, you’ll be shocked at how often your JavaScript programs don’t seem to work…at all. For new programmers, the most common cause of nonfunctioning programs is simple typing mistakes. Always double-check to make sure you spelled commands (like alert in the first script) correctly. Also, notice that punctuation frequently comes in pairs (the opening and closing parentheses, and single-quote marks from your first script, for example). Make sure you include both opening and closing punctuation marks when they’re required.

  • Click the Alert box’s OK button to close it.

    When the Alert box disappears, the web page appears in the browser window.

    Although this first program isn’t earth-shatteringly complex (or even that interesting), it does demonstrate an important concept: A web browser will run a JavaScript program the moment it reads in the JavaScript code. In this example, the alert() command appeared before the web browser displayed the web page, because the JavaScript code appeared before the HTML in the tag. This concept comes into play when you start writing programs that manipulate the HTML of the web page—as you’ll learn in Chapter 3.

  • Where should i write javascript?

    Figure 1-3. The JavaScript Alert box is a quick way to grab someone’s attention. It’s one of the simplest JavaScript commands to learn and use.

    Note

    Some versions of Internet Explorer (IE) don’t like to run JavaScript programs in web pages that you open directly off your hard drive, for fear that the code might do something harmful. So when you try to preview the tutorial files for this book in Internet Explorer, you might see a message saying that IE has blocked the script. Click “Allow blocked content.”

    This annoying behavior only applies to web pages you preview from your computer, not to files you put up on a web server. To avoid hitting the “Allow blocked content” button over and over, preview pages in a different web browser, like Chrome or Firefox.

    Writing Text on a Web Page

    The script in the previous section popped up a dialog box in the middle of your monitor. What if you want to print a message directly onto a web page using JavaScript? There are many ways to do so, and you’ll learn some sophisticated techniques later in this book. However, you can achieve this simple goal with a built-in JavaScript command, and that’s what you’ll do in your second script:

    1. In your text editor, open the file hello2.html.

      While

    Like the alert() function, document.write() is a JavaScript command that literally writes out whatever you place between the opening and closing parentheses. In this case, the HTML

    Hello world!

    is added to the page: a paragraph tag and two words.

  • Save the page and open it in a web browser.

    The page opens and the words “Hello world!” appear below the headline (see Figure 1-4).

  • Note

    The tutorial files you downloaded also include the completed version of each tutorial. If you can’t seem to get your JavaScript working, compare your work with the file that begins with complete_ in the same folder as the tutorial file. For example, the file complete_hello2.html contains a working version of the script you added to file hello2.html.

    The two scripts you just created may leave you feeling a little underwhelmed with JavaScript…or this book. Don’t worry—this is only the beginning. It’s important to start out with a full understanding of the basics. You’ll be doing some very useful and complicated things using JavaScript in just a few chapters. In fact, in the remainder of this chapter you’ll get a taste of some of the advanced features you’ll be able to add to your web pages after you’ve worked your way through the first two parts of this book.

    Attaching an External JavaScript File

    As discussed on External JavaScript Files, you’ll usually put JavaScript code in a separate file if you want to use the same scripts on more than one web page. You then instruct your web pages to load that file and use the JavaScript inside it. External JavaScript files also come in handy when you’re using someone else’s JavaScript code. In particular, there are collections of JavaScript code called libraries, which provide useful JavaScript programming. Usually, these libraries make it easy to do something that’s normally quite difficult. You’ll learn more about JavaScript libraries on About JavaScript Libraries, and, in particular, the JavaScript library this book (and much of the Web) uses—jQuery.

    Where should i write javascript?

    Figure 1-4. Wow. This script may not be something to “document.write” home about—ha, ha, JavaScript humor—but it does demonstrate that you can use JavaScript to add content to a web page, a trick that comes in handy when you want to display messages (like “Welcome back to the site, Dave”) after a web page has downloaded.

    But for now, you’ll get experience attaching an external JavaScript file to a page, and writing a short program that does something cool:

    1. In your text editor, open the file fadeIn.html.

      This page contains just some simple HTML—a few

      tags, a headline, and a couple of paragraphs. You’ll be adding a simple visual effect to the page, which causes all of the content to slowly fade into view.

    2. Click in the blank line between the and closing tags near the top of the page, and type:

      This code links a file named jquery.min.js, which is contained in a folder named _js, to this web page. When a web browser loads this web page, it also downloads the jquery.min.js JavaScript file and runs the code inside it.

      Next, you’ll add your own JavaScript programming to this page.

      Note

      The min part means that the file is minimized—a process that removes unneeded whitespace and condenses the code to make the file smaller so that it downloads faster.

    3. Press Return to create a new blank line, and then type:

      This ends the block of JavaScript code. Now you’ll add some programming.

    4. Click the empty line between the opening and closing script tags and type:

      $(document).ready(function() {

      You’re probably wondering what the heck that is. You’ll find out all the details of this code on Adding jQuery to a Page, but in a nutshell, this line takes advantage of the programming that’s inside the jquery.min.js file to make sure that the browser executes the next line of code at the right time.

    5. Hit return to create a new line, and then type:

      $('header').hide().slideDown(3000);

      This line does something magical: It makes the “JavaScript & jQuery The Missing Manual” header first disappear and then slowly slide down onto the page over the course of 3 seconds (or 3,000 milliseconds). How does it do that? Well, that’s part of the magic of jQuery, which makes complex effects possible with just a single line of code.

    6. Hit Return one last time, and then type:

      });

      This code closes up the JavaScript code, much as a closing tag indicates the end of a JavaScript program. Don’t worry too much about all those weird punctuation marks—you’ll learn how they work in detail later in the book. The main thing you need to make sure of is to type the code exactly as it’s listed here. One typo, and the program may not work.

      The final code you added to the page should look like the bolded text in the following:

      
      
      
      

      Tip

      To make your programming easier to read, it’s a good idea to indent code. Much as you indent HTML tags to show which tags are nested inside of other tags, you can indent lines of code that are inside another block of code. For example, the line of code you added in step 6 is nested inside the code for steps 5 and 7, so hitting Tab or pressing the spacebar a couple of times before typing the code for step 6 can make your code easier to understand (as pictured in the final code listed at the end of step 7).

    7. Save the HTML file, and open it in a web browser.

      You should see the headline—Sliding Down—plus a paragraph and the footer at the bottom of the browser window, followed by the boxes containing “JavaScript & jQuery: The Missing Manual” slowly slide down into place. Change the number 3000 to different values (like 250 and 10000) to see how that changes the way the page works.

    Note

    If you try to preview this page in Internet Explorer and it doesn’t seem to do anything, you’ll need to click the “Enable blocked content” box that appears at the bottom of the page (see the Note on Note).

    As you can see, it doesn’t take a whole lot of JavaScript to do some amazing things to your web pages. Thanks to jQuery, you’ll be able to create sophisticated, interactive websites even if you’re not a programming wizard. However, you’ll find it helps to know the basics of JavaScript and programming. Chapters Chapter 2 and Chapter 3 will cover the basics of JavaScript to get you comfortable with the fundamental concepts and syntax that make up the language.

    Tracking Down Errors

    The most frustrating moment in JavaScript programming comes when you try to view your JavaScript-powered page in a web browser…and nothing happens. It’s one of the most common experiences for programmers. Even experienced programmers often don’t get it right the first time they write a program, so figuring out what went wrong is just part of the game.

    Most web browsers are set up to silently ignore JavaScript errors, so you usually won’t even see a “Hey, this program doesn’t work!” dialog box. (Generally, that’s a good thing, as you don’t want a JavaScript error to interrupt the experience of viewing your web pages.)

    So how do you figure out what’s gone wrong? There are many ways to track errors in a JavaScript program. You’ll learn some advanced debugging techniques in Chapter 17, but the most basic method is to consult the web browser. Most web browsers keep track of JavaScript errors and record them in a separate window called an error console. When you load a web page that contains an error, you can then view the console to get helpful information about the error, like which line of the web page it occurred in and a description of the error.

    Often, you can find the answer to the problem in the error console, fix the JavaScript, and then the page will work. The console helps you weed out the basic typos you make when you first start programming, like forgetting closing punctuation, or mistyping the name of a JavaScript command. You can use the error console in your favorite browser, but because scripts sometimes work in one browser and not another, this section shows you how to turn on the JavaScript console in all major browsers, so you can track down problems in each.

    The Chrome JavaScript Console

    Google’s Chrome browser is beloved by many a web developer. Its DevTools feature gives you many ways to troubleshoot HTML, CSS, and JavaScript problems. Also, its JavaScript console is a great place to begin tracking down errors in your code. It not only describes the errors it finds, it also identifies the line in your code where each error occurred.

    To open the JavaScript console, click the Customize menu button (circled in Figure 1-5) and choose Tools→JavaScript Console. Or use the keyboard shortcut Ctrl+Shift+J (Windows) or ⌘-Option-J (Mac).

    Where should i write javascript?

    Figure 1-5. Click the Customize menu (circled) to access the JavaScript console as well as other helpful tools. Choosing the Developer Tools option is another way to get to the console, as the JavaScript console is part of a larger set of Chrome tools called the Developer Tools (DevTools for short). You’ll learn more about those tools in Chapter 17.

    After you open the console, you can examine any errors that appear in the current page. For example, in Figure 1-6, the console identifies the error as an “Uncaught SyntaxError: Unexpected token ILLEGAL.” OK, it may not be immediately obvious what that means, but as you encounter (and fix) more errors you’ll get used to these terse descriptions. Basically, a syntax error points to some kind of typographical error—an error with the syntax or language of the program. The “Unexpected token ILLEGAL” part just means that the browser has encountered an illegal character, or (and here’s the tricky part) that there’s a missing character. In this case, looking closely at the code you can see there’s an opening single quote mark before “slow” but no final quote mark.

    The console also identifies the name of the file the error is in (complete_slide.html, in this case) and the line number the error occurs (line 10). Click the filename, and Chrome opens the file above the console and briefly highlights the line (see Figure 1-5).

    Tip

    Because the error console displays the line number where the error occurred, you may want to use a text editor that can show line numbers. That way, you can easily jump from the error console to your text editor and identify the line of code you need to fix.

    Where should i write javascript?

    Figure 1-6. Chrome’s JavaScript console identifies errors in your programs. Click the filename listed to the right of the error, and Chrome briefly highlights the page with the error (circled).

    Unfortunately, there’s a long list of things that can go wrong in a script, from simple typos to complex errors in logic. When you’re just starting out with JavaScript programming, many of your errors will be the simple typographic sort. For example, you might forget a semicolon, quote mark, or parenthesis, or misspell a JavaScript command. You’re especially prone to typos when following examples from a book (like this one). Here are a few common mistakes you might make and the (not-so obvious) error messages you may encounter:

    • Missing punctuation. As mentioned earlier, JavaScript programming often involves lots of symbol pairs like opening and closing parentheses and brackets. For example, if you type alert(‘hellO’;—leaving off the closing parenthesis—you’ll probably get the: “Unexpected token;” message, meaning that Chrome was expecting something other than the character it’s showing. In this case, it encountered the semicolon instead of the closing parenthesis.

    • Missing quote marks. A string is a series of characters enclosed by quote marks (you’ll learn about these in greater detail on Types of Data). For example, ‘hello’ is a string in the code alert(‘hellO’);. It’s easy to forget either the opening or closing quote mark. It’s also easy to mix up those quote marks; for instance, by pairing a single-quote with a double quote like this: alert(‘hello”);. In either case, you’ll probably see an “Uncaught SyntaxError: Unexpected token ILLEGAL” error.

    • Misspelling commands. If you misspell a JavaScript command—aler(‘hellO’);—you’ll get an error saying that the misspelled command isn’t defined: for example, “Uncaught ReferenceError: aler is not defined,” if you misspell the alert command. You’ll also encounter problems when you misspell jQuery functions (like the .hide() and .slideDown() functions in the previous tutorial). In this case, you’ll get a different error. For example, if you mistyped “hide” as “hid” in step 6 on Attaching an External JavaScript File, Chrome will give you this error: “Uncaught TypeError: Object [object Object] has no method ‘hid’”.

    • Syntax error. Occasionally, Chrome has no idea what you were trying to do and provides this generic error message. A syntax error represents some mistake in your code. It may not be a typo, but you may have put together one or more statements of JavaScript in a way that isn’t allowed. In this case, you need to look closely at the line where the error was found and try to figure out what mistake you made. Unfortunately, these types of errors often require experience with and understanding of the JavaScript language to fix.

    As you can see from the preceding list, many errors you’ll make simply involve forgetting to type one of a pair of punctuation marks—like quote marks or parentheses. Fortunately, these are easy to fix, and as you get more experience programming, you’ll eventually stop making them almost completely (no programmer is perfect).

    The Internet Explorer Console

    Internet Explorer provides a sophisticated set of developer tools for not only viewing JavaScript errors, but also analyzing CSS, HTML, and transfers of information over the network. When open, the developer tool window appears in the bottom half of the browser window. Press the F12 key to open the developer tools, and press it again to close them. You’ll find JavaScript errors listed under the Console tab (circled in Figure 1-7).

    Note

    If you first open a web page and then open the Internet Explorer console, you won’t see any errors (even if there are some). You need to reload the page to see any errors. Once the console is open, you’ll see errors on the pages you visit as they load.

    IE’s Console displays error messages similar to those described earlier for Chrome. However, sometimes they’re very different. For example, IE’s “Unterminated string constant” is an “Unexpected token ILLEGAL” error in Chrome. Like Chrome, Internet Explorer identifies the line of code in the HTML file where the error occurred, which you can click to see the actual code where the error occurs.

    Where should i write javascript?

    Figure 1-7. The Internet Explorer developer tools provide access to JavaScript errors that occur on a page, as well as a whole lot of other information.

    The Firefox JavaScript Web Console

    Mozilla’s Firefox browser also gives you a console to view JavaScript errors. To open the JavaScript console, on Windows click the Firefox tab in the top left of the browser window and choose Web Developer→Web Console. On a Mac, select Tools→Web Developer→Web Console. Or use the keyboard shortcuts Ctrl+Shift+I (Windows) or ⌘-Option-K (Mac).

    Once the console opens, you’ll see any JavaScript errors on the page. Unfortunately, Firefox’s Web Console is more like a fire hose of data than a simple JavaScript error reporter (Figure 1-8). That’s because it provides information on all sorts of things: files downloaded, CSS and HTML errors, and more.

    Note

    The Firebug plug-in (http://getfirebug.com) greatly expands on Firefox’s Error Console. In fact, it provided the model for the developer tools in Internet Explorer, Chrome, and Safari (discussed next).

    Where should i write javascript?

    Figure 1-8. If you don’t want to see all of the messages in Firefox’s Web Console, just click the button for the type of message you wish to hide. For example, click the CSS button to hide CSS error messages, the Security button to hide security warnings, and so on. You’ll know if the button is disabled because it looks lighter gray, like the CSS and Security buttons here. A button is enabled when it’s darker and looks like it has been pressed “in,” like the Net, JS (short for JavaScript), and Logging buttons here.

    The Safari Error Console

    Safari’s error console is available from the Develop menu: Develop→Show Error Console (or, if you’re on a Mac, use the Option-⌘-C keyboard shortcut). However, the Develop menu isn’t normally turned on when Safari is installed, so there are a couple of steps to get to the JavaScript console.

    To turn on the Develop menu, you need to first access the Preferences window. Choose Safari→Preferences. Once the Preferences window opens, click the Advanced button. Turn on the “Show Develop menu in menu bar” box and close the Preferences window.

    When you restart Safari, the Develop menu will appear between the Bookmarks and Window menus in the menu bar at the top of the screen. Select Develop→Show Error Console to open the console (see Figure 1-9).

    Where should i write javascript?

    Figure 1-9. The Safari Error Console displays the name of the JavaScript error, the filename (and location), and the line on which Safari encountered the error. Each tab or browser window has its own error console, so if you’ve already opened the console for one tab, you need to choose Develop→Show Error Console again if you wish to see an error for another tab or window. In addition, if you reload a page, Safari doesn’t clear any prior errors on that page, so you can end up with a long list of old, fixed errors as you work on a page and reload it. The answer: click the Trash icon (circled) to remove the list of old errors, and then reload the page.

    Note

    If you’re on Windows, you may have an old version of the Safari browser. Apple has stopped updating Safari for Windows, so the Safari information shown here may not apply to you.

    Get JavaScript & jQuery: The Missing Manual, 3rd Edition now with the O’Reilly learning platform.

    O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.

    Where do I write my JavaScript code?

    To write a JavaScript, you need a web browser and either a text editor or an HTML editor. Once you have the software in place, you can begin writing JavaScript code. To add JavaScript code to an HTML file, create or open an HTML file with your text/HTML editor.

    Where should I run JavaScript?

    To execute JavaScript in a browser you have two options — either put it inside a script element anywhere inside an HTML document, or put it inside an external JavaScript file (with a . js extension) and then reference that file inside the HTML document using an empty script element with a src attribute.