Js Intro

Unión de líneas
1
2 <!DOCTYPE html>
3 <html lang="en-US">
4 <head>
5 <title>JavaScript Introduction</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 
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 
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";
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";
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><body>
128 
129 <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KTCFC3S"
130 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
131 
132 <style>
133 #darkmodemenu {
134 position:absolute;
135 top:-40px;
136 right:16px;
137 padding:5px 20px 10px 18px;
138 border-bottom-left-radius:5px;
139 border-bottom-right-radius:5px;
140 z-index:-1;
141 transition: top 0.2s;
142 user-select: none;
143 }
144 #darkmodemenu input,#darkmodemenu label {
145 cursor:pointer;
146 }
147 </style>
148 <script>
149 (
150 function setThemeMode() {
151 var x = localStorage.getItem("preferredmode");
152 var y = localStorage.getItem("preferredpagemode");
153 if (x == "dark") {
154 document.body.className += " darktheme";
155 }
156 if (y == "dark") {
157 document.body.className += " darkpagetheme";
158 }
159 })();
160 </script>
161 <div id="pagetop" class="w3-bar w3-card-2 notranslate">
162 <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">
163 <i class="fa fa-logo ws-text-green ws-hover-text-green" style="position:relative;font-size:42px!important;"></i>
164 </a>
165
166 <style>
167 .topnavmain_pro {
168 background-color:#9763f6;
169 color:#fff;
170 }
171 .topnavmain_pro:hover {
172 background-color:#7d53cc!important;
173 color:#fff!important;
174 }
175
176 @media screen and (max-width: 1160px) {
177 .ws-hide-1160 {
178 display: none !important;
179 }
180 }
182 .ws-hide-1300 {
184 }
185 }
187 .ws-hide-700 {
189 }
190 }
191 @media screen and (max-width:380px) {
192 #w3loginbtn {
193 width:90px!important;
194 padding-left:2px!important;
195 padding-right:2px;
196 }
197 #signupbtn_topnav,#spacesbtn_topnav {
198 display:none!important;
199 }
200 }
201
202 </style>
203
204 <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
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('references')" id="nav
206 <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
207
208 <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</
209
210 <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:
211
212 <div id="loginactioncontainer" class="w3-right w3-padding-16" style="margin-left:1px;width:55px">
213 <div id="mypagediv"></div>
214 
267
268 </div>
269
270 <div id="darkmodemenu" class="ws-black" onmouseover="mouseoverdarkicon()" onmouseout="mouseoutofdarkicon()">
271 <input id="radio_darkpage" type="checkbox" name="radio_theme_mode" onclick="click_darkpage()"><label for="radio_darkpage"> Dark mode</label>
272 <br>
273 <input id="radio_darkcode" type="checkbox" name="radio_theme_mode" onclick="click_darkcode()"><label for="radio_darkcode"> Dark code</label>
274 </div>
275
276 <nav id="nav_tutorials" class="w3-hide-small" style="position:absolute;padding-bottom:60px;">
277 <div class="w3-content" style="max-width:1100px;font-size:18px">
278 <span onclick="w3_close_nav('tutorials')" class="w3-button w3-xxxlarge w3-display-topright w3-hover-white sectionxsclosenavspan" style="padding-right:30
279 <div class="w3-row-padding w3-bar-block">
280 <div class="w3-container" style="padding-left:13px">
281 <h2 style="color:#FFF4A3;"><b>Tutorials</b></h2>
282 </div>
283 <div class="w3-col l3 m6">
284 <h3 class="w3-margin-top">HTML and CSS</h3>
285 <a class="w3-bar-item w3-button" href="/html/default.asp">Learn HTML</a>
286 <a class="w3-bar-item w3-button" href="/css/default.asp">Learn CSS</a>
287 <a class="w3-bar-item w3-button" href="/css/css_rwd_intro.asp" title="Responsive Web Design">Learn RWD</a>
288 <a class="w3-bar-item w3-button" href="/bootstrap/bootstrap_ver.asp">Learn Bootstrap</a>
289 <a class="w3-bar-item w3-button" href="/w3css/default.asp">Learn W3.CSS</a>
290 <a class="w3-bar-item w3-button" href="/colors/default.asp">Learn Colors</a>
291 <a class="w3-bar-item w3-button" href="/icons/default.asp">Learn Icons</a>
292 <a class="w3-bar-item w3-button" href="/graphics/default.asp">Learn Graphics</a>
293 <a class="w3-bar-item w3-button" href='/graphics/svg_intro.asp'>Learn SVG</a>
294 <a class="w3-bar-item w3-button" href='/graphics/canvas_intro.asp'>Learn Canvas</a>
295 <a class="w3-bar-item w3-button" href="/howto/default.asp">Learn How To</a>
296 <a class="w3-bar-item w3-button" href="/sass/default.php">Learn Sass</a>
297 <div class="w3-hide-large w3-hide-small">
298 <h3 class="w3-margin-top">Data Analytics</h3>
299 <a class="w3-bar-item w3-button" href="/ai/default.asp">Learn AI</a>
300 <a class="w3-bar-item w3-button" href="/python/python_ml_getting_started.asp">Learn Machine Learning</a>
301 <a class="w3-bar-item w3-button" href="/datascience/default.asp">Learn Data Science</a>
302 <a class="w3-bar-item w3-button" href="/python/numpy/default.asp">Learn NumPy</a>
303 <a class="w3-bar-item w3-button" href="/python/pandas/default.asp">Learn Pandas</a>
304 <a class="w3-bar-item w3-button" href="/python/scipy/index.php">Learn SciPy</a>
305 <a class="w3-bar-item w3-button" href="/python/matplotlib_intro.asp">Learn Matplotlib</a>
306 <a class="w3-bar-item w3-button" href="/statistics/index.php">Learn Statistics</a>
307 <a class="w3-bar-item w3-button" href="/excel/index.php">Learn Excel</a>
308
309 <h3 class="w3-margin-top">XML Tutorials</h3>
310 <a class="w3-bar-item w3-button" href="/xml/default.asp">Learn XML</a>
311 <a class="w3-bar-item w3-button" href='/xml/ajax_intro.asp'>Learn XML AJAX</a>
312 <a class="w3-bar-item w3-button" href="/xml/dom_intro.asp">Learn XML DOM</a>
313 <a class="w3-bar-item w3-button" href='/xml/xml_dtd_intro.asp'>Learn XML DTD</a>
314 <a class="w3-bar-item w3-button" href='/xml/schema_intro.asp'>Learn XML Schema</a>
315 <a class="w3-bar-item w3-button" href="/xml/xsl_intro.asp">Learn XSLT</a>
316 <a class="w3-bar-item w3-button" href='/xml/xpath_intro.asp'>Learn XPath</a>
317 <a class="w3-bar-item w3-button" href='/xml/xquery_intro.asp'>Learn XQuery</a>
318 </div>
319 </div>
321 <h3 class="w3-margin-top">JavaScript</h3>
322 <a class="w3-bar-item w3-button" href="/js/default.asp">Learn JavaScript</a>
323 <a class="w3-bar-item w3-button" href="/jquery/default.asp">Learn jQuery</a>
324 <a class="w3-bar-item w3-button" href="/react/default.asp">Learn React</a>
325 <a class="w3-bar-item w3-button" href="/angular/default.asp">Learn AngularJS</a>
326 <a class="w3-bar-item w3-button" href="/js/js_json_intro.asp">Learn JSON</a>
327 <a class="w3-bar-item w3-button" href="/js/js_ajax_intro.asp">Learn AJAX</a>
328 <a class="w3-bar-item w3-button" href="/appml/default.asp">Learn AppML</a>
329 <a class="w3-bar-item w3-button" href="/w3js/default.asp">Learn W3.JS</a>
330
331 <h3 class="w3-margin-top">Programming</h3>
332 <a class="w3-bar-item w3-button" href="/python/default.asp">Learn Python</a>
333 <a class="w3-bar-item w3-button" href="/java/default.asp">Learn Java</a>
334 <a class="w3-bar-item w3-button" href="/c/index.php">Learn C</a>
335 <a class="w3-bar-item w3-button" href="/cpp/default.asp">Learn C++</a>
336 <a class="w3-bar-item w3-button" href="/cs/index.php">Learn C#</a>
337 <a class="w3-bar-item w3-button" href="/r/default.asp">Learn R</a>
338 <a class="w3-bar-item w3-button" href="/kotlin/index.php">Learn Kotlin</a>
339 <a class="w3-bar-item w3-button" href="/go/index.php">Learn Go</a>
340 <a class="w3-bar-item w3-button" href="/django/index.php">Learn Django</a>
341 <a class="w3-bar-item w3-button" href="/typescript/index.php">Learn TypeScript</a>
342 </div>
344 <h3 class="w3-margin-top">Server Side</h3>
345 <a class="w3-bar-item w3-button" href="/sql/default.asp">Learn SQL</a>
346 <a class="w3-bar-item w3-button" href="/mysql/default.asp">Learn MySQL</a>
347 <a class="w3-bar-item w3-button" href="/php/default.asp">Learn PHP</a>
348 <a class="w3-bar-item w3-button" href='/asp/default.asp'>Learn ASP</a>
349 <a class="w3-bar-item w3-button" href='/nodejs/default.asp'>Learn Node.js</a>
350 <a class="w3-bar-item w3-button" href='/nodejs/nodejs_raspberrypi.asp'>Learn Raspberry Pi</a>
351 <a class="w3-bar-item w3-button" href='/git/default.asp'>Learn Git</a>
352 <a class="w3-bar-item w3-button" href='/mongodb/index.php'>Learn MongoDB</a>
353 <a class="w3-bar-item w3-button" href='/aws/index.php'>Learn AWS Cloud</a>
354
355 <h3 class="w3-margin-top">Web Building</h3>
356 <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
357 <a class="w3-bar-item w3-button" href="/where_to_start.asp">Where To Start</a>
358 <a class="w3-bar-item w3-button" href="/w3css/w3css_templates.asp">Web Templates</a>
359 <a class="w3-bar-item w3-button" href="/browsers/default.asp">Web Statistics</a>
360 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com" target="_blank">Web Certificates</a>
361 <a class="w3-bar-item w3-button" href="/whatis/default.asp">Web Development</a>
362 <a class="w3-bar-item w3-button" href='/tryit/default.asp'>Code Editor</a>
363 <a class="w3-bar-item w3-button" href="/typingspeed/default.asp">Test Your Typing Speed</a>
364 <a class="w3-bar-item w3-button" href="/codegame/index.html" target="_blank">Play a Code Game</a>
365 <a class="w3-bar-item w3-button" href="/cybersecurity/index.php">Cyber Security</a>
366 <a class="w3-bar-item w3-button" href="/accessibility/index.php">Accessibility</a>
367 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/pages/newsletter" target="_blank">Join our Newsletter</a>
368 </div>
369 <div class="w3-col l3 m6 w3-hide-medium">
370 <h3 class="w3-margin-top">Data Analytics</h3>
371 <a class="w3-bar-item w3-button" href="/ai/default.asp">Learn AI</a>
372 <a class="w3-bar-item w3-button" href="/python/python_ml_getting_started.asp">Learn Machine Learning</a>
373 <a class="w3-bar-item w3-button" href="/datascience/default.asp">Learn Data Science</a>
374 <a class="w3-bar-item w3-button" href="/python/numpy/default.asp">Learn NumPy</a>
375 <a class="w3-bar-item w3-button" href="/python/pandas/default.asp">Learn Pandas</a>
376 <a class="w3-bar-item w3-button" href="/python/scipy/index.php">Learn SciPy</a>
377 <a class="w3-bar-item w3-button" href="/python/matplotlib_intro.asp">Learn Matplotlib</a>
378 <a class="w3-bar-item w3-button" href="/statistics/index.php">Learn Statistics</a>
379 <a class="w3-bar-item w3-button" href="/excel/index.php">Learn Excel</a>
380 <a class="w3-bar-item w3-button" href="/googlesheets/index.php">Learn Google Sheets</a>
381
382 <h3 class="w3-margin-top">XML Tutorials</h3>
383 <a class="w3-bar-item w3-button" href="/xml/default.asp">Learn XML</a>
384 <a class="w3-bar-item w3-button" href='/xml/ajax_intro.asp'>Learn XML AJAX</a>
385 <a class="w3-bar-item w3-button" href="/xml/dom_intro.asp">Learn XML DOM</a>
386 <a class="w3-bar-item w3-button" href='/xml/xml_dtd_intro.asp'>Learn XML DTD</a>
387 <a class="w3-bar-item w3-button" href='/xml/schema_intro.asp'>Learn XML Schema</a>
388 <a class="w3-bar-item w3-button" href="/xml/xsl_intro.asp">Learn XSLT</a>
389 <a class="w3-bar-item w3-button" href='/xml/xpath_intro.asp'>Learn XPath</a>
390 <a class="w3-bar-item w3-button" href='/xml/xquery_intro.asp'>Learn XQuery</a>
391 </div>
392 </div>
393 </div>
394 <br class="hidesm">
395 </nav>
396
397 <nav id="nav_references" class="w3-hide-small" style="position:absolute;padding-bottom:60px;">
399 <span onclick="w3_close_nav('references')" class="w3-button w3-xxxlarge w3-display-topright w3-hover-white sectionxsclosenavspan" style="padding-right:3
402 <h2 style="color:#FFF4A3;"><b>References</b></h2>
403 </div>
405 <h3 class="w3-margin-top">HTML</h3>
406 <a class="w3-bar-item w3-button" href='/tags/default.asp'>HTML Tag Reference</a>
407 <a class="w3-bar-item w3-button" href='/tags/ref_html_browsersupport.asp'>HTML Browser Support</a>
408 <a class="w3-bar-item w3-button" href='/tags/ref_eventattributes.asp'>HTML Event Reference</a>
409 <a class="w3-bar-item w3-button" href='/colors/default.asp'>HTML Color Reference</a>
410 <a class="w3-bar-item w3-button" href='/tags/ref_attributes.asp'>HTML Attribute Reference</a>
411 <a class="w3-bar-item w3-button" href='/tags/ref_canvas.asp'>HTML Canvas Reference</a>
412 <a class="w3-bar-item w3-button" href='/graphics/svg_reference.asp'>HTML SVG Reference</a>
413 <a class="w3-bar-item w3-button" href='/graphics/google_maps_reference.asp'>Google Maps Reference</a>
414 <h3 class="w3-margin-top">CSS</h3>
415 <a class="w3-bar-item w3-button" href='/cssref/index.php'>CSS Reference</a>
416 <a class="w3-bar-item w3-button" href='/cssref/css3_browsersupport.asp'>CSS Browser Support</a>
417 <a class="w3-bar-item w3-button" href='/cssref/css_selectors.asp'>CSS Selector Reference</a>
418 <a class="w3-bar-item w3-button" href='/bootstrap/bootstrap_ref_all_classes.asp'>Bootstrap 3 Reference</a>
419 <a class="w3-bar-item w3-button" href='/bootstrap4/bootstrap_ref_all_classes.asp'>Bootstrap 4 Reference</a>
420 <a class="w3-bar-item w3-button" href='/w3css/w3css_references.asp'>W3.CSS Reference</a>
421 <a class="w3-bar-item w3-button" href='/icons/icons_reference.asp'>Icon Reference</a>
422 <a class="w3-bar-item w3-button" href='/sass/sass_functions_string.php'>Sass Reference</a>
423 </div>
425 <h3 class="w3-margin-top">JavaScript</h3>
426 <a class="w3-bar-item w3-button" href='/jsref/default.asp'>JavaScript Reference</a>
427 <a class="w3-bar-item w3-button" href='/jsref/default.asp'>HTML DOM Reference</a>
428 <a class="w3-bar-item w3-button" href='/jquery/jquery_ref_overview.asp'>jQuery Reference</a>
429 <a class="w3-bar-item w3-button" href='/angular/angular_ref_directives.asp'>AngularJS Reference</a>
430 <a class="w3-bar-item w3-button" href="/appml/appml_reference.asp">AppML Reference</a>
431 <a class="w3-bar-item w3-button" href="/w3js/w3js_references.asp">W3.JS Reference</a>
432
433 <h3 class="w3-margin-top">Programming</h3>
434 <a class="w3-bar-item w3-button" href='/python/python_reference.asp'>Python Reference</a>
435 <a class="w3-bar-item w3-button" href='/java/java_ref_keywords.asp'>Java Reference</a>
436 </div>
438 <h3 class="w3-margin-top">Server Side</h3>
439 <a class="w3-bar-item w3-button" href='/sql/sql_ref_keywords.asp'>SQL Reference</a>
440 <a class="w3-bar-item w3-button" href='/mysql/mysql_ref_functions.asp'>MySQL Reference</a>
441 <a class="w3-bar-item w3-button" href='/php/php_ref_overview.asp'>PHP Reference</a>
442 <a class="w3-bar-item w3-button" href='/asp/asp_ref_response.asp'>ASP Reference</a>
443 <h3 class="w3-margin-top">XML</h3>
444 <a class="w3-bar-item w3-button" href='/xml/dom_nodetype.asp'>XML DOM Reference</a>
445 <a class="w3-bar-item w3-button" href='/xml/dom_http.asp'>XML Http Reference</a>
446 <a class="w3-bar-item w3-button" href='/xml/xsl_elementref.asp'>XSLT Reference</a>
447 <a class="w3-bar-item w3-button" href='/xml/schema_elements_ref.asp'>XML Schema Reference</a>
448 </div>
450 <h3 class="w3-margin-top">Character Sets</h3>
451 <a class="w3-bar-item w3-button" href='/charsets/default.asp'>HTML Character Sets</a>
452 <a class="w3-bar-item w3-button" href='/charsets/ref_html_ascii.asp'>HTML ASCII</a>
453 <a class="w3-bar-item w3-button" href='/charsets/ref_html_ansi.asp'>HTML ANSI</a>
454 <a class="w3-bar-item w3-button" href='/charsets/ref_html_ansi.asp'>HTML Windows-1252</a>
455 <a class="w3-bar-item w3-button" href='/charsets/ref_html_8859.asp'>HTML ISO-8859-1</a>
456 <a class="w3-bar-item w3-button" href='/charsets/ref_html_symbols.asp'>HTML Symbols</a>
457 <a class="w3-bar-item w3-button" href='/charsets/ref_html_utf8.asp'>HTML UTF-8</a>
458 </div>
459 </div>
461 </div>
462 </nav>
463
464 <nav id="nav_exercises" class="w3-hide-small" style="position:absolute;padding-bottom:60px;">
466 <span onclick="w3_close_nav('exercises')" class="w3-button w3-xxxlarge w3-display-topright w3-hover-white sectionxsclosenavspan" style="padding-right:30
469 <h2 style="color:#FFF4A3;"><b>Exercises and Quizzes</b></h2>
470 </div>
472 <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>
473 <a class="w3-bar-item w3-button" href="/html/html_exercises.asp">HTML Exercises</a>
474 <a class="w3-bar-item w3-button" href="/css/css_exercises.asp">CSS Exercises</a>
475 <a class="w3-bar-item w3-button" href="/js/js_exercises.asp">JavaScript Exercises</a>
476 <a class="w3-bar-item w3-button" href="/python/python_exercises.asp">Python Exercises</a>
477 <a class="w3-bar-item w3-button" href="/sql/sql_exercises.asp">SQL Exercises</a>
478 <a class="w3-bar-item w3-button" href="/php/php_exercises.asp">PHP Exercises</a>
479 <a class="w3-bar-item w3-button" href="/java/java_exercises.asp">Java Exercises</a>
480 <a class="w3-bar-item w3-button" href="/c/c_exercises.php">C Exercises</a>
481 <a class="w3-bar-item w3-button" href="/cpp/cpp_exercises.asp">C++ Exercises</a>
482 <a class="w3-bar-item w3-button" href="/cs/cs_exercises.asp">C# Exercises</a>
483 <a class="w3-bar-item w3-button" href="/jquery/jquery_exercises.asp">jQuery Exercises</a>
484 <a class="w3-bar-item w3-button" href="/react/react_exercises.asp">React.js Exercises</a>
485 <a class="w3-bar-item w3-button" href="/mysql/mysql_exercises.asp">MySQL Exercises</a>
486 <a class="w3-bar-item w3-button" href="/bootstrap5/bootstrap_exercises.php">Bootstrap 5 Exercises</a>
487 <a class="w3-bar-item w3-button" href="/bootstrap4/bootstrap_exercises.asp">Bootstrap 4 Exercises</a>
488 <a class="w3-bar-item w3-button" href="/bootstrap/bootstrap_exercises.asp">Bootstrap 3 Exercises</a>
489 <a class="w3-bar-item w3-button" href="/python/numpy/numpy_exercises.asp">NumPy Exercises</a>
490 <a class="w3-bar-item w3-button" href="/python/pandas/pandas_exercises.asp">Pandas Exercises</a>
491 <a class="w3-bar-item w3-button" href="/python/scipy/scipy_exercises.php">SciPy Exercises</a>
492 <a class="w3-bar-item w3-button" href="/typescript/typescript_exercises.php">TypeScript Exercises</a>
493 <a class="w3-bar-item w3-button" href="/excel/excel_exercises.php">Excel Exercises</a>
494 <a class="w3-bar-item w3-button" href="/r/r_exercises.asp">R Exercises</a>
495 <a class="w3-bar-item w3-button" href="/git/git_exercises.asp">Git Exercises</a>
496 <a class="w3-bar-item w3-button" href="/kotlin/kotlin_exercises.php">Kotlin Exercises</a>
497 <a class="w3-bar-item w3-button" href="/go/go_exercises.php">Go Exercises</a>
498 <a class="w3-bar-item w3-button" href="/mongodb/mongodb_exercises.php">MongoDB Exercises</a>
499 </div>
501 <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><
502 <a class="w3-bar-item w3-button" href="/html/html_quiz.asp" target="_top">HTML Quiz</a>
503 <a class="w3-bar-item w3-button" href="/css/css_quiz.asp" target="_top">CSS Quiz</a>
504 <a class="w3-bar-item w3-button" href="/js/js_quiz.asp" target="_top">JavaScript Quiz</a>
505 <a class="w3-bar-item w3-button" href="/python/python_quiz.asp" target="_top">Python Quiz</a>
506 <a class="w3-bar-item w3-button" href="/sql/sql_quiz.asp" target="_top">SQL Quiz</a>
507 <a class="w3-bar-item w3-button" href="/php/php_quiz.asp" target="_top">PHP Quiz</a>
508 <a class="w3-bar-item w3-button" href="/java/java_quiz.asp" target="_top">Java Quiz</a>
509 <a class="w3-bar-item w3-button" href="/c/c_quiz.php">C Quiz</a>
510 <a class="w3-bar-item w3-button" href="/cpp/cpp_quiz.asp" target="_top">C++ Quiz</a>
511 <a class="w3-bar-item w3-button" href="/cs/cs_quiz.asp" target="_top">C# Quiz</a>
512 <a class="w3-bar-item w3-button" href="/jquery/jquery_quiz.asp" target="_top">jQuery Quiz</a>
513 <a class="w3-bar-item w3-button" href="/react/react_quiz.asp">React.js Quiz</a>
514 <a class="w3-bar-item w3-button" href="/mysql/mysql_quiz.asp" target="_top">MySQL Quiz</a>
515 <a class="w3-bar-item w3-button" href="/bootstrap5/bootstrap_quiz.php" target="_top">Bootstrap 5 Quiz</a>
516 <a class="w3-bar-item w3-button" href="/bootstrap4/bootstrap_quiz.asp" target="_top">Bootstrap 4 Quiz</a>
517 <a class="w3-bar-item w3-button" href="/bootstrap/bootstrap_quiz.asp" target="_top">Bootstrap 3 Quiz</a>
518 <a class="w3-bar-item w3-button" href="/python/numpy/numpy_quiz.asp" target="_top">NumPy Quiz</a>
519 <a class="w3-bar-item w3-button" href="/python/pandas/pandas_quiz.asp" target="_top">Pandas Quiz</a>
520 <a class="w3-bar-item w3-button" href="/python/scipy/scipy_quiz.php" target="_top">SciPy Quiz</a>
521 <a class="w3-bar-item w3-button" href="/typescript/typescript_quiz.php">TypeScript Quiz</a>
522 <a class="w3-bar-item w3-button" href="/xml/xml_quiz.asp" target="_top">XML Quiz</a>
523 <a class="w3-bar-item w3-button" href="/r/r_quiz.asp" target="_top">R Quiz</a>
524 <a class="w3-bar-item w3-button" href="/git/git_quiz.asp">Git Quiz</a>
525 <a class="w3-bar-item w3-button" href="/kotlin/kotlin_quiz.php" target="_top">Kotlin Quiz</a>
526 <a class="w3-bar-item w3-button" href="/cybersecurity/cybersecurity_quiz.php">Cyber Security Quiz</a>
527 <a class="w3-bar-item w3-button" href="/accessibility/accessibility_quiz.php">Accessibility Quiz</a>
528 </div>
530 <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
531 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/html-course" target="_blank">HTML Course</a>
532 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/css-course" target="_blank">CSS Course</a>
533 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/javascript-course" target="_blank">JavaScript
534 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/front-end-course" target="_blank">Front End Co
535 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/python-course" target="_blank">Python Course</
536 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/sql-course" target="_blank">SQL Course</a>
537 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/php-course" target="_blank">PHP Course</a>
538 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/java-course" target="_blank">Java Course</a>
539 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/c-course-1" target="_blank">C++ Course</a>
540 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/c-course" target="_blank">C# Course</a>
541 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/jquery-course" target="_blank">jQuery Course</
542 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/react-js-course" target="_blank">React.js Cour
543 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/bootstrap-4-course" target="_blank">Bootstrap
544 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/bootstrap-course" target="_blank">Bootstrap 3
545 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/numpy-course" target="_blank">NumPy Course</a>
546 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/pandas-course" target="_blank">Pandas Course</
547 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/learn-typescript" target="_blank">TypeScript C
548 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/xml-course" target="_blank">XML Course</a>
549 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/r-course" target="_blank">R Course</a>
550 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/data-analytics-program" target="_blank">Data A
551 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/cyber-security-course" target="_blank">Cyber S
552 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/course-catalog/products/accessibility-course" target="_blank">Accessib
553 </div>
555 <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
556 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/html-certificate" target="_blank">HTML Certifi
557 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/css-certificate" target="_blank">CSS Certifica
558 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/javascript-certificate" target="_blank">JavaSc
559 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/front-end-certificate" target="_blank">Front E
560 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/python-certificate" target="_blank">Python Cer
561 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/sql-certificate" target="_blank">SQL Certifica
562 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/php-certificate" target="_blank">PHP Certifica
563 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/java-certificate" target="_blank">Java Certifi
564 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/c-certificate" target="_blank">C++ Certificate
565 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/c-certificate-1" target="_blank">C# Certificat
566 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/jquery-certificate" target="_blank">jQuery Cer
567 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/react-js-certificate" target="_blank">React.js
568 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/mysql-certificate" target="_blank">MySQL Certi
569 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/bootstrap-5-certificate" target="_blank">Boots
572 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/typescript-certificate" target="_blank">TypeSc
573 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/xml-certificate" target="_blank">XML Certifica
574 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/excel-certificate" target="_blank">Excel Certi
575 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/data-science-certificate" target="_blank">Data
576 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/cyber-security-certificate" target="_blank">Cy
577 <a class="w3-bar-item w3-button" href="https://campus.w3schools.com/collections/certifications/products/accessibility-certificate" target="_blank">Acc
578 </div>
579 </div>
581 </div>
582 </nav>
583
584 </div>
585 </div>
586
587 <div id='myAccordion' class="w3-card-2 w3-center w3-hide-large w3-hide-medium ws-grey" style="width:100%;position:absolute;display:none;">
588 <a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-xxlarge w3-right">×</a><br>
589 <div class="w3-container w3-padding-32">
590 <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
591 <div id="sectionxs_tutorials" class="w3-left-align w3-show" style="background-color:#282A35;color:white;"></div>
592 <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
593 <div id="sectionxs_references" class="w3-left-align w3-show" style="background-color:#282A35;color:white;"></div>
594 <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-
595 <div id="sectionxs_exercises" class="w3-left-align w3-show" style="background-color:#282A35;color:white;"></div>
596 <a class="w3-button w3-block" style="font-size:22px;" href="https://campus.w3schools.com/collections/course-catalog" target="_blank">Get Certified</a
597 <a class="w3-button w3-block" style="font-size:22px;" href="/signup/index.html">Sign Up</a>
598 <a class="w3-button w3-block" style="font-size:22px;" href="/pro/index.php" title="Upgrade to Improve Your Learning Experiences">Upgrade</a>
599 <a class="w3-button w3-block" style="font-size:22px;" href="/spaces/index.html" title="Get Your Own Website With W3schools Spaces">Spaces</a>
600 <a class="w3-button w3-block" style="font-size:22px;" href="/bootcamp/index.php">Bootcamp</a>
601 <a class="w3-button w3-block" style="font-size:22px;" href="/videos/index.php" title="Video Tutorials">Videos</a>
602 <a class="w3-button w3-block" style="font-size:22px;" href="https://campus.w3schools.com" target="_blank">Shop</a>
603 </div>
604 </div>
605
606 <script>
607 (
608 function setThemeCheckboxes() {
609 var x = localStorage.getItem("preferredmode");
610 var y = localStorage.getItem("preferredpagemode");
611 if (x == "dark") {
612 document.getElementById("radio_darkcode").checked = true;
613
614 }
615 if (y == "dark") {
616 document.getElementById("radio_darkpage").checked = true;
617 }
618 })();
619
620 function mouseoverdarkicon() {
621 if(window.matchMedia("(pointer: coarse)").matches) {
622 return false;
623 }
624 var a = document.getElementById("darkmodemenu");
625 a.style.top = "44px";
626 }
627 function mouseoutofdarkicon() {
628 var a = document.getElementById("darkmodemenu");
629 a.style.top = "-40px";
630 }
631 function changepagetheme(n) {
632 var a = document.getElementById("radio_darkcode");
633 var b = document.getElementById("radio_darkpage");
634 document.body.className = document.body.className.replace("darktheme", "");
635 document.body.className = document.body.className.replace("darkpagetheme", "");
636 document.body.className = document.body.className.replace(" ", " ");
637 if (a.checked && b.checked) {
638 localStorage.setItem("preferredmode", "light");
639 localStorage.setItem("preferredpagemode", "light");
640 a.checked = false;
641 b.checked = false;
642 } else {
645 localStorage.setItem("preferredmode", "dark");
646 localStorage.setItem("preferredpagemode", "dark");
647 a.checked = true;
648 b.checked = true;
649 }
650 }
651
652
653 function click_darkpage() {
654 var b = document.getElementById("radio_darkpage");
655 if (b.checked) {
658 localStorage.setItem("preferredpagemode", "dark");
659 } else {
660 document.body.className = document.body.className.replace("darkpagetheme", "");
662 localStorage.setItem("preferredpagemode", "light");
663 }
664 }
665
666 function click_darkcode() {
667 var a = document.getElementById("radio_darkcode");
668 if (a.checked) {
671 localStorage.setItem("preferredmode", "dark");
672 } else {
673 document.body.className = document.body.className.replace("darktheme", "");
675 localStorage.setItem("preferredmode", "light");
676 }
677 }
678 </script>
679
680 <div class='w3-sidebar w3-collapse' id='sidenav'>
681 <div id='leftmenuinner'>
682 <div id='leftmenuinnerinner'>
683 
900
901 
902 <div id="adngin-main_leaderboard-0"></div>
903 
904
905 </div>
906 <h1>JavaScript <span class="color_h1">Introduction</span></h1>
907 <div class="w3-clear nextprev">
908 <a class="w3-left w3-btn" href="default.asp">❮ Previous</a>
909 <a class="w3-right w3-btn" href="js_whereto.asp">Next ❯</a>
910 </div>
911 <div class="w3-panel w3-info intro">
912 <p>This page contains some examples of what JavaScript can do.</p>
913 </div>
914
915 <h2>JavaScript Can Change HTML Content</h2>
916 <p>One of many JavaScript HTML methods is <code class="w3-codespan">getElementById()</code>.</p>
917 <p>The example below "finds" an HTML element (with id="demo"),
918 and changes the element content (innerHTML) to "Hello JavaScript":</p>
919
920 <div class="w3-example">
921 <h3>Example</h3>
922 <div class="w3-code notranslate jsHigh">
923 document.getElementById("demo").innerHTML = "Hello JavaScript";</div>
924 <a target="_blank" class="w3-btn w3-margin-bottom" href="tryit.asp?filename=tryjs_intro_inner_html">Try it Yourself »</a>
925 </div>
926 <div class="w3-panel w3-note">
927 <p>JavaScript accepts both double and single quotes:</p>
928 </div>
929
933 document.getElementById('demo').innerHTML = 'Hello JavaScript';</div>
934 <a class="w3-btn w3-margin-bottom" href="tryit.asp?filename=tryjs_intro_inner_html_quotes" target="_blank">Try it Yourself »</a>
935 </div>
936 <hr>
937
938 <h2>JavaScript Can Change HTML Attribute Values</h2>
939 <p>In this example JavaScript changes the value of the <code class="w3-codespan">src</code> (source) attribute of an <code class="w3-codespan"><img&gt
940
942 <h3>The Light Bulb</h3>
943 <div class="w3-padding-16 w3-white notranslate" style="text-align:center;background-color:white!important;">
944 <button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
945 <img id="myImage" border="0" src="pic_bulboff.gif" style="width:100px">
946 <button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
947 </div>
948 <p>
949 <a class="w3-btn" href="tryit.asp?filename=tryjs_intro_lightbulb" target="_blank">Try it Yourself »</a>
950 </p>
951 </div>
952 <hr>
953 <div id="midcontentadcontainer" style="overflow:auto;text-align:center">
954 
955 
956
957 <div id="adngin-mid_content-0"></div>
958
959 </div>
960 <hr>
961
962 <h2>JavaScript Can Change HTML Styles (CSS)</h2>
963 <p>Changing the style of an HTML element, is a variant of changing an HTML
964 attribute:</p>
965
969 document.getElementById("demo").style.fontSize = "35px";</div>
970 <a target="_blank" class="w3-btn w3-margin-bottom" href="tryit.asp?filename=tryjs_intro_style">Try it Yourself »</a>
971 </div>
972 <hr>
973
974 <h2>JavaScript Can Hide HTML Elements</h2>
975 <p>Hiding HTML elements can be done by changing the <code class="w3-codespan">display</code> style:</p>
976
980 document.getElementById("demo").style.display = "none";</div>
981 <a class="w3-btn w3-margin-bottom" href="tryit.asp?filename=tryjs_intro_hide" target="_blank">Try it Yourself »</a>
982 </div>
983 <hr>
984
985 <h2>JavaScript Can Show HTML Elements</h2>
986 <p>Showing hidden HTML elements can also be done by changing the <code class="w3-codespan">display</code> style:</p>
987
991 document.getElementById("demo").style.display = "block";</div>
992 <a class="w3-btn w3-margin-bottom" href="tryit.asp?filename=tryjs_intro_show" target="_blank">Try it Yourself »</a>
993 </div>
994
995 <div class="w3-panel w3-note">
996 <h3>Did You Know?</h3>
997 <p>JavaScript and <a href="/java/default.asp">Java</a> are completely different languages, both in concept
998 and design.</p>
999 <p>JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard
1000 in 1997.</p>
1001 <p>ECMA-262 is the official name of the standard. ECMAScript is the official name of the language.
1002 </p>
1003 <a class="ws-btn" href="js_versions.asp">JavaScript Versions »</a>
1004 </div>
1005 <br>
1006 <div class="w3-clear nextprev">
1007 <a class="w3-left w3-btn" href="default.asp">❮ Previous</a>
1008 <a class="w3-right w3-btn" href="js_whereto.asp">Next ❯</a>
1009 </div>
1010 <div id="mypagediv2" style="position:relative;text-align:center;"></div>
1011 <br>
1012
1013 </div>
1014 <div class="w3-col l2 m12" id="right">
1015
1016 <div class="sidesection">
1017 <div id="skyscraper">
1018
1019 <div id="adngin-sidebar_top-0"></div>
1020
1021 </div>
1022 </div>
1023
1024 <style>
1025 .ribbon-vid {
1026 font-size:12px;
1027 font-weight:bold;
1028 padding: 6px 20px;
1029 left:-20px;
1030 top:-10px;
1031 text-align: center;
1032 color:black;
1033 border-radius:25px;
1034 }
1035 </style>
1036
1037 <div class="sidesection" style="margin-top:20px;margin-bottom:20px;">
1038 <a id="upperfeatureshowcaselink" class="showcasebackend" href="https://www.w3schools.com/spaces/" target="_blank">
1039 <picture id="upperfeatureshowcase">
1040 <source id="upperfeatureshowcase3001" srcset="/images/img_backend_300.png" media="(max-width: 990px)" style="border-radius: 5px;">
1043 <img id="upperfeatureshowcase300" src="/images/img_backend_300.png" alt="Get started with your own server with Dynamic Spaces" style="width:auto;border
1044 </picture>
1045 </a>
1046 </div>
1047
1049 <h4><a href="/colors/colors_picker.asp">COLOR PICKER</a></h4>
1050 <a href="/colors/colors_picker.asp">
1051 <img src="/images/colorpicker2000.png" alt="colorpicker" loading="lazy">
1052 </a>
1053 </div>
1054
1056 
1057 <div class="sharethis">
1058 <a href="https://www.facebook.com/w3schoolscom/" target="_blank" title="Facebook"><span class="fa fa-facebook-square fa-2x"></span></a>
1059 <a href="https://www.instagram.com/w3schools.com_official/" target="_blank" title="Instagram"><span class="fa fa-instagram fa-2x"></span></a>
1060 <a href="https://www.linkedin.com/company/w3schools.com/" target="_blank" title="LinkedIn"><span class="fa fa-linkedin-square fa-2x"></span></a>
1061 <a href="https://discord.gg/6Z7UaRbUQM" target="_blank" title='Join the W3schools community on Discord'><span class="fa fa-discord fa-2x"></span></a>
1062 </div>
1063 </div>
1064
1065 
1075
1076 <style>
1077 #courses_get_started_btn {
1078 text-decoration:none !important;
1079 background-color:#04AA6D;
1080 width:100%;
1081 border-bottom-left-radius:5px;
1082 border-bottom-right-radius:5px;
1083 padding-top:10px;
1084 padding-bottom:10px;
1085 font-family: 'Source Sans Pro', sans-serif;
1086 }
1087 #courses_get_started_btn:hover {
1088 background-color:#059862!important;
1089 }
1090 </style>
1091 <div id="internalCourses" class="sidesection">
1092 <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
1093 <a id="courses_subject_img_link" href="https://shop.w3schools.com/collections/course-catalog" target="_blank">
1094 <div style="padding:0 20px 20px 20px">
1095 <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>.
1096 </div>
1097
1098 </a>
1099 <a class="w3-btn" id="courses_get_started_btn"
1100 href="https://shop.w3schools.com/collections/course-catalog" target="_blank">Get started</a>
1101 </div>
1102
1103 <div class="sidesection" id="moreAboutSubject">
1104 </div>
1105
1106 <div class="sidesection" style="margin-top:20px;margin-bottom:20px;">
1107 <a id="lowerfeatureshowcaselink" class="showcasesubs" href="https://www.w3schools.com/spaces/" target="_blank">
1108 <picture id="lowerfeatureshowcase">
1109 <source id="lowerfeatureshowcase3001" srcset="/images/img_subs_300.png" media="(max-width: 990px)" style="border-radius: 5px;">
1112 <img id="lowerfeatureshowcase300" src="/images/img_subs_300.png" alt="Subscribe" style="width:auto;border-radius: 5px;">
1113 </picture>
1114 </a>
1115 </div>
1116
1117 <script>
1118 var internalFeatureRnd = Math.floor(Math.random() * (5 - 1)) + 1;
1119 var upshowcase120 = document.getElementById("upperfeatureshowcase120");
1123 var upshowcaselink = document.getElementById("upperfeatureshowcaselink");
1124 var lowshowcase120 = document.getElementById("lowerfeatureshowcase120");
1128 var lowshowcaselink = document.getElementById("lowerfeatureshowcaselink");
1129
1130 if (internalFeatureRnd == 2) {
1131 upshowcase120.srcset = "/images/img_subs_120.png";
1135 upshowcaselink.href = "https://www.w3schools.com/spaces/";
1136 upshowcaselink.classList.remove("showcasebackend");
1137 upshowcaselink.classList.add("showcaseupgrade");
1138 lowshowcase120.srcset = "/images/img_bootcamp_120.png";
1142 lowshowcaselink.href = "https://www.w3schools.com/bootcamp/";
1143 lowshowcaselink.classList.remove("showcasesubs");
1144 lowshowcaselink.classList.add("showcasebootcamp");
1145 } else if (internalFeatureRnd == 3) {
1146 upshowcase120.srcset = "/images/img_bootcamp_120.png";
1150 upshowcaselink.href = "https://www.w3schools.com/bootcamp/";
1152 upshowcaselink.classList.add("showcasebootcamp");
1153 lowshowcase120.srcset = "/images/img_fullaccess3_120.png";
1157 lowshowcaselink.href = "https://campus.w3schools.com/collections/course-catalog/products/w3schools-full-access-course";
1159 lowshowcaselink.classList.add("showcasefullaccess");
1160 } else if (internalFeatureRnd == 4) {
1161 upshowcase120.srcset = "/images/img_fullaccess3_120.png";
1165 upshowcaselink.href = "https://campus.w3schools.com/collections/course-catalog/products/w3schools-full-access-course";
1167 upshowcaselink.classList.add("showcasefullaccess");
1168 lowshowcase120.srcset = "/images/img_backend_120.png";
1172 lowshowcaselink.href = "https://www.w3schools.com/spaces/";
1174 lowshowcaselink.classList.add("showcasebackend");
1175 }
1176 function addTryitSpaces(subject) {
1177 let spacesButt = document.createElement("a");
1178 let ribb = document.createElement("span");
1179 spacesButt.innerHTML="Get your own " + subject + " Server"
1180 spacesButt.classList.add("ws-black", "ws-hover-black", "spaces-tryit");
1181 spacesButt.href="https://www.w3schools.com/spaces/";
1182 spacesButt.setAttribute("title", "W3Schools Spaces");
1183 spacesButt.setAttribute("target", "_blank");
1184
1185 var tryits = document.getElementsByClassName("w3-example");
1186 for (var i = 0; i < tryits.length; i++) {
1187 if (tryits[i].firstElementChild.nodeName == "H3") {
1188 tryits[i].firstElementChild.appendChild(spacesButt.cloneNode(true));
1189 break;
1190 }
1191 }
1192 }
1193
1194 switch (subjectFolder) {
1195 case "cpp":
1196 subjectText = "C++";
1197 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/c-course-1";
1198 break;
1199 case "java":
1200 subjectText = "Java";
1201 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/java-course";
1202 addTryitSpaces(subjectText);
1203 break;
1204 case "bootstrap4":
1205 subjectText = "Bootstrap 4";
1206 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/bootstrap-4-course";
1207 break;
1208 case "xml":
1209 subjectText = "XML";
1210 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/xml-course";
1211 break;
1212 case "jquery":
1213 subjectText = "jQuery";
1214 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/jquery-course";
1215 break;
1216 case "accessibility":
1217 subjectText = "Accessibility";
1218 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/accessibility-course";
1219 break;
1220 case "bootstrap":
1221 subjectText = "Bootstrap 3";
1222 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/bootstrap-course";
1223 break;
1224 case "html":
1225 subjectText = "HTML";
1226 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/html-course";
1227 break;
1228 case "tags":
1229 subjectText = "HTML";
1230 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/html-course";
1231 break;
1232 case "css":
1233 subjectText = "CSS";
1234 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/css-course";
1235 break;
1236 case "cssref":
1237 subjectText = "CSS";
1238 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/css-course";
1239 break;
1240 case "js":
1241 subjectText = "JavaScript";
1242 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/javascript-course";
1243 break;
1244 case "jsref":
1245 subjectText = "JavaScript";
1246 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/javascript-course";
1247 break;
1248 case "react":
1249 subjectText = "React.js";
1250 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/react-js-course";
1251 if (upshowcaselink.classList.contains("showcasebackend") == true) {
1252 upshowcase120.srcset = "/images/img_backend_120_react.png";
1256 } else if (lowshowcaselink.classList.contains("showcasebackend") == true) {
1257 lowshowcase120.srcset = "/images/img_backend_120_react.png";
1261 }
1263 break;
1264 case "sql":
1265 subjectText = "SQL";
1266 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/sql-course";
1268 break;
1269 case "mysql":
1270 addTryitSpaces("SQL");
1271 break;
1272 case "php":
1273 subjectText = "PHP";
1274 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/php-course";
1276 upshowcase120.srcset = "/images/img_backend_120_php.png";
1281 lowshowcase120.srcset = "/images/img_backend_120_php.png";
1285 }
1287 break;
1288 case "cybersecurity":
1289 subjectText = "Cyber Security";
1290 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/cyber-security-course";
1291 break;
1292 case "r":
1293 subjectText = "R";
1294 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/r-course";
1295 break;
1296 case "numpy":
1297 subjectText = "Numpy";
1298 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/numpy-course";
1300 upshowcase120.srcset = "/images/img_backend_120_numpy.png";
1305 lowshowcase120.srcset = "/images/img_backend_120_numpy.png";
1309 }
1310 addTryitSpaces("Python");
1311 break;
1312 case "django":
1314 upshowcase120.srcset = "/images/img_backend_120_django.png";
1319 lowshowcase120.srcset = "/images/img_backend_120_django.png";
1323 }
1324 addTryitSpaces("Django");
1325 break;
1326 case "typescript":
1328 upshowcase120.srcset = "/images/img_backend_120_ts.png";
1333 lowshowcase120.srcset = "/images/img_backend_120_ts.png";
1337 }
1338 addTryitSpaces("TypeScript");
1339 break;
1340 case "nodejs":
1342 upshowcase120.srcset = "/images/img_backend_120_node.png";
1347 lowshowcase120.srcset = "/images/img_backend_120_node.png";
1351 }
1352 addTryitSpaces("Node.js");
1353 break;
1354 case "pandas":
1355 subjectText = "Pandas";
1356 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/pandas-course";
1358 upshowcase120.srcset = "/images/img_backend_120_pandas.png";
1363 lowshowcase120.srcset = "/images/img_backend_120_pandas.png";
1367 }
1368 addTryitSpaces("Python");
1369 break;
1370 case "python":
1371 subjectText = "Python";
1372 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/python-course";
1374 upshowcase120.srcset = "/images/img_backend_120_python.png";
1379 lowshowcase120.srcset = "/images/img_backend_120_python.png";
1383 }
1385 break;
1386 case "cs":
1387 subjectText = "C#";
1388 subjectLink = "https://shop.w3schools.com/collections/course-catalog/products/c-course";
1390 break;
1391 default:
1392 subjectText = "a";
1393 subjectLink = "https://shop.w3schools.com/collections/course-catalog";
1394 }
1395 if (typeof subjectText == 'undefined') {
1396 subjectText = "a";
1397 subjectLink = "https://shop.w3schools.com/collections/course-catalog";
1398 }
1399 if (subjectText != "a") {
1400 document.getElementById("courses_subject_text").innerHTML = "a " + subjectText + "<br>";
1401 document.getElementById("courses_subject_img_link").href = subjectLink;
1402 document.getElementById("courses_get_started_btn").href = subjectLink;
1403 }
1404 </script>
1405
1406
1407 <div id="stickypos" class="sidesection" style="text-align:center;position:sticky;top:50px;">
1408 <div id="stickyadcontainer">
1409 <div style="position:relative;margin:auto;">
1410
1411 <div id="adngin-sidebar_sticky-0"></div>
1412 <script>
1413 function secondSnigel() {
1414 if(window.adngin && window.adngin.adnginLoaderReady) {
1415 if (Number(w3_getStyleValue(document.getElementById("main"), "height").replace("px", "")) > 2200) {
1416 if (document.getElementById("adngin-mid_content-0")) {
1417 adngin.queue.push(function(){ adngin.cmd.startAuction(["sidebar_sticky", "mid_content" ]); });
1418 } else {
1419 adngin.queue.push(function(){ adngin.cmd.startAuction(["sidebar_sticky"]); });
1420 }
1421 } else {
1423 adngin.queue.push(function(){ adngin.cmd.startAuction(["mid_content"]); });
1424 }
1425 }
1426 } else {
1427 window.addEventListener('adnginLoaderReady', function() {
1428 if (Number(w3_getStyleValue(document.getElementById("main"), "height").replace("px", "")) > 2200) {
1430 adngin.queue.push(function(){ adngin.cmd.startAuction(["sidebar_sticky", "mid_content" ]); });
1431 } else {
1432 adngin.queue.push(function(){ adngin.cmd.startAuction(["sidebar_sticky"]); });
1433 }
1434 } else {
1436 adngin.queue.push(function(){ adngin.cmd.startAuction(["mid_content"]); });
1437 }
1438 }
1439 });
1440 }
1441 }
1442 </script>
1443
1444 </div>
1445 </div>
1446 </div>
1447
1448 <script>
1449 uic_r_c()
1450 </script>
1451
1452 </div>
1453 </div>
1454 <div id="footer" class="footer w3-container w3-white">
1455
1456 <hr>
1457
1458 <div style="overflow:auto">
1459 <div class="bottomad">
1460 
1461 
1462 <div id="adngin-bottom_left-0" style="padding:0 10px 10px 0;float:left;width:auto;"></div>
1463 
1464 
1465 
1466 <div id="adngin-bottom_right-0" style="padding:0 10px 10px 0;float:left;width:auto;"></div>
1467 </div>
1468 </div>
1469
1470 <hr>
1471 <div class="w3-row-padding w3-center w3-small" style="margin:auto">
1472 <div class="w3-col m12 w3-hide-medium w3-hide-small" style="width:20%">
1473 <a class="w3-btn ws-black w3-block w3-round" href="javascript:void(0);" onclick="displayError();return false" style="white-space:nowrap;text-decorati
1474 </div>
1475 <div class="w3-col m12 w3-hide-large">
1476 <a class="w3-btn ws-black w3-block w3-round" href="javascript:void(0);" onclick="displayError();return false" style="white-space:nowrap;text-decorati
1477 </div>
1478
1479
1481 <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
1482 </div>
1484 <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
1485 </div>
1486
1487
1489 <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
1490 </div>
1492 <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
1493 </div>
1494
1496 <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
1497 </div>
1499 <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
1500 </div>
1501
1502
1504 <a class="w3-btn ws-black w3-block w3-round" href="https://shop.w3schools.com/collections/certifications" target="_blank" style="text-decoration:none
1505 </div>
1506
1508 <a class="w3-btn ws-black w3-block w3-round" href="https://shop.w3schools.com/collections/certifications" target="_blank" style="text-decoration:none
1509 </div>
1510 </div>
1511
1512 <hr>
1513 <div class="ws-grey w3-padding w3-margin-bottom" id="err_form" style="display:none;position:relative">
1514 <span onclick="this.parentElement.style.display='none'" class="w3-button w3-display-topright w3-large">×</span>
1515
1516 <h2>Report Error</h2>
1517
1518 <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>
1519 <p>help@w3schools.com</p>
1520 <br>
1521
1522 
1543
1544 </div>
1545 <div class="w3-container ws-grey w3-padding" id="err_sent" style="display:none;position:relative">
1546 <span onclick="this.parentElement.style.display='none'" class="w3-button w3-display-topright">×</span>
1547 <h2>Thank You For Helping Us!</h2>
1548 <p>Your message has been sent to W3Schools.</p>
1549 </div>
1550
1551 <div class="w3-row w3-center w3-small">
1552 <div class="w3-col l3 m6 s12">
1553 <div class="top10">
1554 <h5 style="font-family: 'Source Sans Pro', sans-serif;">Top Tutorials</h5>
1555 <a href="/html/default.asp">HTML Tutorial</a><br>
1556 <a href="/css/default.asp">CSS Tutorial</a><br>
1557 <a href="/js/default.asp">JavaScript Tutorial</a><br>
1558 <a href="/howto/default.asp">How To Tutorial</a><br>
1559 <a href="/sql/default.asp">SQL Tutorial</a><br>
1560 <a href="/python/default.asp">Python Tutorial</a><br>
1561 <a href="/w3css/default.asp">W3.CSS Tutorial</a><br>
1562 <a href="/bootstrap/bootstrap_ver.asp">Bootstrap Tutorial</a><br>
1563 <a href="/php/default.asp">PHP Tutorial</a><br>
1564 <a href="/java/default.asp">Java Tutorial</a><br>
1565 <a href="/cpp/default.asp">C++ Tutorial</a><br>
1566 <a href="/jquery/default.asp">jQuery Tutorial</a><br>
1567 </div>
1568 </div>
1571 <h5 style="font-family: 'Source Sans Pro', sans-serif;">Top References</h5>
1572 <a href="/tags/default.asp">HTML Reference</a><br>
1573 <a href="/cssref/index.php">CSS Reference</a><br>
1574 <a href="/jsref/default.asp">JavaScript Reference</a><br>
1575 <a href="/sql/sql_ref_keywords.asp">SQL Reference</a><br>
1576 <a href="/python/python_reference.asp">Python Reference</a><br>
1577 <a href="/w3css/w3css_references.asp">W3.CSS Reference</a><br>
1578 <a href="/bootstrap/bootstrap_ref_all_classes.asp">Bootstrap Reference</a><br>
1579 <a href="/php/php_ref_overview.asp">PHP Reference</a><br>
1580 <a href="/colors/colors_names.asp">HTML Colors</a><br>
1581 <a href="/java/java_ref_keywords.asp">Java Reference</a><br>
1582 <a href="/angular/angular_ref_directives.asp">Angular Reference</a><br>
1583 <a href="/jquery/jquery_ref_overview.asp">jQuery Reference</a><br>
1584 </div>
1585 </div>
1588 <h5 style="font-family: 'Source Sans Pro', sans-serif;">Top Examples</h5>
1589 <a href="/html/html_examples.asp">HTML Examples</a><br>
1590 <a href="/css/css_examples.asp">CSS Examples</a><br>
1591 <a href="/js/js_examples.asp">JavaScript Examples</a><br>
1592 <a href="/howto/default.asp">How To Examples</a><br>
1593 <a href="/sql/sql_examples.asp">SQL Examples</a><br>
1594 <a href="/python/python_examples.asp">Python Examples</a><br>
1595 <a href="/w3css/w3css_examples.asp">W3.CSS Examples</a><br>
1596 <a href="/bootstrap/bootstrap_examples.asp">Bootstrap Examples</a><br>
1597 <a href="/php/php_examples.asp">PHP Examples</a><br>
1598 <a href="/java/java_examples.asp">Java Examples</a><br>
1599 <a href="/xml/xml_examples.asp">XML Examples</a><br>
1600 <a href="/jquery/jquery_examples.asp">jQuery Examples</a><br>
1601 </div>
1602 </div>
1605 
1619
1620 <a href="https://shop.w3schools.com/collections/course-catalog" target="_blank"><h5 style="font-family: 'Source Sans Pro', sans-serif;">Get Certified</h5
1621 <a href="https://campus.w3schools.com/collections/certifications/products/html-certificate" target="_blank">HTML Certificate</a><br>
1622 <a href="https://campus.w3schools.com/collections/certifications/products/css-certificate" target="_blank">CSS Certificate</a><br>
1623 <a href="https://campus.w3schools.com/collections/certifications/products/javascript-certificate" target="_blank">JavaScript Certificate</a><br>
1624 <a href="https://campus.w3schools.com/collections/certifications/products/front-end-certificate" target="_blank">Front End Certificate</a><br>
1625 <a href="https://campus.w3schools.com/collections/certifications/products/sql-certificate" target="_blank">SQL Certificate</a><br>
1626 <a href="https://campus.w3schools.com/collections/certifications/products/python-certificate" target="_blank">Python Certificate</a><br>
1627 <a href="https://campus.w3schools.com/collections/certifications/products/php-certificate" target="_blank">PHP Certificate</a><br>
1628 <a href="https://campus.w3schools.com/collections/certifications/products/jquery-certificate" target="_blank">jQuery Certificate</a><br>
1629 <a href="https://campus.w3schools.com/collections/certifications/products/java-certificate" target="_blank">Java Certificate</a><br>
1630 <a href="https://campus.w3schools.com/collections/certifications/products/c-certificate" target="_blank">C++ Certificate</a><br>
1631 <a href="https://campus.w3schools.com/collections/certifications/products/c-certificate-1" target="_blank">C# Certificate</a><br>
1632 <a href="https://campus.w3schools.com/collections/certifications/products/xml-certificate" target="_blank">XML Certificate</a><br>
1633 
1635
1636 </div>
1637 </div>
1638 </div>
1639
1640 <hr>
1641 <div class="w3-opacity" style="font-size:12px;text-align:right;margin-bottom:16px;margin-right:8px;">
1642 <a href="/forum/default.asp" target="_blank" class="xw3-text-grey xw3-hover-text-black" style="text-decoration:none" title="Forum">FORUM</a> |
1643 <a href="/about/default.asp" target="_top" class="xw3-text-grey xw3-hover-text-black" style="text-decoration:none" title="About W3Schools">ABOUT</a>
1644 </div>
1645 <div class="w3-center w3-small w3-opacity">
1646 W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
1647 Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.
1648 While using W3Schools, you agree to have read and accepted our <a href="/about/about_copyright.asp">terms of use</a>,
1649 <a href="/about/about_privacy.asp">cookie and privacy policy</a>.<br><br>
1650 <a href="/about/about_copyright.asp">Copyright 1999-2023</a> by Refsnes Data. All Rights Reserved.<br>
1651 <a href="//www.w3schools.com/w3css/default.asp">W3Schools is Powered by W3.CSS</a>.<br><br>
1652 </div>
1653 <div class="w3-center w3-small">
1654 <a href="//www.w3schools.com">
1655 <i class="fa fa-logo ws-text-green ws-hover-text-green" style="position:relative;font-size:42px!important;"></i>
1656 </div>
1657 <br><br>
1658 </div>
1659 </div>
1660 <script src="/lib/w3schools_footer.js?update=20220202"></script>
1661
1662 <script>
1663 MyLearning.loadUser('footer', function () {
1664 if (UserSession.loggedIn) {
1665 document.getElementById("signupbtn_topnav").style.display = "none";
1666 document.getElementById("spacesbtn_topnav").style.display = "block";
1667 } else {
1668 addMyLearnButt();
1669 }
1670 });
1671 function docReady(fn) {
1672 document.addEventListener("DOMContentLoaded", fn);
1673 if (document.readyState === "interactive" || document.readyState === "complete" ) {
1674 fn();
1675 }
1676 }
1677 uic_r_z();
1678 uic_r_d()
1679
1680 function addMyLearnButt() {
1681 let nav = document.getElementsByClassName("nextprev");
1682 if (document.body.contains(nav[1])) {
1683 if ((nav[1].firstElementChild.innerHTML.indexOf("Previous") || nav[1].firstElementChild.innerHTML.indexOf("Home") !== -1) && (nav[1].firstElementChil
1684 let myLearnButt = document.createElement("a");
1685 myLearnButt.innerHTML="Log in to track progress";
1686 myLearnButt.classList.add("w3-btn", "w3-hide-small", "myl-nav-butt");
1687 myLearnButt.href="https://www.w3schools.com/signup/?utm_source=classic&utm_medium=" + subjectFolder + "_tutorial&utm_campaign=button_lower_navigati
1688 myLearnButt.setAttribute("title", "Sign Up and improve Your Learning Experience");
1689 myLearnButt.setAttribute("target", "_blank");
1690 nav[1].classList.add("w3-center");
1691 nav[1].firstElementChild.insertAdjacentElement("afterend", myLearnButt);
1692 }
1693 }
1694 }
1695 </script>
1696
1697 
1701 <script>
1702 function myFunction() {
1703 let x;
1704 let text = "Input OK";
1705
1706 //Get the value of input field with id="numb"
1707 x = document.getElementById("numb").value;
1708
1709 // If x is Not a Number, or x is less than one, or x is grather than 10 then
1710 if (isNaN(x) || x < 1 || x > 10) {
1711 text = "Not valid";
1712 }
1713 document.getElementById("demo").innerHTML = text;
1714 }
1715 </script>
1716 </body>
1717 </html>

Js Intro

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Js Intro

Uploaded by

Copyright:

Available Formats

Unión de líneas

You might also like