Often, JavaScript code is written to be executed when an event occurs, like when the user clicks a button. JavaScript code inside afunction, can be invoked later, when an event occurs.
Invoke a function = Call upon a function (ask for the code in the function to be executed).
You will learn much more about functions and events in later chapters.
JavaScript in <head> or <body>
You can place any number of scripts in an HTML document. Scripts can be placed in the <body> or in the <head> section of HTML or in both.
Often you will see scripts at the bottom of the <body> section of a web page. This can reduce display time. Sometimes you will see all JavaScript functions in the <head> section. Anyway, separating HTML and JavaScript, by putting all the code in one place, is always a good habit.
JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of an HTML page. The function is invoked when a button is clicked:
Example:
Invoke a function = Call upon a function (ask for the code in the function to be executed).
You will learn much more about functions and events in later chapters.
JavaScript in <head> or <body>
You can place any number of scripts in an HTML document. Scripts can be placed in the <body> or in the <head> section of HTML or in both.
Often you will see scripts at the bottom of the <body> section of a web page. This can reduce display time. Sometimes you will see all JavaScript functions in the <head> section. Anyway, separating HTML and JavaScript, by putting all the code in one place, is always a good habit.
JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of an HTML page. The function is invoked when a button is clicked:
Example:
<!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </head> <body> <h1>My Web Page</h1> <p id="demo">A Paragraph.</p> <button type="button" onclick= "myFunction()">read it</button> </body> </html>JavaScript in <body>In this example, a JavaScript function is placed in the <body> section of an HTML page. The function is invoked when a button is clicked:
Example:
External JavaScripts<!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p id="demo">> Paragraph.</p> <button type="button" onclick="myFunction()">read it</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </body> </html>
Scripts can also be placed in external files. External scripts are practical when the same code is used in many different web pages. JavaScript files have the file extension .js. To use an external script, put the name of the script file in the source (src) attribute of the <script> tag:
Example:
<!DOCTYPE html> <html> <body> <h1>My Web Page</h1> <p id="demo">A Paragraph.</p> <button type="button" onclick="myFunction()">read it</button> <p><strong>Note:</strong> myFunction is stored in an external file called "myScript.js".</p> <script src="myScript.js"></script> </body> </html>