<commit_before><!DOCTYPE html>
<html>
    <head>
        <title>Hax Tutorial - Functions</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="/web/base.css">
        <link rel="stylesheet" href="/web/tutorials/tutorial.css">
    </head>
    <body>
        <!-- header -->
        <a class="headerLink" href="/web/home.html"><img class="headerLogo" src="/web/logo51.png"></a>
        <a class="headerLink" href="/web/home.html">Home</a>
        <a class="headerLink" href="/hax.html">Application</a>
        <a class="headerLink" href="/web/tutorials/tutorials.html">Tutorials</a>
        <a class="headerLink" href="/web/reference/reference.html">Reference</a>
        <a class="headerLink" href="/web/downloads/downloads.html">Downloads</a>
        <a class="headerLink" href="/web/about.html">About</a>
        <hr class="headerBreak">
        <!-- end header -->
        <h2>Tutorial - Functions</h2>
        <p>There are two ways to add functions in Hax: Simple Functions and Folder Functions.</p>
        <h3>Simple Functions</h3>
        <p>Plain javascript functions can be added as tables to the workspace.</p>
        <div>
            <ol class="numericList">
                <li>Start with a new project. Open a new window with the url <a href="http://haxapp.com/hax.html">http://haxapp.com/hax.html</a></li>
                <li>Close the default workspace and create a new workspace called "FunctionTest"</li>
                <li>Create a Data Table with the name "multiplier" and the value 4.
                    <div><img src="multiplierTable.png"/></div>
                </li>
                <li>To create a function, use "Add Function" from the context menu.
                    <div><img src="addFunction.png"/></div>
                </li>        
                <li>Name the function "foo" and set the argument list to "x,y".
                    <div><img src="functionDialog.png"/></div>
                </li>
                <li>Set the code for the function as follows.
                    <p class="sideNote">The code for the function is the body of the function.</p>
                    <p class="sideNote">Variables from the workspace are accessible just like with a Data Table. 
                    Private code is also allowable, as with a Data Table.</p>
                    <div><textarea class="codeText" readonly rows="2">
return multiplier * x + y;
                    </textarea></div>
                    <div><img src="functionCode.png"/></div>
                </li>
                <li>Now add a Data Table "answer" with the following formula:
                    <div><textarea class="codeText" readonly rows="2">
value = foo(5,2);
                    </textarea></div>
                    <div><img src="answerFormula.png"/></div>
                    <p class="sideNote">The result is given, which is 4*5 + 2</p>
                    <div><img src="answerResult.png"/></div>
                </li>
            </ol>
        </div>       
            
        <h3>Folder Functions</h3>
        <p>A simple function is a normal javascript function written with lines of javascript code.
            A folder function is a function that is expanded in terms of Hax tables. It looks like
            a normal Hax folder. However, one or more input tables and an output table are defined. 
            When the function is called, the value of the input tables is passed in and the resulting
            value of the output table is returned.</p>

         <div>
            <ol class="numericList">
                <li>We will start with a predefined workspace. A workspace at a url can 
                    be opened by appending the query parameter "url" to the Hax url. 
                    <a href="http://haxapp.com/hax.html?url=http://www.haxap.com/web/tutorials/functions/simpleModel.json">http://haxapp.com/hax.html?url=http://www.haxap.com/web/tutorials/functions/simpleModel.json</a>
                    This is a workspace that creates a simple revenue projection. 
                    <div><img src="simpleModel.png"/></div>
                </li>
                <li>Create a Folder Function table using "Add Folder Function". See the name, argument list
                    and return value as displayed below.
                    <div><img src="addFolderFunction.png"/></div>
                </li>
                <li>We will take all the existing tables from the old workspace and move then 
                    inside the folder function.
                    <ol class="upperAlphaList">
                        <li>Open the menu on the table named "settings", in the upper left corner and select "Edit Properties".</li>
                        <li>Change the folder for the table, as displayed in the image below.
                            <div><img src="refactorDialog.png"/></div>
                            <p class="sideNote">This will cause several errors, since a needed table was removed. Ignore the errors.</p>
                            <div><img src="startRefactor.png"/></div>
                        </li>
                        <li>Repeat this process for the other tables until all are in the folder function.
                            <div><img src="finishRefactor.png"/></div>
                        </li>
                    </ol>
                </li>
                <li>Create a new table in the root folder called settings, with the following value.
                    <div><textarea class="codeText" readonly rows="7">
{
	"initialYear": 1837,
	"initialRevenue": 7000,
	"growthRate": 2,
	"projectionCount": 100
}
                    </textarea></div>
                    <div><img src="newSettings.png"/></div>
                </li>
                <li>Create a new table in the root folder called revenueGrid, with the following formula.
                    <div><textarea class="codeText" readonly rows="2">
value = createRevenueGrid(settings);
                    </textarea></div>
                    <div><img src="revenueGridFormula.png"/></div>
                    <p class="sideNote">The result is the revenue table that would have been calculated in the 
                    folder function if the passed settings were used. Note however that the values in the <commit_msg>minor fix in function tutorial<commit_after><!DOCTYPE html>
<html>
    <head>
        <title>Hax Tutorial - Functions</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="/web/base.css">
        <link rel="stylesheet" href="/web/tutorials/tutorial.css">
    </head>
    <body>
        <!-- header -->
        <a class="headerLink" href="/web/home.html"><img class="headerLogo" src="/web/logo51.png"></a>
        <a class="headerLink" href="/web/home.html">Home</a>
        <a class="headerLink" href="/hax.html">Application</a>
        <a class="headerLink" href="/web/tutorials/tutorials.html">Tutorials</a>
        <a class="headerLink" href="/web/reference/reference.html">Reference</a>
        <a class="headerLink" href="/web/downloads/downloads.html">Downloads</a>
        <a class="headerLink" href="/web/about.html">About</a>
        <hr class="headerBreak">
        <!-- end header -->
        <h2>Tutorial - Functions</h2>
        <p>There are two ways to add functions in Hax: Simple Functions and Folder Functions.</p>
        <h3>Simple Functions</h3>
        <p>Plain javascript functions can be added as tables to the workspace.</p>
        <div>
            <ol class="numericList">
                <li>Start with a new project. Open a new window with the url <a href="http://haxapp.com/hax.html">http://haxapp.com/hax.html</a></li>
                <li>Close the default workspace and create a new workspace called "FunctionTest"</li>
                <li>Create a Data Table with the name "multiplier" and the value 4.
                    <div><img src="multiplierTable.png"/></div>
                </li>
                <li>To create a function, use "Add Function" from the context menu.
                    <div><img src="addFunction.png"/></div>
                </li>        
                <li>Name the function "foo" and set the argument list to "x,y".
                    <div><img src="functionDialog.png"/></div>
                </li>
                <li>Set the code for the function as follows.
                    <p class="sideNote">The code for the function is the body of the function.</p>
                    <p class="sideNote">Variables from the workspace are accessible just like with a Data Table. 
                    Private code is also allowable, as with a Data Table.</p>
                    <div><textarea class="codeText" readonly rows="2">
return multiplier * x + y;
                    </textarea></div>
                    <div><img src="functionCode.png"/></div>
                </li>
                <li>Now add a Data Table "answer" with the following formula:
                    <div><textarea class="codeText" readonly rows="2">
value = foo(5,2);
                    </textarea></div>
                    <div><img src="answerFormula.png"/></div>
                    <p class="sideNote">The result is given, which is 4*5 + 2</p>
                    <div><img src="answerResult.png"/></div>
                </li>
            </ol>
        </div>       
            
        <h3>Folder Functions</h3>
        <p>A simple function is a normal javascript function written with lines of javascript code.
            A folder function is a function that is expanded in terms of Hax tables. It looks like
            a normal Hax folder. However, one or more input tables and an output table are defined. 
            When the function is called, the value of the input tables is passed in and the resulting
            value of the output table is returned.</p>

         <div>
            <ol class="numericList">
                <li>We will start with a predefined workspace. A workspace at a url can 
                    be opened by appending the query parameter "url" to the Hax url. 
                    <a href="http://haxapp.com/hax.html?url=http://www.haxap.com/web/tutorials/functions/simpleModel.json">http://haxapp.com/hax.html?url=http://www.haxap.com/web/tutorials/functions/simpleModel.json</a>
                    This is a workspace that creates a simple revenue projection. 
                    <div><img src="simpleModel.png"/></div>
                </li>
                <li>Create a Folder Function table using "Add Folder Function". See the name, argument list
                    and return value as displayed below.
                    <div><img src="addFolderFunction.png"/></div>
                </li>
                <li>We will take all the existing tables from the old workspace and move then 
                    inside the folder function.
                    <ol class="upperAlphaList">
                        <li>Open the menu on the table named "settings", in the upper left corner and select "Edit Properties".</li>
                        <li>Change the folder for the table, as displayed in the image below.
                            <div><img src="refactorDialog.png"/></div>
                            <p class="sideNote">This will cause several errors, since a needed table was removed. Ignore the errors.</p>
                            <div><img src="startRefactor.png"/></div>
                        </li>
                        <li>Repeat this process for the other tables until all are in the folder function.
                            <div><img src="finishRefactor.png"/></div>
                        </li>
                    </ol>
                </li>
                <li>Create a new table in the root folder called settings, with the following value.
                    <div><textarea class="codeText" readonly rows="7">
{
	"initialYear": 1837,
	"initialRevenue": 7000,
	"growthRate": 2,
	"projectionCount": 100
}
                    </textarea></div>
                    <div><img src="newSettings.png"/></div>
                </li>
                <li>Create a new Grid Table in the root folder called revenueGrid, with the following formula.
                    <div><textarea class="codeText" readonly rows="2">
value = createRevenueGrid(settings);
                    </textarea></div>
                    <div><img src="revenueGridFormula.png"/></div>
                    <p class="sideNote">The result is the revenue table that would have been calculated in the 
                    folder function if the passed settings were used. Note however that the values in the 
{'fraction_non_alphanumeric': 0.11577287066246057, 'fraction_numerical': 0.004889589905362776, 'mean_word_length': 1.7956349206349207, 'pattern_counts': {'":': 8, '<': 293, '<?xml version=': 0, '>': 293, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5205939', 'n_tokens_mistral': 3438, 'n_tokens_neox': 3208, 'n_words': 1093}