目次
とりあえず今日のところは以下の4つがあればOK。
○○さん、こんにちは！、をいろいろな方法で作ってみる。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test1</title>
<script type="text/javascript" src="js/my.js"></script>
</head>
<body>
<p>Hello, World!</p>
<p>名前：
<input id="edit" type="text" size="10"/>
<!--<input type="button" value="変更"/>-->
<button onclick="clicked()">変更</button>
</p>
<p><span id="name">世界</span>さん、こんにちは！</p>
</body>
</html>function clicked(){
var edit=document.getElementById("edit");
var name=document.getElementById("name");
name.innerHTML=edit.value;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test2</title>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/my.js"></script>
</head>
<body>
<p>Hello, World!</p>
<p>名前：
<input id="edit" type="text" size="10"/>
<!--<input type="button" value="変更"/>-->
<button id="change">変更</button>
</p>
<p><span id="name">世界</span>さん、こんにちは！</p>
</body>
</html>$(function(){
$("#change").click(function(){
var $edit=$("#edit");
var $name=$("#name");
$name.text($edit.val());
});
});<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Test3</title>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/my.js"></script>
</head>
<body>
<p>{{"Hello, World!"}}</p>
<p>名前：
<input type="text" size="10" ng-init="name='世界'" ng-model="name"/>
<!--<input type="button" value="変更"/>-->
</p>
<p><span>{{name}}</span>さん、こんにちは！</p>
</body>
</html>AngularJSを利用した入門用のアプリとしてショッピングカートを作ってみる。
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>ショッピングカート</title>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
</head>
<body>
<h1>ショッピングカート</h1>
<div ng-controller="CartController">
<h2>購入済みのもの：</h2>
<ul>
<li ng-repeat="it in items">
{{it.name}}：
<input ng-model="it.num" size=4/>個×{{it.price}}円＝{{it.num * it.price}}円
<button ng-click="delete($index)">削除</button>
</li>
</ul>
<hr>
<div ng-show="buy_mode">
<h2>新規購入</h2>
<div>商品名：
<input ng-model="new_name">：
<input ng-model="new_num" size=4>個×
<input ng-model="new_price" size=6>円
<button ng-click="buy()">購入する</button>
</div>
</div>
<div ng-hide="buy_mode">
<h2>修正</h2>
<div>商品名：
<input ng-model="modify_name"> 単価：
<input ng-model="modify_price" size=6>円
<button ng-click="modify()">修正する</button>
</div>
</div>
<hr>
<button ng-click="change()">切り替え</button>
</div>
</body>
</html>var app=angular.module("myApp",[]);app.controller("CartController",function($scope){
$scope.items=[
{ name:"缶コーヒー", price:120, num:3 },
{ name:"粉ミルク", price:480, num:2 },
{ name:"とうもろこし", price:220, num:5 },
];
$scope.new_name="";
$scope.new_price="";
$scope.new_num="";
$scope.buy_mode=true;
// 購入する
$scope.buy=function(){
if($scope.new_name=="" || $scope.new_price=="") return;
if($scope.new_num=="") $scope.new_num="0";
$scope.items.splice(0,0,{
name:$scope.new_name,
price:$scope.new_price,
num:$scope.new_num,
});
$scope.new_name=$scope.new_price=$scope.new_num="";
}
// 削除する
$scope.delete=function(id){
$scope.items.splice(id,1);
};
// 切り替える
$scope.change=function(){
$scope.buy_mode=!$scope.buy_mode;
}
});