JavaScript makes a HTML page more dynamic. In this chapter we are going to look at how JavaScript is linked to the html page.
The HTML script tag
The HTML <script>
tag contains script statement or points to an external script file through src attribute that has JavaScript functionality.
JavaScript code can be kept at a separate file and then include it wherever itβs needed, or it can be defined inside the html document itself.
Internal JavaScript
You can write your JavaScript code directly into the HTML document. Usually the script code is kept at the header of the document using the <script>
tag. You can put your code anywhere on the document as long as is inside a <script>
tag.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript Internal</title>
<script>
Document.getElementbyId("go").innerHTML = "hello world";
</script>
</head>
<body>
<p id="go"> JavaScript insertion</p>
</body>
</html>
External JavaScript
If you are going to define a functionality that will be applied in different html document, it is always best to place your code on another file.
Then include the file in your HTML document. A JavaScript file will have a file extension of .js and it will be included in the html file using the <script>
tag.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript External</title>
<script src="/html/script.js" type="text/JavaScript"></script>
</head>
<body>
<p id="go">Javascript Insertion</p>
</body>
</html>
The <noscript>
tag is used to provide alternative information to browsers that donβt support JavaScript or disabled their own.
Create Stunning Websites and Web Apps
Building different custom components in react for your web apps or websites can get very stressful. That's why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro. Try contrast pro!
Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, prelaunch, etc. project with a clean, well documented, well crafted template and UI components. Learn more about Contrast Pro
Resources
- Contrast Design Bootstrap
- Accordion
- Alert
- Animation
- Autocomplete
- Badges
- Box
- Breadcrumb
- ButtonGroup
- Button
- ButtonToolbar
- Card
- Carousel
- Checkbox
- Collapse
- DataTable
- DatePicker
- DropDown
- Footer
- Forms
- Icon
- Iframe
- Input
- InputGroup
- ListGroup
- Mask
- Modal
- Multiselect
- Notification
- Pane
- Panel
- Pop Over
- Progress
- Radio
- Rating
- Select
- Select 2
- Slider
- Spinner
- Stepper
- Switch
- Table
- Forms
- Navbar
- Pagination
- Tab
- Sidebar
- Time Picker
- Data Table
- Fixed Data Table
- Table
- Widgets
Top comments (0)