{"id":18,"date":"2024-11-04T03:30:53","date_gmt":"2024-11-04T03:30:53","guid":{"rendered":"https:\/\/techkubo.com\/javascript\/?p=18"},"modified":"2025-05-13T10:19:50","modified_gmt":"2025-05-13T10:19:50","slug":"javascript-where-to","status":"publish","type":"post","link":"https:\/\/techkubo.com\/javascript\/javascript-where-to\/","title":{"rendered":"JavaScript Where To"},"content":{"rendered":"\n

Inline JavaScript<\/strong><\/h2>\n\n\n\n

Inline JavaScript is written directly within an HTML element’s attribute. This method is typically used for small snippets of code.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Explanation of Code:<\/strong><\/p>\n\n\n\n

In this example, the JavaScript code is placed within the onclick<\/code> attribute of the <button><\/code> element. When the button is clicked, an alert box displays the message “Hello, World!”.<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Inline JavaScript Example<\/title>\n<\/head>\n<body>\n    <button onclick="alert('Hello, World!')">Click Me<\/button>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
Internal JavaScript<\/strong><\/h2>\n\n\n\n
Internal JavaScript is written within the <script><\/code> tag, inside the HTML file. It can be placed in the <head><\/code> or <body><\/code> section of the document.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Explanation of Code:<\/strong><\/p>\n\n\n\n
The JavaScript code is placed inside a <script><\/code> tag within the <head><\/code> section. The function showMessage<\/code> is defined, and it is called when the button is clicked.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Internal JavaScript Example<\/title>\n    <script>\n        function showMessage() {\n            alert('Hello, World!');\n        }\n    <\/script>\n<\/head>\n<body>\n    <button onclick="showMessage()">Click Me<\/button>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
External JavaScript<\/strong><\/h2>\n\n\n\n
External JavaScript is written in a separate .js<\/code> file, which is then linked to the HTML document. This method keeps the HTML and JavaScript code separate, making the code easier to maintain.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Explanation of Code: <\/strong><\/p>\n\n\n\n
The JavaScript code is written in an external file named script.js<\/code>. The <script><\/code> tag with the src<\/code> attribute is used to include the external JavaScript file in the HTML document. The function showMessage<\/code> is defined in the external file and is called when the button is clicked.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>External JavaScript Example<\/title>\n    <script src="script.js"><\/script>\n<\/head>\n<body>\n    <button onclick="showMessage()">Click Me<\/button>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
function showMessage() {\n    alert('Hello, World!');\n}<\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
JavaScript Labs<\/strong><\/h2>\n\n\n\n