中堅SE向け研修/6回目のバックアップ(No.1)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
中堅SE向け研修/6回目へ行く。
- 1 (2016-01-23 (土) 10:03:55)

開発実習の続き

中堅SE向け研修

開発実習の続き †

AngularJSを使ったウェブアプリの開発の課題である。

数字が大きくなるにつれて複雑になるので、まずは1から順にこなしていってほしい。

↑

課題1 シンプル電卓 †

ボタンを押すことによって四則演算を計算できるシンプルな電卓。
小数演算もできる。
Cでクリアする。
メモリ、ルートなど、適当な追加機能を入れること。

↑

途中までのコード †

index.html

<!doctype html>
<html ng-app="SimpleCalc">
<head>
  <script type="text/javascript" src="vendors/angular.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
  <script type="text/javascript" src="js/controllers.js"></script>
  <script type="text/javascript" src="js/services.js"></script>
  <link rel="stylesheet" href="css/app.css">
</head>
<body ng-controller="CalcController">
  <h1>シンプル電卓 <small>Ver 0.01</small></h1>
  <table>
    <tr>
      <td id="disp" colspan="5">0</td>
    </tr>
    <tr ng-repeat="br in cs.buttons">
      <td ng-repeat="b in br">
        <button>{{b}}</button>
      </td>
    </tr>
  </table>
</body>
</html>

js/app.js

(function(){
  var app=angular.module("SimpleCalc",[]);
}());

js/controllers.js

(function(){
  var app=angular.module("SimpleCalc");
  app.controller("CalcController",function($scope,CalcService){
    $scope.cs=CalcService;
  });
}());

js/services.js

(function(){
  var app=angular.module("SimpleCalc");
  app.factory("CalcService",function(){
    var cs={};
    cs.buttons=[
      ['7','8','9','÷','C'],
      ['4','5','6','×','M'],
      ['1','2','3','-','←'],
      ['0','.','=','+','√'],
    ];
    return cs;
  });
}());

css/app.css

button{
  width:40px;
  height:40px;
  font-size: 20px;
}
#disp{
  background-color: black;
  color: white;
  font-size: 40px;
  text-align: right;
  padding: 10px;
}

↑

課題2 シンプルToDo †

やるべきことをメモっておいて、終わったら消すことができる。
メモとは、単なる文字列。
メモの一覧表示ができる。
重要度も指定できる。（A,B,Cなど）
文字列でフィルタリングできる。
重要度でフィルタリングやソーティングできる。
消したメモも実は残っていて、裏機能で復元できる。
保存はLocalStorageでよい。

↑

課題3 シンプルドロー †

Canvasを使用してブラウザ内でお絵かきができるアプリ。
直線、四角形、円、自由曲線などを描画する。
色や線の太さなどの属性を変えることができる。
データを保存することができる。
保存はLocalStorageでよい。