Scribd
Upload
152 views17 pages

Untitled

The document contains the code for the header section of a website. It includes metadata tags, links to style sheets and fonts, scripts for things like the navigation menu and ads, and CSS styles. The header prepares the page by loading necessary assets and code to display the site navigation, menus, ads and set up things like the dark mode.

Uploaded by

Turing
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
152 views17 pages

Untitled

The document contains the code for the header section of a website. It includes metadata tags, links to style sheets and fonts, scripts for things like the navigation menu and ads, and CSS styles. The header prepares the page by loading necessary assets and code to display the site navigation, menus, ads and set up things like the dark mode.

Uploaded by

Turing
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Unión de líneas

1
2 <!DOCTYPE html>
3 <html lang="en-US">
4 <head>
5 <title>JavaScript Where To</title>
6 <meta charset="utf-8">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <meta name="Keywords" content="HTML, Python, CSS, SQL, JavaScript, How to, PHP, Java, C, C++, C#, jQuery, Bootstrap, Colors, W3.CSS, XML, MySQL, Icons, N
9 <meta name="Description" content="Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript,
10 <meta property="og:image" content="https://www.w3schools.com/images/w3schools_logo_436_2.png">
11 <meta property="og:image:type" content="image/png">
12 <meta property="og:image:width" content="436">
13 <meta property="og:image:height" content="228">
14 <meta property="og:description" content="W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering
15 <link rel="icon" href="/favicon.ico" type="image/x-icon">
16 <link rel="preload" href="/lib/fonts/fontawesome.woff2?14663396" as="font" type="font/woff2" crossorigin>
17 <link rel="preload" href="/lib/fonts/source-code-pro-v14-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
18 <link rel="preload" href="/lib/fonts/roboto-mono-v13-latin-500.woff2" as="font" type="font/woff2" crossorigin>
19 <link rel="preload" href="/lib/fonts/source-sans-pro-v14-latin-700.woff2" as="font" type="font/woff2" crossorigin>
20 <link rel="preload" href="/lib/fonts/source-sans-pro-v14-latin-600.woff2" as="font" type="font/woff2" crossorigin>
21 <link rel="preload" href="/lib/fonts/freckle-face-v9-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
22 <link rel="stylesheet" href="/lib/w3schools31.css">
23
24 <!-- Google Tag Manager -->
25 <script>
26 (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
27 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
28 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
29 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
30 })(window,document,'script','dataLayer','GTM-KTCFC3S');
31
32 var subjectFolder = location.pathname;
33 subjectFolder = subjectFolder.replace("/", "");
34 if (subjectFolder.startsWith("python/") == true ) {
35 if (subjectFolder.includes("/numpy/") == true ) {
36 subjectFolder = "numpy/"
37 } else if (subjectFolder.includes("/pandas/") == true ) {
38 subjectFolder = "pandas/"
39 } else if (subjectFolder.includes("/scipy/") == true ) {
40 subjectFolder = "scipy/"
41 }
42 }
43 subjectFolder = subjectFolder.substr(0, subjectFolder.indexOf("/"));
44 </script>
45 <!-- End Google Tag Manager -->
46
47 <script src="/lib/uic.js?v=1.0.5"></script>
48 <script data-cfasync="false" type="text/javascript">
49 var k42 = false;
50
51 k42 = true;
52
53 </script>
54 <script data-cfasync="false" type="text/javascript">
55 window.snigelPubConf = {
56 "adengine": {
57
58 "activeAdUnits": ["main_leaderboard", "sidebar_top", "bottom_left", "bottom_right"]
59
60 }
61 }
62 uic_r_a()
63 </script>
64 <script async data-cfasync="false" src="https://cdn.snigelweb.com/adengine/w3schools.com/loader.js" type="text/javascript"></script>
65 <script src="/lib/common-deps.js?v=1.0.1"></script>
66 <script src="/lib/user-session.js?v=1.0.28"></script>
67 <script src="/lib/my-learning.js?v=1.0.19"></script>
68 <script type='text/javascript'>
69 var stickyadstatus = "";
70 function fix_stickyad() {
71 document.getElementById("stickypos").style.position = "sticky";
72 var elem = document.getElementById("stickyadcontainer");
73 if (!elem) {return false;}
74 if (document.getElementById("skyscraper")) {
75 var skyWidth = Number(w3_getStyleValue(document.getElementById("skyscraper"), "width").replace("px", ""));
76 }
77 else {
78 var skyWidth = Number(w3_getStyleValue(document.getElementById("right"), "width").replace("px", ""));
79 }
80 elem.style.width = skyWidth + "px";
81 if (window.innerWidth <= 992) {
82 elem.style.position = "";
83 elem.style.top = stickypos + "px";
84 return false;
85 }
86 var stickypos = document.getElementById("stickypos").offsetTop;
87 var docTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
88 var adHeight = Number(w3_getStyleValue(elem, "height").replace("px", ""));
89 if (stickyadstatus == "") {
90 if ((stickypos - docTop) < 60) {
91 elem.style.position = "fixed";
92 elem.style.top = "60px";
93 stickyadstatus = "sticky";
94 document.getElementById("stickypos").style.position = "sticky";
95
96 }
97 } else {
98 if ((docTop + 60) - stickypos < 0) {
99 elem.style.position = "";
100 elem.style.top = stickypos + "px";
101 stickyadstatus = "";
102 document.getElementById("stickypos").style.position = "static";
103 }
104 }
105 if (stickyadstatus == "sticky") {
106 if ((docTop + adHeight + 60) > document.getElementById("footer").offsetTop) {
107 elem.style.position = "absolute";
108 elem.style.top = (document.getElementById("footer").offsetTop - adHeight) + "px";
109 document.getElementById("stickypos").style.position = "static";
110 } else {
111 elem.style.position = "fixed";
112 elem.style.top = "60px";
113 stickyadstatus = "sticky";
114 document.getElementById("stickypos").style.position = "sticky";
115 }
116 }
117 }
118 function w3_getStyleValue(elmnt,style) {
119 if (window.getComputedStyle) {
120 return window.getComputedStyle(elmnt,null).getPropertyValue(style);
121 } else {
122 return elmnt.currentStyle[style];
123 }
124 }
125 </script>
126
127 </head>
128 <body>
129 <!-- Google Tag Manager (noscript) -->
130 <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KTCFC3S"
131 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
132 <!-- End Google Tag Manager (noscript) -->
133 <style>
134 #darkmodemenu {
135 position:absolute;
136 top:-40px;
137 right:16px;
138 padding:5px 20px 10px 18px;
139 border-bottom-left-radius:5px;
140 border-bottom-right-radius:5px;
141 z-index:-1;
142 transition: top 0.2s;
143 user-select: none;
144 }
145 #darkmodemenu input,#darkmodemenu label {
146 cursor:pointer;
147 }
148 </style>
149 <script>
150 (
151 function setThemeMode() {
152 var x = localStorage.getItem("preferredmode");
153 var y = localStorage.getItem("preferredpagemode");
154 if (x == "dark") {
155 document.body.className += " darktheme";
156 }
157 if (y == "dark") {
158 document.body.className += " darkpagetheme";
159 }
160 })();
161 </script>
162 <div id="pagetop" class="w3-bar w3-card-2 notranslate">
163 <a href="https://www.w3schools.com" class="w3-bar-item w3-button w3-hover-none w3-left w3-padding-16" title="Home" style="width:77px">
164 <i class="fa fa-logo ws-text-green ws-hover-text-green" style="position:relative;font-size:42px!important;"></i>
165 </a>
166
167 <style>
168 .topnavmain_pro {
169 background-color:#9763f6;
170 color:#fff;
171 }
172 .topnavmain_pro:hover {
173 background-color:#7d53cc!important;
174 color:#fff!important;
175 }
176
177 @media screen and (max-width: 1160px) {
178 .ws-hide-1160 {
179 display: none !important;
180 }
181 }
182 @media screen and (max-width: 1300px) {
183 .ws-hide-1300 {
184 display: none !important;
185 }
186 }
187 @media screen and (max-width: 700px) {
188 .ws-hide-700 {
189 display: none !important;
190 }
191 }
192 @media screen and (max-width:380px) {
193 #w3loginbtn {
194 width:90px!important;
195 padding-left:2px!important;
196 padding-right:2px;
197 }
198 #signupbtn_topnav,#spacesbtn_topnav {
199 display:none!important;
200 }
201 }
202
203 </style>
204
205 <a class="w3-bar-item w3-button w3-hide-small barex bar-item-hover w3-padding-24" href="javascript:void(0)" onclick="w3_open_nav('tutorials')" id="navb
206 <a class="w3-bar-item w3-button w3-hide-small barex bar-item-hover w3-padding-24" href="javascript:void(0)" onclick="w3_open_nav('references')" id="nav
207 <a class="w3-bar-item w3-button w3-hide-small barex bar-item-hover w3-padding-24 ws-hide-800" href="javascript:void(0)" onclick="w3_open_nav('exercises
208
209 <a class="w3-bar-item w3-button bar-item-hover w3-padding-24 barex ws-hide-1300" href="/bootcamp/index.php" title="Web Development Bootcamp">Bootcamp</
210
211 <a class="w3-bar-item w3-button bar-item-hover w3-padding-24" href="javascript:void(0)" onclick="w3_open()" id="navbtn_menu" title="Menu" style="width:
212
213 <div id="loginactioncontainer" class="w3-right w3-padding-16" style="margin-left:1px;width:55px">
214 <div id="mypagediv"></div>
215 <!-- <button id="w3loginbtn" style="border:none;display:none;cursor:pointer" class="login w3-right w3-hover-greener" onclick='w3_open_nav("login")'
216 <a id="w3loginbtn" title="Login to your account" class="w3-bar-item w3-btn bar-item-hover w3-right ws-light-green" style="display:none;width:112px;
217 </div>
218
219 <div class="w3-right w3-padding-16">
220 <a id="spacesbtn_topnav" style="display:none;width: 93px;border-radius: 25px; margin-right: 20px;" class="w3-bar-item w3-button w3-right w3x-hide-sma
221 <a id="signupbtn_topnav" class="w3-bar-item w3-button w3-right barex ws-green ws-hover-green" style="width: 93px;border-radius: 25px; margin-right: 2
222 <a class="w3-bar-item w3-button w3-right ws-hide-1066 w3-hide-small barex ws-yellow ws-hover-yellow gt-btn-top-spaces" style="width: 150px;border-rad
223 <a class="w3-bar-item w3-button w3-right ws-hide-900 w3-hide-small barex ws-pink ws-hover-pink gt-btn-top-cert" style="border-radius: 25px; margin-ri
224 <a class="w3-bar-item w3-button w3-right w3-hide-small ws-hide-1160 barex topnavmain_pro gt-btn-top-pro" style="border-radius: 25px; margin-right: 15
225 <!-- <a class="ws-light-green ws-hover-green w3-bar-item w3-button w3-right w3-hide-small ws-hide-1300 barex" style="border-radius: 25px; margin-right
226 </div>
227 </div>
228
229 <div style='display:none;position:absolute;z-index:4;right:52px;height:44px;background-color:#282A35;letter-spacing:normal;' id='googleSearch'>
230 <div class='gcse-search'></div>
231 </div>
232 <div style='display:none;position:absolute;z-index:3;right:111px;height:44px;background-color:#282A35;text-align:right;padding-top:9px;' id='google_trans
233
234 <div class='w3-card-2 topnav notranslate' id='topnav'>
235 <div style="overflow:auto;">
236 <div class="w3-bar w3-left" style="width:100%;overflow:hidden;height:44px">
237 <a href='javascript:void(0);' class='topnav-icons fa fa-menu w3-hide-large w3-left w3-bar-item w3-button' onclick='open_menu()' title='Menu'></a>
238 <a href='/default.asp' class='topnav-icons fa fa-home w3-left w3-bar-item w3-button' title='Home'></a>
239 <a class="w3-bar-item w3-button" href='/html/default.asp' title='HTML Tutorial' style="padding-left:18px!important;padding-right:18px!important;">H
240 <a class="w3-bar-item w3-button" href='/css/default.asp' title='CSS Tutorial'>CSS</a>
241 <a class="w3-bar-item w3-button" href='/js/default.asp' title='JavaScript Tutorial'>JAVASCRIPT</a>
242 <a class="w3-bar-item w3-button" href='/sql/default.asp' title='SQL Tutorial'>SQL</a>
243 <a class="w3-bar-item w3-button" href='/python/default.asp' title='Python Tutorial'>PYTHON</a>
244 <a class="w3-bar-item w3-button" href='/java/default.asp' title='Java Tutorial'>JAVA</a>
245 <a class="w3-bar-item w3-button" href='/php/default.asp' title='PHP Tutorial'>PHP</a>
246 <a class="w3-bar-item w3-button" href='/bootstrap/bootstrap_ver.asp' title='Bootstrap Tutorial'>BOOTSTRAP</a>
247 <a class="w3-bar-item w3-button" href='/howto/default.asp' title='How To'>HOW TO</a>
248 <a class="w3-bar-item w3-button" href='/w3css/default.asp' title='W3.CSS Tutorial'>W3.CSS</a>
249 <a class="w3-bar-item w3-button" href='/c/index.php' title='C Tutorial'>C</a>
250 <a class="w3-bar-item w3-button" href='/cpp/default.asp' title='C++ Tutorial'>C++</a>
251 <a class="w3-bar-item w3-button" href='/cs/index.php' title='C# Tutorial'>C#</a>
252 <a class="w3-bar-item w3-button" href='/react/default.asp' title='React Tutorial'>REACT</a>
253 <a class="w3-bar-item w3-button" href='/r/default.asp' title='R Tutorial'>R</a>
254 <a class="w3-bar-item w3-button" href='/jquery/default.asp' title='jQuery Tutorial'>JQUERY</a>
255 <a class="w3-bar-item w3-button" href='/django/index.php' title='Django Tutorial'>DJANGO</a>
256 <a class="w3-bar-item w3-button" href='/typescript/index.php' title='Typescript Tutorial'>TYPESCRIPT</a>
257 <a class="w3-bar-item w3-button" href='/nodejs/default.asp' title='NodeJS Tutorial'>NODEJS</a>
258 <a class="w3-bar-item w3-button" href='/mysql/default.asp' title='MySQL Tutorial'>MYSQL</a>
259 <a href='javascript:void(0);' class='topnav-icons fa w3-right w3-bar-item w3-button' onclick='gSearch(this)' title='Search W3Schools'>&#xe802;</a>
260 <a href='javascript:void(0);' class='topnav-icons fa w3-right w3-bar-item w3-button' onclick='gTra(this)' title='Translate W3Schools'>&#xe801;</a>
261 <!-- <a href='javascript:void(0);' class='topnav-icons fa w3-right w3-bar-item w3-button' onclick='changecodetheme(this)' title='Toggle Dark Code Ex
262 <a href='javascript:void(0);' class='topnav-icons fa w3-right w3-bar-item w3-button' onmouseover="mouseoverdarkicon()" onmouseout="mouseoutofdarkic
263
264
265 <!--
266 <a class="w3-bar-item w3-button w3-right" id='topnavbtn_exercises' href='javascript:void(0);' onclick='w3_open_nav("exercises")' title='Exercises'>
267 -->
268
269 </div>
270
271 <div id="darkmodemenu" class="ws-black" onmouseover="mouseoverdarkicon()" onmouseout="mouseoutofdarkicon()">
272 <input id="radio_darkpage" type="checkbox" name="radio_theme_mode" onclick="click_darkpage()"><label for="radio_darkpage"> Dark mode</label>
273 <br>
274 <input id="radio_darkcode" type="checkbox" name="radio_theme_mode" onclick="click_darkcode()"><label for="radio_darkcode"> Dark code</label>
275 </div>
276
277 <nav id="nav_tutorials" class="w3-hide-small" style="position:absolute;padding-bottom:60px;">
278 <div class="w3-content" style="max-width:1100px;font-size:18px">
279 <span onclick="w3_close_nav('tutorials')" class="w3-button w3-xxxlarge w3-display-topright w3-hover-white sectionxsclosenavspan" style="padding-right:30
280 <div class="w3-row-padding w3-bar-block">
281 <div class="w3-container" style="padding-left:13px">
282 <h2 style="color:#FFF4A3;"><b>Tutorials</b></h2>
283 </div>
284 <div class="w3-col l3 m6">
285 <h3 class="w3-margin-top">HTML and CSS</h3>
286 <a class="w3-bar-item w3-button" href="/html/default.asp">Learn HTML</a>
287 <a class="w3-bar-item w3-button" href="/css/default.asp">Learn CSS</a>
288 <a class="w3-bar-item w3-button" href="/css/css_rwd_intro.asp" title="Responsive Web Design">Learn RWD</a>
289 <a class="w3-bar-item w3-button" href="/bootstrap/bootstrap_ver.asp">Learn Bootstrap</a>
290 <a class="w3-bar-item w3-button" href="/w3css/default.asp">Learn W3.CSS</a>
291 <a class="w3-bar-item w3-button" href="/colors/default.asp">Learn Colors</a>
292 <a class="w3-bar-item w3-button" href="/icons/default.asp">Learn Icons</a>
293 <a class="w3-bar-item w3-button" href="/graphics/default.asp">Learn Graphics</a>
294 <a class="w3-bar-item w3-button" href='/graphics/svg_intro.asp'>Learn SVG</a>
295 <a class="w3-bar-item w3-button" href='/graphics/canvas_intro.asp'>Learn Canvas</a>
296 <a class="w3-bar-item w3-button" href="/howto/default.asp">Learn How To</a>
297 <a class="w3-bar-item w3-button" href="/sass/default.php">Learn Sass</a>
298 <div class="w3-hide-large w3-hide-small">
299 <h3 class="w3-margin-top">Data Analytics</h3>
300 <a class="w3-bar-item w3-button" href="/ai/default.asp">Learn AI</a>
301 <a class="w3-bar-item w3-button" href="/python/python_ml_getting_started.asp">Learn Machine Learning</a>
302 <a class="w3-bar-item w3-button" href="/datascience/default.asp">Learn Data Science</a>
303 <a class="w3-bar-item w3-button" href="/python/numpy/default.asp">Learn NumPy</a>
304 <a class="w3-bar-item w3-button" href="/python/pandas/default.asp">Learn Pandas</a>
305 <a class="w3-bar-item w3-button" href="/python/scipy/index.php">Learn SciPy</a>
306 <a class="w3-bar-item w3-button" href="/python/matplotlib_intro.asp">Learn Matplotlib</a>
307 <a class="w3-bar-item w3-button" href="/statistics/index.php">Learn Statistics</a>
308 <a class="w3-bar-item w3-button" href="/excel/index.php">Learn Excel</a>
309
310 <h3 class="w3-margin-top">XML Tutorials</h3>
311 <a class="w3-bar-item w3-button" href="/xml/default.asp">Learn XML</a>
312 <a class="w3-bar-item w3-button" href='/xml/ajax_intro.asp'>Learn XML AJAX</a>
313 <a class="w3-bar-item w3-button" href="/xml/dom_intro.asp">Learn XML DOM</a>
314 <a class="w3-bar-item w3-button" href='/xml/xml_dtd_intro.asp'>Learn XML DTD</a>
315 <a class="w3-bar-item w3-button" href='/xml/schema_intro.asp'>Learn XML Schema</a>
316 <a class="w3-bar-item w3-button" href="/xml/xsl_intro.asp">Learn XSLT</a>
317 <a class="w3-bar-item w3-button" href='/xml/xpath_intro.asp'>Learn XPath</a>
318 <a class="w3-bar-item w3-button" href='/xml/xquery_intro.asp'>Learn XQuery</a>
319 </div>
320 </div>
321 <div class="w3-col l3 m6">
322 <h3 class="w3-margin-top">JavaScript</h3>
323 <a class="w3-bar-item w3-button" href="/js/default.asp">Learn JavaScript</a>
324 <a class="w3-bar-item w3-button" href="/jquery/default.asp">Learn jQuery</a>
325 <a class="w3-bar-item w3-button" href="/react/default.asp">Learn React</a>
326 <a class="w3-bar-item w3-button" href="/angular/default.asp">Learn AngularJS</a>
327 <a class="w3-bar-item w3-button" href="/js/js_json_intro.asp">Learn JSON</a>
328 <a class="w3-bar-item w3-button" href="/js/js_ajax_intro.asp">Learn AJAX</a>
329 <a class="w3-bar-item w3-button" href="/appml/default.asp">Learn AppML</a>
330 <a class="w3-bar-item w3-button" href="/w3js/default.asp">Learn W3.JS</a>
331
332 <h3 class="w3-margin-top">Programming</h3>
333 <a class="w3-bar-item w3-button" href="/python/default.asp">Learn Python</a>
334 <a class="w3-bar-item w3-button" href="/java/default.asp">Learn Java</a>
335 <a class="w3-bar-item w3-button" href="/c/index.php">Learn C</a>
336 <a class="w3-bar-item w3-button" href="/cpp/default.asp">Learn C++</a>
337 <a class="w3-bar-item w3-button" href="/cs/index.php">Learn C#</a>
338 <a class="w3-bar-item w3-button" href="/r/default.asp">Learn R</a>
339 <a class="w3-bar-item w3-button" href="/kotlin/index.php">Learn Kotlin</a>
340 <a class="w3-bar-item w3-button" href="/go/index.php">Learn Go</a>
341 <a class="w3-bar-item w3-button" href="/django/index.php">Learn Django</a>
342 <a class="w3-bar-item w3-button" href="/typescript/index.php">Learn TypeScript</a>
343 </div>
344 <div class="w3-col l3 m6">
345 <h3 class="w3-margin-top">Server Side</h3>
346 <a class="w3-bar-item w3-button" href="/sql/default.asp">Learn SQL</a>
347 <a class="w3-bar-item w3-button" href="/mysql/default.asp">Learn MySQL</a>
348 <a class="w3-bar-item w3-button" href="/php/default.asp">Learn PHP</a>
349 <a class="w3-bar-item w3-button" href='/asp/default.asp'>Learn ASP</a>
350 <a class="w3-bar-item w3-button" href='/nodejs/default.asp'>Learn Node.js</a>
351 <a class="w3-bar-item w3-button" href='/nodejs/nodejs_raspberrypi.asp'>Learn Raspberry Pi</a>
352 <a class="w3-bar-item w3-button" href='/git/default.asp'>Learn Git</a>
353 <a class="w3-bar-item w3-button" href='/mongodb/index.php'>Learn MongoDB</a>
354 <a class="w3-bar-item w3-button" href='/aws/index.php'>Learn AWS Cloud</a>
355
356 <h3 class="w3-margin-top">Web Building</h3>
357 <a class="w3-bar-item w3-button" href="/spaces/index.html" title="Get Your Own Website With W3shools Spaces">Create a Website <span class="ribbon-topn
358 <a class="w3-bar-item w3-button" href="/where_to_start.asp">Where To Start</a>
359 <a class="w3-bar-item w3-button" href="/w3css/w3css_templates.asp">Web Templates</a>
360 <a class="w3-bar-item w3-button" href="/browsers/default.asp">Web Statistics</a>
361 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com" target="_blank">Web Certificates</a>
362 <a class="w3-bar-item w3-button" href="/whatis/default.asp">Web Development</a>
363 <a class="w3-bar-item w3-button" href='/tryit/default.asp'>Code Editor</a>
364 <a class="w3-bar-item w3-button" href="/typingspeed/default.asp">Test Your Typing Speed</a>
365 <a class="w3-bar-item w3-button" href="/codegame/index.html" target="_blank">Play a Code Game</a>
366 <a class="w3-bar-item w3-button" href="/cybersecurity/index.php">Cyber Security</a>
367 <a class="w3-bar-item w3-button" href="/accessibility/index.php">Accessibility</a>
368 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/pages/newsletter" target="_blank">Join our Newsletter</a>
369 </div>
370 <div class="w3-col l3 m6 w3-hide-medium">
371 <h3 class="w3-margin-top">Data Analytics</h3>
372 <a class="w3-bar-item w3-button" href="/ai/default.asp">Learn AI</a>
373 <a class="w3-bar-item w3-button" href="/python/python_ml_getting_started.asp">Learn Machine Learning</a>
374 <a class="w3-bar-item w3-button" href="/datascience/default.asp">Learn Data Science</a>
375 <a class="w3-bar-item w3-button" href="/python/numpy/default.asp">Learn NumPy</a>
376 <a class="w3-bar-item w3-button" href="/python/pandas/default.asp">Learn Pandas</a>
377 <a class="w3-bar-item w3-button" href="/python/scipy/index.php">Learn SciPy</a>
378 <a class="w3-bar-item w3-button" href="/python/matplotlib_intro.asp">Learn Matplotlib</a>
379 <a class="w3-bar-item w3-button" href="/statistics/index.php">Learn Statistics</a>
380 <a class="w3-bar-item w3-button" href="/excel/index.php">Learn Excel</a>
381 <a class="w3-bar-item w3-button" href="/googlesheets/index.php">Learn Google Sheets</a>
382
383 <h3 class="w3-margin-top">XML Tutorials</h3>
384 <a class="w3-bar-item w3-button" href="/xml/default.asp">Learn XML</a>
385 <a class="w3-bar-item w3-button" href='/xml/ajax_intro.asp'>Learn XML AJAX</a>
386 <a class="w3-bar-item w3-button" href="/xml/dom_intro.asp">Learn XML DOM</a>
387 <a class="w3-bar-item w3-button" href='/xml/xml_dtd_intro.asp'>Learn XML DTD</a>
388 <a class="w3-bar-item w3-button" href='/xml/schema_intro.asp'>Learn XML Schema</a>
389 <a class="w3-bar-item w3-button" href="/xml/xsl_intro.asp">Learn XSLT</a>
390 <a class="w3-bar-item w3-button" href='/xml/xpath_intro.asp'>Learn XPath</a>
391 <a class="w3-bar-item w3-button" href='/xml/xquery_intro.asp'>Learn XQuery</a>
392 </div>
393 </div>
394 </div>
395 <br class="hidesm">
396 </nav>
397
398 <nav id="nav_references" class="w3-hide-small" style="position:absolute;padding-bottom:60px;">
399 <div class="w3-content" style="max-width:1100px;font-size:18px">
400 <span onclick="w3_close_nav('references')" class="w3-button w3-xxxlarge w3-display-topright w3-hover-white sectionxsclosenavspan" style="padding-right:3
401 <div class="w3-row-padding w3-bar-block">
402 <div class="w3-container" style="padding-left:13px">
403 <h2 style="color:#FFF4A3;"><b>References</b></h2>
404 </div>
405 <div class="w3-col l3 m6">
406 <h3 class="w3-margin-top">HTML</h3>
407 <a class="w3-bar-item w3-button" href='/tags/default.asp'>HTML Tag Reference</a>
408 <a class="w3-bar-item w3-button" href='/tags/ref_html_browsersupport.asp'>HTML Browser Support</a>
409 <a class="w3-bar-item w3-button" href='/tags/ref_eventattributes.asp'>HTML Event Reference</a>
410 <a class="w3-bar-item w3-button" href='/colors/default.asp'>HTML Color Reference</a>
411 <a class="w3-bar-item w3-button" href='/tags/ref_attributes.asp'>HTML Attribute Reference</a>
412 <a class="w3-bar-item w3-button" href='/tags/ref_canvas.asp'>HTML Canvas Reference</a>
413 <a class="w3-bar-item w3-button" href='/graphics/svg_reference.asp'>HTML SVG Reference</a>
414 <a class="w3-bar-item w3-button" href='/graphics/google_maps_reference.asp'>Google Maps Reference</a>
415 <h3 class="w3-margin-top">CSS</h3>
416 <a class="w3-bar-item w3-button" href='/cssref/index.php'>CSS Reference</a>
417 <a class="w3-bar-item w3-button" href='/cssref/css3_browsersupport.asp'>CSS Browser Support</a>
418 <a class="w3-bar-item w3-button" href='/cssref/css_selectors.asp'>CSS Selector Reference</a>
419 <a class="w3-bar-item w3-button" href='/bootstrap/bootstrap_ref_all_classes.asp'>Bootstrap 3 Reference</a>
420 <a class="w3-bar-item w3-button" href='/bootstrap4/bootstrap_ref_all_classes.asp'>Bootstrap 4 Reference</a>
421 <a class="w3-bar-item w3-button" href='/w3css/w3css_references.asp'>W3.CSS Reference</a>
422 <a class="w3-bar-item w3-button" href='/icons/icons_reference.asp'>Icon Reference</a>
423 <a class="w3-bar-item w3-button" href='/sass/sass_functions_string.php'>Sass Reference</a>
424 </div>
425 <div class="w3-col l3 m6">
426 <h3 class="w3-margin-top">JavaScript</h3>
427 <a class="w3-bar-item w3-button" href='/jsref/default.asp'>JavaScript Reference</a>
428 <a class="w3-bar-item w3-button" href='/jsref/default.asp'>HTML DOM Reference</a>
429 <a class="w3-bar-item w3-button" href='/jquery/jquery_ref_overview.asp'>jQuery Reference</a>
430 <a class="w3-bar-item w3-button" href='/angular/angular_ref_directives.asp'>AngularJS Reference</a>
431 <a class="w3-bar-item w3-button" href="/appml/appml_reference.asp">AppML Reference</a>
432 <a class="w3-bar-item w3-button" href="/w3js/w3js_references.asp">W3.JS Reference</a>
433
434 <h3 class="w3-margin-top">Programming</h3>
435 <a class="w3-bar-item w3-button" href='/python/python_reference.asp'>Python Reference</a>
436 <a class="w3-bar-item w3-button" href='/java/java_ref_keywords.asp'>Java Reference</a>
437 </div>
438 <div class="w3-col l3 m6">
439 <h3 class="w3-margin-top">Server Side</h3>
440 <a class="w3-bar-item w3-button" href='/sql/sql_ref_keywords.asp'>SQL Reference</a>
441 <a class="w3-bar-item w3-button" href='/mysql/mysql_ref_functions.asp'>MySQL Reference</a>
442 <a class="w3-bar-item w3-button" href='/php/php_ref_overview.asp'>PHP Reference</a>
443 <a class="w3-bar-item w3-button" href='/asp/asp_ref_response.asp'>ASP Reference</a>
444 <h3 class="w3-margin-top">XML</h3>
445 <a class="w3-bar-item w3-button" href='/xml/dom_nodetype.asp'>XML DOM Reference</a>
446 <a class="w3-bar-item w3-button" href='/xml/dom_http.asp'>XML Http Reference</a>
447 <a class="w3-bar-item w3-button" href='/xml/xsl_elementref.asp'>XSLT Reference</a>
448 <a class="w3-bar-item w3-button" href='/xml/schema_elements_ref.asp'>XML Schema Reference</a>
449 </div>
450 <div class="w3-col l3 m6">
451 <h3 class="w3-margin-top">Character Sets</h3>
452 <a class="w3-bar-item w3-button" href='/charsets/default.asp'>HTML Character Sets</a>
453 <a class="w3-bar-item w3-button" href='/charsets/ref_html_ascii.asp'>HTML ASCII</a>
454 <a class="w3-bar-item w3-button" href='/charsets/ref_html_ansi.asp'>HTML ANSI</a>
455 <a class="w3-bar-item w3-button" href='/charsets/ref_html_ansi.asp'>HTML Windows-1252</a>
456 <a class="w3-bar-item w3-button" href='/charsets/ref_html_8859.asp'>HTML ISO-8859-1</a>
457 <a class="w3-bar-item w3-button" href='/charsets/ref_html_symbols.asp'>HTML Symbols</a>
458 <a class="w3-bar-item w3-button" href='/charsets/ref_html_utf8.asp'>HTML UTF-8</a>
459 </div>
460 </div>
461 <br class="hidesm">
462 </div>
463 </nav>
464
465 <nav id="nav_exercises" class="w3-hide-small" style="position:absolute;padding-bottom:60px;">
466 <div class="w3-content" style="max-width:1100px;font-size:18px">
467 <span onclick="w3_close_nav('exercises')" class="w3-button w3-xxxlarge w3-display-topright w3-hover-white sectionxsclosenavspan" style="padding-right:30
468 <div class="w3-row-padding w3-bar-block">
469 <div class="w3-container" style="padding-left:13px">
470 <h2 style="color:#FFF4A3;"><b>Exercises and Quizzes</b></h2>
471 </div>
472 <div class="w3-col l3 m6">
473 <h3 class="w3-margin-top"><a class="ws-btn ws-yellow w3-hover-text-white" style="width:155px;font-size:21px" href="/exercises/index.php">Exercises</a>
474 <a class="w3-bar-item w3-button" href="/html/html_exercises.asp">HTML Exercises</a>
475 <a class="w3-bar-item w3-button" href="/css/css_exercises.asp">CSS Exercises</a>
476 <a class="w3-bar-item w3-button" href="/js/js_exercises.asp">JavaScript Exercises</a>
477 <a class="w3-bar-item w3-button" href="/python/python_exercises.asp">Python Exercises</a>
478 <a class="w3-bar-item w3-button" href="/sql/sql_exercises.asp">SQL Exercises</a>
479 <a class="w3-bar-item w3-button" href="/php/php_exercises.asp">PHP Exercises</a>
480 <a class="w3-bar-item w3-button" href="/java/java_exercises.asp">Java Exercises</a>
481 <a class="w3-bar-item w3-button" href="/c/c_exercises.php">C Exercises</a>
482 <a class="w3-bar-item w3-button" href="/cpp/cpp_exercises.asp">C++ Exercises</a>
483 <a class="w3-bar-item w3-button" href="/cs/cs_exercises.asp">C# Exercises</a>
484 <a class="w3-bar-item w3-button" href="/jquery/jquery_exercises.asp">jQuery Exercises</a>
485 <a class="w3-bar-item w3-button" href="/react/react_exercises.asp">React.js Exercises</a>
486 <a class="w3-bar-item w3-button" href="/mysql/mysql_exercises.asp">MySQL Exercises</a>
487 <a class="w3-bar-item w3-button" href="/bootstrap5/bootstrap_exercises.php">Bootstrap 5 Exercises</a>
488 <a class="w3-bar-item w3-button" href="/bootstrap4/bootstrap_exercises.asp">Bootstrap 4 Exercises</a>
489 <a class="w3-bar-item w3-button" href="/bootstrap/bootstrap_exercises.asp">Bootstrap 3 Exercises</a>
490 <a class="w3-bar-item w3-button" href="/python/numpy/numpy_exercises.asp">NumPy Exercises</a>
491 <a class="w3-bar-item w3-button" href="/python/pandas/pandas_exercises.asp">Pandas Exercises</a>
492 <a class="w3-bar-item w3-button" href="/python/scipy/scipy_exercises.php">SciPy Exercises</a>
493 <a class="w3-bar-item w3-button" href="/typescript/typescript_exercises.php">TypeScript Exercises</a>
494 <a class="w3-bar-item w3-button" href="/excel/excel_exercises.php">Excel Exercises</a>
495 <a class="w3-bar-item w3-button" href="/r/r_exercises.asp">R Exercises</a>
496 <a class="w3-bar-item w3-button" href="/git/git_exercises.asp">Git Exercises</a>
497 <a class="w3-bar-item w3-button" href="/kotlin/kotlin_exercises.php">Kotlin Exercises</a>
498 <a class="w3-bar-item w3-button" href="/go/go_exercises.php">Go Exercises</a>
499 <a class="w3-bar-item w3-button" href="/mongodb/mongodb_exercises.php">MongoDB Exercises</a>
500 </div>
501 <div class="w3-col l3 m6">
502 <h3 class="w3-margin-top"><a class="ws-btn ws-yellow w3-hover-text-white" style="width:135px;font-size:21px" href="/quiztest/default.asp">Quizzes</a><
503 <a class="w3-bar-item w3-button" href="/html/html_quiz.asp" target="_top">HTML Quiz</a>
504 <a class="w3-bar-item w3-button" href="/css/css_quiz.asp" target="_top">CSS Quiz</a>
505 <a class="w3-bar-item w3-button" href="/js/js_quiz.asp" target="_top">JavaScript Quiz</a>
506 <a class="w3-bar-item w3-button" href="/python/python_quiz.asp" target="_top">Python Quiz</a>
507 <a class="w3-bar-item w3-button" href="/sql/sql_quiz.asp" target="_top">SQL Quiz</a>
508 <a class="w3-bar-item w3-button" href="/php/php_quiz.asp" target="_top">PHP Quiz</a>
509 <a class="w3-bar-item w3-button" href="/java/java_quiz.asp" target="_top">Java Quiz</a>
510 <a class="w3-bar-item w3-button" href="/c/c_quiz.php">C Quiz</a>
511 <a class="w3-bar-item w3-button" href="/cpp/cpp_quiz.asp" target="_top">C++ Quiz</a>
512 <a class="w3-bar-item w3-button" href="/cs/cs_quiz.asp" target="_top">C# Quiz</a>
513 <a class="w3-bar-item w3-button" href="/jquery/jquery_quiz.asp" target="_top">jQuery Quiz</a>
514 <a class="w3-bar-item w3-button" href="/react/react_quiz.asp">React.js Quiz</a>
515 <a class="w3-bar-item w3-button" href="/mysql/mysql_quiz.asp" target="_top">MySQL Quiz</a>
516 <a class="w3-bar-item w3-button" href="/bootstrap5/bootstrap_quiz.php" target="_top">Bootstrap 5 Quiz</a>
517 <a class="w3-bar-item w3-button" href="/bootstrap4/bootstrap_quiz.asp" target="_top">Bootstrap 4 Quiz</a>
518 <a class="w3-bar-item w3-button" href="/bootstrap/bootstrap_quiz.asp" target="_top">Bootstrap 3 Quiz</a>
519 <a class="w3-bar-item w3-button" href="/python/numpy/numpy_quiz.asp" target="_top">NumPy Quiz</a>
520 <a class="w3-bar-item w3-button" href="/python/pandas/pandas_quiz.asp" target="_top">Pandas Quiz</a>
521 <a class="w3-bar-item w3-button" href="/python/scipy/scipy_quiz.php" target="_top">SciPy Quiz</a>
522 <a class="w3-bar-item w3-button" href="/typescript/typescript_quiz.php">TypeScript Quiz</a>
523 <a class="w3-bar-item w3-button" href="/xml/xml_quiz.asp" target="_top">XML Quiz</a>
524 <a class="w3-bar-item w3-button" href="/r/r_quiz.asp" target="_top">R Quiz</a>
525 <a class="w3-bar-item w3-button" href="/git/git_quiz.asp">Git Quiz</a>
526 <a class="w3-bar-item w3-button" href="/kotlin/kotlin_quiz.php" target="_top">Kotlin Quiz</a>
527 <a class="w3-bar-item w3-button" href="/cybersecurity/cybersecurity_quiz.php">Cyber Security Quiz</a>
528 <a class="w3-bar-item w3-button" href="/accessibility/accessibility_quiz.php">Accessibility Quiz</a>
529 </div>
530 <div class="w3-col l3 m6">
531 <h3 class="w3-margin-top"><a class="ws-btn ws-yellow w3-hover-text-white" style="width:135px;font-size:21px" href="https://campus.w3schools.com/collec
532 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/html-course" target="_blank">HTML Course</a>
533 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/css-course" target="_blank">CSS Course</a>
534 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/javascript-course" target="_blank">JavaScript
535 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/front-end-course" target="_blank">Front End Co
536 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/python-course" target="_blank">Python Course</
537 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/sql-course" target="_blank">SQL Course</a>
538 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/php-course" target="_blank">PHP Course</a>
539 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/java-course" target="_blank">Java Course</a>
540 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/c-course-1" target="_blank">C++ Course</a>
541 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/c-course" target="_blank">C# Course</a>
542 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/jquery-course" target="_blank">jQuery Course</
543 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/react-js-course" target="_blank">React.js Cour
544 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/bootstrap-4-course" target="_blank">Bootstrap
545 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/bootstrap-course" target="_blank">Bootstrap 3
546 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/numpy-course" target="_blank">NumPy Course</a>
547 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/pandas-course" target="_blank">Pandas Course</
548 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/learn-typescript" target="_blank">TypeScript C
549 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/xml-course" target="_blank">XML Course</a>
550 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/r-course" target="_blank">R Course</a>
551 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/data-analytics-program" target="_blank">Data A
552 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/cyber-security-course" target="_blank">Cyber S
553 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/accessibility-course" target="_blank">Accessib
554 </div>
555 <div class="w3-col l3 m6">
556 <h3 class="w3-margin-top"><a class="ws-btn ws-yellow w3-hover-text-white" style="width:150px;font-size:21px" href="https://campus.w3schools.com/collec
557 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/html-certificate" target="_blank">HTML Certifi
558 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/css-certificate" target="_blank">CSS Certifica
559 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/javascript-certificate" target="_blank">JavaSc
560 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/front-end-certificate" target="_blank">Front E
561 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/python-certificate" target="_blank">Python Cer
562 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/sql-certificate" target="_blank">SQL Certifica
563 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/php-certificate" target="_blank">PHP Certifica
564 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/java-certificate" target="_blank">Java Certifi
565 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/c-certificate" target="_blank">C++ Certificate
566 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/c-certificate-1" target="_blank">C# Certificat
567 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/jquery-certificate" target="_blank">jQuery Cer
568 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/react-js-certificate" target="_blank">React.js
569 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/mysql-certificate" target="_blank">MySQL Certi
570 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/bootstrap-5-certificate" target="_blank">Boots
571 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/bootstrap-4-certificate" target="_blank">Boots
572 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/bootstrap-3-certificate" target="_blank">Boots
573 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/typescript-certificate" target="_blank">TypeSc
574 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/xml-certificate" target="_blank">XML Certifica
575 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/excel-certificate" target="_blank">Excel Certi
576 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/data-science-certificate" target="_blank">Data
577 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/cyber-security-certificate" target="_blank">Cy
578 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/accessibility-certificate" target="_blank">Acc
579 </div>
580 </div>
581 <br class="hidesm">
582 </div>
583 </nav>
584
585 </div>
586 </div>
587
588 <div id='myAccordion' class="w3-card-2 w3-center w3-hide-large w3-hide-medium ws-grey" style="width:100%;position:absolute;display:none;">
589 <a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-xxlarge w3-right">&times;</a><br>
590 <div class="w3-container w3-padding-32">
591 <a class="w3-button w3-block" style="font-size:22px;" onclick="open_xs_menu('tutorials');" href="javascript:void(0);">Tutorials <i class='fa fa-caret
592 <div id="sectionxs_tutorials" class="w3-left-align w3-show" style="background-color:#282A35;color:white;"></div>
593 <a class="w3-button w3-block" style="font-size:22px;" onclick="open_xs_menu('references')" href="javascript:void(0);">References <i class='fa fa-care
594 <div id="sectionxs_references" class="w3-left-align w3-show" style="background-color:#282A35;color:white;"></div>
595 <a class="w3-button w3-block" style="font-size:22px;" onclick="open_xs_menu('exercises')" href="javascript:void(0);">Exercises <i class='fa fa-caret-
596 <div id="sectionxs_exercises" class="w3-left-align w3-show" style="background-color:#282A35;color:white;"></div>
597 <a class="w3-button w3-block" style="font-size:22px;" href="https://campus.w3schools.com/collections/course-catalog" target="_blank">Get Certified</a
598 <a class="w3-button w3-block" style="font-size:22px;" href="/signup/index.html">Sign Up</a>
599 <a class="w3-button w3-block" style="font-size:22px;" href="/pro/index.php" title="Upgrade to Improve Your Learning Experiences">Upgrade</a>
600 <a class="w3-button w3-block" style="font-size:22px;" href="/spaces/index.html" title="Get Your Own Website With W3schools Spaces">Spaces</a>
601 <a class="w3-button w3-block" style="font-size:22px;" href="/bootcamp/index.php">Bootcamp</a>
602 <a class="w3-button w3-block" style="font-size:22px;" href="/videos/index.php" title="Video Tutorials">Videos</a>
603 <a class="w3-button w3-block" style="font-size:22px;" href="https://campus.w3schools.com" target="_blank">Shop</a>
604 </div>
605 </div>
606
607 <script>
608 (
609 function setThemeCheckboxes() {
610 var x = localStorage.getItem("preferredmode");
611 var y = localStorage.getItem("preferredpagemode");
612 if (x == "dark") {
613 document.getElementById("radio_darkcode").checked = true;
614
615 }
616 if (y == "dark") {
617 document.getElementById("radio_darkpage").checked = true;
618 }
619 })();
620
621 function mouseoverdarkicon() {
622 if(window.matchMedia("(pointer: coarse)").matches) {
623 return false;
624 }
625 var a = document.getElementById("darkmodemenu");
626 a.style.top = "44px";
627 }
628 function mouseoutofdarkicon() {
629 var a = document.getElementById("darkmodemenu");
630 a.style.top = "-40px";
631 }
632 function changepagetheme(n) {
633 var a = document.getElementById("radio_darkcode");
634 var b = document.getElementById("radio_darkpage");
635 document.body.className = document.body.className.replace("darktheme", "");
636 document.body.className = document.body.className.replace("darkpagetheme", "");
637 document.body.className = document.body.className.replace(" ", " ");
638 if (a.checked && b.checked) {
639 localStorage.setItem("preferredmode", "light");
640 localStorage.setItem("preferredpagemode", "light");
641 a.checked = false;
642 b.checked = false;
643 } else {
644 document.body.className += " darktheme";
645 document.body.className += " darkpagetheme";
646 localStorage.setItem("preferredmode", "dark");
647 localStorage.setItem("preferredpagemode", "dark");
648 a.checked = true;
649 b.checked = true;
650 }
651 }
652
653
654 function click_darkpage() {
655 var b = document.getElementById("radio_darkpage");
656 if (b.checked) {
657 document.body.className += " darkpagetheme";
658 document.body.className = document.body.className.replace(" ", " ");
659 localStorage.setItem("preferredpagemode", "dark");
660 } else {
661 document.body.className = document.body.className.replace("darkpagetheme", "");
662 document.body.className = document.body.className.replace(" ", " ");
663 localStorage.setItem("preferredpagemode", "light");
664 }
665 }
666
667 function click_darkcode() {
668 var a = document.getElementById("radio_darkcode");
669 if (a.checked) {
670 document.body.className += " darktheme";
671 document.body.className = document.body.className.replace(" ", " ");
672 localStorage.setItem("preferredmode", "dark");
673 } else {
674 document.body.className = document.body.className.replace("darktheme", "");
675 document.body.className = document.body.className.replace(" ", " ");
676 localStorage.setItem("preferredmode", "light");
677 }
678 }
679 </script>
680
681 <div class='w3-sidebar w3-collapse' id='sidenav'>
682 <div id='leftmenuinner'>
683 <div id='leftmenuinnerinner'>
684 <!-- <a href='javascript:void(0)' onclick='close_menu()' class='w3-button w3-hide-large w3-large w3-display-topright' style='right:16px;padding:3px 12px
685 <h2 class="left">JS Tutorial</h2>
686 <a target="_top" href="default.asp">JS HOME</a>
687 <a target="_top" href="js_intro.asp">JS Introduction</a>
688 <a target="_top" href="js_whereto.asp">JS Where To</a>
689 <a target="_top" href="js_output.asp">JS Output</a>
690 <a target="_top" href="js_statements.asp">JS Statements</a>
691 <a target="_top" href="js_syntax.asp">JS Syntax</a>
692 <a target="_top" href="js_comments.asp">JS Comments</a>
693 <a target="_top" href="js_variables.asp">JS Variables</a>
694 <a target="_top" href="js_let.asp">JS Let</a>
695 <a target="_top" href="js_const.asp">JS Const</a>
696 <a target="_top" href="js_operators.asp">JS Operators</a>
697 <a target="_top" href="js_arithmetic.asp">JS Arithmetic</a>
698 <a target="_top" href="js_assignment.asp">JS Assignment</a>
699 <a target="_top" href="js_datatypes.asp">JS Data Types</a>
700 <a target="_top" href="js_functions.asp">JS Functions</a>
701 <a target="_top" href="js_objects.asp">JS Objects</a>
702 <a target="_top" href="js_events.asp">JS Events</a>
703 <a target="_top" href="js_strings.asp">JS Strings</a>
704 <a target="_top" href="js_string_methods.asp">JS String Methods</a>
705 <a target="_top" href="js_string_search.asp">JS String Search</a>
706 <a target="_top" href="js_string_templates.asp">JS String Templates</a>
707 <a target="_top" href="js_numbers.asp">JS Numbers</a>
708 <a target="_top" href="js_bigint.asp">JS BigInt</a>
709 <a target="_top" href="js_number_methods.asp">JS Number Methods</a>
710 <a target="_top" href="js_number_properties.asp">JS Number Properties</a>
711 <a target="_top" href="js_arrays.asp">JS Arrays</a>
712 <a target="_top" href="js_array_methods.asp">JS Array Methods</a>
713 <a target="_top" href="js_array_sort.asp">JS Array Sort</a>
714 <a target="_top" href="js_array_iteration.asp">JS Array Iteration</a>
715 <a target="_top" href="js_array_const.asp">JS Array Const</a>
716 <a target="_top" href="js_dates.asp">JS Dates</a>
717 <a target="_top" href="js_date_formats.asp">JS Date Formats</a>
718 <a target="_top" href="js_date_methods.asp">JS Date Get Methods</a>
719 <a target="_top" href="js_date_methods_set.asp">JS Date Set Methods</a>
720 <a target="_top" href="js_math.asp">JS Math</a>
721 <a target="_top" href="js_random.asp">JS Random</a>
722 <a target="_top" href="js_booleans.asp">JS Booleans</a>
723 <a target="_top" href="js_comparisons.asp">JS Comparisons</a>
724 <a target="_top" href="js_if_else.asp">JS If Else</a>
725 <a target="_top" href="js_switch.asp">JS Switch</a>
726 <a target="_top" href="js_loop_for.asp">JS Loop For</a>
727 <a target="_top" href="js_loop_forin.asp">JS Loop For In</a>
728 <a target="_top" href="js_loop_forof.asp">JS Loop For Of</a>
729 <a target="_top" href="js_loop_while.asp">JS Loop While</a>
730 <a target="_top" href="js_break.asp">JS Break</a>
731 <a target="_top" href="js_iterables.asp">JS Iterables</a>
732 <a target="_top" href="js_sets.asp">JS Sets</a>
733 <a target="_top" href="js_maps.asp">JS Maps</a>
734 <a target="_top" href="js_typeof.asp">JS Typeof</a>
735 <a target="_top" href="js_type_conversion.asp">JS Type Conversion</a>
736 <a target="_top" href="js_bitwise.asp">JS Bitwise</a>
737 <a target="_top" href="js_regexp.asp">JS RegExp</a>
738 <a target="_top" href="js_precedence.asp">JS Precedence</a>
739 <a target="_top" href="js_errors.asp">JS Errors</a>
740 <a target="_top" href="js_scope.asp">JS Scope</a>
741 <a target="_top" href="js_hoisting.asp">JS Hoisting</a>
742 <a target="_top" href="js_strict.asp">JS Strict Mode</a>
743 <a target="_top" href="js_this.asp">JS this Keyword</a>
744 <a target="_top" href="js_arrow_function.asp">JS Arrow Function</a>
745 <a target="_top" href="js_classes.asp">JS Classes</a>
746 <a target="_top" href="js_modules.asp">JS Modules</a>
747 <a target="_top" href="js_json.asp">JS JSON</a>
748 <a target="_top" href="js_debugging.asp">JS Debugging</a>
749 <a target="_top" href="js_conventions.asp">JS Style Guide</a>
750 <a target="_top" href="js_best_practices.asp">JS Best Practices</a>
751 <a target="_top" href="js_mistakes.asp">JS Mistakes</a>
752 <a target="_top" href="js_performance.asp">JS Performance</a>
753 <a target="_top" href="js_reserved.asp">JS Reserved Words</a>
754 <br>
755 <h2 class="left">JS Versions</h2>
756 <a target="_top" href="js_versions.asp">JS Versions</a>
757 <a target="_top" href="js_es5.asp">JS 2009 (ES5)</a>
758 <a target="_top" href="js_es6.asp">JS 2015 (ES6)</a>
759 <a target="_top" href="js_2016.asp">JS 2016</a>
760 <a target="_top" href="js_2017.asp">JS 2017</a>
761 <a target="_top" href="js_2018.asp">JS 2018</a>
762 <a target="_top" href="js_2019.asp">JS 2019</a>
763 <a target="_top" href="js_2020.asp">JS 2020</a>
764 <a target="_top" href="js_2021.asp">JS 2021/2022</a>
765 <a target="_top" href="js_ie_edge.asp">JS IE / Edge</a>
766 <a target="_top" href="js_history.asp">JS History</a>
767 <br>
768 <h2 class="left">JS Objects</h2>
769 <a target="_top" href="js_object_definition.asp">Object Definitions</a>
770 <a target="_top" href="js_object_properties.asp">Object Properties</a>
771 <a target="_top" href="js_object_methods.asp">Object Methods</a>
772 <a target="_top" href="js_object_display.asp">Object Display</a>
773 <a target="_top" href="js_object_accessors.asp">Object Accessors</a>
774 <a target="_top" href="js_object_constructors.asp">Object Constructors</a>
775 <a target="_top" href="js_object_prototypes.asp">Object Prototypes</a>
776 <a target="_top" href="js_object_iterables.asp">Object Iterables</a>
777 <a target="_top" href="js_object_sets.asp">Object Sets</a>
778 <a target="_top" href="js_object_maps.asp">Object Maps</a>
779 <a target="_top" href="js_object_es5.asp">Object Reference</a>
780 <br>
781 <h2 class="left">JS Functions</h2>
782 <a target="_top" href="js_function_definition.asp">Function Definitions</a>
783 <a target="_top" href="js_function_parameters.asp">Function Parameters</a>
784 <a target="_top" href="js_function_invocation.asp">Function Invocation</a>
785 <a target="_top" href="js_function_call.asp">Function Call</a>
786 <a target="_top" href="js_function_apply.asp">Function Apply</a>
787 <a target="_top" href="js_function_bind.asp">Function Bind</a>
788 <a target="_top" href="js_function_closures.asp">Function Closures</a>
789 <br>
790 <h2 class="left">JS Classes</h2>
791 <a target="_top" href="js_class_intro.asp">Class Intro</a>
792 <a target="_top" href="js_class_inheritance.asp">Class Inheritance</a>
793 <a target="_top" href="js_class_static.asp">Class Static</a>
794 <br>
795 <h2 class="left">JS Async</h2>
796 <a target="_top" href="js_callback.asp">JS Callbacks</a>
797 <a target="_top" href="js_asynchronous.asp">JS Asynchronous</a>
798 <a target="_top" href="js_promise.asp">JS Promises</a>
799 <a target="_top" href="js_async.asp">JS Async/Await</a>
800 <br>
801 <h2 class="left">JS HTML DOM</h2>
802 <a target="_top" href="js_htmldom.asp">DOM Intro</a>
803 <a target="_top" href="js_htmldom_methods.asp">DOM Methods</a>
804 <a target="_top" href="js_htmldom_document.asp">DOM Document</a>
805 <a target="_top" href="js_htmldom_elements.asp">DOM Elements</a>
806 <a target="_top" href="js_htmldom_html.asp">DOM HTML</a>
807 <a target="_top" href="js_validation.asp">DOM Forms</a>
808 <a target="_top" href="js_htmldom_css.asp">DOM CSS</a>
809 <a target="_top" href="js_htmldom_animate.asp">DOM Animations</a>
810 <a target="_top" href="js_htmldom_events.asp">DOM Events</a>
811 <a target="_top" href="js_htmldom_eventlistener.asp">DOM Event Listener</a>
812 <a target="_top" href="js_htmldom_navigation.asp">DOM Navigation</a>
813 <a target="_top" href="js_htmldom_nodes.asp">DOM Nodes</a>
814 <a target="_top" href="js_htmldom_collections.asp">DOM Collections</a>
815 <a target="_top" href="js_htmldom_nodelist.asp">DOM Node Lists</a>
816 <br>
817 <h2 class="left">JS Browser BOM</h2>
818 <a target="_top" href="js_window.asp">JS Window</a>
819 <a target="_top" href="js_window_screen.asp">JS Screen</a>
820 <a target="_top" href="js_window_location.asp">JS Location</a>
821 <a target="_top" href="js_window_history.asp">JS History</a>
822 <a target="_top" href="js_window_navigator.asp">JS Navigator</a>
823 <a target="_top" href="js_popup.asp">JS Popup Alert</a>
824 <a target="_top" href="js_timing.asp">JS Timing</a>
825 <a target="_top" href="js_cookies.asp">JS Cookies</a>
826 <br>
827 <h2 class="left">JS Web APIs</h2>
828 <a target="_top" href="js_api_intro.asp">Web API Intro</a>
829 <a target="_top" href="js_validation_api.asp">Web Forms API</a>
830 <a target="_top" href="js_api_history.asp">Web History API</a>
831 <a target="_top" href="js_api_web_storage.asp">Web Storage API</a>
832 <a target="_top" href="js_api_web_workers.asp">Web Worker API</a>
833 <a target="_top" href="js_api_fetch.asp">Web Fetch API</a>
834 <a target="_top" href="js_api_geolocation.asp">Web Geolocation API</a>
835 <br>
836 <h2 class="left">JS AJAX</h2>
837 <a target="_top" href="js_ajax_intro.asp">AJAX Intro</a>
838 <a target="_top" href="js_ajax_http.asp">AJAX XMLHttp</a>
839 <a target="_top" href="js_ajax_http_send.asp">AJAX Request</a>
840 <a target="_top" href="js_ajax_http_response.asp">AJAX Response</a>
841 <a target="_top" href="js_ajax_xmlfile.asp">AJAX XML File</a>
842 <a target="_top" href="js_ajax_php.asp">AJAX PHP</a>
843 <a target="_top" href="js_ajax_asp.asp">AJAX ASP</a>
844 <a target="_top" href="js_ajax_database.asp">AJAX Database</a>
845 <a target="_top" href="js_ajax_applications.asp">AJAX Applications</a>
846 <a target="_top" href="js_ajax_examples.asp">AJAX Examples</a>
847 <br>
848 <h2 class="left">JS JSON</h2>
849 <a target="_top" href="js_json_intro.asp">JSON Intro</a>
850 <a target="_top" href="js_json_syntax.asp">JSON Syntax</a>
851 <a target="_top" href="js_json_xml.asp">JSON vs XML</a>
852 <a target="_top" href="js_json_datatypes.asp">JSON Data Types</a>
853 <a target="_top" href="js_json_parse.asp">JSON Parse</a>
854 <a target="_top" href="js_json_stringify.asp">JSON Stringify</a>
855 <a target="_top" href="js_json_objects.asp">JSON Objects</a>
856 <a target="_top" href="js_json_arrays.asp">JSON Arrays</a>
857 <a target="_top" href="js_json_server.asp">JSON Server</a>
858 <a target="_top" href="js_json_php.asp">JSON PHP</a>
859 <a target="_top" href="js_json_html.asp">JSON HTML</a>
860 <a target="_top" href="js_json_jsonp.asp">JSON JSONP</a>
861 <br>
862 <h2 class="left">JS vs jQuery</h2>
863 <a target="_top" href="js_jquery_selectors.asp">jQuery Selectors</a>
864 <a target="_top" href="js_jquery_elements.asp">jQuery HTML</a>
865 <a target="_top" href="js_jquery_css.asp">jQuery CSS</a>
866 <a target="_top" href="js_jquery_dom.asp">jQuery DOM</a>
867 <br>
868 <h2 class="left">JS Graphics</h2>
869 <a target="_top" href="js_graphics.asp">JS Graphics</a>
870 <a target="_top" href="js_graphics_canvas.asp">JS Canvas</a>
871 <a target="_top" href="js_graphics_plotly.asp">JS Plotly</a>
872 <a target="_top" href="js_graphics_chartjs.asp">JS Chart.js</a>
873 <a target="_top" href="js_graphics_google_chart.asp">JS Google Chart</a>
874 <a target="_top" href="js_graphics_d3js.asp">JS D3.js</a>
875 <br>
876 <h2 class="left">JS Examples</h2>
877 <a target="_top" href="js_examples.asp">JS Examples</a>
878 <a target="_top" href="js_dom_examples.asp">JS HTML DOM</a>
879 <a target="_top" href="js_input_examples.asp">JS HTML Input</a>
880 <a target="_top" href="js_ex_dom.asp">JS HTML Objects</a>
881 <a target="_top" href="js_events_examples.asp">JS HTML Events</a>
882 <a target="_top" href="js_ex_browser.asp">JS Browser</a>
883 <a target="_top" href="js_editor.asp">JS Editor</a>
884 <a target="_top" href="js_exercises.asp">JS Exercises</a>
885 <a target="_top" href="js_quiz.asp">JS Quiz</a>
886 <a target="_top" href="js_exam.asp">JS Certificate</a>
887 <br>
888 <h2 class="left">JS References</h2>
889 <a target="_top" href="/jsref/default.asp">JavaScript Objects</a>
890 <a target="_top" href="/jsref/default.asp">HTML DOM Objects</a>
891 <br>
892 <br><br>
893 </div>
894 </div>
895 </div>
896 <div class='w3-main w3-light-grey' id='belowtopnav' style='margin-left:220px;'>
897 <div class='w3-row w3-white'>
898 <div class='w3-col l10 m12' id='main'>
899 <div id='mainLeaderboard' style='overflow:hidden;'>
900 <!-- MainLeaderboard-->
901
902 <!--<pre>main_leaderboard, all: [728,90][970,90][320,50][468,60]</pre>-->
903 <div id="adngin-main_leaderboard-0"></div>
904 <!-- adspace leaderboard -->
905
906 </div>
907 <h1>JavaScript <span class="color_h1">Where To</span></h1>
908 <div class="w3-clear nextprev">
909 <a class="w3-left w3-btn" href="js_intro.asp">&#10094; Previous</a>
910 <a class="w3-right w3-btn" href="js_output.asp">Next &#10095;</a>
911 </div>
912 <hr>
913
914
915 <h2>The &lt;script&gt; Tag</h2>
916 <p>In HTML, JavaScript code is inserted between <code class="w3-codespan">&lt;script&gt;</code> and <code class="w3-codespan">&lt;/script&gt;</code> tags
917 <div class="w3-example">
918 <h3>Example</h3>
919 <div class="w3-code notranslate htmlHigh">
920 &lt;script&gt;<br>
921 document.getElementById(&quot;demo&quot;).innerHTML = &quot;My First JavaScript&quot;;<br>
922 &lt;/script&gt;
923 </div>
924 <p>
925 <a class="w3-btn" href="tryit.asp?filename=tryjs_whereto" target="_blank">Try it Yourself &raquo;</a>
926 </p>
927 </div>
928
929 <div class="w3-panel w3-note">
930 <p>Old JavaScript examples may use a type attribute: &lt;script type=&quot;text/javascript&quot;&gt;.<br>
931 The type attribute is not required. JavaScript is the default scripting language in HTML.</p>
932 </div>
933
934 <hr>
935 <h2>JavaScript Functions and Events</h2>
936 <p>A JavaScript <code class="w3-codespan">function</code> is a block of JavaScript code, that can be executed when &quot;called&quot; for.</p>
937 <p>For example, a function can be called when an <b>event</b> occurs, like when the user clicks a button.</p>
938 <div class="w3-panel w3-note">
939 <p>You will learn much more about functions and events in later chapters.</p>
940 </div>
941 <hr>
942
943 <h2>JavaScript in &lt;head&gt; or &lt;body&gt;</h2>
944 <p>You can place any number of scripts in an HTML document.</p>
945 <p>Scripts can be placed in the <code class="w3-codespan">&lt;body&gt;</code>, or in the <code class="w3-codespan">&lt;head&gt;</code> section of an HTML
946
947 <hr>
948 <h2>JavaScript in &lt;head&gt;</h2>
949 <p>In this example, a JavaScript <code class="w3-codespan">function</code> is placed in the <code class="w3-codespan">&lt;head&gt;</code> section
950 of an HTML page.</p>
951 <p>The function is invoked (called) when a button is clicked:</p>
952
953 <div class="w3-example">
954 <h3>Example</h3>
955 <div class="w3-code notranslate htmlHigh">
956 &lt;!DOCTYPE html&gt;<br>
957 &lt;html&gt;<br>
958 &lt;head&gt;<br>
959 &lt;script&gt;<br>
960 function myFunction() {<br>
961 &nbsp;&nbsp;document.getElementById(&quot;demo&quot;).innerHTML = &quot;Paragraph changed.&quot;;<br>
962 }<br>
963 &lt;/script&gt;<br>
964 &lt;/head&gt;<br>&lt;body&gt;
965 <p>&lt;h2&gt;Demo JavaScript in Head&lt;/h2&gt;<br>
966 <br>
967 &lt;p id=&quot;demo&quot;&gt;A Paragraph&lt;/p&gt;<br>&lt;button type=&quot;button&quot; onclick=&quot;myFunction()&quot;&gt;Try
968 it&lt;/button&gt;</p>
969 <p>&lt;/body&gt;<br>
970 &lt;/html&gt;
971 </div>
972 <a class="w3-btn w3-margin-bottom" href="tryit.asp?filename=tryjs_whereto_head" target="_blank">Try it Yourself &raquo;</a>
973 </div>
974 <hr>
975 <div id="midcontentadcontainer" style="overflow:auto;text-align:center">
976 <!-- MidContent -->
977 <!-- <p class="adtext">Advertisement</p> -->
978
979 <div id="adngin-mid_content-0"></div>
980
981 </div>
982 <hr>
983
984 <h2>JavaScript in &lt;body&gt;</h2>
985 <p>In this example, a JavaScript <code class="w3-codespan">function</code> is placed in the <code class="w3-codespan">&lt;body&gt;</code> section of an H
986 <p>The function is invoked (called) when a button is clicked:</p>
987 <div class="w3-example">
988 <h3>Example</h3>
989 <div class="w3-code notranslate htmlHigh">
990 &lt;!DOCTYPE html&gt;<br>
991 &lt;html&gt;<br>
992 &lt;body&gt;
993 <br><br>&lt;h2&gt;Demo JavaScript in Body&lt;/h2&gt;<br>
994 <br>
995 &lt;p id=&quot;demo&quot;&gt;A Paragraph&lt;/p&gt;<br>
996 <br>
997 &lt;button type=&quot;button&quot; onclick=&quot;myFunction()&quot;&gt;Try
998 it&lt;/button&gt;<br>
999 <br>&lt;script&gt;<br>
1000 function myFunction() {<br>
1001 &nbsp; document.getElementById(&quot;demo&quot;).innerHTML = &quot;Paragraph changed.&quot;;<br>
1002 }<br>
1003 &lt;/script&gt;<br>
1004 <br>&lt;/body&gt;<br>
1005 &lt;/html&gt;
1006 </div>
1007 <a target="_blank" class="w3-btn w3-margin-bottom" href="tryit.asp?filename=tryjs_whereto_body">Try it Yourself &raquo;</a>
1008 </div>
1009
1010 <div class="w3-panel w3-note">
1011 <p>Placing scripts at the bottom of the &lt;body&gt; element improves the display
1012 speed, because script interpretation slows down the display.</p>
1013 </div>
1014
1015 <hr>
1016 <h2>External JavaScript</h2>
1017 <p>Scripts can also be placed in external files:</p>
1018 <div class="w3-example">
1019 <h3>External file: myScript.js</h3>
1020 <div class="w3-code notranslate jsHigh">
1021 function myFunction() {<br>
1022 &nbsp; document.getElementById(&quot;demo&quot;).innerHTML = &quot;Paragraph changed.&quot;;<br>
1023 }
1024 </div>
1025 </div>
1026
1027 <p>External scripts are practical when the same code is used in many different web pages. </p>
1028 <p>JavaScript files have the file extension <strong>.js</strong>.</p>
1029 <p>To use an external script, put the name of the script file in the <code class="w3-codespan">src</code> (source) attribute of
1030 a <code class="w3-codespan">&lt;script&gt;</code> tag:</p>
1031 <div class="w3-example">
1032 <h3>Example</h3>
1033 <div class="w3-code notranslate htmlHigh">
1034 &lt;script src=&quot;myScript.js&quot;&gt;&lt;/script&gt;</div>
1035 <a target="_blank" href="tryit.asp?filename=tryjs_whereto_external" class="w3-btn w3-margin-bottom">Try it Yourself &raquo;</a>
1036 </div>
1037
1038 <p>You can place an external script reference in <code class="w3-codespan">&lt;head&gt;</code> or <code class="w3-codespan">&lt;body&gt;</code> as you li
1039 <p>The script will behave as if it was located exactly where the <code class="w3-codespan">&lt;script&gt;</code> tag is located.</p>
1040
1041 <div class="w3-panel w3-note">
1042 <p>External scripts cannot contain <code class="w3-codespan">&lt;script&gt;</code> tags.</p>
1043 </div>
1044
1045 <hr>
1046 <h2>External JavaScript Advantages</h2>
1047 <p>Placing scripts in external files has some advantages:</p>
1048 <ul>
1049 <li>It separates HTML and code</li>
1050 <li>It makes HTML and JavaScript easier to read and maintain</li>
1051 <li>Cached JavaScript files can speed up page loads</li>
1052 </ul>
1053 <p>To add several script files to one page&nbsp; - use several script tags:</p>
1054 <div class="w3-example">
1055 <h3>Example</h3>
1056 <div class="w3-code notranslate htmlHigh">
1057 &lt;script src=&quot;myScript1.js&quot;&gt;&lt;/script&gt;<br>
1058 &lt;script src=&quot;myScript2.js&quot;&gt;&lt;/script&gt;
1059 </div>
1060 </div>
1061
1062
1063 <hr>
1064 <h2>External References</h2>
1065 <p>An external script can be referenced in 3 different ways:</p>
1066 <ul>
1067 <li>With a full URL (a full web address)</li>
1068 <li>With a file path (like /js/)</li>
1069 <li>Without any path</li>
1070 </ul>
1071
1072 <p>This example uses a <b>full URL</b> to link to myScript.js: </p>
1073 <div class="w3-example">
1074 <h3>Example</h3>
1075 <div class="w3-code notranslate htmlHigh">
1076 &lt;script src=&quot;https://www.w3schools.com/js/myScript.js&quot;&gt;&lt;/script&gt;
1077 </div>
1078 <p><a target="_blank" href="tryit.asp?filename=tryjs_whereto_url" class="w3-btn">Try it Yourself &raquo;</a></p>
1079 </div>
1080
1081 <p>This example uses a <b>file path</b> to link to myScript.js:</p>
1082 <div class="w3-example">
1083 <h3>Example</h3>
1084 <div class="w3-code notranslate htmlHigh">
1085 &lt;script src=&quot;/js/myScript.js&quot;&gt;&lt;/script&gt;
1086 </div>
1087 <p><a target="_blank" href="tryit.asp?filename=tryjs_whereto_url_relative" class="w3-btn">Try it Yourself &raquo;</a></p>
1088 </div>
1089
1090 <p>This example uses no path to link to myScript.js:</p>
1091 <div class="w3-example">
1092 <h3>Example</h3>
1093 <div class="w3-code notranslate htmlHigh">
1094 &lt;script src=&quot;myScript.js&quot;&gt;&lt;/script&gt;
1095 </div>
1096 <p><a target="_blank" href="tryit.asp?filename=tryjs_whereto_external" class="w3-btn">Try it Yourself &raquo;</a></p>
1097 </div>
1098
1099 <div class="w3-panel w3-note">
1100 <p>You can read more about file paths in the chapter <a href="/html/html_filepaths.asp">HTML
1101 File Paths</a>.</p>
1102 </div>
1103
1104 <br>
1105 <div class="w3-clear nextprev">
1106 <a class="w3-left w3-btn" href="js_intro.asp">&#10094; Previous</a>
1107 <a class="w3-right w3-btn" href="js_output.asp">Next &#10095;</a>
1108 </div>
1109 <div id="mypagediv2" style="position:relative;text-align:center;"></div>
1110 <br>
1111
1112 </div>
1113 <div class="w3-col l2 m12" id="right">
1114
1115 <div class="sidesection">
1116 <div id="skyscraper">
1117
1118 <div id="adngin-sidebar_top-0"></div>
1119
1120 </div>
1121 </div>
1122
1123 <style>
1124 .ribbon-vid {
1125 font-size:12px;
1126 font-weight:bold;
1127 padding: 6px 20px;
1128 left:-20px;
1129 top:-10px;
1130 text-align: center;
1131 color:black;
1132 border-radius:25px;
1133 }
1134 </style>
1135
1136 <div class="sidesection" style="margin-top:20px;margin-bottom:20px;">
1137 <a id="upperfeatureshowcaselink" class="showcasebackend" href="https://www.w3schools.com/spaces/" target="_blank">
1138 <picture id="upperfeatureshowcase">
1139 <source id="upperfeatureshowcase3001" srcset="/images/img_backend_300.png" media="(max-width: 990px)" style="border-radius: 5px;">
1140 <source id="upperfeatureshowcase120" srcset="/images/img_backend_120.png" media="(max-width: 1260px)" style="border-radius: 5px;">
1141 <source id="upperfeatureshowcase160" srcset="/images/img_backend_160.png" media="(max-width: 1700px)" style="border-radius: 5px;">
1142 <img id="upperfeatureshowcase300" src="/images/img_backend_300.png" alt="Get started with your own server with Dynamic Spaces" style="width:auto;border
1143 </picture>
1144 </a>
1145 </div>
1146
1147 <div class="sidesection">
1148 <h4><a href="/colors/colors_picker.asp">COLOR PICKER</a></h4>
1149 <a href="/colors/colors_picker.asp">
1150 <img src="/images/colorpicker2000.png" alt="colorpicker" loading="lazy">
1151 </a>
1152 </div>
1153
1154 <div class="sidesection">
1155 <!--<h4>LIKE US</h4>-->
1156 <div class="sharethis">
1157 <a href="https://www.facebook.com/w3schoolscom/" target="_blank" title="Facebook"><span class="fa fa-facebook-square fa-2x"></span></a>
1158 <a href="https://www.instagram.com/w3schools.com_official/" target="_blank" title="Instagram"><span class="fa fa-instagram fa-2x"></span></a>
1159 <a href="https://www.linkedin.com/company/w3schools.com/" target="_blank" title="LinkedIn"><span class="fa fa-linkedin-square fa-2x"></span></a>
1160 <a href="https://discord.gg/6Z7UaRbUQM" target="_blank" title='Join the W3schools community on Discord'><span class="fa fa-discord fa-2x"></span></a>
1161 </div>
1162 </div>
1163
1164 <!--
1165 <div class="sidesection" style="border-radius:5px;color:#555;padding-top:1px;padding-bottom:8px;margin-left:auto;margin-right:auto;max-width:230px;backgr
1166 <p>Get your<br>certification today!</p>
1167 <a href="/cert/default.asp" target="_blank">
1168 <img src="/images/w3certified_logo_250.png" style="margin:0 12px 20px 10px;max-width:80%">
1169 </a>
1170 <a class="w3-btn w3-margin-bottom" style="text-decoration:none;border-radius:5px;"
1171 href="/cert/default.asp" target="_blank">View options</a>
1172 </div>
1173 -->
1174
1175 <style>
1176 #courses_get_started_btn {
1177 text-decoration:none !important;
1178 background-color:#04AA6D;
1179 width:100%;
1180 border-bottom-left-radius:5px;
1181 border-bottom-right-radius:5px;
1182 padding-top:10px;
1183 padding-bottom:10px;
1184 font-family: 'Source Sans Pro', sans-serif;
1185 }
1186 #courses_get_started_btn:hover {
1187 background-color:#059862!important;
1188 }
1189 </style>
1190 <div id="internalCourses" class="sidesection">
1191 <p style="font-size:18px;padding-left:2px;padding-right:2px;">Get certified<br>by completing<br><span id="courses_subject_text">a</span> course today!</p
1192 <a id="courses_subject_img_link" href="https://shop.w3schools.com/collections/course-catalog" target="_blank">
1193 <div style="padding:0 20px 20px 20px">
1194 <svg id="w3_cert_badge2" style="margin:auto;width:85%" data-name="w3_cert_badge2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><defs><style>.
1195 </div>
1196
1197 </a>
1198 <a class="w3-btn" id="courses_get_started_btn"
1199 href="https://shop.w3schools.com/collections/course-catalog" target="_blank">Get started</a>
1200 </div>
1201
1202 <div class="sidesection" id="moreAboutSubject">
1203 </div>
1204
1205 <div class="sidesection" style="margin-top:20px;margin-bottom:20px;">
1206 <a id="lowerfeatureshowcaselink" class="showcasesubs" href="https://www.w3schools.com/spaces/" target="_blank">
1207 <picture id="lowerfeatureshowcase">
1208 <source id="lowerfeatureshowcase3001" srcset="/images/img_subs_300.png" media="(max-width: 990px)" style="border-radius: 5px;">
1209 <source id="lowerfeatureshowcase120" srcset="/images/img_subs_120.png" media="(max-width: 1260px)" style="border-radius: 5px;">
1210 <source id="lowerfeatureshowcase160" srcset="/images/img_subs_160.png" media="(max-width: 1700px)" style="border-radius: 5px;">
1211 <img id="lowerfeatureshowcase300" src="/images/img_subs_300.png" alt="Subscribe" style="width:auto;border-radius: 5px;">
1212 </picture>
1213 </a>
1214 </div>
1215
1216 <script>
1217 var internalFeatureRnd = Math.floor(Math.random() * (5 - 1)) + 1;
1218 var upshowcase120 = document.getElementById("upperfeatureshowcase120");
1219 var upshowcase160 = document.getElementById("upperfeatureshowcase160");
1220 var upshowcase300 = document.getElementById("upperfeatureshowcase300");
1221 var upshowcase3001 = document.getElementById("upperfeatureshowcase3001");
1222 var upshowcaselink = document.getElementById("upperfeatureshowcaselink");
1223 var lowshowcase120 = document.getElementById("lowerfeatureshowcase120");
1224 var lowshowcase160 = document.getElementById("lowerfeatureshowcase160");
1225 var lowshowcase300 = document.getElementById("lowerfeatureshowcase300");
1226 var lowshowcase3001 = document.getElementById("lowerfeatureshowcase3001");
1227 var lowshowcaselink = document.getElementById("lowerfeatureshowcaselink");
1228
1229 if (internalFeatureRnd == 2) {
1230 upshowcase120.srcset = "/images/img_subs_120.png";
1231 upshowcase160.srcset = "/images/img_subs_160.png";
1232 upshowcase300.srcset = "/images/img_subs_300.png";
1233 upshowcase3001.srcset = "/images/img_subs_300.png";
1234 upshowcaselink.href = "https://www.w3schools.com/spaces/";
1235 upshowcaselink.classList.remove("showcasebackend");
1236 upshowcaselink.classList.add("showcaseupgrade");
1237 lowshowcase120.srcset = "/images/img_bootcamp_120.png";
1238 lowshowcase160.srcset = "/images/img_bootcamp_160.png";
1239 lowshowcase300.srcset = "/images/img_bootcamp_300.png";
1240 lowshowcase3001.srcset = "/images/img_bootcamp_300.png";
1241 lowshowcaselink.href = "https://www.w3schools.com/bootcamp/";
1242 lowshowcaselink.classList.remove("showcasesubs");
1243 lowshowcaselink.classList.add("showcasebootcamp");
1244 } else if (internalFeatureRnd == 3) {
1245 upshowcase120.srcset = "/images/img_bootcamp_120.png";
1246 upshowcase160.srcset = "/images/img_bootcamp_160.png";
1247 upshowcase300.srcset = "/images/img_bootcamp_300.png";
1248 upshowcase3001.srcset = "/images/img_bootcamp_300.png";
1249 upshowcaselink.href = "https://www.w3schools.com/bootcamp/";
1250 upshowcaselink.classList.remove("showcasebackend");
1251 upshowcaselink.classList.add("showcasebootcamp");
1252 lowshowcase120.srcset = "/images/img_fullaccess3_120.png";
1253 lowshowcase160.srcset = "/images/img_fullaccess3_160.png";
1254 lowshowcase300.srcset = "/images/img_fullaccess3_300.png";
1255 lowshowcase3001.srcset = "/images/img_fullaccess3_300.png";
1256 lowshowcaselink.href = "https://campus.w3schools.com/collections/course-catalog/products/w3schools-full-access-course";
1257 lowshowcaselink.classList.remove("showcasesubs");
1258 lowshowcaselink.classList.add("showcasefullaccess");
1259 } else if (internalFeatureRnd == 4) {
1260 upshowcase120.srcset = "/images/img_fullaccess3_120.png";
1261 upshowcase160.srcset = "/images/img_fullaccess3_160.png";
1262 upshowcase300.srcset = "/images/img_fullaccess3_300.png";
1263 upshowcase3001.srcset = "/images/img_fullaccess3_300.png";
1264 upshowcaselink.href = "https://campus.w3schools.com/collections/course-catalog/products/w3schools-full-access-course";
1265 upshowcaselink.classList.remove("showcasebackend");
1266 upshowcaselink.classList.add("showcasefullaccess");
1267 lowshowcase120.srcset = "/images/img_backend_120.png";
1268 lowshowcase160.srcset = "/images/img_backend_160.png";
1269 lowshowcase300.srcset = "/images/img_backend_300.png";
1270 lowshowcase3001.srcset = "/images/img_backend_300.png";
1271 lowshowcaselink.href = "https://www.w3schools.com/spaces/";
1272 lowshowcaselink.classList.remove("showcasesubs");
1273 lowshowcaselink.classList.add("showcasebackend");
1274 }
1275 function addTryitSpaces(subject) {
1276 let spacesButt = document.createElement("a");
1277 let ribb = document.createElement("span");
1278 spacesButt.innerHTML="Get your own " + subject + " Server"
1279 spacesButt.classList.add("ws-black", "ws-hover-black", "spaces-tryit");
1280 spacesButt.href="https://www.w3schools.com/spaces/";
1281 spacesButt.setAttribute("title", "W3Schools Spaces");
1282 spacesButt.setAttribute("target", "_blank");
1283
1284 var tryits = document.getElementsByClassName("w3-example");
1285 for (var i = 0; i < tryits.length; i++) {
1286 if (tryits[i].firstElementChild.nodeName == "H3") {
1287 tryits[i].firstElementChild.appendChild(spacesButt.cloneNode(true));
1288 break;
1289 }
1290 }
1291 }
1292
1293 switch (subjectFolder) {
1294 case "cpp":
1295 subjectText = "C++";
1296 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/c-course-1";
1297 break;
1298 case "java":
1299 subjectText = "Java";
1300 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/java-course";
1301 addTryitSpaces(subjectText);
1302 break;
1303 case "bootstrap4":
1304 subjectText = "Bootstrap 4";
1305 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/bootstrap-4-course";
1306 break;
1307 case "xml":
1308 subjectText = "XML";
1309 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/xml-course";
1310 break;
1311 case "jquery":
1312 subjectText = "jQuery";
1313 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/jquery-course";
1314 break;
1315 case "accessibility":
1316 subjectText = "Accessibility";
1317 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/accessibility-course";
1318 break;
1319 case "bootstrap":
1320 subjectText = "Bootstrap 3";
1321 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/bootstrap-course";
1322 break;
1323 case "html":
1324 subjectText = "HTML";
1325 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/html-course";
1326 break;
1327 case "tags":
1328 subjectText = "HTML";
1329 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/html-course";
1330 break;
1331 case "css":
1332 subjectText = "CSS";
1333 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/css-course";
1334 break;
1335 case "cssref":
1336 subjectText = "CSS";
1337 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/css-course";
1338 break;
1339 case "js":
1340 subjectText = "JavaScript";
1341 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/javascript-course";
1342 break;
1343 case "jsref":
1344 subjectText = "JavaScript";
1345 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/javascript-course";
1346 break;
1347 case "react":
1348 subjectText = "React.js";
1349 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/react-js-course";
1350 if (upshowcaselink.classList.contains("showcasebackend") == true) {
1351 upshowcase120.srcset = "/images/img_backend_120_react.png";
1352 upshowcase160.srcset = "/images/img_backend_160_react.png";
1353 upshowcase300.srcset = "/images/img_backend_300_react.png";
1354 upshowcase3001.srcset = "/images/img_backend_300_react.png";
1355 } else if (lowshowcaselink.classList.contains("showcasebackend") == true) {
1356 lowshowcase120.srcset = "/images/img_backend_120_react.png";
1357 lowshowcase160.srcset = "/images/img_backend_160_react.png";
1358 lowshowcase300.srcset = "/images/img_backend_300_react.png";
1359 lowshowcase3001.srcset = "/images/img_backend_300_react.png";
1360 }
1361 addTryitSpaces(subjectText);
1362 break;
1363 case "sql":
1364 subjectText = "SQL";
1365 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/sql-course";
1366 addTryitSpaces(subjectText);
1367 break;
1368 case "mysql":
1369 addTryitSpaces("SQL");
1370 break;
1371 case "php":
1372 subjectText = "PHP";
1373 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/php-course";
1374 if (upshowcaselink.classList.contains("showcasebackend") == true) {
1375 upshowcase120.srcset = "/images/img_backend_120_php.png";
1376 upshowcase160.srcset = "/images/img_backend_160_php.png";
1377 upshowcase300.srcset = "/images/img_backend_300_php.png";
1378 upshowcase3001.srcset = "/images/img_backend_300_php.png";
1379 } else if (lowshowcaselink.classList.contains("showcasebackend") == true) {
1380 lowshowcase120.srcset = "/images/img_backend_120_php.png";
1381 lowshowcase160.srcset = "/images/img_backend_160_php.png";
1382 lowshowcase300.srcset = "/images/img_backend_300_php.png";
1383 lowshowcase3001.srcset = "/images/img_backend_300_php.png";
1384 }
1385 addTryitSpaces(subjectText);
1386 break;
1387 case "cybersecurity":
1388 subjectText = "Cyber Security";
1389 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/cyber-security-course";
1390 break;
1391 case "r":
1392 subjectText = "R";
1393 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/r-course";
1394 break;
1395 case "numpy":
1396 subjectText = "Numpy";
1397 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/numpy-course";
1398 if (upshowcaselink.classList.contains("showcasebackend") == true) {
1399 upshowcase120.srcset = "/images/img_backend_120_numpy.png";
1400 upshowcase160.srcset = "/images/img_backend_160_numpy.png";
1401 upshowcase300.srcset = "/images/img_backend_300_numpy.png";
1402 upshowcase3001.srcset = "/images/img_backend_300_numpy.png";
1403 } else if (lowshowcaselink.classList.contains("showcasebackend") == true) {
1404 lowshowcase120.srcset = "/images/img_backend_120_numpy.png";
1405 lowshowcase160.srcset = "/images/img_backend_160_numpy.png";
1406 lowshowcase300.srcset = "/images/img_backend_300_numpy.png";
1407 lowshowcase3001.srcset = "/images/img_backend_300_numpy.png";
1408 }
1409 addTryitSpaces("Python");
1410 break;
1411 case "django":
1412 if (upshowcaselink.classList.contains("showcasebackend") == true) {
1413 upshowcase120.srcset = "/images/img_backend_120_django.png";
1414 upshowcase160.srcset = "/images/img_backend_160_django.png";
1415 upshowcase300.srcset = "/images/img_backend_300_django.png";
1416 upshowcase3001.srcset = "/images/img_backend_300_django.png";
1417 } else if (lowshowcaselink.classList.contains("showcasebackend") == true) {
1418 lowshowcase120.srcset = "/images/img_backend_120_django.png";
1419 lowshowcase160.srcset = "/images/img_backend_160_django.png";
1420 lowshowcase300.srcset = "/images/img_backend_300_django.png";
1421 lowshowcase3001.srcset = "/images/img_backend_300_django.png";
1422 }
1423 addTryitSpaces("Django");
1424 break;
1425 case "typescript":
1426 if (upshowcaselink.classList.contains("showcasebackend") == true) {
1427 upshowcase120.srcset = "/images/img_backend_120_ts.png";
1428 upshowcase160.srcset = "/images/img_backend_160_ts.png";
1429 upshowcase300.srcset = "/images/img_backend_300_ts.png";
1430 upshowcase3001.srcset = "/images/img_backend_300_ts.png";
1431 } else if (lowshowcaselink.classList.contains("showcasebackend") == true) {
1432 lowshowcase120.srcset = "/images/img_backend_120_ts.png";
1433 lowshowcase160.srcset = "/images/img_backend_160_ts.png";
1434 lowshowcase300.srcset = "/images/img_backend_300_ts.png";
1435 lowshowcase3001.srcset = "/images/img_backend_300_ts.png";
1436 }
1437 addTryitSpaces("TypeScript");
1438 break;
1439 case "nodejs":
1440 if (upshowcaselink.classList.contains("showcasebackend") == true) {
1441 upshowcase120.srcset = "/images/img_backend_120_node.png";
1442 upshowcase160.srcset = "/images/img_backend_160_node.png";
1443 upshowcase300.srcset = "/images/img_backend_300_node.png";
1444 upshowcase3001.srcset = "/images/img_backend_300_node.png";
1445 } else if (lowshowcaselink.classList.contains("showcasebackend") == true) {
1446 lowshowcase120.srcset = "/images/img_backend_120_node.png";
1447 lowshowcase160.srcset = "/images/img_backend_160_node.png";
1448 lowshowcase300.srcset = "/images/img_backend_300_node.png";
1449 lowshowcase3001.srcset = "/images/img_backend_300_node.png";
1450 }
1451 addTryitSpaces("Node.js");
1452 break;
1453 case "pandas":
1454 subjectText = "Pandas";
1455 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/pandas-course";
1456 if (upshowcaselink.classList.contains("showcasebackend") == true) {
1457 upshowcase120.srcset = "/images/img_backend_120_pandas.png";
1458 upshowcase160.srcset = "/images/img_backend_160_pandas.png";
1459 upshowcase300.srcset = "/images/img_backend_300_pandas.png";
1460 upshowcase3001.srcset = "/images/img_backend_300_pandas.png";
1461 } else if (lowshowcaselink.classList.contains("showcasebackend") == true) {
1462 lowshowcase120.srcset = "/images/img_backend_120_pandas.png";
1463 lowshowcase160.srcset = "/images/img_backend_160_pandas.png";
1464 lowshowcase300.srcset = "/images/img_backend_300_pandas.png";
1465 lowshowcase3001.srcset = "/images/img_backend_300_pandas.png";
1466 }
1467 addTryitSpaces("Python");
1468 break;
1469 case "python":
1470 subjectText = "Python";
1471 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/python-course";
1472 if (upshowcaselink.classList.contains("showcasebackend") == true) {
1473 upshowcase120.srcset = "/images/img_backend_120_python.png";
1474 upshowcase160.srcset = "/images/img_backend_160_python.png";
1475 upshowcase300.srcset = "/images/img_backend_300_python.png";
1476 upshowcase3001.srcset = "/images/img_backend_300_python.png";
1477 } else if (lowshowcaselink.classList.contains("showcasebackend") == true) {
1478 lowshowcase120.srcset = "/images/img_backend_120_python.png";
1479 lowshowcase160.srcset = "/images/img_backend_160_python.png";
1480 lowshowcase300.srcset = "/images/img_backend_300_python.png";
1481 lowshowcase3001.srcset = "/images/img_backend_300_python.png";
1482 }
1483 addTryitSpaces(subjectText);
1484 break;
1485 case "cs":
1486 subjectText = "C#";
1487 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/c-course";
1488 addTryitSpaces(subjectText);
1489 break;
1490 default:
1491 subjectText = "a";
1492 subjectLink = "https://shop.w3schools.com/collections/course-catalog";
1493 }
1494 if (typeof subjectText == 'undefined') {
1495 subjectText = "a";
1496 subjectLink = "https://shop.w3schools.com/collections/course-catalog";
1497 }
1498 if (subjectText != "a") {
1499 document.getElementById("courses_subject_text").innerHTML = "a " + subjectText + "<br>";
1500 document.getElementById("courses_subject_img_link").href = subjectLink;
1501 document.getElementById("courses_get_started_btn").href = subjectLink;
1502 }
1503 </script>
1504
1505
1506 <div id="stickypos" class="sidesection" style="text-align:center;position:sticky;top:50px;">
1507 <div id="stickyadcontainer">
1508 <div style="position:relative;margin:auto;">
1509
1510 <div id="adngin-sidebar_sticky-0"></div>
1511 <script>
1512 function secondSnigel() {
1513 if(window.adngin && window.adngin.adnginLoaderReady) {
1514 if (Number(w3_getStyleValue(document.getElementById("main"), "height").replace("px", "")) > 2200) {
1515 if (document.getElementById("adngin-mid_content-0")) {
1516 adngin.queue.push(function(){ adngin.cmd.startAuction(["sidebar_sticky", "mid_content" ]); });
1517 } else {
1518 adngin.queue.push(function(){ adngin.cmd.startAuction(["sidebar_sticky"]); });
1519 }
1520 } else {
1521 if (document.getElementById("adngin-mid_content-0")) {
1522 adngin.queue.push(function(){ adngin.cmd.startAuction(["mid_content"]); });
1523 }
1524 }
1525 } else {
1526 window.addEventListener('adnginLoaderReady', function() {
1527 if (Number(w3_getStyleValue(document.getElementById("main"), "height").replace("px", "")) > 2200) {
1528 if (document.getElementById("adngin-mid_content-0")) {
1529 adngin.queue.push(function(){ adngin.cmd.startAuction(["sidebar_sticky", "mid_content" ]); });
1530 } else {
1531 adngin.queue.push(function(){ adngin.cmd.startAuction(["sidebar_sticky"]); });
1532 }
1533 } else {
1534 if (document.getElementById("adngin-mid_content-0")) {
1535 adngin.queue.push(function(){ adngin.cmd.startAuction(["mid_content"]); });
1536 }
1537 }
1538 });
1539 }
1540 }
1541 </script>
1542
1543 </div>
1544 </div>
1545 </div>
1546
1547 <script>
1548 uic_r_c()
1549 </script>
1550
1551 </div>
1552 </div>
1553 <div id="footer" class="footer w3-container w3-white">
1554
1555 <hr>
1556
1557 <div style="overflow:auto">
1558 <div class="bottomad">
1559 <!-- BottomMediumRectangle -->
1560 <!--<pre>bottom_medium_rectangle, all: [970,250][300,250][336,280]</pre>-->
1561 <div id="adngin-bottom_left-0" style="padding:0 10px 10px 0;float:left;width:auto;"></div>
1562 <!-- adspace bmr -->
1563 <!-- RightBottomMediumRectangle -->
1564 <!--<pre>right_bottom_medium_rectangle, desktop: [300,250][336,280]</pre>-->
1565 <div id="adngin-bottom_right-0" style="padding:0 10px 10px 0;float:left;width:auto;"></div>
1566 </div>
1567 </div>
1568
1569 <hr>
1570 <div class="w3-row-padding w3-center w3-small" style="margin:auto">
1571 <div class="w3-col m12 w3-hide-medium w3-hide-small" style="width:20%">
1572 <a class="w3-btn ws-black w3-block w3-round" href="javascript:void(0);" onclick="displayError();return false" style="white-space:nowrap;text-decorati
1573 </div>
1574 <div class="w3-col m12 w3-hide-large">
1575 <a class="w3-btn ws-black w3-block w3-round" href="javascript:void(0);" onclick="displayError();return false" style="white-space:nowrap;text-decorati
1576 </div>
1577
1578
1579 <div class="w3-col m12 w3-hide-medium w3-hide-small" style="width:20%">
1580 <a class="w3-btn ws-black w3-block w3-round" href="/spaces/index.html" style="text-decoration:none;margin-top:1px;margin-bottom:1px;font-size:17px;fo
1581 </div>
1582 <div class="w3-col m12 w3-hide-large">
1583 <a class="w3-btn ws-black w3-block w3-round" href="/spaces/index.html" style="text-decoration:none;margin-top:1px;margin-bottom:1px;font-size:17px;fo
1584 </div>
1585
1586
1587 <div class="w3-col m12 w3-hide-medium w3-hide-small" style="width:20%">
1588 <a class="w3-btn ws-black w3-block w3-round" href="/pro/index.php" style="text-decoration:none;margin-top:1px;margin-bottom:1px;font-size:17px;font-f
1589 </div>
1590 <div class="w3-col m12 w3-hide-large">
1591 <a class="w3-btn ws-black w3-block w3-round" href="/pro/index.php" style="text-decoration:none;margin-top:1px;margin-bottom:1px;font-size:17px;font-f
1592 </div>
1593
1594 <div class="w3-col m12 w3-hide-medium w3-hide-small" style="width:20%">
1595 <a class="w3-btn ws-black w3-block w3-round" href="https://campus.w3schools.com/pages/newsletter" target="_blank" style="white-space:nowrap;text-deco
1596 </div>
1597 <div class="w3-col m12 w3-hide-large">
1598 <a class="w3-btn ws-black w3-block w3-round" href="https://campus.w3schools.com/pages/newsletter" target="_blank" style="white-space:nowrap;text-deco
1599 </div>
1600
1601
1602 <div class="w3-col m12 w3-hide-medium w3-hide-small" style="width:20%">
1603 <a class="w3-btn ws-black w3-block w3-round" href="https://shop.w3schools.com/collections/certifications" target="_blank" style="text-decoration:none
1604 </div>
1605
1606 <div class="w3-col m12 w3-hide-large">
1607 <a class="w3-btn ws-black w3-block w3-round" href="https://shop.w3schools.com/collections/certifications" target="_blank" style="text-decoration:none
1608 </div>
1609 </div>
1610
1611 <hr>
1612 <div class="ws-grey w3-padding w3-margin-bottom" id="err_form" style="display:none;position:relative">
1613 <span onclick="this.parentElement.style.display='none'" class="w3-button w3-display-topright w3-large">&times;</span>
1614
1615 <h2>Report Error</h2>
1616
1617 <p>If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:</p>
1618 <p>[email protected]</p>
1619 <br>
1620
1621 <!--
1622 <h2>Your Suggestion:</h2>
1623 <form>
1624 <div class="w3-section">
1625 <label for="err_email">Your E-mail:</label>
1626 <input class="w3-input w3-border" type="text" style="margin-top:5px;width:100%" id="err_email" name="err_email">
1627 </div>
1628 <div class="w3-section">
1629 <label for="err_email">Page address:</label>
1630 <input class="w3-input w3-border" type="text" style="width:100%;margin-top:5px" id="err_url" name="err_url" disabled="disabled">
1631 </div>
1632 <div class="w3-section">
1633 <label for="err_email">Description:</label>
1634 <textarea rows="10" class="w3-input w3-border" id="err_desc" name="err_desc" style="width:100%;margin-top:5px;resize:vertical;"></textarea>
1635 </div>
1636 <div class="form-group">
1637 <button type="button" class="w3-button w3-dark-grey" onclick="sendErr()">Submit</button>
1638 </div>
1639 <br>
1640 </form>
1641 -->
1642
1643 </div>
1644 <div class="w3-container ws-grey w3-padding" id="err_sent" style="display:none;position:relative">
1645 <span onclick="this.parentElement.style.display='none'" class="w3-button w3-display-topright">&times;</span>
1646 <h2>Thank You For Helping Us!</h2>
1647 <p>Your message has been sent to W3Schools.</p>
1648 </div>
1649
1650 <div class="w3-row w3-center w3-small">
1651 <div class="w3-col l3 m6 s12">
1652 <div class="top10">
1653 <h5 style="font-family: 'Source Sans Pro', sans-serif;">Top Tutorials</h5>
1654 <a href="/html/default.asp">HTML Tutorial</a><br>
1655 <a href="/css/default.asp">CSS Tutorial</a><br>
1656 <a href="/js/default.asp">JavaScript Tutorial</a><br>
1657 <a href="/howto/default.asp">How To Tutorial</a><br>
1658 <a href="/sql/default.asp">SQL Tutorial</a><br>
1659 <a href="/python/default.asp">Python Tutorial</a><br>
1660 <a href="/w3css/default.asp">W3.CSS Tutorial</a><br>
1661 <a href="/bootstrap/bootstrap_ver.asp">Bootstrap Tutorial</a><br>
1662 <a href="/php/default.asp">PHP Tutorial</a><br>
1663 <a href="/java/default.asp">Java Tutorial</a><br>
1664 <a href="/cpp/default.asp">C++ Tutorial</a><br>
1665 <a href="/jquery/default.asp">jQuery Tutorial</a><br>
1666 </div>
1667 </div>
1668 <div class="w3-col l3 m6 s12">
1669 <div class="top10">
1670 <h5 style="font-family: 'Source Sans Pro', sans-serif;">Top References</h5>
1671 <a href="/tags/default.asp">HTML Reference</a><br>
1672 <a href="/cssref/index.php">CSS Reference</a><br>
1673 <a href="/jsref/default.asp">JavaScript Reference</a><br>
1674 <a href="/sql/sql_ref_keywords.asp">SQL Reference</a><br>
1675 <a href="/python/python_reference.asp">Python Reference</a><br>
1676 <a href="/w3css/w3css_references.asp">W3.CSS Reference</a><br>
1677 <a href="/bootstrap/bootstrap_ref_all_classes.asp">Bootstrap Reference</a><br>
1678 <a href="/php/php_ref_overview.asp">PHP Reference</a><br>
1679 <a href="/colors/colors_names.asp">HTML Colors</a><br>
1680 <a href="/java/java_ref_keywords.asp">Java Reference</a><br>
1681 <a href="/angular/angular_ref_directives.asp">Angular Reference</a><br>
1682 <a href="/jquery/jquery_ref_overview.asp">jQuery Reference</a><br>
1683 </div>
1684 </div>
1685 <div class="w3-col l3 m6 s12">
1686 <div class="top10">
1687 <h5 style="font-family: 'Source Sans Pro', sans-serif;">Top Examples</h5>
1688 <a href="/html/html_examples.asp">HTML Examples</a><br>
1689 <a href="/css/css_examples.asp">CSS Examples</a><br>
1690 <a href="/js/js_examples.asp">JavaScript Examples</a><br>
1691 <a href="/howto/default.asp">How To Examples</a><br>
1692 <a href="/sql/sql_examples.asp">SQL Examples</a><br>
1693 <a href="/python/python_examples.asp">Python Examples</a><br>
1694 <a href="/w3css/w3css_examples.asp">W3.CSS Examples</a><br>
1695 <a href="/bootstrap/bootstrap_examples.asp">Bootstrap Examples</a><br>
1696 <a href="/php/php_examples.asp">PHP Examples</a><br>
1697 <a href="/java/java_examples.asp">Java Examples</a><br>
1698 <a href="/xml/xml_examples.asp">XML Examples</a><br>
1699 <a href="/jquery/jquery_examples.asp">jQuery Examples</a><br>
1700 </div>
1701 </div>
1702 <div class="w3-col l3 m6 s12">
1703 <div class="top10">
1704 <!--
1705 <h4>Web Certificates</h4>
1706 <a href="/cert/default.asp">HTML Certificate</a><br>
1707 <a href="/cert/default.asp">CSS Certificate</a><br>
1708 <a href="/cert/default.asp">JavaScript Certificate</a><br>
1709 <a href="/cert/default.asp">SQL Certificate</a><br>
1710 <a href="/cert/default.asp">Python Certificate</a><br>
1711 <a href="/cert/default.asp">PHP Certificate</a><br>
1712 <a href="/cert/default.asp">Bootstrap Certificate</a><br>
1713 <a href="/cert/default.asp">XML Certificate</a><br>
1714 <a href="/cert/default.asp">jQuery Certificate</a><br>
1715 <a href="//www.w3schools.com/cert/default.asp" class="w3-button w3-margin-top w3-dark-grey" style="text-decoration:none">
1716 Get Certified &raquo;</a>
1717 -->
1718
1719 <a href="https://shop.w3schools.com/collections/course-catalog" target="_blank"><h5 style="font-family: 'Source Sans Pro', sans-serif;">Get Certified</h5
1720 <a href="https://campus.w3schools.com/collections/certifications/products/html-certificate" target="_blank">HTML Certificate</a><br>
1721 <a href="https://campus.w3schools.com/collections/certifications/products/css-certificate" target="_blank">CSS Certificate</a><br>
1722 <a href="https://campus.w3schools.com/collections/certifications/products/javascript-certificate" target="_blank">JavaScript Certificate</a><br>
1723 <a href="https://campus.w3schools.com/collections/certifications/products/front-end-certificate" target="_blank">Front End Certificate</a><br>
1724 <a href="https://campus.w3schools.com/collections/certifications/products/sql-certificate" target="_blank">SQL Certificate</a><br>
1725 <a href="https://campus.w3schools.com/collections/certifications/products/python-certificate" target="_blank">Python Certificate</a><br>
1726 <a href="https://campus.w3schools.com/collections/certifications/products/php-certificate" target="_blank">PHP Certificate</a><br>
1727 <a href="https://campus.w3schools.com/collections/certifications/products/jquery-certificate" target="_blank">jQuery Certificate</a><br>
1728 <a href="https://campus.w3schools.com/collections/certifications/products/java-certificate" target="_blank">Java Certificate</a><br>
1729 <a href="https://campus.w3schools.com/collections/certifications/products/c-certificate" target="_blank">C++ Certificate</a><br>
1730 <a href="https://campus.w3schools.com/collections/certifications/products/c-certificate-1" target="_blank">C# Certificate</a><br>
1731 <a href="https://campus.w3schools.com/collections/certifications/products/xml-certificate" target="_blank">XML Certificate</a><br>
1732 <!--<a href="https://shop.w3schools.com/collections/course-catalog" target="_blank" class="w3-button w3-margin-top ws-black ws-hover-black w3-round" styl
1733 Get Certified &#10095;</a>-->
1734
1735 </div>
1736 </div>
1737 </div>
1738
1739 <hr>
1740 <div class="w3-opacity" style="font-size:12px;text-align:right;margin-bottom:16px;margin-right:8px;">
1741 <a href="/forum/default.asp" target="_blank" class="xw3-text-grey xw3-hover-text-black" style="text-decoration:none" title="Forum">FORUM</a> |
1742 <a href="/about/default.asp" target="_top" class="xw3-text-grey xw3-hover-text-black" style="text-decoration:none" title="About W3Schools">ABOUT</a>
1743 </div>
1744 <div class="w3-center w3-small w3-opacity">
1745 W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
1746 Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.
1747 While using W3Schools, you agree to have read and accepted our <a href="/about/about_copyright.asp">terms of use</a>,
1748 <a href="/about/about_privacy.asp">cookie and privacy policy</a>.<br><br>
1749 <a href="/about/about_copyright.asp">Copyright 1999-2023</a> by Refsnes Data. All Rights Reserved.<br>
1750 <a href="//www.w3schools.com/w3css/default.asp">W3Schools is Powered by W3.CSS</a>.<br><br>
1751 </div>
1752 <div class="w3-center w3-small">
1753 <a href="//www.w3schools.com">
1754 <i class="fa fa-logo ws-text-green ws-hover-text-green" style="position:relative;font-size:42px!important;"></i>
1755 </div>
1756 <br><br>
1757 </div>
1758 </div>
1759 <script src="/lib/w3schools_footer.js?update=20220202"></script>
1760
1761 <script>
1762 MyLearning.loadUser('footer', function () {
1763 if (UserSession.loggedIn) {
1764 document.getElementById("signupbtn_topnav").style.display = "none";
1765 document.getElementById("spacesbtn_topnav").style.display = "block";
1766 } else {
1767 addMyLearnButt();
1768 }
1769 });
1770 function docReady(fn) {
1771 document.addEventListener("DOMContentLoaded", fn);
1772 if (document.readyState === "interactive" || document.readyState === "complete" ) {
1773 fn();
1774 }
1775 }
1776 uic_r_z();
1777 uic_r_d()
1778
1779 function addMyLearnButt() {
1780 let nav = document.getElementsByClassName("nextprev");
1781 if (document.body.contains(nav[1])) {
1782 if ((nav[1].firstElementChild.innerHTML.indexOf("Previous") || nav[1].firstElementChild.innerHTML.indexOf("Home") !== -1) && (nav[1].firstElementChil
1783 let myLearnButt = document.createElement("a");
1784 myLearnButt.innerHTML="Log in to track progress";
1785 myLearnButt.classList.add("w3-btn", "w3-hide-small", "myl-nav-butt");
1786 myLearnButt.href="https://www.w3schools.com/signup/?utm_source=classic&utm_medium=" + subjectFolder + "_tutorial&utm_campaign=button_lower_navigati
1787 myLearnButt.setAttribute("title", "Sign Up and improve Your Learning Experience");
1788 myLearnButt.setAttribute("target", "_blank");
1789 nav[1].classList.add("w3-center");
1790 nav[1].firstElementChild.insertAdjacentElement("afterend", myLearnButt);
1791 }
1792 }
1793 }
1794 </script>
1795
1796 <!--[if lt IE 9]>
1797 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
1798 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
1799 <![endif]-->
1800 </body>
1801 </html>

You might also like