diff options
Diffstat (limited to 'getting-started')
| -rw-r--r-- | getting-started/index.html | 486 |
1 files changed, 486 insertions, 0 deletions
diff --git a/getting-started/index.html b/getting-started/index.html new file mode 100644 index 0000000..6a60e67 --- /dev/null +++ b/getting-started/index.html @@ -0,0 +1,486 @@ + +<!doctype html> +<html lang="en" class="no-js"> + <head> + + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + + + + <link rel="icon" href="../assets/logo.png"> + <meta name="generator" content="mkdocs-1.3.1, mkdocs-material-8.3.9"> + + + + <title>Getting Started - Izuku Documentation</title> + + + + <link rel="stylesheet" href="../assets/stylesheets/main.1d29e8d0.min.css"> + + + <link rel="stylesheet" href="../assets/stylesheets/palette.cbb835fc.min.css"> + + + + + + + + + + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback"> + <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style> + + + + <script>__md_scope=new URL("..",location),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script> + + + + + + </head> + + + + + + + + <body dir="ltr" data-md-color-scheme="" data-md-color-primary="none" data-md-color-accent="none"> + + + + <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off"> + <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off"> + <label class="md-overlay" for="__drawer"></label> + <div data-md-component="skip"> + + + <a href="#getting-started" class="md-skip"> + Skip to content + </a> + + </div> + <div data-md-component="announce"> + + </div> + + + + +<header class="md-header" data-md-component="header"> + <nav class="md-header__inner md-grid" aria-label="Header"> + <a href=".." title="Izuku Documentation" class="md-header__button md-logo" aria-label="Izuku Documentation" data-md-component="logo"> + + + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg> + + </a> + <label class="md-header__button md-icon" for="__drawer"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg> + </label> + <div class="md-header__title" data-md-component="header-title"> + <div class="md-header__ellipsis"> + <div class="md-header__topic"> + <span class="md-ellipsis"> + Izuku Documentation + </span> + </div> + <div class="md-header__topic" data-md-component="header-topic"> + <span class="md-ellipsis"> + + Getting Started + + </span> + </div> + </div> + </div> + + + + <label class="md-header__button md-icon" for="__search"> + <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> + </label> + <div class="md-search" data-md-component="search" role="dialog"> + <label class="md-search__overlay" for="__search"></label> + <div class="md-search__inner" role="search"> + <form class="md-search__form" name="search"> + <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" required> + <label class="md-search__icon md-icon" for="__search"> + <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> + <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> + </label> + <nav class="md-search__options" aria-label="Search"> + + <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1"> + <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> + </button> + </nav> + + </form> + <div class="md-search__output"> + <div class="md-search__scrollwrap" data-md-scrollfix> + <div class="md-search-result" data-md-component="search-result"> + <div class="md-search-result__meta"> + Initializing search + </div> + <ol class="md-search-result__list"></ol> + </div> + </div> + </div> + </div> +</div> + + + <div class="md-header__source"> + <a href="https://github.com/luciferreeves/izuku.js" title="Go to repository" class="md-source" data-md-component="source"> + <div class="md-source__icon md-icon"> + + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> + </div> + <div class="md-source__repository"> + luciferreeves/izuku.js + </div> +</a> + </div> + + </nav> + +</header> + + <div class="md-container" data-md-component="container"> + + + + + + + <main class="md-main" data-md-component="main"> + <div class="md-main__inner md-grid"> + + + + <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" > + <div class="md-sidebar__scrollwrap"> + <div class="md-sidebar__inner"> + + + + + +<nav class="md-nav md-nav--primary md-nav--integrated" aria-label="Navigation" data-md-level="0"> + <label class="md-nav__title" for="__drawer"> + <a href=".." title="Izuku Documentation" class="md-nav__button md-logo" aria-label="Izuku Documentation" data-md-component="logo"> + + + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg> + + </a> + Izuku Documentation + </label> + + <div class="md-nav__source"> + <a href="https://github.com/luciferreeves/izuku.js" title="Go to repository" class="md-source" data-md-component="source"> + <div class="md-source__icon md-icon"> + + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> + </div> + <div class="md-source__repository"> + luciferreeves/izuku.js + </div> +</a> + </div> + + <ul class="md-nav__list" data-md-scrollfix> + + + + + + + + + <li class="md-nav__item"> + <a href=".." class="md-nav__link"> + Home + </a> + </li> + + + + + + + + + + + + + <li class="md-nav__item md-nav__item--active"> + + <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc"> + + + + + + <label class="md-nav__link md-nav__link--active" for="__toc"> + Getting Started + <span class="md-nav__icon md-icon"></span> + </label> + + <a href="./" class="md-nav__link md-nav__link--active"> + Getting Started + </a> + + + +<nav class="md-nav md-nav--secondary" aria-label="Table of contents"> + + + + + + + <label class="md-nav__title" for="__toc"> + <span class="md-nav__icon md-icon"></span> + Table of contents + </label> + <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> + + <li class="md-nav__item"> + <a href="#installation" class="md-nav__link"> + Installation + </a> + +</li> + + <li class="md-nav__item"> + <a href="#basic-usage" class="md-nav__link"> + Basic Usage + </a> + +</li> + + </ul> + +</nav> + + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../frame-properties/" class="md-nav__link"> + Frame Properties + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../frame-methods/" class="md-nav__link"> + Frame Methods + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../helper-methods/" class="md-nav__link"> + Helper Methods + </a> + </li> + + + + + + + + + + + <li class="md-nav__item"> + <a href="../chaining-methods/" class="md-nav__link"> + Chaining Methods + </a> + </li> + + + + </ul> +</nav> + </div> + </div> + </div> + + + + <div class="md-content" data-md-component="content"> + <article class="md-content__inner md-typeset"> + + + <a href="https://github.com/luciferreeves/izuku.js/edit/main/docs/getting-started.md" title="Edit this page" class="md-content__button md-icon"> + <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> + </a> + + + +<h1 id="getting-started">Getting Started</h1> +<h2 id="installation">Installation</h2> +<p>Izuku is available on <a href="https://www.npmjs.com/package/izuku">npm</a>. To install Izuku, run the following command:</p> +<div class="highlight"><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>npm install izuku +</code></pre></div> +<h2 id="basic-usage">Basic Usage</h2> +<p>As defined in <a href="../">Home</a>, the basic usage of Izuku is to create a <code>Frame</code> object and manipulate it. You can use either an 2D array, a JSON Object, or a CSV File to create a <code>Frame</code>. The following example creates a <code>Frame</code> from a 2D array:</p> +<div class="highlight"><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Frame</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'izuku'</span><span class="p">;</span><span class="w"></span> +<a id="__codelineno-1-2" name="__codelineno-1-2" href="#__codelineno-1-2"></a><span class="c1">// alternatively, const { Frame } = require('izuku');</span><span class="w"></span> +<a id="__codelineno-1-3" name="__codelineno-1-3" href="#__codelineno-1-3"></a> +<a id="__codelineno-1-4" name="__codelineno-1-4" href="#__codelineno-1-4"></a><span class="c1">// define some column names as an array</span><span class="w"></span> +<a id="__codelineno-1-5" name="__codelineno-1-5" href="#__codelineno-1-5"></a><span class="kd">const</span><span class="w"> </span><span class="nx">header</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="s1">'Name'</span><span class="p">,</span><span class="w"> </span><span class="s1">'Age'</span><span class="p">,</span><span class="w"> </span><span class="s1">'Gender'</span><span class="p">,</span><span class="w"> </span><span class="s1">'Country'</span><span class="p">];</span><span class="w"></span> +<a id="__codelineno-1-6" name="__codelineno-1-6" href="#__codelineno-1-6"></a> +<a id="__codelineno-1-7" name="__codelineno-1-7" href="#__codelineno-1-7"></a><span class="c1">// define some data as a 2D array</span><span class="w"></span> +<a id="__codelineno-1-8" name="__codelineno-1-8" href="#__codelineno-1-8"></a><span class="kd">const</span><span class="w"> </span><span class="nx">data</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span> +<a id="__codelineno-1-9" name="__codelineno-1-9" href="#__codelineno-1-9"></a><span class="w"> </span><span class="p">[</span><span class="s1">'Arthur'</span><span class="p">,</span><span class="w"> </span><span class="mf">21</span><span class="p">,</span><span class="w"> </span><span class="s1">'Male'</span><span class="p">,</span><span class="w"> </span><span class="s1">'USA'</span><span class="p">],</span><span class="w"></span> +<a id="__codelineno-1-10" name="__codelineno-1-10" href="#__codelineno-1-10"></a><span class="w"> </span><span class="p">[</span><span class="s1">'Betty'</span><span class="p">,</span><span class="w"> </span><span class="mf">20</span><span class="p">,</span><span class="w"> </span><span class="s1">'Female'</span><span class="p">,</span><span class="w"> </span><span class="s1">'Canada'</span><span class="p">],</span><span class="w"></span> +<a id="__codelineno-1-11" name="__codelineno-1-11" href="#__codelineno-1-11"></a><span class="w"> </span><span class="p">[</span><span class="s1">'Victor'</span><span class="p">,</span><span class="w"> </span><span class="mf">25</span><span class="p">,</span><span class="w"> </span><span class="s1">'Male'</span><span class="p">],</span><span class="w"></span> +<a id="__codelineno-1-12" name="__codelineno-1-12" href="#__codelineno-1-12"></a><span class="w"> </span><span class="p">[</span><span class="s1">'Dodger'</span><span class="p">,</span><span class="w"> </span><span class="mf">30</span><span class="p">,</span><span class="w"> </span><span class="s1">'Male'</span><span class="p">,</span><span class="w"> </span><span class="s1">'Canada'</span><span class="p">],</span><span class="w"></span> +<a id="__codelineno-1-13" name="__codelineno-1-13" href="#__codelineno-1-13"></a><span class="w"> </span><span class="p">[</span><span class="s1">'Rayan'</span><span class="p">,</span><span class="w"> </span><span class="mf">21</span><span class="p">,</span><span class="w"> </span><span class="s1">'Male'</span><span class="p">,</span><span class="w"> </span><span class="s1">'Russia'</span><span class="p">],</span><span class="w"></span> +<a id="__codelineno-1-14" name="__codelineno-1-14" href="#__codelineno-1-14"></a><span class="w"> </span><span class="p">[</span><span class="s1">'Skitley'</span><span class="p">,</span><span class="w"> </span><span class="mf">29</span><span class="p">,</span><span class="w"> </span><span class="s1">'Female'</span><span class="p">,</span><span class="w"> </span><span class="s1">'Germany'</span><span class="p">],</span><span class="w"></span> +<a id="__codelineno-1-15" name="__codelineno-1-15" href="#__codelineno-1-15"></a><span class="w"> </span><span class="p">[</span><span class="s1">'Victoria'</span><span class="p">,</span><span class="w"> </span><span class="mf">89</span><span class="p">,</span><span class="w"> </span><span class="s1">'Female'</span><span class="p">,</span><span class="w"> </span><span class="s1">'UK'</span><span class="p">],</span><span class="w"></span> +<a id="__codelineno-1-16" name="__codelineno-1-16" href="#__codelineno-1-16"></a><span class="w"> </span><span class="p">[</span><span class="s1">'Tiger'</span><span class="p">,</span><span class="w"> </span><span class="mf">23</span><span class="p">,</span><span class="w"> </span><span class="s1">'Male'</span><span class="p">,</span><span class="w"> </span><span class="s1">'India'</span><span class="p">],</span><span class="w"></span> +<a id="__codelineno-1-17" name="__codelineno-1-17" href="#__codelineno-1-17"></a><span class="w"> </span><span class="p">[</span><span class="s1">'Killjoy'</span><span class="p">,</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"> </span><span class="s1">'Female'</span><span class="p">,</span><span class="w"> </span><span class="s1">'Riot'</span><span class="p">]</span><span class="w"></span> +<a id="__codelineno-1-18" name="__codelineno-1-18" href="#__codelineno-1-18"></a><span class="p">];</span><span class="w"></span> +<a id="__codelineno-1-19" name="__codelineno-1-19" href="#__codelineno-1-19"></a> +<a id="__codelineno-1-20" name="__codelineno-1-20" href="#__codelineno-1-20"></a><span class="c1">// create a frame, header is optional</span><span class="w"></span> +<a id="__codelineno-1-21" name="__codelineno-1-21" href="#__codelineno-1-21"></a><span class="kd">const</span><span class="w"> </span><span class="nx">frame</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">Frame</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span><span class="w"> </span><span class="nx">header</span><span class="p">);</span><span class="w"></span> +<a id="__codelineno-1-22" name="__codelineno-1-22" href="#__codelineno-1-22"></a> +<a id="__codelineno-1-23" name="__codelineno-1-23" href="#__codelineno-1-23"></a><span class="c1">// print the frame</span><span class="w"></span> +<a id="__codelineno-1-24" name="__codelineno-1-24" href="#__codelineno-1-24"></a><span class="nx">frame</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span><span class="w"></span> +</code></pre></div> +<p>The above code creates a frame and prints it to the console. It looks like this:</p> +<div class="highlight"><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a>╔═══════╤══════════╤══════╤════════╤═════════╗ +<a id="__codelineno-2-2" name="__codelineno-2-2" href="#__codelineno-2-2"></a>║ Index │ Name │ Age │ Gender │ Country ║ +<a id="__codelineno-2-3" name="__codelineno-2-3" href="#__codelineno-2-3"></a>╟───────┼──────────┼──────┼────────┼─────────╢ +<a id="__codelineno-2-4" name="__codelineno-2-4" href="#__codelineno-2-4"></a>║ 0 │ Arthur │ 21 │ Male │ USA ║ +<a id="__codelineno-2-5" name="__codelineno-2-5" href="#__codelineno-2-5"></a>╟───────┼──────────┼──────┼────────┼─────────╢ +<a id="__codelineno-2-6" name="__codelineno-2-6" href="#__codelineno-2-6"></a>║ 1 │ Betty │ 20 │ Female │ Canada ║ +<a id="__codelineno-2-7" name="__codelineno-2-7" href="#__codelineno-2-7"></a>╟───────┼──────────┼──────┼────────┼─────────╢ +<a id="__codelineno-2-8" name="__codelineno-2-8" href="#__codelineno-2-8"></a>║ 2 │ Victor │ 25 │ Male │ ║ +<a id="__codelineno-2-9" name="__codelineno-2-9" href="#__codelineno-2-9"></a>╟───────┼──────────┼──────┼────────┼─────────╢ +<a id="__codelineno-2-10" name="__codelineno-2-10" href="#__codelineno-2-10"></a>║ ... │ ... │ ... │ ... │ ... ║ +<a id="__codelineno-2-11" name="__codelineno-2-11" href="#__codelineno-2-11"></a>╟───────┼──────────┼──────┼────────┼─────────╢ +<a id="__codelineno-2-12" name="__codelineno-2-12" href="#__codelineno-2-12"></a>║ 6 │ Victoria │ 89 │ Female │ UK ║ +<a id="__codelineno-2-13" name="__codelineno-2-13" href="#__codelineno-2-13"></a>╟───────┼──────────┼──────┼────────┼─────────╢ +<a id="__codelineno-2-14" name="__codelineno-2-14" href="#__codelineno-2-14"></a>║ 7 │ Tiger │ 23 │ Male │ India ║ +<a id="__codelineno-2-15" name="__codelineno-2-15" href="#__codelineno-2-15"></a>╟───────┼──────────┼──────┼────────┼─────────╢ +<a id="__codelineno-2-16" name="__codelineno-2-16" href="#__codelineno-2-16"></a>║ 8 │ Killjoy │ null │ Female │ Riot ║ +<a id="__codelineno-2-17" name="__codelineno-2-17" href="#__codelineno-2-17"></a>╚═══════╧══════════╧══════╧════════╧═════════╝ +</code></pre></div> +<p>Now that you have created a frame, take a look at the <a href="../frame-properties">frame properties</a>.</p> + + + </article> + + </div> + </div> + + <a href="#" class="md-top md-icon" data-md-component="top" hidden> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> + Back to top + </a> + + </main> + + <footer class="md-footer"> + + + <nav class="md-footer__inner md-grid" aria-label="Footer" > + + + <a href=".." class="md-footer__link md-footer__link--prev" aria-label="Previous: Home" rel="prev"> + <div class="md-footer__button md-icon"> + <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> + </div> + <div class="md-footer__title"> + <div class="md-ellipsis"> + <span class="md-footer__direction"> + Previous + </span> + Home + </div> + </div> + </a> + + + + <a href="../frame-properties/" class="md-footer__link md-footer__link--next" aria-label="Next: Frame Properties" rel="next"> + <div class="md-footer__title"> + <div class="md-ellipsis"> + <span class="md-footer__direction"> + Next + </span> + Frame Properties + </div> + </div> + <div class="md-footer__button md-icon"> + <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> + </div> + </a> + + </nav> + + <div class="md-footer-meta md-typeset"> + <div class="md-footer-meta__inner md-grid"> + <div class="md-copyright"> + + <div class="md-copyright__highlight"> + Copyright © 2022 Izuku. Licensed under the MIT License. + </div> + + +</div> + + </div> + </div> +</footer> + + </div> + <div class="md-dialog" data-md-component="dialog"> + <div class="md-dialog__inner md-typeset"></div> + </div> + <script id="__config" type="application/json">{"base": "..", "features": ["navigation.expand", "navigation.top", "toc.integrate"], "search": "../assets/javascripts/workers/search.b97dbffb.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version.title": "Select version"}}</script> + + + <script src="../assets/javascripts/bundle.6c7ad80a.min.js"></script> + + + </body> +</html>
\ No newline at end of file |