"...components/notify/stylesheet/monitor-attribute-errors.mjs" did not exist on "7aa2e062013ab02889d18de8d22186444a39cb39"
Select Git revision
tutorial-getting-started.html 31.86 KiB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Adding meta -->
<meta name="author" content="schukai GmbH" />
<meta name="description" content="javascript library for optimal use on fast and flexible pages." />
<!-- Adding external script-->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous" ></script>
<!-- Adding external style-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha256-djO3wMl9GeaC/u6K+ic4Uj/LKhRUSlUFcsruzS7v5ms=" crossorigin="anonymous" />
<!-- Adding scripts-->
<!-- Adding style-->
<!-- Adding overlay script-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.13.0/js/OverlayScrollbars.min.js"
integrity="sha512-5R3ngaUdvyhXkQkIqTf/k+Noq3phjmrqlUQyQYbgfI34Mzcx7vLIIYTy/K1VMHkL33T709kfh5y6R9Xy/Cbt7Q=="
crossorigin="anonymous"></script>
<!-- Adding overlay style-->
<title>
Tutorial: Getting Started
</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/third-party/ionicons.min.css">
<link type="text/css" rel="stylesheet" href="styles/third-party/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/reset.css">
<link type="text/css" rel="stylesheet" href="styles/heading.css">
<link type="text/css" rel="stylesheet" href="styles/clean-jsdoc-theme-base.css">
<link type="text/css" rel="stylesheet" href="styles/clean-jsdoc-theme-light.css">
<svg aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="display:none">
<defs>
<symbol id="copy-icon" viewbox="0 0 488.3 488.3">
<g>
<path
d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124 C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124 c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z" />
<path
d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227 c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6 V38.6C439.65,17.3,422.35,0,401.05,0z" />
</g>
</symbol>
<symbol id='search-icon' viewBox="0 0 512 512">
<g>
<g>
<path
d="M225.474,0C101.151,0,0,101.151,0,225.474c0,124.33,101.151,225.474,225.474,225.474 c124.33,0,225.474-101.144,225.474-225.474C450.948,101.151,349.804,0,225.474,0z M225.474,409.323 c-101.373,0-183.848-82.475-183.848-183.848S124.101,41.626,225.474,41.626s183.848,82.475,183.848,183.848 S326.847,409.323,225.474,409.323z" />
</g>
</g>
<g>
<g>
<path
d="M505.902,476.472L386.574,357.144c-8.131-8.131-21.299-8.131-29.43,0c-8.131,8.124-8.131,21.306,0,29.43l119.328,119.328 c4.065,4.065,9.387,6.098,14.715,6.098c5.321,0,10.649-2.033,14.715-6.098C514.033,497.778,514.033,484.596,505.902,476.472z" />
</g>
</g>
</symbol>
<symbol id="down-icon" viewBox="0 0 16 16">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"
>
</path>
</symbol>
</defs>
</svg>
</head>
<body>
<nav class="navbar" id="navbar">
<div class="navbar-heading" id="navbar-heading"><a href="index.html"><h2 class="navbar-heading-text">Monster</h2></a></div><div class="sidebar-main-content" id="sidebar-main-content"><ul><li class="menu-li"><a href='https://www.schukai.com/' class=' menu-link' id='' target='_blank'>schukai GmbH</a></li><li class="menu-li"><a href='https://www.npmjs.com/package/@schukai/monster' class=' menu-link' id='' target='_blank'>NPM</a></li></ul><div class="accordion collapsed" id="2730811" > <h3 class="accordion-heading">Tutorials<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion-list" id=""><a href="tutorial-dom-based-templating-implementation.html">dom-based-templating-implementation</a></li><li class="accordion-list" id=""><a href="tutorial-tutorial.html">Monster - Build fantastic websites!</a></li></ul> </div><div class="accordion collapsed" id="5957665" > <h3 class="accordion-heading">Classes<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion collapsed child" id=522972><div class="accordion-heading child"><a href="Monster.DOM.Handle.html">Handle</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.DOM.Handle.html#append">append</a></li><li data-type='method'><a href="Monster.DOM.Handle.html#remove">remove</a></li><li data-type='method'><a href="Monster.DOM.Handle.html#update">update</a></li></ul></li><li class="accordion collapsed child" id=1595067><div class="accordion-heading child"><a href="Monster.Namespace.html">Namespace</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Namespace.html#getNamespace">getNamespace</a></li><li data-type='method'><a href="Monster.Namespace.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=2557677><div class="accordion-heading child"><a href="Monster_Constraints.AbstractConstraint.html">AbstractConstraint</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.AbstractConstraint.html#isValid">isValid</a></li></ul></li><li class="accordion-list" id=""><a href="Monster_Constraints.AbstractOperator.html">AbstractOperator</a></li><li class="accordion collapsed child" id=1343273><div class="accordion-heading child"><a href="Monster_Constraints.AndOperator.html">AndOperator</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.AndOperator.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=6227940><div class="accordion-heading child"><a href="Monster_Constraints.Invalid.html">Invalid</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.Invalid.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=4167049><div class="accordion-heading child"><a href="Monster_Constraints.IsArray.html">IsArray</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.IsArray.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=8579869><div class="accordion-heading child"><a href="Monster_Constraints.IsObject.html">IsObject</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.IsObject.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=9669899><div class="accordion-heading child"><a href="Monster_Constraints.OrOperator.html">OrOperator</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.OrOperator.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=7258984><div class="accordion-heading child"><a href="Monster_Constraints.Valid.html">Valid</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.Valid.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=2440951><div class="accordion-heading child"><a href="Monster_Data.Pathfinder.html">Pathfinder</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Data.Pathfinder.html#deleteVia">deleteVia</a></li><li data-type='method'><a href="Monster_Data.Pathfinder.html#exists">exists</a></li><li data-type='method'><a href="Monster_Data.Pathfinder.html#getVia">getVia</a></li><li data-type='method'><a href="Monster_Data.Pathfinder.html#setVia">setVia</a></li><li data-type='method'><a href="Monster_Data.Pathfinder.html#setWildCard">setWildCard</a></li></ul></li><li class="accordion collapsed child" id=1095298><div class="accordion-heading child"><a href="Monster_Data.Pipe.html">Pipe</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Data.Pipe.html#run">run</a></li><li data-type='method'><a href="Monster_Data.Pipe.html#setCallback">setCallback</a></li></ul></li><li class="accordion collapsed child" id=7795091><div class="accordion-heading child"><a href="Monster_Data.Transformer.html">Transformer</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Data.Transformer.html#run">run</a></li><li data-type='method'><a href="Monster_Data.Transformer.html#setCallback">setCallback</a></li></ul></li><li class="accordion collapsed child" id=771121><div class="accordion-heading child"><a href="Monster_DOM.Assembler.html">Assembler</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.Assembler.html#createDocumentFragment">createDocumentFragment</a></li><li data-type='method'><a href="Monster_DOM.Assembler.html#getAttributePrefix">getAttributePrefix</a></li><li data-type='method'><a href="Monster_DOM.Assembler.html#setAttributePrefix">setAttributePrefix</a></li></ul></li><li class="accordion collapsed child" id=2416549><div class="accordion-heading child"><a href="Monster_DOM.CustomElement.html">CustomElement</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.CustomElement.html#.getCSSStyleSheet">getCSSStyleSheet</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#.getTag">getTag</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#.getTemplate">getTemplate</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#adoptedCallback">adoptedCallback</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#assemble">assemble</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#attributeChangedCallback">attributeChangedCallback</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#connectedCallback">connectedCallback</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#disassemble">disassemble</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#disconnectedCallback">disconnectedCallback</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#getOption">getOption</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#init">init</a></li></ul></li><li class="accordion collapsed child" id=1016134><div class="accordion-heading child"><a href="Monster_DOM.Template.html">Template</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.Template.html#createDocumentFragment">createDocumentFragment</a></li><li data-type='method'><a href="Monster_DOM.Template.html#getTemplateElement">getTemplateElement</a></li></ul></li><li class="accordion collapsed child" id=4924755><div class="accordion-heading child"><a href="Monster_DOM.Theme.html">Theme</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.Theme.html#getName">getName</a></li></ul></li><li class="accordion collapsed child" id=4399271><div class="accordion-heading child"><a href="Monster_DOM.Updater.html">Updater</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.Updater.html#getSubject">getSubject</a></li><li data-type='method'><a href="Monster_DOM.Updater.html#run">run</a></li><li data-type='method'><a href="Monster_DOM.Updater.html#setCallback">setCallback</a></li></ul></li><li class="accordion collapsed child" id=8951576><div class="accordion-heading child"><a href="Monster_Logging.Handler.html">Handler</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Logging.Handler.html#getLogLevel">getLogLevel</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#log">log</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setAll">setAll</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setDebug">setDebug</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setError">setError</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setFatal">setFatal</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setInfo">setInfo</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setLogLevel">setLogLevel</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setOff">setOff</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setTrace">setTrace</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setWarn">setWarn</a></li></ul></li><li class="accordion collapsed child" id=2243671><div class="accordion-heading child"><a href="Monster_Logging.LogEntry.html">LogEntry</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Logging.LogEntry.html#getArguments">getArguments</a></li><li data-type='method'><a href="Monster_Logging.LogEntry.html#getLogLevel">getLogLevel</a></li></ul></li><li class="accordion collapsed child" id=8217872><div class="accordion-heading child"><a href="Monster_Logging.Logger.html">Logger</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Logging.Logger.html#addHandler">addHandler</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#getLabel">getLabel</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#getLevel">getLevel</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#logDebug">logDebug</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#logError">logError</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#logFatal">logFatal</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#logInfo">logInfo</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#logTrace">logTrace</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#logWarn">logWarn</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#removeHandler">removeHandler</a></li></ul></li><li class="accordion-list" id=""><a href="Monster_Logging_Handler.ConsoleHandler.html">ConsoleHandler</a></li><li class="accordion collapsed child" id=6740715><div class="accordion-heading child"><a href="Monster_Types.Base.html">Base</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.Base.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=2885552><div class="accordion-heading child"><a href="Monster_Types.ID.html">ID</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.ID.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=4556749><div class="accordion-heading child"><a href="Monster_Types.Observer.html">Observer</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.Observer.html#addTag">addTag</a></li><li data-type='method'><a href="Monster_Types.Observer.html#getTags">getTags</a></li><li data-type='method'><a href="Monster_Types.Observer.html#hasTag">hasTag</a></li><li data-type='method'><a href="Monster_Types.Observer.html#removeTag">removeTag</a></li><li data-type='method'><a href="Monster_Types.Observer.html#update">update</a></li></ul></li><li class="accordion collapsed child" id=9895047><div class="accordion-heading child"><a href="Monster_Types.ObserverList.html">ObserverList</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.ObserverList.html#attach">attach</a></li><li data-type='method'><a href="Monster_Types.ObserverList.html#contains">contains</a></li><li data-type='method'><a href="Monster_Types.ObserverList.html#detach">detach</a></li><li data-type='method'><a href="Monster_Types.ObserverList.html#notify">notify</a></li></ul></li><li class="accordion collapsed child" id=1344011><div class="accordion-heading child"><a href="Monster_Types.ProxyObserver.html">ProxyObserver</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.ProxyObserver.html#attachObserver">attachObserver</a></li><li data-type='method'><a href="Monster_Types.ProxyObserver.html#containsObserver">containsObserver</a></li><li data-type='method'><a href="Monster_Types.ProxyObserver.html#detachObserver">detachObserver</a></li><li data-type='method'><a href="Monster_Types.ProxyObserver.html#getRealSubject">getRealSubject</a></li><li data-type='method'><a href="Monster_Types.ProxyObserver.html#getSubject">getSubject</a></li><li data-type='method'><a href="Monster_Types.ProxyObserver.html#notifyObservers">notifyObservers</a></li></ul></li><li class="accordion collapsed child" id=4948584><div class="accordion-heading child"><a href="Monster_Types.Queue.html">Queue</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.Queue.html#add">add</a></li><li data-type='method'><a href="Monster_Types.Queue.html#clear">clear</a></li><li data-type='method'><a href="Monster_Types.Queue.html#isEmpty">isEmpty</a></li><li data-type='method'><a href="Monster_Types.Queue.html#peek">peek</a></li><li data-type='method'><a href="Monster_Types.Queue.html#poll">poll</a></li></ul></li><li class="accordion-list" id=""><a href="Monster_Types.RandomID.html">RandomID</a></li><li class="accordion collapsed child" id=2513960><div class="accordion-heading child"><a href="Monster_Types.Stack.html">Stack</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.Stack.html#clear">clear</a></li><li data-type='method'><a href="Monster_Types.Stack.html#isEmpty">isEmpty</a></li><li data-type='method'><a href="Monster_Types.Stack.html#peek">peek</a></li><li data-type='method'><a href="Monster_Types.Stack.html#pop">pop</a></li><li data-type='method'><a href="Monster_Types.Stack.html#push">push</a></li></ul></li><li class="accordion collapsed child" id=9813204><div class="accordion-heading child"><a href="Monster_Types.TokenList.html">TokenList</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.TokenList.html#add">add</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#clear">clear</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#contains">contains</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#entries">entries</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#forEach">forEach</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#getIterator">getIterator</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#remove">remove</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#replace">replace</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#Symbol.iterator">Symbol.iterator</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#toggle">toggle</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=1050679><div class="accordion-heading child"><a href="Monster_Types.UniqueQueue.html">UniqueQueue</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.UniqueQueue.html#add">add</a></li><li data-type='method'><a href="Monster_Types.UniqueQueue.html#clear">clear</a></li><li data-type='method'><a href="Monster_Types.UniqueQueue.html#poll">poll</a></li></ul></li><li class="accordion collapsed child" id=8245443><div class="accordion-heading child"><a href="Monster_Types.Version.html">Version</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.Version.html#compareTo">compareTo</a></li><li data-type='method'><a href="Monster_Types.Version.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=5186860><div class="accordion-heading child"><a href="Monster_Util.Comparator.html">Comparator</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Util.Comparator.html#equal">equal</a></li><li data-type='method'><a href="Monster_Util.Comparator.html#greaterThan">greaterThan</a></li><li data-type='method'><a href="Monster_Util.Comparator.html#greaterThanOrEqual">greaterThanOrEqual</a></li><li data-type='method'><a href="Monster_Util.Comparator.html#lessThan">lessThan</a></li><li data-type='method'><a href="Monster_Util.Comparator.html#lessThanOrEqual">lessThanOrEqual</a></li><li data-type='method'><a href="Monster_Util.Comparator.html#reverse">reverse</a></li></ul></li></ul> </div><div class="accordion collapsed" id="1694744" > <h3 class="accordion-heading">Namespaces<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion collapsed child" id=6232778><div class="accordion-heading child"><a href="global.html#Monster">Monster</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="global.html#Monster#.assignToNamespace">assignToNamespace</a></li><li data-type='method'><a href="global.html#Monster#.getVersion">getVersion</a></li></ul></li><li class="accordion-list" id=""><a href="Monster_Constraints.html">Monster/Constraints</a></li><li class="accordion collapsed child" id=5883787><div class="accordion-heading child"><a href="Monster_Data.html">Monster/Data</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Data.html#.Diff">Diff</a></li></ul></li><li class="accordion collapsed child" id=7450740><div class="accordion-heading child"><a href="Monster_DOM.html">Monster/DOM</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.html#.findDocumentTemplate">findDocumentTemplate</a></li><li data-type='method'><a href="Monster_DOM.html#.getDocument">getDocument</a></li><li data-type='method'><a href="Monster_DOM.html#.getDocumentFragmentFromString">getDocumentFragmentFromString</a></li><li data-type='method'><a href="Monster_DOM.html#.getHandleFromNode">getHandleFromNode</a></li><li data-type='method'><a href="Monster_DOM.html#.getWindow">getWindow</a></li><li data-type='method'><a href="Monster_DOM.html#.registerCustomElement">registerCustomElement</a></li></ul></li><li class="accordion-list" id=""><a href="Monster_Logging.html">Monster/Logging</a></li><li class="accordion-list" id=""><a href="Monster_Logging_Handler.html">Monster/Logging/Handler</a></li><li class="accordion collapsed child" id=591535><div class="accordion-heading child"><a href="Monster_Math.html">Monster/Math</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Math.html#.random">random</a></li></ul></li><li class="accordion collapsed child" id=3788288><div class="accordion-heading child"><a href="Monster_Types.html">Monster/Types</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.html#.getGlobal">getGlobal</a></li><li data-type='method'><a href="Monster_Types.html#.getGlobalFunction">getGlobalFunction</a></li><li data-type='method'><a href="Monster_Types.html#.getGlobalObject">getGlobalObject</a></li><li data-type='method'><a href="Monster_Types.html#.isArray">isArray</a></li><li data-type='method'><a href="Monster_Types.html#.isBoolean">isBoolean</a></li><li data-type='method'><a href="Monster_Types.html#.isFunction">isFunction</a></li><li data-type='method'><a href="Monster_Types.html#.isInstance">isInstance</a></li><li data-type='method'><a href="Monster_Types.html#.isInteger">isInteger</a></li><li data-type='method'><a href="Monster_Types.html#.isIterable">isIterable</a></li><li data-type='method'><a href="Monster_Types.html#.isObject">isObject</a></li><li data-type='method'><a href="Monster_Types.html#.isPrimitive">isPrimitive</a></li><li data-type='method'><a href="Monster_Types.html#.isString">isString</a></li><li data-type='method'><a href="Monster_Types.html#.typeOf">typeOf</a></li><li data-type='method'><a href="Monster_Types.html#.validateArray">validateArray</a></li><li data-type='method'><a href="Monster_Types.html#.validateBoolean">validateBoolean</a></li><li data-type='method'><a href="Monster_Types.html#.validateFunction">validateFunction</a></li><li data-type='method'><a href="Monster_Types.html#.validateInstance">validateInstance</a></li><li data-type='method'><a href="Monster_Types.html#.validateInteger">validateInteger</a></li><li data-type='method'><a href="Monster_Types.html#.validateIterable">validateIterable</a></li><li data-type='method'><a href="Monster_Types.html#.validateObject">validateObject</a></li><li data-type='method'><a href="Monster_Types.html#.validatePrimitive">validatePrimitive</a></li><li data-type='method'><a href="Monster_Types.html#.validateString">validateString</a></li></ul></li><li class="accordion collapsed child" id=9696033><div class="accordion-heading child"><a href="Monster_Util.html">Monster/Util</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Util.html#.clone">clone</a></li><li data-type='method'><a href="Monster_Util.html#.deepFreeze">deepFreeze</a></li></ul></li></ul> </div><div class="accordion collapsed" id="6647244" > <h3 class="accordion-heading">Global<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion-list" id=""><a href="global.html#buildMap">buildMap</a></li><li class="accordion-list" id=""><a href="global.html#getDocumentTheme">getDocumentTheme</a></li></ul> </div></div>
<div class="navbar-resize" id="navbar-resize">
<div class="resize-dots-container">
<div class="dots"></div>
<div class="dots"></div>
<div class="dots"></div>
</div>
</div>
</nav>
<div class="navbar-ham" id="navbar-ham">
<div>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
<div id="main" class="main-content">
<h1 id='page-title' class="page-title">
Tutorial: Getting Started
</h1>
<section>
<header>
<h2>Getting Started</h2>
</header>
<article>
<p>You'll need basic HTML, CSS, and JavaScript skills for Monster. If you're just
starting out with frontend development, you should have a good beginner's
guide open alongside this one.</p>
<p>You can also post your questions on <a href="https://stackoverflow.com/questions/ask?tags=javascript,monster">Stack Overflow</a>.</p>
<p>To get started with Monster, all you need is a text editor and a browser.
The best way is to copy the following example into a file and save it as
index.html.</p>
<pre class="prettyprint source"><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>awaken the monster in you!</title>
</head>
<body>
<div>your version is
<spay id="version"></spay>
</div>
<script type="module">
import {Version} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.8.0/dist/modules/types/version.js';
document.getElementById('version').innerText = new Version('1.0.0').toString();
</script>
</body>
</html>
</code></pre>
<p>Now open this file with your browser.</p>
<p>What did you do? you used the class 'Version' of monster and created a Version object. They then output this in a span.</p>
<p><strong>Voila!</strong></p>
<p>As seen above in the version example, each monster class or function can be used independently.
Alternatively, Monster can be used as a collection of many useful classes and functions via
the <code>Monster</code> namespace as a single javascript file.</p>
<pre class="prettyprint source"><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>awaken the monster in you!</title>
<script src="https://cdn.jsdelivr.net/npm/@schukai/monster@1.8.0/dist/monster.js"></script>
</head>
<body>
<div>your version is
<spay id="version"></spay>
</div>
<script>
document.getElementById('version').innerText = new Monster.Types.Version('1.0.0').toString();
</script>
</body>
</html>
</code></pre>
<p>Besides the CDN <a href="https://www.jsdelivr.com/package/npm/@schukai/monster">jsdelivr</a>,<br>
Monster can also be obtained via <a href="https://www.npmjs.com/package/@schukai/monster">NPM</a><br>
or the <a href="https://gitlab.schukai.com/oss/libraries/javascript/monster">git repos</a>.</p>
<p>Monster itself has no dependencies and does not dictate anything to you,<br>
you can use Monster with Bootstrap, jQuery or other cool frameworks.</p>
</article>
</section>
</div>
<footer class="footer" id="footer">
<a href='https://about.schukai.com/de/impressum/'>Imprint</a>
</footer>
<script src="scripts/third-party/prettify.js"></script>
<script src="scripts/third-party/lang-css.js"></script>
<script type="text/javascript" src="scripts/misc.js"></script>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
<script src="scripts/fix-code-block.js"></script>
<script src="scripts/fix-navbar.js"></script>
<script src="scripts/resize.js"></script>
<script type="text/javascript">
var option = {"min":"300","max":"600"}
setupResizeOptions(option)
</script>
<script type="text/javascript">
var option = JSON.parse('{"options":{}}')
console.log(option)
document.addEventListener("DOMContentLoaded", function () {
OverlayScrollbars(document.querySelectorAll('body'), option.option || {});
});
</script>
</body>
</html>