javascript writing format in conjunction with html

# Web Site Writing Basics

# javascript

Writing JavaScript (JS) in conjunction with HTML can take many forms, depending on the needs and complexity of the project. Here are some of the main formats used:

1. Embedding code in the < script > tag (Internal JS)

You can write JavaScript code directly within the same HTML file. Using the < script > tag, it is typically placed at the end of the < body > tag, ensuring that all HTML elements are finished loading before the script starts.

Example:

HTML

< html >

< head >

< title > Internal JavaScript < / title >

< / head >

< body >

< h1 > Internal JavaScript implementation < / h1 >

< button onclick = "showAlert ()" > Click here < / button >

< script >

/ / The JavaScript code is here.

showAlert function () {

alert ("Hello! This is a message from Internal JavaScript");

}

< / script >

< / body >

< / html >

2. External JS file link

This is the most recommended format for large projects or projects with a lot of JavaScript code. You will write the entire JavaScript code in a separate file (usually ending with the extension .js) and link it to an HTML file using the < script > tag with the src attribute.

Advantages:

Easy to handle: HTML and JavaScript code are separate, making it easier to maintain and read.

Reusable: A single JS file can be combined with multiple HTML pages.

Performance: The browser can cache (Cache) external JS files, making them load faster on the next visit.

Example:

index.html file:

HTML

< html >

< head >

< title > External JavaScript < / title >

< / head >

< body >

< h1 > External JavaScript implementation < / h1 >

< button id = "myButton" > Click here < / button >

< script src = "script.js" > < / script >

< / body >

< / html >

File script.js:

JavaScript

/ / External JavaScript code is in this file.

document.getElementById ('myButton') .addEventListener ('click', function () {

alert ("Hello! This is a message from External JavaScript");

});

3.Writing code in the HTML attribute (Inline JS)

This is to write short JavaScript code directly in the attributes of HTML tags such as onclick, onmouseover, or onchange.

Caution:

Not recommended for complex code or bulk code

This makes the code difficult to read and difficult to maintain.

Against the Separation of Concerns

Example:

HTML

< html >

< body >

< h1 > Inline JavaScript implementation < / h1 >

< button onclick = "alert ('Hello from Inline JS!');" > Click here < / button >

< / body >

< / html >

Summary and Recommended Practices

Format Method Recommended for

External JS External .js file. Welded with < script src = "file .js" > < / script > all projects, especially large projects ().

Internal JS code in a < script > tag inside a short HTML code file or a simple experiment.

Inline JS code in HTML attributes (e.g. onclick) Avoid if you can, used only for simplest functions