latest/javascript/general-usage/index.html

   1
   2 <!doctype html>
   3 <html lang="en" class="no-js">
   4   <head>
   5
   6       <meta charset="utf-8">
   7       <meta name="viewport" content="width=device-width,initial-scale=1">
   8
   9
  10
  11
  12       <link rel="icon" href="../../assets/default.favicon.ico">
  13       <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.1.0">
  14
  15
  16
  17         <title>General Usage - WoltLab Suite Documentation</title>
  18
  19
  20
  21       <link rel="stylesheet" href="../../assets/stylesheets/main.33e2939f.min.css">
  22
  23
  24         <link rel="stylesheet" href="../../assets/stylesheets/palette.ef6f36e2.min.css">
  25
  26
  27
  28           <meta name="theme-color" content="#009485">
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38       <link rel="stylesheet" href="../../stylesheets/extra.css">
  39
  40
  41
  42
  43
  44   </head>
  45
  46
  47
  48
  49
  50
  51
  52     <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  53
  54
  55     <script>function __prefix(e){return new URL("../..",location).pathname+"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}</script>
  56
  57     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  58     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  59     <label class="md-overlay" for="__drawer"></label>
  60     <div data-md-component="skip">
  61
  62
  63         <a href="#general-javascript-usage" class="md-skip">
  64           Skip to content
  65         </a>
  66
  67     </div>
  68     <div data-md-component="announce">
  69
  70         <aside class="md-announce">
  71           <div class="md-announce__inner md-grid md-typeset">
  72
  73     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  74
  75           </div>
  76         </aside>
  77
  78     </div>
  79
  80       <header class="md-header" data-md-component="header">
  81   <nav class="md-header__inner md-grid" aria-label="Header">
  82     <a href="../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
  83
  84   <img src="../../assets/logo.png" alt="logo">
  85
  86     </a>
  87     <label class="md-header__button md-icon" for="__drawer">
  88       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
  89     </label>
  90     <div class="md-header__title" data-md-component="header-title">
  91       <div class="md-header__ellipsis">
  92         <div class="md-header__topic">
  93           <span class="md-ellipsis">
  94             WoltLab Suite Documentation
  95           </span>
  96         </div>
  97         <div class="md-header__topic" data-md-component="header-topic">
  98           <span class="md-ellipsis">
  99
 100               General Usage
 101
 102           </span>
 103         </div>
 104       </div>
 105     </div>
 106
 107
 108
 109       <label class="md-header__button md-icon" for="__search">
 110         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
 111       </label>
 112
 113 <div class="md-search" data-md-component="search" role="dialog">
 114   <label class="md-search__overlay" for="__search"></label>
 115   <div class="md-search__inner" role="search">
 116     <form class="md-search__form" name="search">
 117       <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
 118       <label class="md-search__icon md-icon" for="__search">
 119         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
 120         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
 121       </label>
 122       <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
 123         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
 124       </button>
 125     </form>
 126     <div class="md-search__output">
 127       <div class="md-search__scrollwrap" data-md-scrollfix>
 128         <div class="md-search-result" data-md-component="search-result">
 129           <div class="md-search-result__meta">
 130             Initializing search
 131           </div>
 132           <ol class="md-search-result__list"></ol>
 133         </div>
 134       </div>
 135     </div>
 136   </div>
 137 </div>
 138
 139
 140       <div class="md-header__source">
 141
 142 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 143   <div class="md-source__icon md-icon">
 144
 145     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 146   </div>
 147   <div class="md-source__repository">
 148     GitHub
 149   </div>
 150 </a>
 151       </div>
 152
 153   </nav>
 154 </header>
 155
 156     <div class="md-container" data-md-component="container">
 157
 158
 159
 160
 161       <main class="md-main" data-md-component="main">
 162         <div class="md-main__inner md-grid">
 163
 164
 165
 166               <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
 167                 <div class="md-sidebar__scrollwrap">
 168                   <div class="md-sidebar__inner">
 169
 170
 171
 172 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 173   <label class="md-nav__title" for="__drawer">
 174     <a href="../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
 175
 176   <img src="../../assets/logo.png" alt="logo">
 177
 178     </a>
 179     WoltLab Suite Documentation
 180   </label>
 181
 182     <div class="md-nav__source">
 183
 184 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 185   <div class="md-source__icon md-icon">
 186
 187     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 188   </div>
 189   <div class="md-source__repository">
 190     GitHub
 191   </div>
 192 </a>
 193     </div>
 194
 195   <ul class="md-nav__list" data-md-scrollfix>
 196
 197
 198
 199
 200
 201
 202
 203
 204     <li class="md-nav__item">
 205       <a href="../../getting-started/" class="md-nav__link">
 206         Getting Started
 207       </a>
 208     </li>
 209
 210
 211
 212
 213
 214
 215
 216
 217
 218
 219
 220     <li class="md-nav__item md-nav__item--nested">
 221
 222
 223         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
 224
 225       <label class="md-nav__link" for="__nav_2">
 226         PHP API
 227         <span class="md-nav__icon md-icon"></span>
 228       </label>
 229       <nav class="md-nav" aria-label="PHP API" data-md-level="1">
 230         <label class="md-nav__title" for="__nav_2">
 231           <span class="md-nav__icon md-icon"></span>
 232           PHP API
 233         </label>
 234         <ul class="md-nav__list" data-md-scrollfix>
 235
 236
 237
 238
 239
 240     <li class="md-nav__item">
 241       <a href="../../php/pages/" class="md-nav__link">
 242         Pages
 243       </a>
 244     </li>
 245
 246
 247
 248
 249
 250
 251
 252     <li class="md-nav__item">
 253       <a href="../../php/database-objects/" class="md-nav__link">
 254         Database Objects
 255       </a>
 256     </li>
 257
 258
 259
 260
 261
 262
 263
 264     <li class="md-nav__item">
 265       <a href="../../php/database-access/" class="md-nav__link">
 266         Database Access
 267       </a>
 268     </li>
 269
 270
 271
 272
 273
 274
 275
 276     <li class="md-nav__item">
 277       <a href="../../php/exceptions/" class="md-nav__link">
 278         Exceptions
 279       </a>
 280     </li>
 281
 282
 283
 284
 285
 286
 287
 288
 289     <li class="md-nav__item md-nav__item--nested">
 290
 291
 292         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
 293
 294       <label class="md-nav__link" for="__nav_2_5">
 295         API
 296         <span class="md-nav__icon md-icon"></span>
 297       </label>
 298       <nav class="md-nav" aria-label="API" data-md-level="2">
 299         <label class="md-nav__title" for="__nav_2_5">
 300           <span class="md-nav__icon md-icon"></span>
 301           API
 302         </label>
 303         <ul class="md-nav__list" data-md-scrollfix>
 304
 305
 306
 307
 308
 309     <li class="md-nav__item">
 310       <a href="../../php/api/caches/" class="md-nav__link">
 311         Caches
 312       </a>
 313     </li>
 314
 315
 316
 317
 318
 319
 320
 321     <li class="md-nav__item">
 322       <a href="../../php/api/comments/" class="md-nav__link">
 323         Comments
 324       </a>
 325     </li>
 326
 327
 328
 329
 330
 331
 332
 333     <li class="md-nav__item">
 334       <a href="../../php/api/cronjobs/" class="md-nav__link">
 335         Cronjobs
 336       </a>
 337     </li>
 338
 339
 340
 341
 342
 343
 344
 345     <li class="md-nav__item">
 346       <a href="../../php/api/events/" class="md-nav__link">
 347         Events
 348       </a>
 349     </li>
 350
 351
 352
 353
 354
 355
 356
 357
 358     <li class="md-nav__item md-nav__item--nested">
 359
 360
 361         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
 362
 363       <label class="md-nav__link" for="__nav_2_5_5">
 364         Form Builder
 365         <span class="md-nav__icon md-icon"></span>
 366       </label>
 367       <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
 368         <label class="md-nav__title" for="__nav_2_5_5">
 369           <span class="md-nav__icon md-icon"></span>
 370           Form Builder
 371         </label>
 372         <ul class="md-nav__list" data-md-scrollfix>
 373
 374
 375
 376
 377
 378     <li class="md-nav__item">
 379       <a href="../../php/api/form_builder/overview/" class="md-nav__link">
 380         Overview
 381       </a>
 382     </li>
 383
 384
 385
 386
 387
 388
 389
 390     <li class="md-nav__item">
 391       <a href="../../php/api/form_builder/structure/" class="md-nav__link">
 392         Structure
 393       </a>
 394     </li>
 395
 396
 397
 398
 399
 400
 401
 402     <li class="md-nav__item">
 403       <a href="../../php/api/form_builder/form_fields/" class="md-nav__link">
 404         Fields
 405       </a>
 406     </li>
 407
 408
 409
 410
 411
 412
 413
 414     <li class="md-nav__item">
 415       <a href="../../php/api/form_builder/validation_data/" class="md-nav__link">
 416         Validation and Data
 417       </a>
 418     </li>
 419
 420
 421
 422
 423
 424
 425
 426     <li class="md-nav__item">
 427       <a href="../../php/api/form_builder/dependencies/" class="md-nav__link">
 428         Dependencies
 429       </a>
 430     </li>
 431
 432
 433
 434         </ul>
 435       </nav>
 436     </li>
 437
 438
 439
 440
 441
 442
 443
 444     <li class="md-nav__item">
 445       <a href="../../php/api/package_installation_plugins/" class="md-nav__link">
 446         Package Installation Plugins
 447       </a>
 448     </li>
 449
 450
 451
 452
 453
 454
 455
 456     <li class="md-nav__item">
 457       <a href="../../php/api/user_activity_points/" class="md-nav__link">
 458         User Activity Points
 459       </a>
 460     </li>
 461
 462
 463
 464
 465
 466
 467
 468     <li class="md-nav__item">
 469       <a href="../../php/api/user_notifications/" class="md-nav__link">
 470         User Notifications
 471       </a>
 472     </li>
 473
 474
 475
 476
 477
 478
 479
 480     <li class="md-nav__item">
 481       <a href="../../php/api/sitemaps/" class="md-nav__link">
 482         Sitemaps
 483       </a>
 484     </li>
 485
 486
 487
 488         </ul>
 489       </nav>
 490     </li>
 491
 492
 493
 494
 495
 496
 497
 498     <li class="md-nav__item">
 499       <a href="../../php/code-style/" class="md-nav__link">
 500         Code Style
 501       </a>
 502     </li>
 503
 504
 505
 506
 507
 508
 509
 510     <li class="md-nav__item">
 511       <a href="../../php/apps/" class="md-nav__link">
 512         Apps
 513       </a>
 514     </li>
 515
 516
 517
 518
 519
 520
 521
 522     <li class="md-nav__item">
 523       <a href="../../php/gdpr/" class="md-nav__link">
 524         GDPR
 525       </a>
 526     </li>
 527
 528
 529
 530         </ul>
 531       </nav>
 532     </li>
 533
 534
 535
 536
 537
 538
 539
 540
 541
 542
 543
 544     <li class="md-nav__item md-nav__item--nested">
 545
 546
 547         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
 548
 549       <label class="md-nav__link" for="__nav_3">
 550         Languages, Templates & CSS
 551         <span class="md-nav__icon md-icon"></span>
 552       </label>
 553       <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
 554         <label class="md-nav__title" for="__nav_3">
 555           <span class="md-nav__icon md-icon"></span>
 556           Languages, Templates & CSS
 557         </label>
 558         <ul class="md-nav__list" data-md-scrollfix>
 559
 560
 561
 562
 563
 564     <li class="md-nav__item">
 565       <a href="../../view/languages/" class="md-nav__link">
 566         Languages
 567       </a>
 568     </li>
 569
 570
 571
 572
 573
 574
 575
 576     <li class="md-nav__item">
 577       <a href="../../view/templates/" class="md-nav__link">
 578         Templates
 579       </a>
 580     </li>
 581
 582
 583
 584
 585
 586
 587
 588     <li class="md-nav__item">
 589       <a href="../../view/css/" class="md-nav__link">
 590         CSS
 591       </a>
 592     </li>
 593
 594
 595
 596         </ul>
 597       </nav>
 598     </li>
 599
 600
 601
 602
 603
 604
 605
 606
 607
 608
 609
 610
 611
 612     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 613
 614
 615         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" checked>
 616
 617       <label class="md-nav__link" for="__nav_4">
 618         TypeScript and JavaScript API
 619         <span class="md-nav__icon md-icon"></span>
 620       </label>
 621       <nav class="md-nav" aria-label="TypeScript and JavaScript API" data-md-level="1">
 622         <label class="md-nav__title" for="__nav_4">
 623           <span class="md-nav__icon md-icon"></span>
 624           TypeScript and JavaScript API
 625         </label>
 626         <ul class="md-nav__list" data-md-scrollfix>
 627
 628
 629
 630
 631
 632
 633
 634     <li class="md-nav__item md-nav__item--active">
 635
 636       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
 637
 638
 639
 640
 641         <label class="md-nav__link md-nav__link--active" for="__toc">
 642           General Usage
 643           <span class="md-nav__icon md-icon"></span>
 644         </label>
 645
 646       <a href="./" class="md-nav__link md-nav__link--active">
 647         General Usage
 648       </a>
 649
 650
 651 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
 652
 653
 654
 655
 656
 657     <label class="md-nav__title" for="__toc">
 658       <span class="md-nav__icon md-icon"></span>
 659       Table of contents
 660     </label>
 661     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
 662
 663         <li class="md-nav__item">
 664   <a href="#the-history-of-the-legacy-api" class="md-nav__link">
 665     The History of the Legacy API
 666   </a>
 667
 668 </li>
 669
 670         <li class="md-nav__item">
 671   <a href="#embedding-javascript-inside-templates" class="md-nav__link">
 672     Embedding JavaScript inside Templates
 673   </a>
 674
 675 </li>
 676
 677         <li class="md-nav__item">
 678   <a href="#including-external-javascript-files" class="md-nav__link">
 679     Including External JavaScript Files
 680   </a>
 681
 682     <nav class="md-nav" aria-label="Including External JavaScript Files">
 683       <ul class="md-nav__list">
 684
 685           <li class="md-nav__item">
 686   <a href="#debug-variants-and-cache-buster" class="md-nav__link">
 687     Debug-Variants and Cache-Buster
 688   </a>
 689
 690 </li>
 691
 692           <li class="md-nav__item">
 693   <a href="#the-accelerated-guest-view-tiny-builds" class="md-nav__link">
 694     The Accelerated Guest View ("Tiny Builds")
 695   </a>
 696
 697 </li>
 698
 699           <li class="md-nav__item">
 700   <a href="#the-js-template-plugin" class="md-nav__link">
 701     The {js} Template Plugin
 702   </a>
 703
 704 </li>
 705
 706       </ul>
 707     </nav>
 708
 709 </li>
 710
 711     </ul>
 712
 713 </nav>
 714
 715     </li>
 716
 717
 718
 719
 720
 721
 722
 723     <li class="md-nav__item">
 724       <a href="../typescript/" class="md-nav__link">
 725         TypeScript
 726       </a>
 727     </li>
 728
 729
 730
 731
 732
 733
 734
 735
 736     <li class="md-nav__item md-nav__item--nested">
 737
 738
 739         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_3" type="checkbox" id="__nav_4_3" >
 740
 741       <label class="md-nav__link" for="__nav_4_3">
 742         New API
 743         <span class="md-nav__icon md-icon"></span>
 744       </label>
 745       <nav class="md-nav" aria-label="New API" data-md-level="2">
 746         <label class="md-nav__title" for="__nav_4_3">
 747           <span class="md-nav__icon md-icon"></span>
 748           New API
 749         </label>
 750         <ul class="md-nav__list" data-md-scrollfix>
 751
 752
 753
 754
 755
 756     <li class="md-nav__item">
 757       <a href="../new-api_writing-a-module/" class="md-nav__link">
 758         Writing a module
 759       </a>
 760     </li>
 761
 762
 763
 764
 765
 766
 767
 768     <li class="md-nav__item">
 769       <a href="../new-api_data-structures/" class="md-nav__link">
 770         Data Structures
 771       </a>
 772     </li>
 773
 774
 775
 776
 777
 778
 779
 780     <li class="md-nav__item">
 781       <a href="../new-api_core/" class="md-nav__link">
 782         Core Functions
 783       </a>
 784     </li>
 785
 786
 787
 788
 789
 790
 791
 792     <li class="md-nav__item">
 793       <a href="../new-api_dom/" class="md-nav__link">
 794         DOM
 795       </a>
 796     </li>
 797
 798
 799
 800
 801
 802
 803
 804     <li class="md-nav__item">
 805       <a href="../new-api_events/" class="md-nav__link">
 806         Event Handling
 807       </a>
 808     </li>
 809
 810
 811
 812
 813
 814
 815
 816     <li class="md-nav__item">
 817       <a href="../new-api_ajax/" class="md-nav__link">
 818         Ajax
 819       </a>
 820     </li>
 821
 822
 823
 824
 825
 826
 827
 828     <li class="md-nav__item">
 829       <a href="../new-api_dialogs/" class="md-nav__link">
 830         Dialogs
 831       </a>
 832     </li>
 833
 834
 835
 836
 837
 838
 839
 840     <li class="md-nav__item">
 841       <a href="../new-api_browser/" class="md-nav__link">
 842         Browser and Screen Sizes
 843       </a>
 844     </li>
 845
 846
 847
 848
 849
 850
 851
 852     <li class="md-nav__item">
 853       <a href="../new-api_ui/" class="md-nav__link">
 854         User Interface
 855       </a>
 856     </li>
 857
 858
 859
 860         </ul>
 861       </nav>
 862     </li>
 863
 864
 865
 866
 867
 868
 869
 870     <li class="md-nav__item">
 871       <a href="../legacy-api/" class="md-nav__link">
 872         Legacy API
 873       </a>
 874     </li>
 875
 876
 877
 878
 879
 880
 881
 882     <li class="md-nav__item">
 883       <a href="../helper-functions/" class="md-nav__link">
 884         Helper Functions
 885       </a>
 886     </li>
 887
 888
 889
 890
 891
 892
 893
 894     <li class="md-nav__item">
 895       <a href="../code-snippets/" class="md-nav__link">
 896         Code Snippets
 897       </a>
 898     </li>
 899
 900
 901
 902         </ul>
 903       </nav>
 904     </li>
 905
 906
 907
 908
 909
 910
 911
 912
 913
 914
 915
 916     <li class="md-nav__item md-nav__item--nested">
 917
 918
 919         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
 920
 921       <label class="md-nav__link" for="__nav_5">
 922         Package Components
 923         <span class="md-nav__icon md-icon"></span>
 924       </label>
 925       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
 926         <label class="md-nav__title" for="__nav_5">
 927           <span class="md-nav__icon md-icon"></span>
 928           Package Components
 929         </label>
 930         <ul class="md-nav__list" data-md-scrollfix>
 931
 932
 933
 934
 935
 936     <li class="md-nav__item">
 937       <a href="../../package/package-xml/" class="md-nav__link">
 938         package.xml
 939       </a>
 940     </li>
 941
 942
 943
 944
 945
 946
 947
 948
 949     <li class="md-nav__item md-nav__item--nested">
 950
 951
 952         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
 953
 954       <label class="md-nav__link" for="__nav_5_2">
 955         PIPs
 956         <span class="md-nav__icon md-icon"></span>
 957       </label>
 958       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
 959         <label class="md-nav__title" for="__nav_5_2">
 960           <span class="md-nav__icon md-icon"></span>
 961           PIPs
 962         </label>
 963         <ul class="md-nav__list" data-md-scrollfix>
 964
 965
 966
 967
 968
 969     <li class="md-nav__item">
 970       <a href="../../package/pip/" class="md-nav__link">
 971         Overview
 972       </a>
 973     </li>
 974
 975
 976
 977
 978
 979
 980
 981     <li class="md-nav__item">
 982       <a href="../../package/pip/acl-option/" class="md-nav__link">
 983         aclOption
 984       </a>
 985     </li>
 986
 987
 988
 989
 990
 991
 992
 993     <li class="md-nav__item">
 994       <a href="../../package/pip/acp-menu/" class="md-nav__link">
 995         acpMenu
 996       </a>
 997     </li>
 998
 999
1000
1001
1002
1003
1004
1005     <li class="md-nav__item">
1006       <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
1007         acpSearchProvider
1008       </a>
1009     </li>
1010
1011
1012
1013
1014
1015
1016
1017     <li class="md-nav__item">
1018       <a href="../../package/pip/acp-template/" class="md-nav__link">
1019         acpTemplate
1020       </a>
1021     </li>
1022
1023
1024
1025
1026
1027
1028
1029     <li class="md-nav__item">
1030       <a href="../../package/pip/bbcode/" class="md-nav__link">
1031         bbcode
1032       </a>
1033     </li>
1034
1035
1036
1037
1038
1039
1040
1041     <li class="md-nav__item">
1042       <a href="../../package/pip/box/" class="md-nav__link">
1043         box
1044       </a>
1045     </li>
1046
1047
1048
1049
1050
1051
1052
1053     <li class="md-nav__item">
1054       <a href="../../package/pip/clipboard-action/" class="md-nav__link">
1055         clipboardAction
1056       </a>
1057     </li>
1058
1059
1060
1061
1062
1063
1064
1065     <li class="md-nav__item">
1066       <a href="../../package/pip/core-object/" class="md-nav__link">
1067         coreObject
1068       </a>
1069     </li>
1070
1071
1072
1073
1074
1075
1076
1077     <li class="md-nav__item">
1078       <a href="../../package/pip/cronjob/" class="md-nav__link">
1079         cronjob
1080       </a>
1081     </li>
1082
1083
1084
1085
1086
1087
1088
1089     <li class="md-nav__item">
1090       <a href="../../package/pip/event-listener/" class="md-nav__link">
1091         eventListener
1092       </a>
1093     </li>
1094
1095
1096
1097
1098
1099
1100
1101     <li class="md-nav__item">
1102       <a href="../../package/pip/file/" class="md-nav__link">
1103         file
1104       </a>
1105     </li>
1106
1107
1108
1109
1110
1111
1112
1113     <li class="md-nav__item">
1114       <a href="../../package/pip/language/" class="md-nav__link">
1115         language
1116       </a>
1117     </li>
1118
1119
1120
1121
1122
1123
1124
1125     <li class="md-nav__item">
1126       <a href="../../package/pip/media-provider/" class="md-nav__link">
1127         mediaProvider
1128       </a>
1129     </li>
1130
1131
1132
1133
1134
1135
1136
1137     <li class="md-nav__item">
1138       <a href="../../package/pip/menu/" class="md-nav__link">
1139         menu
1140       </a>
1141     </li>
1142
1143
1144
1145
1146
1147
1148
1149     <li class="md-nav__item">
1150       <a href="../../package/pip/menu-item/" class="md-nav__link">
1151         menuItem
1152       </a>
1153     </li>
1154
1155
1156
1157
1158
1159
1160
1161     <li class="md-nav__item">
1162       <a href="../../package/pip/object-type/" class="md-nav__link">
1163         objectType
1164       </a>
1165     </li>
1166
1167
1168
1169
1170
1171
1172
1173     <li class="md-nav__item">
1174       <a href="../../package/pip/object-type-definition/" class="md-nav__link">
1175         objectTypeDefinition
1176       </a>
1177     </li>
1178
1179
1180
1181
1182
1183
1184
1185     <li class="md-nav__item">
1186       <a href="../../package/pip/option/" class="md-nav__link">
1187         option
1188       </a>
1189     </li>
1190
1191
1192
1193
1194
1195
1196
1197     <li class="md-nav__item">
1198       <a href="../../package/pip/page/" class="md-nav__link">
1199         page
1200       </a>
1201     </li>
1202
1203
1204
1205
1206
1207
1208
1209     <li class="md-nav__item">
1210       <a href="../../package/pip/pip/" class="md-nav__link">
1211         pip
1212       </a>
1213     </li>
1214
1215
1216
1217
1218
1219
1220
1221     <li class="md-nav__item">
1222       <a href="../../package/pip/script/" class="md-nav__link">
1223         script
1224       </a>
1225     </li>
1226
1227
1228
1229
1230
1231
1232
1233     <li class="md-nav__item">
1234       <a href="../../package/pip/smiley/" class="md-nav__link">
1235         smiley
1236       </a>
1237     </li>
1238
1239
1240
1241
1242
1243
1244
1245     <li class="md-nav__item">
1246       <a href="../../package/pip/sql/" class="md-nav__link">
1247         sql
1248       </a>
1249     </li>
1250
1251
1252
1253
1254
1255
1256
1257     <li class="md-nav__item">
1258       <a href="../../package/pip/style/" class="md-nav__link">
1259         style
1260       </a>
1261     </li>
1262
1263
1264
1265
1266
1267
1268
1269     <li class="md-nav__item">
1270       <a href="../../package/pip/template/" class="md-nav__link">
1271         template
1272       </a>
1273     </li>
1274
1275
1276
1277
1278
1279
1280
1281     <li class="md-nav__item">
1282       <a href="../../package/pip/template-listener/" class="md-nav__link">
1283         templateListener
1284       </a>
1285     </li>
1286
1287
1288
1289
1290
1291
1292
1293     <li class="md-nav__item">
1294       <a href="../../package/pip/user-group-option/" class="md-nav__link">
1295         userGroupOption
1296       </a>
1297     </li>
1298
1299
1300
1301
1302
1303
1304
1305     <li class="md-nav__item">
1306       <a href="../../package/pip/user-menu/" class="md-nav__link">
1307         userMenu
1308       </a>
1309     </li>
1310
1311
1312
1313
1314
1315
1316
1317     <li class="md-nav__item">
1318       <a href="../../package/pip/user-notification-event/" class="md-nav__link">
1319         userNotificationEvent
1320       </a>
1321     </li>
1322
1323
1324
1325
1326
1327
1328
1329     <li class="md-nav__item">
1330       <a href="../../package/pip/user-option/" class="md-nav__link">
1331         userOption
1332       </a>
1333     </li>
1334
1335
1336
1337
1338
1339
1340
1341     <li class="md-nav__item">
1342       <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
1343         userProfileMenu
1344       </a>
1345     </li>
1346
1347
1348
1349         </ul>
1350       </nav>
1351     </li>
1352
1353
1354
1355
1356
1357
1358
1359     <li class="md-nav__item">
1360       <a href="../../package/database-php-api/" class="md-nav__link">
1361         Database PHP API
1362       </a>
1363     </li>
1364
1365
1366
1367         </ul>
1368       </nav>
1369     </li>
1370
1371
1372
1373
1374
1375
1376
1377
1378
1379
1380
1381     <li class="md-nav__item md-nav__item--nested">
1382
1383
1384         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1385
1386       <label class="md-nav__link" for="__nav_6">
1387         Migration
1388         <span class="md-nav__icon md-icon"></span>
1389       </label>
1390       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1391         <label class="md-nav__title" for="__nav_6">
1392           <span class="md-nav__icon md-icon"></span>
1393           Migration
1394         </label>
1395         <ul class="md-nav__list" data-md-scrollfix>
1396
1397
1398
1399
1400
1401
1402     <li class="md-nav__item md-nav__item--nested">
1403
1404
1405         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1406
1407       <label class="md-nav__link" for="__nav_6_1">
1408         Migrating from WSC 5.3
1409         <span class="md-nav__icon md-icon"></span>
1410       </label>
1411       <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
1412         <label class="md-nav__title" for="__nav_6_1">
1413           <span class="md-nav__icon md-icon"></span>
1414           Migrating from WSC 5.3
1415         </label>
1416         <ul class="md-nav__list" data-md-scrollfix>
1417
1418
1419
1420
1421
1422     <li class="md-nav__item">
1423       <a href="../../migration/wsc53/php/" class="md-nav__link">
1424         PHP API
1425       </a>
1426     </li>
1427
1428
1429
1430
1431
1432
1433
1434     <li class="md-nav__item">
1435       <a href="../../migration/wsc53/session/" class="md-nav__link">
1436         Session Handling and Authentication
1437       </a>
1438     </li>
1439
1440
1441
1442
1443
1444
1445
1446     <li class="md-nav__item">
1447       <a href="../../migration/wsc53/javascript/" class="md-nav__link">
1448         TypeScript and JavaScript
1449       </a>
1450     </li>
1451
1452
1453
1454
1455
1456
1457
1458     <li class="md-nav__item">
1459       <a href="../../migration/wsc53/templates/" class="md-nav__link">
1460         Templates
1461       </a>
1462     </li>
1463
1464
1465
1466
1467
1468
1469
1470     <li class="md-nav__item">
1471       <a href="../../migration/wsc53/libraries/" class="md-nav__link">
1472         Third Party Libraries
1473       </a>
1474     </li>
1475
1476
1477
1478         </ul>
1479       </nav>
1480     </li>
1481
1482
1483
1484
1485
1486
1487
1488
1489     <li class="md-nav__item md-nav__item--nested">
1490
1491
1492         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1493
1494       <label class="md-nav__link" for="__nav_6_2">
1495         Migrating from WSC 5.2
1496         <span class="md-nav__icon md-icon"></span>
1497       </label>
1498       <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
1499         <label class="md-nav__title" for="__nav_6_2">
1500           <span class="md-nav__icon md-icon"></span>
1501           Migrating from WSC 5.2
1502         </label>
1503         <ul class="md-nav__list" data-md-scrollfix>
1504
1505
1506
1507
1508
1509     <li class="md-nav__item">
1510       <a href="../../migration/wsc52/php/" class="md-nav__link">
1511         PHP API
1512       </a>
1513     </li>
1514
1515
1516
1517
1518
1519
1520
1521     <li class="md-nav__item">
1522       <a href="../../migration/wsc52/templates/" class="md-nav__link">
1523         Templates and Languages
1524       </a>
1525     </li>
1526
1527
1528
1529
1530
1531
1532
1533     <li class="md-nav__item">
1534       <a href="../../migration/wsc52/libraries/" class="md-nav__link">
1535         Third Party Libraries
1536       </a>
1537     </li>
1538
1539
1540
1541         </ul>
1542       </nav>
1543     </li>
1544
1545
1546
1547
1548
1549
1550
1551
1552     <li class="md-nav__item md-nav__item--nested">
1553
1554
1555         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1556
1557       <label class="md-nav__link" for="__nav_6_3">
1558         Migrating from WSC 3.1
1559         <span class="md-nav__icon md-icon"></span>
1560       </label>
1561       <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
1562         <label class="md-nav__title" for="__nav_6_3">
1563           <span class="md-nav__icon md-icon"></span>
1564           Migrating from WSC 3.1
1565         </label>
1566         <ul class="md-nav__list" data-md-scrollfix>
1567
1568
1569
1570
1571
1572     <li class="md-nav__item">
1573       <a href="../../migration/wsc31/php/" class="md-nav__link">
1574         PHP API
1575       </a>
1576     </li>
1577
1578
1579
1580         </ul>
1581       </nav>
1582     </li>
1583
1584
1585
1586
1587
1588
1589
1590
1591     <li class="md-nav__item md-nav__item--nested">
1592
1593
1594         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1595
1596       <label class="md-nav__link" for="__nav_6_4">
1597         Migrating from WSC 3.0
1598         <span class="md-nav__icon md-icon"></span>
1599       </label>
1600       <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1601         <label class="md-nav__title" for="__nav_6_4">
1602           <span class="md-nav__icon md-icon"></span>
1603           Migrating from WSC 3.0
1604         </label>
1605         <ul class="md-nav__list" data-md-scrollfix>
1606
1607
1608
1609
1610
1611     <li class="md-nav__item">
1612       <a href="../../migration/wsc30/php/" class="md-nav__link">
1613         PHP API
1614       </a>
1615     </li>
1616
1617
1618
1619
1620
1621
1622
1623     <li class="md-nav__item">
1624       <a href="../../migration/wsc30/javascript/" class="md-nav__link">
1625         JavaScript API
1626       </a>
1627     </li>
1628
1629
1630
1631
1632
1633
1634
1635     <li class="md-nav__item">
1636       <a href="../../migration/wsc30/templates/" class="md-nav__link">
1637         Templates
1638       </a>
1639     </li>
1640
1641
1642
1643
1644
1645
1646
1647     <li class="md-nav__item">
1648       <a href="../../migration/wsc30/css/" class="md-nav__link">
1649         CSS
1650       </a>
1651     </li>
1652
1653
1654
1655
1656
1657
1658
1659     <li class="md-nav__item">
1660       <a href="../../migration/wsc30/package/" class="md-nav__link">
1661         Package Components
1662       </a>
1663     </li>
1664
1665
1666
1667         </ul>
1668       </nav>
1669     </li>
1670
1671
1672
1673
1674
1675
1676
1677
1678     <li class="md-nav__item md-nav__item--nested">
1679
1680
1681         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
1682
1683       <label class="md-nav__link" for="__nav_6_5">
1684         Migrating from WCF 2.1
1685         <span class="md-nav__icon md-icon"></span>
1686       </label>
1687       <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1688         <label class="md-nav__title" for="__nav_6_5">
1689           <span class="md-nav__icon md-icon"></span>
1690           Migrating from WCF 2.1
1691         </label>
1692         <ul class="md-nav__list" data-md-scrollfix>
1693
1694
1695
1696
1697
1698     <li class="md-nav__item">
1699       <a href="../../migration/wcf21/php/" class="md-nav__link">
1700         PHP API
1701       </a>
1702     </li>
1703
1704
1705
1706
1707
1708
1709
1710     <li class="md-nav__item">
1711       <a href="../../migration/wcf21/templates/" class="md-nav__link">
1712         Templates
1713       </a>
1714     </li>
1715
1716
1717
1718
1719
1720
1721
1722     <li class="md-nav__item">
1723       <a href="../../migration/wcf21/css/" class="md-nav__link">
1724         CSS
1725       </a>
1726     </li>
1727
1728
1729
1730
1731
1732
1733
1734     <li class="md-nav__item">
1735       <a href="../../migration/wcf21/package/" class="md-nav__link">
1736         Package Components
1737       </a>
1738     </li>
1739
1740
1741
1742         </ul>
1743       </nav>
1744     </li>
1745
1746
1747
1748         </ul>
1749       </nav>
1750     </li>
1751
1752
1753
1754
1755
1756
1757
1758
1759
1760
1761
1762     <li class="md-nav__item md-nav__item--nested">
1763
1764
1765         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
1766
1767       <label class="md-nav__link" for="__nav_7">
1768         Tutorials
1769         <span class="md-nav__icon md-icon"></span>
1770       </label>
1771       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
1772         <label class="md-nav__title" for="__nav_7">
1773           <span class="md-nav__icon md-icon"></span>
1774           Tutorials
1775         </label>
1776         <ul class="md-nav__list" data-md-scrollfix>
1777
1778
1779
1780
1781
1782
1783     <li class="md-nav__item md-nav__item--nested">
1784
1785
1786         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
1787
1788       <label class="md-nav__link" for="__nav_7_1">
1789         Tutorial Series
1790         <span class="md-nav__icon md-icon"></span>
1791       </label>
1792       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
1793         <label class="md-nav__title" for="__nav_7_1">
1794           <span class="md-nav__icon md-icon"></span>
1795           Tutorial Series
1796         </label>
1797         <ul class="md-nav__list" data-md-scrollfix>
1798
1799
1800
1801
1802
1803     <li class="md-nav__item">
1804       <a href="../../tutorial/series/overview/" class="md-nav__link">
1805         Overview
1806       </a>
1807     </li>
1808
1809
1810
1811
1812
1813
1814
1815     <li class="md-nav__item">
1816       <a href="../../tutorial/series/part_1/" class="md-nav__link">
1817         Part 1
1818       </a>
1819     </li>
1820
1821
1822
1823
1824
1825
1826
1827     <li class="md-nav__item">
1828       <a href="../../tutorial/series/part_2/" class="md-nav__link">
1829         Part 2
1830       </a>
1831     </li>
1832
1833
1834
1835
1836
1837
1838
1839     <li class="md-nav__item">
1840       <a href="../../tutorial/series/part_3/" class="md-nav__link">
1841         Part 3
1842       </a>
1843     </li>
1844
1845
1846
1847         </ul>
1848       </nav>
1849     </li>
1850
1851
1852
1853         </ul>
1854       </nav>
1855     </li>
1856
1857
1858
1859   </ul>
1860 </nav>
1861                   </div>
1862                 </div>
1863               </div>
1864
1865
1866
1867               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
1868                 <div class="md-sidebar__scrollwrap">
1869                   <div class="md-sidebar__inner">
1870
1871 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
1872
1873
1874
1875
1876
1877     <label class="md-nav__title" for="__toc">
1878       <span class="md-nav__icon md-icon"></span>
1879       Table of contents
1880     </label>
1881     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
1882
1883         <li class="md-nav__item">
1884   <a href="#the-history-of-the-legacy-api" class="md-nav__link">
1885     The History of the Legacy API
1886   </a>
1887
1888 </li>
1889
1890         <li class="md-nav__item">
1891   <a href="#embedding-javascript-inside-templates" class="md-nav__link">
1892     Embedding JavaScript inside Templates
1893   </a>
1894
1895 </li>
1896
1897         <li class="md-nav__item">
1898   <a href="#including-external-javascript-files" class="md-nav__link">
1899     Including External JavaScript Files
1900   </a>
1901
1902     <nav class="md-nav" aria-label="Including External JavaScript Files">
1903       <ul class="md-nav__list">
1904
1905           <li class="md-nav__item">
1906   <a href="#debug-variants-and-cache-buster" class="md-nav__link">
1907     Debug-Variants and Cache-Buster
1908   </a>
1909
1910 </li>
1911
1912           <li class="md-nav__item">
1913   <a href="#the-accelerated-guest-view-tiny-builds" class="md-nav__link">
1914     The Accelerated Guest View ("Tiny Builds")
1915   </a>
1916
1917 </li>
1918
1919           <li class="md-nav__item">
1920   <a href="#the-js-template-plugin" class="md-nav__link">
1921     The {js} Template Plugin
1922   </a>
1923
1924 </li>
1925
1926       </ul>
1927     </nav>
1928
1929 </li>
1930
1931     </ul>
1932
1933 </nav>
1934                   </div>
1935                 </div>
1936               </div>
1937
1938
1939           <div class="md-content" data-md-component="content">
1940             <article class="md-content__inner md-typeset">
1941
1942
1943                   <a href="https://github.com/WoltLab/docs.woltlab.com/edit/5.4/docs/javascript/general-usage.md" title="Edit this page" class="md-content__button md-icon">
1944                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
1945                   </a>
1946
1947
1948                 <h1 id="general-javascript-usage">General JavaScript Usage<a class="headerlink" href="#general-javascript-usage" title="Permanent link">#</a></h1>
1949 <div class="admonition info">
1950 <p class="admonition-title">WoltLab Suite 5.4 introduced support for TypeScript, migrating all existing modules to TypeScript. The JavaScript section of the documentation is not yet updated to account for the changes, possibly explaining concepts that cannot be applied as-is when writing TypeScript. You can learn about basic TypeScript use in WoltLab Suite, such as consuming WoltLab Suite’s types in own packages, within in <a href="../typescript/">the TypeScript section</a>.</p>
1951 </div>
1952 <h2 id="the-history-of-the-legacy-api">The History of the Legacy API<a class="headerlink" href="#the-history-of-the-legacy-api" title="Permanent link">#</a></h2>
1953 <p>The WoltLab Suite 3.0 <a href="../new-api_writing-a-module/">introduced a new API</a> based on AMD-Modules
1954 with ES5-JavaScript that was designed with high performance and visible dependencies
1955 in mind. This was a fundamental change in comparison to <a href="../legacy-api/">the legacy API</a>
1956 that was build many years before while jQuery was still a thing and we had to deal
1957 with ancient browsers such as Internet Explorer 9 that felt short in both CSS and
1958 JavaScript capabilities.</p>
1959 <p>Fast forward a few years, the old API is still around and most important, it is
1960 actively being used by some components that have not been rewritten yet. This
1961 has been done to preserve the backwards-compatibility and to avoid the
1962 significant amount of work that it requires to rewrite a component. The components
1963 invoked on page initialization have all been rewritten to use the modern API, but
1964 some deferred objects that are invoked later during the page runtime may still
1965 use the old API.</p>
1966 <p>However, the legacy API is deprecated and you should not rely on it for new
1967 components at all. It slowly but steadily gets replaced up until a point where its
1968 last bits are finally removed from the code base.</p>
1969 <h2 id="embedding-javascript-inside-templates">Embedding JavaScript inside Templates<a class="headerlink" href="#embedding-javascript-inside-templates" title="Permanent link">#</a></h2>
1970 <p>The <code>&lt;script&gt;</code>-tags are extracted and moved during template processing, eventually
1971 placing them at the very end of the body element while preserving their order of
1972 appearance.</p>
1973 <p>This behavior is controlled through the <code>data-relocate="true"</code> attribute on the <code>&lt;script&gt;</code>
1974 which is mandatory for almost all scripts, mostly because their dependencies (such
1975 as jQuery) are moved to the bottom anyway.</p>
1976 <div class="highlight"><pre><span></span><code><span class="p">&lt;</span><span class="nt">script</span> <span class="na">data-relocate</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>
1977   <span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
1978     <span class="c1">// Code that uses jQuery (Legacy API)</span>
1979   <span class="p">});</span>
1980 <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
1981
1982 <span class="c">&lt;!-- or --&gt;</span>
1983
1984 <span class="p">&lt;</span><span class="nt">script</span> <span class="na">data-relocate</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>
1985   <span class="nx">require</span><span class="p">([</span><span class="s2">&quot;Some&quot;</span><span class="p">,</span> <span class="s2">&quot;Dependencies&quot;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">Some</span><span class="p">,</span> <span class="nx">Dependencies</span><span class="p">)</span> <span class="p">{</span>
1986     <span class="c1">// Modern API</span>
1987   <span class="p">});</span>
1988 <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
1989 </code></pre></div>
1990 <h2 id="including-external-javascript-files">Including External JavaScript Files<a class="headerlink" href="#including-external-javascript-files" title="Permanent link">#</a></h2>
1991 <p>The AMD-Modules used in the new API are automatically recognized and lazy-loaded
1992 on demand, so unless you have a rather large and pre-compiled code-base, there
1993 is nothing else to worry about.</p>
1994 <h3 id="debug-variants-and-cache-buster">Debug-Variants and Cache-Buster<a class="headerlink" href="#debug-variants-and-cache-buster" title="Permanent link">#</a></h3>
1995 <p>Your JavaScript files may change over time and you would want the users' browsers
1996 to always load and use the latest version of your files. This can be achieved by
1997 appending the special <code>LAST_UPDATE_TIME</code> constant to your file path. It contains
1998 the unix timestamp of the last time any package was installed, updated or removed
1999 and thus avoid outdated caches by relying on a unique value, without invalidating
2000 the cache more often that it needs to be.</p>
2001 <div class="highlight"><pre><span></span><code><span class="p">&lt;</span><span class="nt">script</span> <span class="na">data-relocate</span><span class="o">=</span><span class="s">&quot;true&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;{@$__wcf-&gt;getPath(&#39;app&#39;)}js/App.js?t={@LAST_UPDATE_TIME}&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
2002 </code></pre></div>
2003 <p>For small scripts you can simply serve the full, non-minified version to the user
2004 at all times, the differences in size and execution speed are insignificant and
2005 are very unlikely to offer any benefits. They might even yield a worse performance,
2006 because you'll have to include them statically in the template, even if the code
2007 is never called.</p>
2008 <p>However, if you're including a minified build in your app or plugin, you should
2009 include a switch to load the uncompressed version in the debug mode, while serving
2010 the minified and optimized file to the average visitor. You should use the
2011 <code>ENABLE_DEBUG_MODE</code> constant to decide which version should be loaded.</p>
2012 <div class="highlight"><pre><span></span><code><span class="p">&lt;</span><span class="nt">script</span> <span class="na">data-relocate</span><span class="o">=</span><span class="s">&quot;true&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;{@$__wcf-&gt;getPath(&#39;app&#39;)}js/App{if !ENABLE_DEBUG_MODE}.min{/if}.js?t={@LAST_UPDATE_TIME}&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
2013 </code></pre></div>
2014 <h3 id="the-accelerated-guest-view-tiny-builds">The Accelerated Guest View ("Tiny Builds")<a class="headerlink" href="#the-accelerated-guest-view-tiny-builds" title="Permanent link">#</a></h3>
2015 <div class="admonition info">
2016 <p class="admonition-title">You can learn more on the <a href="../../migration/wsc30/javascript/">Accelerated Guest View</a> in the migration docs.</p>
2017 </div>
2018 <p>The "Accelerated Guest View" was introduced in WoltLab Suite 3.1 and aims to
2019 decrease page size and to improve responsiveness by enabling a read-only mode
2020 for visitors. If you are providing a separate compiled build for this mode, you'll
2021 need to include yet another switch to serve the right version to the visitor.</p>
2022 <div class="highlight"><pre><span></span><code><span class="p">&lt;</span><span class="nt">script</span> <span class="na">data-relocate</span><span class="o">=</span><span class="s">&quot;true&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;{@$__wcf-&gt;getPath(&#39;app&#39;)}js/App{if !ENABLE_DEBUG_MODE}{if VISITOR_USE_TINY_BUILD}.tiny{/if}.min{/if}.js?t={@LAST_UPDATE_TIME}&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
2023 </code></pre></div>
2024 <h3 id="the-js-template-plugin">The <code>{js}</code> Template Plugin<a class="headerlink" href="#the-js-template-plugin" title="Permanent link">#</a></h3>
2025 <p>The <code>{js}</code> template plugin exists solely to provide a much easier and less error-prone
2026 method to include external JavaScript files.</p>
2027 <div class="highlight"><pre><span></span><code>{js application=&#39;app&#39; file=&#39;App&#39; hasTiny=true}
2028 </code></pre></div>
2029 <p>The <code>hasTiny</code> attribute is optional, you can set it to <code>false</code> or just omit it
2030 entirely if you do not provide a tiny build for your file.</p>
2031
2032
2033
2034
2035 <hr>
2036 <div class="md-source-date">
2037   <small>
2038
2039       Last update: 2021-04-13
2040
2041   </small>
2042 </div>
2043
2044
2045
2046
2047
2048
2049
2050
2051             </article>
2052           </div>
2053         </div>
2054
2055       </main>
2056
2057
2058 <footer class="md-footer">
2059
2060     <nav class="md-footer__inner md-grid" aria-label="Footer">
2061
2062         <a href="../../view/css/" class="md-footer__link md-footer__link--prev" rel="prev">
2063           <div class="md-footer__button md-icon">
2064             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
2065           </div>
2066           <div class="md-footer__title">
2067             <div class="md-ellipsis">
2068               <span class="md-footer__direction">
2069                 Previous
2070               </span>
2071               CSS
2072             </div>
2073           </div>
2074         </a>
2075
2076
2077         <a href="../typescript/" class="md-footer__link md-footer__link--next" rel="next">
2078           <div class="md-footer__title">
2079             <div class="md-ellipsis">
2080               <span class="md-footer__direction">
2081                 Next
2082               </span>
2083               TypeScript
2084             </div>
2085           </div>
2086           <div class="md-footer__button md-icon">
2087             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
2088           </div>
2089         </a>
2090
2091     </nav>
2092
2093   <div class="md-footer-meta md-typeset">
2094     <div class="md-footer-meta__inner md-grid">
2095       <div class="md-footer-copyright">
2096
2097           <div class="md-footer-copyright__highlight">
2098             Copyright © 2020 WoltLab GmbH
2099           </div>
2100
2101         Made with
2102         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2103           Material for MkDocs
2104         </a>
2105
2106       </div>
2107       <div class="md-footer-copyright">
2108         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2109         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2110 </div>
2111     </div>
2112   </div>
2113 </footer>
2114
2115     </div>
2116     <div class="md-dialog" data-md-component="dialog">
2117       <div class="md-dialog__inner md-typeset"></div>
2118     </div>
2119     <script id="__config" type="application/json">{"base": "../..", "features": [], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing"}, "search": "../../assets/javascripts/workers/search.fe42c31b.min.js", "version": {"provider": "mike"}}</script>
2120
2121
2122       <script src="../../assets/javascripts/bundle.d892486b.min.js"></script>
2123
2124
2125   </body>
2126 </html>