JAVASCRIPT INTRODUCTION
Java Script is the world's popular programming language of the wed page.
Why Study JavaScript?
JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JAVA SCRIPT to program the behavior of web pages
THE script Tag
in Html java script code is inserted between <script>andm</script> tags.
MY First program:
<html> <head> </head>> <script> document.getElementById('hello').innerHTML='HELLO JAVA SCRIPT'; </script> <body> <p> This is my first java script program.</p> <p id="hello">HELLO JAVA SCRIPT </P> </body> </html> |
Output
This is my first java script program. HELLO JAVA SCRIPT |
- Js can change html content
<html> <head> </head>> <script> function change(){ document.getElementById('hello').innerHTML='HELLO JS'; } </script> <body> <p id="hello">HELLO JAVA SCRIPT </P> <button onclick="change()"> Click to Change</button> </body> </html> |
- Js can change html attributes values
<html> <head> </head>> <body> <img id="image" src="img.jpg" style="width:100px;> <button onclick="document.getElementById('image').src='img.jpg'";> ON </button> <button onclick="document.getElementById('image').src='img.jpg'";> OFF </button> </body> </html> |
- Js can change Css styles
<html> <head> </head>> <script> function change(){ document.getElementById('hello').style.fontsize="30px"; } </script> <body> <p id="hello">HELLO JAVA SCRIPT </P> </body> </html> |
- Js can show and hide html elements
<html> <head> </head>> <script> function change(){ document.getElementById('hello').style.display="none(hide) or block(show)"; } </script> <body> <p id="hello">HELLO JAVA SCRIPT </P> <button onclick="change()">Click</button> </body> </html> |
A JavaScript function is a block of JavaScript code, that can be executed when "called" for.
For example, a function can be called when an event occurs, like when the user clicks a button.
JavaScript in <head> Tag OR <body> Tag
Scripts can be placed in the <body> or in the <head section of an HTML page, or in both.
A JavaScript function is placed in the <head> of <body> section of an HTML page.
JAVA SCRIPT IN HEAD TAG <!DOCTYPE html> <html><head> <script> function myFunction() { document.getElementById("demo").innerHTML = "Java script"; } </script> </head> <body> <h2> JavaScript in Head Tag</h2> </body> JAVA SCRIPT IN BODY TAG <!DOCTYPE html> <html><head> </head> <body> <h2>Demo JavaScript in Body</h2> <script> </body> |
External JavaScript
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 src(source) attribute of a <script> tag
You can place an external script reference in <head> or <body> as you like.
The script will behave as if it was located exactly where the <script> tag is located.
<script src="./js/myScript1.js"></script> |
External JavaScript Advantages
Placing scripts in external files has some advantages:
- It separates HTML and JS Code
- It makes HTML and JavaScript easier to read and easy to maintain.
- Cached JavaScript files can speed up page loads.
To add several script files to one page
<script src="./js/myScript1.js"></script> <script src="./js/myScript2.js"></script> |
External References
An external script can be referenced in 3 different ways:
- With URL
- With File Path
- Without any path
This example uses a URL to link to myScript.js:
script src="https://www.w3schools.com/js/myScript.js"></script |
This example uses a file path to link to myScript.js:
<script src="/js/myScript.js"></script> |
This example uses no path to link to myScript.js:
<script src="myScript.js"></script> |