Quick Start | Ucode

Appearance

On this page

Quick Start ​

JavaScript code can be embedded anywhere in a web page, but it is typically placed in the <head> section:

html
<html>
<head>
    <script>
        alert('Hello, world');
    </script>
</head>
<body>
    ...
</body>
</html>

The code within <script>...</script> is JavaScript, which the browser will execute directly.

Another method is to place JavaScript code in a separate .js file and include it in HTML using <script src="..."></script>:

html
<html>
<head>
    <script src="/static/js/abc.js"></script>
</head>
<body>
    ...
</body>
</html>

This way, the browser will execute /static/js/abc.js. Using a separate .js file makes code maintenance easier, and multiple pages can reference the same file.

You can include multiple .js files in the same page, and you can write <script>...</script> multiple times; the browser will execute them in order.

Sometimes, you may see a <script> tag with a type attribute:

html
<script type="text/javascript">
    ...
</script>

However, this is unnecessary because the default type is JavaScript, so there's no need to specify it explicitly.

How to Write JavaScript ​

You can write JavaScript code using any text editor. We recommend the following:

  • Visual Studio Code: A free, cross-platform mini version of Visual Studio with built-in JavaScript support—highly recommended!
  • Sublime Text: A great text editor that is free, though it shows prompts if not registered.
  • IntelliJ IDEA: A highly integrated IDE, highly recommended for use.

Note: Do not use Word or Notepad to write JavaScript or HTML, as formatted text will not be read correctly by browsers. Avoid Notepad as it may add a BOM header when saving UTF-8 files.

How to Run JavaScript ​

To run JavaScript in the browser, you must first have an HTML page that includes JavaScript. Load the HTML page in the browser to execute the JavaScript code.

You might think of directly creating HTML and JavaScript files on your hard drive and opening them in the browser to see the effect. While this works for some JavaScript, due to security restrictions, JavaScript code that requires network access cannot execute with file:// addresses. You will need to set up a web server to run all JavaScript code properly using http://.

So, I recommend everyone use IntelliJ IDEA to learn JavaScript. For the HTML files we create, the IDE will automatically set up a temporary server to run the JavaScript code, allowing us to focus solely on the code.

  • First, create an Empty Projectnew-js-proj.webp
  • Then, create a html file new-html-file.webp
  • Run javascript code run-js.webp

Debugging ​

As the saying goes, “To do a good job, one must sharpen their tools.” When writing JavaScript, if you expect to display ABC but see XYZ instead, don’t panic. As a beginner, believe that JavaScript itself isn’t the problem; if there’s an issue, it’s likely in your code.

To find the problem, debugging is essential.

How do you debug JavaScript in the browser?

First, install Google Chrome, which is very developer-friendly and allows easy debugging of JavaScript. Download Chrome here.

After installation, open any webpage, click on the menu "View" → "Developer" → "Developer Tools," and the browser window will split, showing the developer tools below:

devtool.webp

Click "Console" to enter JavaScript code directly and execute it by pressing Enter.

To view a variable's content, type console.log(a); in the Console and press Enter to see the variable’s value.

Close the Console by clicking the "×" button in the upper right. Mastering the Console is essential, as you will often need to run test code there while writing JavaScript.

If you seek a deeper understanding, explore the "Sources" section of the developer tools to learn about breakpoints and step-by-step execution.

Practice ​

Open the Google homepage and check the page source to find the referenced JavaScript files and any JavaScript code written directly on the page. Then, open the developer tools in Chrome and type console.log('Hello'); in the console to view the result of executing the JavaScript code.