CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>JavaScript/JavaScript within HTML - Wikibooks, open books for an open world</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )enwikibooksmwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat": "dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"910534fc-29ce-4b3b-8022-3809019ecd9a","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"JavaScript/JavaScript_within_HTML","wgTitle":"JavaScript/JavaScript within HTML","wgCurRevisionId":4375031,"wgRevisionId":4375031,"wgArticleId":13026,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Pages using the JsonConfig extension","Book:JavaScript"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"JavaScript/JavaScript_within_HTML","wgRelevantArticleId":13026,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgRedirectedFrom":"JavaScript/Placing_the_code","wgNoticeProject":"wikibooks", "wgCiteReferencePreviewsActive":true,"wgFlaggedRevsParams":{"tags":{"value":{"levels":3}}},"wgStableRevisionId":4375031,"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":9000,"wgInternalRedirectTargetUrl":"/wiki/JavaScript/JavaScript_within_HTML","wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q19367201","wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"],"wgSiteNoticeId":"2.24"};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready", "user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.pygments":"ready","ext.cite.styles":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","ext.flaggedRevs.basic":"ready","mediawiki.codex.messagebox.styles":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.interlanguage":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready","ext.dismissableSiteNotice.styles":"ready"};RLPAGEMODULES=["mediawiki.action.view.redirect","ext.pygments.view","ext.cite.ux-enhancements","site","mediawiki.page.ready","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.flaggedRevs.advanced","ext.gadget.wikidialog","ext.gadget.commons-file","ext.urlShortener.toolbar","ext.centralauth.centralautologin","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader", "ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","wikibase.client.vector-2022","ext.checkUser.clientHints","wikibase.sidebar.tracking","ext.dismissableSiteNotice"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.cite.styles%7Cext.dismissableSiteNotice.styles%7Cext.flaggedRevs.basic%7Cext.pygments%2CwikimediaBadges%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cmediawiki.codex.messagebox.styles%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.4"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="JavaScript/JavaScript within HTML - Wikibooks, open books for an open world"> <meta property="og:type" content="website"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//en.m.wikibooks.org/wiki/JavaScript/JavaScript_within_HTML"> <link rel="alternate" type="application/x-wiki" title="Edit" href="/w/index.php?title=JavaScript/JavaScript_within_HTML&action=edit"> <link rel="icon" href="/static/favicon/wikibooks.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="Wikibooks (en)"> <link rel="EditURI" type="application/rsd+xml" href="//en.wikibooks.org/w/api.php?action=rsd"> <link rel="canonical" href="https://en.wikibooks.org/wiki/JavaScript/JavaScript_within_HTML"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en"> <link rel="alternate" type="application/atom+xml" title="Wikibooks Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject mw-editable page-JavaScript_JavaScript_within_HTML rootpage-JavaScript skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage" class="mw-list-item"><a href="/wiki/Main_Page" title="Visit the main page [z]" accesskey="z"><span>Main Page</span></a></li><li id="n-help" class="mw-list-item"><a href="/wiki/Help:Contents" title="Find help on how to use and edit Wikibooks"><span>Help</span></a></li><li id="n-Browse" class="mw-list-item"><a href="/wiki/Wikibooks:Card_Catalog_Office" title="Check out what Wikibooks has to offer"><span>Browse</span></a></li><li id="n-Cookbook" class="mw-list-item"><a href="/wiki/Cookbook:Table_of_Contents" title="Learn recipes from around the world"><span>Cookbook</span></a></li><li id="n-Wikijunior" class="mw-list-item"><a href="/wiki/Wikijunior" title="Books for children"><span>Wikijunior</span></a></li><li id="n-Featured-books" class="mw-list-item"><a href="/wiki/Wikibooks:Featured_books" title="The best of Wikibooks"><span>Featured books</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes in the wiki [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-randomrootpage" class="mw-list-item"><a href="/wiki/Special:RandomInCategory/Book:Wikibooks_Stacks/Books"><span>Random book</span></a></li><li id="n-Using-Wikibooks" class="mw-list-item"><a href="/wiki/Using_Wikibooks"><span>Using Wikibooks</span></a></li> </ul> </div> </div> <div id="p-community" class="vector-menu mw-portlet mw-portlet-community" > <div class="vector-menu-heading"> Community </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-Reading-room-forum" class="mw-list-item"><a href="/wiki/Wikibooks:Reading_room"><span>Reading room forum</span></a></li><li id="n-portal" class="mw-list-item"><a href="/wiki/Wikibooks:Community_Portal" title="Find your way around the Wikibooks community"><span>Community portal</span></a></li><li id="n-currentevents" class="mw-list-item"><a href="/wiki/Wikibooks:Reading_room/Bulletin_Board" title="Important community news"><span>Bulletin Board</span></a></li><li id="n-maintenance" class="mw-list-item"><a href="/wiki/Wikibooks:Maintenance" title="Frequent tasks that you can help with"><span>Help out!</span></a></li><li id="n-Policies-and-guidelines" class="mw-list-item"><a href="/wiki/Wikibooks:Policies_and_guidelines" title="Pages detailing important rules and procedures"><span>Policies and guidelines</span></a></li><li id="n-contact" class="mw-list-item"><a href="/wiki/Wikibooks:Contact_us" title="Alternative methods of communication"><span>Contact us</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/Main_Page" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/wikibooks.svg" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="Wikibooks" src="/static/images/mobile/copyright/wikibooks-wordmark-vi.svg" style="width: 7.5em; height: 0.9375em;"> <img class="mw-logo-tagline" alt="The Free Textbook Project" src="/static/images/mobile/copyright/wikibooks-tagline-en.svg" width="120" height="10" style="width: 7.5em; height: 0.625em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search Wikibooks [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search Wikibooks" aria-label="Search Wikibooks" autocapitalize="sentences" title="Search Wikibooks [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="//donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikibooks.org&uselang=en" class=""><span>Donations</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=JavaScript%2FJavaScript+within+HTML" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=JavaScript%2FJavaScript+within+HTML" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="More options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="//donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikibooks.org&uselang=en"><span>Donations</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=JavaScript%2FJavaScript+within+HTML" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=JavaScript%2FJavaScript+within+HTML" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing"><span>learn more</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y"><span>Contributions</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n"><span>Discussion for this IP address</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"><div id="mw-dismissablenotice-anonplace"></div><script>(function(){var node=document.getElementById("mw-dismissablenotice-anonplace");if(node){node.outerHTML="\u003Cdiv class=\"mw-dismissable-notice\"\u003E\u003Cdiv class=\"mw-dismissable-notice-close\"\u003E[\u003Ca tabindex=\"0\" role=\"button\"\u003Edismiss\u003C/a\u003E]\u003C/div\u003E\u003Cdiv class=\"mw-dismissable-notice-body\"\u003E\u003C!-- CentralNotice --\u003E\u003Cdiv id=\"localNotice\" data-nosnippet=\"\"\u003E\u003Cdiv class=\"anonnotice\" lang=\"en\" dir=\"ltr\"\u003E\u003Cdiv style=\"width: fit-content; padding: 5px; border: 3px solid gray; background-color: #fafafa; text-align: center; margin: auto;\"\u003E\n\u003Cp\u003E\u003Cspan typeof=\"mw:File\"\u003E\u003Ca href=\"/wiki/File:OOjs_UI_icon_robot.svg\" class=\"mw-file-description\"\u003E\u003Cimg src=\"//upload.wikimedia.org/wikipedia/commons/thumb/7/71/OOjs_UI_icon_robot.svg/40px-OOjs_UI_icon_robot.svg.png\" decoding=\"async\" width=\"40\" height=\"40\" class=\"mw-file-element\" srcset=\"//upload.wikimedia.org/wikipedia/commons/thumb/7/71/OOjs_UI_icon_robot.svg/60px-OOjs_UI_icon_robot.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/7/71/OOjs_UI_icon_robot.svg/80px-OOjs_UI_icon_robot.svg.png 2x\" data-file-width=\"20\" data-file-height=\"20\" /\u003E\u003C/a\u003E\u003C/span\u003E The Wikibooks community is developing a policy on the use of generative AI. Please review the \u003Ca href=\"/wiki/Wikibooks:Artificial_Intelligence\" title=\"Wikibooks:Artificial Intelligence\"\u003Edraft policy\u003C/a\u003E and provide feedback on \u003Ca href=\"/wiki/Wikibooks_talk:Artificial_Intelligence\" title=\"Wikibooks talk:Artificial Intelligence\"\u003Eits talk page\u003C/a\u003E.\n\u003C/p\u003E\n\u003C/div\u003E\u003C/div\u003E\u003C/div\u003E\u003C/div\u003E\u003C/div\u003E";}}());</script></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Beginning</div> </a> </li> <li id="toc-Internal_vs._external_JavaScript" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Internal_vs._external_JavaScript"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Internal vs. external JavaScript</span> </div> </a> <button aria-controls="toc-Internal_vs._external_JavaScript-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Internal vs. external JavaScript subsection</span> </button> <ul id="toc-Internal_vs._external_JavaScript-sublist" class="vector-toc-list"> <li id="toc-Separate_Files_for_Javascript_Code" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Separate_Files_for_Javascript_Code"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1</span> <span>Separate Files for Javascript Code</span> </div> </a> <ul id="toc-Separate_Files_for_Javascript_Code-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Remote_Code_Injection_vs._Local_Library" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Remote_Code_Injection_vs._Local_Library"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.2</span> <span>Remote Code Injection vs. Local Library</span> </div> </a> <ul id="toc-Remote_Code_Injection_vs._Local_Library-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Minified_vs._Non-Minified_Code" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Minified_vs._Non-Minified_Code"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.3</span> <span>Minified vs. Non-Minified Code</span> </div> </a> <ul id="toc-Minified_vs._Non-Minified_Code-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-External_JavaScript" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#External_JavaScript"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>External JavaScript</span> </div> </a> <button aria-controls="toc-External_JavaScript-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle External JavaScript subsection</span> </button> <ul id="toc-External_JavaScript-sublist" class="vector-toc-list"> <li id="toc-The_src_attribute" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#The_src_attribute"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1</span> <span>The src attribute</span> </div> </a> <ul id="toc-The_src_attribute-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-The_type_attribute" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#The_type_attribute"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.2</span> <span>The type attribute</span> </div> </a> <ul id="toc-The_type_attribute-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-The_async_and_defer_attributes" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#The_async_and_defer_attributes"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.3</span> <span>The async and defer attributes</span> </div> </a> <ul id="toc-The_async_and_defer_attributes-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Location_of_<script>_elements" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Location_of_<script>_elements"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Location of <script> elements</span> </div> </a> <ul id="toc-Location_of_<script>_elements-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-The_<noscript>_element" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#The_<noscript>_element"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>The <noscript> element</span> </div> </a> <ul id="toc-The_<noscript>_element-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-JavaScript_in_XHTML_files" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#JavaScript_in_XHTML_files"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>JavaScript in XHTML files</span> </div> </a> <ul id="toc-JavaScript_in_XHTML_files-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Reference" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Reference"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span> <span>Reference</span> </div> </a> <ul id="toc-Reference-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">JavaScript/JavaScript within HTML</span></h1> <div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="Go to an article in another language. Available in 4 languages" > <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-4" aria-hidden="true" ><span class="vector-icon mw-ui-icon-language-progressive mw-ui-icon-wikimedia-language-progressive"></span> <span class="vector-dropdown-label-text">4 languages</span> </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="interlanguage-link interwiki-de mw-list-item"><a href="https://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript:_Der_script-Tag" title="Websiteentwicklung: JavaScript: Der script-Tag – German" lang="de" hreflang="de" data-title="Websiteentwicklung: JavaScript: Der script-Tag" data-language-autonym="Deutsch" data-language-local-name="German" class="interlanguage-link-target"><span>Deutsch</span></a></li><li class="interlanguage-link interwiki-es mw-list-item"><a href="https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/C%C3%B3mo_escribir_c%C3%B3digo_en_JavaScript" title="Programación en JavaScript/Cómo escribir código en JavaScript – Spanish" lang="es" hreflang="es" data-title="Programación en JavaScript/Cómo escribir código en JavaScript" data-language-autonym="Español" data-language-local-name="Spanish" class="interlanguage-link-target"><span>Español</span></a></li><li class="interlanguage-link interwiki-ko mw-list-item"><a href="https://ko.wikibooks.org/wiki/JavaScript/%EC%BD%94%EB%93%9C_%EB%B0%B0%EC%B9%98" title="JavaScript/코드 배치 – Korean" lang="ko" hreflang="ko" data-title="JavaScript/코드 배치" data-language-autonym="한국어" data-language-local-name="Korean" class="interlanguage-link-target"><span>한국어</span></a></li><li class="interlanguage-link interwiki-pl mw-list-item"><a href="https://pl.wikibooks.org/wiki/JavaScript/Skrypt_w_przegl%C4%85darce" title="JavaScript/Skrypt w przeglądarce – Polish" lang="pl" hreflang="pl" data-title="JavaScript/Skrypt w przeglądarce" data-language-autonym="Polski" data-language-local-name="Polish" class="interlanguage-link-target"><span>Polski</span></a></li> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-edit wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q19367201#sitelinks-wikibooks" title="Edit interlanguage links" class="wbc-editpage">Edit links</a></span></div> </div> </div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/JavaScript/JavaScript_within_HTML" title="View the content page [c]" accesskey="c"><span>Book</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Talk:JavaScript/JavaScript_within_HTML" rel="discussion" title="Discussion about the content page [t]" accesskey="t"><span>Discussion</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/JavaScript/JavaScript_within_HTML"><span>Read</span></a></li><li id="ca-ve-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&veaction=edit" title="Edit this page [v]" accesskey="v"><span>Edit</span></a></li><li id="ca-edit" class="collapsible vector-tab-noicon mw-list-item"><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&action=edit" title="Edit the source code of this page [e]" accesskey="e"><span>Edit source</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/JavaScript/JavaScript_within_HTML"><span>Read</span></a></li><li id="ca-more-ve-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&veaction=edit" title="Edit this page [v]" accesskey="v"><span>Edit</span></a></li><li id="ca-more-edit" class="collapsible vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&action=edit" title="Edit the source code of this page [e]" accesskey="e"><span>Edit source</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/JavaScript/JavaScript_within_HTML" title="A list of all wiki pages that link here [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/JavaScript/JavaScript_within_HTML" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-upload" class="mw-list-item"><a href="//commons.wikimedia.org/wiki/Special:UploadWizard?uselang=en" title="Upload files [u]" accesskey="u"><span>Upload file</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&oldid=4375031" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=JavaScript%2FJavaScript_within_HTML&id=4375031&wpFormIdentifier=titleform" title="Information on how to cite this page"><span>Cite this page</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fen.wikibooks.org%2Fwiki%2FJavaScript%2FJavaScript_within_HTML"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fen.wikibooks.org%2Fwiki%2FJavaScript%2FJavaScript_within_HTML"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-sister_projects" class="vector-menu mw-portlet mw-portlet-sister_projects" > <div class="vector-menu-heading"> Sister projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-Wikipedia" class="mw-list-item"><a href="https://en.wikipedia.org/wiki/Main_Page"><span>Wikipedia</span></a></li><li id="n-Wikiversity" class="mw-list-item"><a href="https://en.wikiversity.org/wiki/Wikiversity:Main_Page"><span>Wikiversity</span></a></li><li id="n-Wiktionary" class="mw-list-item"><a href="https://en.wiktionary.org/wiki/Wiktionary:Main_Page"><span>Wiktionary</span></a></li><li id="n-Wikiquote" class="mw-list-item"><a href="https://en.wikiquote.org/wiki/Main_Page"><span>Wikiquote</span></a></li><li id="n-Wikisource" class="mw-list-item"><a href="https://en.wikisource.org/wiki/Main_Page"><span>Wikisource</span></a></li><li id="n-Wikinews" class="mw-list-item"><a href="https://en.wikinews.org/wiki/Main_Page"><span>Wikinews</span></a></li><li id="n-Wikivoyage" class="mw-list-item"><a href="https://en.wikivoyage.org/wiki/Main_Page"><span>Wikivoyage</span></a></li><li id="n-Commons" class="mw-list-item"><a href="https://commons.wikimedia.org/wiki/Main_Page"><span>Commons</span></a></li><li id="n-Wikidata" class="mw-list-item"><a href="https://www.wikidata.org/wiki/Wikidata:Main_Page"><span>Wikidata</span></a></li><li id="n-MediaWiki" class="mw-list-item"><a href="https://www.mediawiki.org/wiki/Main_Page"><span>MediaWiki</span></a></li><li id="n-Meta-Wiki" class="mw-list-item"><a href="https://meta.wikimedia.org/wiki/Main_Page"><span>Meta-Wiki</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-create_a_book" class="mw-list-item"><a href="/w/index.php?title=Special:Book&bookcmd=book_creator&referer=JavaScript%2FJavaScript+within+HTML"><span>Create a collection</span></a></li><li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=JavaScript%2FJavaScript_within_HTML&action=show-download-screen"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-wikibase" class="wb-otherproject-link wb-otherproject-wikibase-dataitem mw-list-item"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q19367201" title="Link to connected data repository item [g]" accesskey="g"><span>Wikidata item</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">From Wikibooks, open books for an open world</div> </div> <div id="contentSub"><div id="mw-content-subtitle"><div class="subpages">< <bdi dir="ltr"><a href="/wiki/JavaScript" title="JavaScript">JavaScript</a></bdi></div><span class="mw-redirectedfrom">(Redirected from <a href="/w/index.php?title=JavaScript/Placing_the_code&redirect=no" class="mw-redirect" title="JavaScript/Placing the code">JavaScript/Placing the code</a>)</span></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><div style="width: 100%; position: absolute; top: 10px;"></div> <p><br /> </p> <div style="width: 100%; position: absolute; bottom: -60px;"></div> <p><br /> </p> <div class="nonumtoc"> <meta property="mw:PageProp/toc" /> </div> <p>The language JavasScript was originally introduced to run in browsers and handle the dynamic aspects of user interfaces, e.g., validation of user input, modifications of page content (DOM) or appearance of the user interface (CSS), or any event handling. This implies that an interconnection point from HTML to JS must exist. The HTML element <code><script></code> plays this role. It is a regular HTML element, and its content is JS. </p><p>The <code><script></code> element may appear almost anywhere within the HTML file, within <code><head></code> as well as in <code><body></code>. There are only a few criteria for choosing an optimal place; see <a href="#Location_of_<script>_elements">below</a>. </p> <div class="mw-heading mw-heading2"><h2 id="Internal_vs._external_JavaScript">Internal vs. external JavaScript</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&veaction=edit&section=1" title="Edit section: Internal vs. external JavaScript" class="mw-editsection-visualeditor"><span>edit</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&action=edit&section=1" title="Edit section's source code: Internal vs. external JavaScript"><span>edit source</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The <code><script></code> element either contains JS code directly, or it points to an external file resp. URL containing the JS code through its <code>src</code> attribute. The first variant is called <i>Internal JavaScript</i> or <i>Inline JavaScript</i>, the second <i>External JavaScript</i>. </p><p>In the case of <i>Internal JavaScript</i> the <code><script></code> element looks like: </p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="p"><</span><span class="nt">script</span><span class="p">></span> <span class="w"> </span><span class="c1">// write your JS code directly here. (This line is a comment in JS syntax)</span> <span class="w"> </span><span class="nx">alert</span><span class="p">(</span><span class="s2">"Hello World!"</span><span class="p">);</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> </pre></div> <p><i>Internal scripting</i> has the advantage that both your HTML and your JS are in one file, which is convenient for quick development. This is commonly used for temporarily testing out some ideas, and in situations where the script code is small or specific to that one page. </p><p>For the <i>External JavaScript</i> the <code><script></code> element looks like: </p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="cm"></span> <span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"myScript.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"js/myScript2.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://example.com/dist/js/externallib.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://example.com/dist/js/externallib.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> <span class="cm"></span> <span class="cm"></span> </pre></div> <div class="mw-heading mw-heading3"><h3 id="Separate_Files_for_Javascript_Code">Separate Files for Javascript Code</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&veaction=edit&section=2" title="Edit section: Separate Files for Javascript Code" class="mw-editsection-visualeditor"><span>edit</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&action=edit&section=2" title="Edit section's source code: Separate Files for Javascript Code"><span>edit source</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Having your JS in a separate file is recommended for larger programs, especially for such which are used on multiple pages. Furthermore, such splits support the pattern of <a href="https://en.wikipedia.org/wiki/Separation_of_Concerns" class="extiw" title="w:Separation of Concerns">Separation of Concerns</a>: One specialist works on HTML, and another on JS. Also, it supports the division of the page's content (HTML) from its behavior (JS). </p><p>Overall, using <i>External scripting</i> is considered a <a href="https://en.wikipedia.org/wiki/best_practice" class="extiw" title="w:best practice">best practice</a> for software development. </p> <div class="mw-heading mw-heading3"><h3 id="Remote_Code_Injection_vs._Local_Library">Remote Code Injection vs. Local Library</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&veaction=edit&section=3" title="Edit section: Remote Code Injection vs. Local Library" class="mw-editsection-visualeditor"><span>edit</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&action=edit&section=3" title="Edit section's source code: Remote Code Injection vs. Local Library"><span>edit source</span></a><span class="mw-editsection-bracket">]</span></span></div><p> With the example </p><div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://example.com/dist/js/externallib.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> </pre></div><p> you can inject remotely maintained code from the server <code><a rel="nofollow" class="external free" href="https://example.com">https://example.com</a></code> in your local web project. Remote code updates may break your local project or unwanted code features may be injected into your web project. On the other hand, centralized maintained and updated libraries serve your project due to bugfixes that are automatically updated in your project when the library is fetched again from the remote server. </p><div class="mw-heading mw-heading3"><h3 id="Minified_vs._Non-Minified_Code">Minified vs. Non-Minified Code</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&veaction=edit&section=4" title="Edit section: Minified vs. Non-Minified Code" class="mw-editsection-visualeditor"><span>edit</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&action=edit&section=4" title="Edit section's source code: Minified vs. Non-Minified Code"><span>edit source</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Minified Javascript code compresses the source code e.g. by shorting comprehensive variables like <tt>vImage</tt> into a single character variable <tt>a</tt>. This reduces significantly the size of the library and therefore reduces network traffic and response time until the web page is ready. For development and learning it might be helpful to have the uncompressed libraries locally available. </p> <div class="mw-heading mw-heading2"><h2 id="External_JavaScript">External JavaScript</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&veaction=edit&section=5" title="Edit section: External JavaScript" class="mw-editsection-visualeditor"><span>edit</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&action=edit&section=5" title="Edit section's source code: External JavaScript"><span>edit source</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>For more detailed information you can refer to MDN <sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>. </p> <div class="mw-heading mw-heading3"><h3 id="The_src_attribute">The <code>src</code> attribute</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&veaction=edit&section=6" title="Edit section: The src attribute" class="mw-editsection-visualeditor"><span>edit</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&action=edit&section=6" title="Edit section's source code: The src attribute"><span>edit source</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Adding <code>src="myScript.js"</code> to the opening <code>script</code> tag means that the JS code will be located in a file called <i>myScript.js</i> in the same directory as the HTML file. If the JS file is located somewhere else, you must change the <code>src</code> attribute to that path. For example, if it is located in a subdirectory called <i>js</i>, it reads <code>src="js/myScript.js"</code>. </p> <div class="mw-heading mw-heading3"><h3 id="The_type_attribute">The <code>type</code> attribute</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&veaction=edit&section=7" title="Edit section: The type attribute" class="mw-editsection-visualeditor"><span>edit</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&action=edit&section=7" title="Edit section's source code: The type attribute"><span>edit source</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>JS is not the only scripting language for Web development, but JS is the most common one on client-side (PHP runs on server-side). Therefore it's considered the default script type for HTML5. The formal notation for the type is: <code>type="text/javascript"</code>. Older HTML versions know a lot of other script types. Nowadays, all of them are graded as <i>legacy</i>. Some examples are: <code>application/javascript</code>, <code>text/javascript1.5</code>, <code>text/jscript</code>, or <code>text/livescript</code>. </p><p>In HTML5, the spec says that - if you use JS - the <code>type</code> attribute should be omitted from the script element <sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup>, for <i>Internal Scripting</i> as well as for <i>External Scripting</i>. </p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="cm"></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/javascript"</span><span class="p">>...</</span><span class="nt">script</span><span class="p">></span> <span class="cm"></span> <span class="p"><</span><span class="nt">script</span><span class="p">>...</</span><span class="nt">script</span><span class="p">></span> </pre></div> <div class="mw-heading mw-heading3"><h3 id="The_async_and_defer_attributes">The <code>async</code> and <code>defer</code> attributes</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&veaction=edit&section=8" title="Edit section: The async and defer attributes" class="mw-editsection-visualeditor"><span>edit</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&action=edit&section=8" title="Edit section's source code: The async and defer attributes"><span>edit source</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Old browsers use only one or two threads to read and parse HTML, JS, CSS, ... . This may lead to a bad <a href="https://en.wikipedia.org/wiki/user_experience" class="extiw" title="w:user experience">user experience (UX)</a> because of the latency time when loading HTML, JS, CSS, images, ... sequentially one after the next. When the page loads for the first time, the user may have the impression of a slow system. </p><p>Current browsers can execute many tasks in parallel. To initiate this parallel execution with regards to JS loading and execution, the <code><script></code> element can be extended with the two attributes <code>async</code> and <code>defer</code>. </p><p>The attribute <code>async</code> leads to asynchronous script loading (in parallel with other tasks), and execution as soon as it is available. </p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="p"><</span><span class="nt">script</span> <span class="na">async</span> <span class="na">src</span><span class="o">=</span><span class="s">"myScript.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> </pre></div> <p><code>defer</code> acts similar. It differs from <code>async</code> in that the execution is deferred until the page is fully parsed. </p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="p"><</span><span class="nt">script</span> <span class="na">defer</span> <span class="na">src</span><span class="o">=</span><span class="s">"myScript.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> </pre></div> <div class="mw-heading mw-heading2"><h2 id="Location_of_<script>_elements"><span id="Location_of_.3Cscript.3E_elements"></span>Location of <code><script></code> elements</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&veaction=edit&section=9" title="Edit section: Location of <script> elements" class="mw-editsection-visualeditor"><span>edit</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&action=edit&section=9" title="Edit section's source code: Location of <script> elements"><span>edit source</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The <code>script</code> element may appear almost anywhere within the HTML file. But there are, however, some best practices for speeding up a website <sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup>. Some people suggest to locate it just before the closing <code></body></code> tag. This speeds up downloading, and also allows for direct manipulation of the Document Object Model (DOM) while it is rendered. But a similar behavior is initiated by the above-described <code>async</code> and <code>defer</code> attributes. </p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="cp"><!DOCTYPE html></span> <span class="p"><</span><span class="nt">html</span><span class="p">></span> <span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Example page<span class="p"></</span><span class="nt">title</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">body</span><span class="p">></span> <span class="cm"></span> <span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"myScript.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">body</span><span class="p">></span> <span class="p"></</span><span class="nt">html</span><span class="p">></span> </pre></div> <div class="mw-heading mw-heading2"><h2 id="The_<noscript>_element"><span id="The_.3Cnoscript.3E_element"></span>The <code><noscript></code> element</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&veaction=edit&section=10" title="Edit section: The <noscript> element" class="mw-editsection-visualeditor"><span>edit</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&action=edit&section=10" title="Edit section's source code: The <noscript> element"><span>edit source</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>It may happen that people have deactivated JS in their browsers for security or other reasons. Or, they use very old browsers which are not able to run JS at all. To inform users in such cases about the situation, there is the <code><noscript></code> element. It contains text that will be shown in the browser. The text shall explain that no JS code will be executed. </p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="cp"><!DOCTYPE html></span> <span class="p"><</span><span class="nt">html</span><span class="p">></span> <span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Example page<span class="p"></</span><span class="nt">title</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span><span class="p">></span> <span class="w"> </span><span class="nx">alert</span><span class="p">(</span><span class="s2">"Hello World!"</span><span class="p">);</span> <span class="w"> </span><span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"><</span><span class="nt">noscript</span><span class="p">></span> alert("Sorry, the JavaScript part of this page will not be executed because JavaScript is not running in your browser. Is JavaScript intentionally deactivated?"); <span class="p"></</span><span class="nt">noscript</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">body</span><span class="p">></span> <span class="cm"></span> <span class="p"></</span><span class="nt">body</span><span class="p">></span> <span class="p"></</span><span class="nt">html</span><span class="p">></span> </pre></div> <div class="mw-heading mw-heading2"><h2 id="JavaScript_in_XHTML_files">JavaScript in XHTML files</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&veaction=edit&section=11" title="Edit section: JavaScript in XHTML files" class="mw-editsection-visualeditor"><span>edit</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&action=edit&section=11" title="Edit section's source code: JavaScript in XHTML files"><span>edit source</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>XHTML uses a stricter syntax than HTML. This leads to small differences. </p><p>First, for <i>Internal JavaScript</i> it's necessary that the scripts are introduced and finished with the two additional lines shown in the following example. </p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="p"><</span><span class="nt">script</span><span class="p">></span> <span class="w"> </span><span class="c1">// <![CDATA[</span> <span class="w"> </span><span class="nx">alert</span><span class="p">(</span><span class="s2">"Hello World!"</span><span class="p">);</span> <span class="w"> </span><span class="c1">// ]]></span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> </pre></div> <p>Second, for <i>External JavaScript</i> the <code>type</code> attribute is required. </p> <div class="mw-heading mw-heading2"><h2 id="Reference">Reference</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&veaction=edit&section=12" title="Edit section: Reference" class="mw-editsection-visualeditor"><span>edit</span></a><span class="mw-editsection-divider"> | </span><a href="/w/index.php?title=JavaScript/JavaScript_within_HTML&action=edit&section=12" title="Edit section's source code: Reference"><span>edit source</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r4267181">.mw-parser-output .reflist{font-size:90%;margin-bottom:0.5em;list-style-type:decimal}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}</style> <div class="reflist reflist-columns references-column-width" style="column-width: 40em;"> <ol class="references"> <li id="cite_note-1"><span class="mw-cite-backlink"><a href="#cite_ref-1">↑</a></span> <span class="reference-text">MDN: <a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script">The script element</a></span> </li> <li id="cite_note-2"><span class="mw-cite-backlink"><a href="#cite_ref-2">↑</a></span> <span class="reference-text">WHATWG: <a rel="nofollow" class="external text" href="https://html.spec.whatwg.org/dev/scripting.html#attr-script-type">The type attribute</a></span> </li> <li id="cite_note-3"><span class="mw-cite-backlink"><a href="#cite_ref-3">↑</a></span> <span class="reference-text">Yahoo: <a rel="nofollow" class="external text" href="http://developer.yahoo.com/performance/rules.html">Best practices for speeding up your website</a></span> </li> </ol> </div></div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://en.wikibooks.org/w/index.php?title=JavaScript/JavaScript_within_HTML&oldid=4375031">https://en.wikibooks.org/w/index.php?title=JavaScript/JavaScript_within_HTML&oldid=4375031</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Special:Categories" title="Special:Categories">Category</a>: <ul><li><a href="/wiki/Category:Book:JavaScript" title="Category:Book:JavaScript">Book:JavaScript</a></li></ul></div><div id="mw-hidden-catlinks" class="mw-hidden-catlinks mw-hidden-cats-hidden">Hidden category: <ul><li><a href="/wiki/Category:Pages_using_the_JsonConfig_extension" title="Category:Pages using the JsonConfig extension">Pages using the JsonConfig extension</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 28 February 2024, at 11:46.</li> <li id="footer-info-copyright">Text is available under the <a rel="nofollow" class="external text" href="//creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike License</a>; additional terms may apply. By using this site, you agree to the <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use">Terms of Use</a> and <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy Policy.</a></li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Wikibooks:Welcome">About Wikibooks</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Wikibooks:General_disclaimer">Disclaimers</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Universal_Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/en.wikibooks.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//en.m.wikibooks.org/w/index.php?title=JavaScript/JavaScript_within_HTML&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-5cd4cd96d5-d5v9d","wgBackendResponseTime":127,"wgPageParseReport":{"limitreport":{"cputime":"0.143","walltime":"0.195","ppvisitednodes":{"value":338,"limit":1000000},"postexpandincludesize":{"value":1590,"limit":2097152},"templateargumentsize":{"value":512,"limit":2097152},"expansiondepth":{"value":12,"limit":100},"expensivefunctioncount":{"value":70,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":9863,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 177.777 1 -total"," 85.46% 151.929 1 Template:JavaScript"," 51.66% 91.846 1 Template:AutoHeader"," 18.54% 32.952 1 Template:Footer"," 12.54% 22.301 1 Template:BookCat"," 11.07% 19.676 1 Template:Reflist"," 4.73% 8.406 1 Template:Evalx"," 1.69% 3.013 1 Template:BOOKCATEGORY"," 1.17% 2.083 1 Template:Main_other"," 0.82% 1.462 1 Template:NAIVEBOOKNAME"]},"scribunto":{"limitreport-timeusage":{"value":"0.092","limit":"10.000"},"limitreport-memusage":{"value":1086875,"limit":52428800}},"cachereport":{"origin":"mw-web.codfw.main-694cf4987f-ghxd6","timestamp":"20241126055728","ttl":2592000,"transientcontent":false}}});});</script> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","name":"JavaScript\/JavaScript within HTML","url":"https:\/\/en.wikibooks.org\/wiki\/JavaScript\/JavaScript_within_HTML","sameAs":"http:\/\/www.wikidata.org\/entity\/Q19367201","mainEntity":"http:\/\/www.wikidata.org\/entity\/Q19367201","author":{"@type":"Organization","name":"Contributors to Wikimedia projects"},"publisher":{"@type":"Organization","name":"Wikimedia Foundation, Inc.","logo":{"@type":"ImageObject","url":"https:\/\/www.wikimedia.org\/static\/images\/wmf-hor-googpub.png"}},"datePublished":"2004-08-10T20:42:35Z"}</script> </body> </html>