JavaScript is a text-based programming language that allows you to construct interactive web pages on both the client and server sides. Where HTML and CSS give web pages structure and style, JavaScript delivers web pages interactive elements that keep users engaged.
Brendan Eich created JavaScript in 1995, and it became an ECMA standard in 1997. The standard’s official name is ECMA-262. The language’s official name is ECMAScript.
JavaScript is primary used as a client-side scripting language.
- Means that most of the coding is written directly into the HTML page and parsed by the browser when the page is rendered on the client
- Primary function is to add to the level of interactivity on what would other wise have been a static page
What is JavaScript used for?
When it comes to adding JavaScript code to your HTML files, you have a few options:
- Adding the JavaScript
<script>tag in the<head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using JavaScript Tags</title>
<script type="text/javascript">
//Javascript code goes here
</script>
</head>
<body>
</body>
</html>
- If you have that JavaScript in the of your document that means that JavaScript has to load prior to the contents of the page being visible.
- The second option is to include the script tags in the
<body>section
<body>
<h1>JavaScript Tags Reference JavaScript that
is embedded in the HTML page</h1>
<p>As an alternative you can link to external files</p>
<script>
//Some more JavaScript code goes here
</script>
</body>
- Placing scripts at the bottom of the element improves the display speed, because script interpretation slows down the display.
- The third option (often the best) is to link to external JavaScript files
<script src=“myscript.js”></script>
- You can place an external script reference in or as you like.
- 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 - The linked external JS stylesheet keeps your JavaScript and HTML separate and makes it easier to debug and to locate code you want to modify
- Keeps things better organised
- You can use multiple script links in your file, if you start to get above 5 or 6 then you probably want to start to think about consolidating some of those files
- The more script links you have in your the longer the page will take to load
Example of JavaScript
JavaScript can change HTML content.
One of many JavaScript HTML methods is getElementById(). The method returns an element with a specified value. Since element IDs are required to be unique if specified, they’re a useful way to get access to a specific element quickly.
The example below “finds” an HTML element (with id=“demo”), and changes the element content (innerHTML) to “Hello JavaScript”:
<!DOCTYPE html>
<html lang=“en”>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>
</body>
</html>
InnerHTML & DOM
- The innerHTML property sets or returns an element’s HTML content (inner HTML).
- In most cases that you want to “display” data you will use the innerHTML property and the DOM (Document Object Model) in order to write information to the page.
<script>
document.getElementById(“demo”).innerHTML=“Hello JavaScript”;
</script>
- DOM is the way your JavaScript is going to interact with your HTML.
- The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
-
.getElementById()is a method in the DOM that will grab a particular element on your webpage.
To learn more about JavaScript why not check out my blog
Top comments (0)