https://github.com/hatena/hatena-intern-exercise2012

https://github.com/hatena/hatena-intern-exercise2012

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/hatena/hatena-intern-exercise2012
• Owner: hatena
• Created: 2012-07-13T02:01:17.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2012-07-28T13:14:29.000Z (over 12 years ago)
• Last Synced: 2024-04-15T00:04:59.655Z (8 months ago)
• Language: Perl
• Size: 105 KB
• Stars: 18
• Watchers: 23
• Forks: 17
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### 課題1-1

以下のような機能をもつ、テンプレートエンジンをPerlを用いて実装してください。

templates/main.html

    

      

       {% title %}

      

      

        
{% content %}

      

    


main.pl

    use strict;

    use warnings;

    use TemplateEngine;

    my $template = TemplateEngine->new( file => ‘templates/main.html’ );

    print $template->render({

      title   => ‘タイトル’,

      content => ‘これはコンテンツです',

    }); 

実行結果

    $ perl main.pl

    

      

       タイトル

      

      

        
これはコンテンツです

      

    

    $ perl main.pl > output.html


output.htmlを適当なWebブラウザで開いて正しく表示されることを確認してください。

実装に際しては、以下の条件を守ってください。

- 変数の置き換えが出来る

- HTMLのエスケープが適切になされる

- TemplateToolkit や XSlateなどの既存のテンプレートエンジンを利用しない

また、後述するリポジトリに含まれているテストを実行して、課題が正しく動作していることを確認してください。

### 課題1-2 (オプション)

課題1-1で作ったテンプレートエンジンの機能を拡張してみてください。機能を拡張した部分についてはt/template.t にテストを追加してください。具体的な機能については、既存のテンプレートエンジンを参考にしてください。

### 課題2-1

課題1-1と同じような機能をもつ、テンプレートエンジンをJavaScriptを用いて実装してください。

2-1.html

    

    

      

        

        

        

        

          

            <div>

              <h2>{% title %}</h2>

              <p>{% content %}</p>

            </div>

          

          
日記

          


            ここに結果が出力される

          

        

    


2-1.js

    var main = function() {

    

        var source = document.getElementById('template').innerHTML;

        var template = new Template({

            source: source

        });

    

        document.getElementById('result').innerHTML = template.render({

            title: '6月25日の日記',

            content: 'ランチを食べすぎました'

        });

    };

    

    document.addEventListener('DOMContentLoaded', main);

template.js

    var Template = function(input) {

        // この関数を実装してください

    };

    

    Template.prototype = {

        render: function(variables) {

            // この関数を実装してください

        }

    };

template.jsにTemplateクラスを実装して、Webブラウザで2-1.htmlを開き、以下の正しい実行結果が表示されることを確認してください。



正しい実行結果

実装に関しては、以下の条件を守ってください。

* 変数の置き換えが出来る

* HTMLの適切なエスケープなどを意識する

* jQuery などの既存のJavaScriptライブラリを利用しない

### 課題2-2(オプション)

課題2-1で作ったテンプレートエンジンを何か発展させてみてくさい。

たとえば機能を追加する、テンプレートエンジンを使ったアプリケーションを実装する、といったことが考えられます。