【Java script問題集】1-10 inputタグにmaxlength属性を追加してみよう
1-10.html
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<title>1-10</title>
</head>
<body>
<form>
<div class="form-title">入力してください<span>（※3文字まで）</span></div>
<ul class="form-best-nine-list-box" id="TeamNames">
<li>
<input type="text" id="input-oreno" placeholder="入力" data-position="title">
</li>
</ul>
</form>
</body>
</html>
1-10.js
$(function() {
$('#TeamNames input[type="text"]').attr('maxlength','3');
});
実行結果(入力文字3文字を超える文字数を入力)
実行結果(Enter押下)
【Java script問題集】1-9 以下の条件でアラートボタンでアラートを表示してみよう
1-9.html
<html>
<head>
<title>1-9</title>
</head>
<body>
<div id="box">
<button id="button">アラートボタンを表示</button>
</div>
</body>
</html>
1-9.js
$(function(){
//アラートボタン追加処理
$('#button').on('click', function(){
$('#box').append(
'<button class="alert_button">アラートを表示</button>'
);
});
//アラート表示処理
$(document).on('click', '.alert_button', function(){
alert('アラートが表示できました！！');
});
});
【 実行結果】(初期表示時)
【実行結果】(「アラートボタンを表示」を押下)
【実行結果】(「アラートを表示 」を押下)
【Java script問題集】1-8 フォームの文字数チェックをしてみよう
1-8.html
<html>
<head>
<title>1-8</title>
</head>
<body>
<div class="form_area">
<p class="form_title">フォームに入力してね！</p>
<form action="">
<div class="form_item">
<label for="" id="label-pos">（10文字まで）</label>
<input type="text" id="input-pos" data-position="0">
</div>
<p class="error_text" style="display:none;">※エラーメッセージ</p>
<button>送信</button>
</form>
</div>
</body>
1-8.js
$(function() {
$("button").click(function() {
if ($('#input-pos').val() === "") {
$('.error_text').text('未入力です').show();
return false;
}
if ($('#input-pos').val().length > 10){
$('.error_text').text('最大文字数をオーバーしてます').show();
return false;
}
alert("送信完了");
});
});
【実行結果(送信ボタン押下前)】
【実行結果(未入力の場合)】
【実行結果(文字数オーバーの場合)】
【実行結果(10文字入力で送信の場合)】
【Java script問題集】1-7 フォームの未入力チェックをしてみよう
1-7.html
<html>
<head>
<title>1-7</title>
$(function(){
$('#submit_btn').on('click', function(){
if($('#name').val() === '' || $('#age').val() === ''){
alert('入力してください！');
$(this).focus();
return false;
}
alert('送信完了！');
});
});
</script>
</head>
<body>
<form>
<input id="name" placeholder="名前">
<input id="age" placeholder="年齢">
<input id="submit_btn" type="submit">
</form>
</body>
</html>
実行結果(送信ボタン押下前)
実行結果(名前未入力で送信ボタン押下)
実行結果(名前入力で送信ボタン押下)
【Java script問題集】1-5 jsonを読み込んでみよう ＆1-6 初期表示時に、jsonで読み込んだデータをブラウザに表示してみよう
1-5~1-6.html
<!DOCTYPE html>
<html lang="ja">
<head>
<script>
$(function() {
var
ulObj = $("#test"),
len = data.length;
for(var i = 0; i < len; i++) {
ulObj.append($("<li>").attr({"id":data[i].id}).text(data[i].name));
}
});
});
</script>
</head>
<body>
<ul id="test"></ul>
</body>
</html>
1-5.json
[
{"id":1,"name":"田中"},
{"id":2,"name":"鈴木"},
{"id":3,"name":"佐藤"}
]
実行結果
【Java script問題集】1-4 「1-3.」をボタン押下時に表示/非表示ができるように切り替えよう
1-4.html
<html>
<head>
<title>1-4</title>
</head>
<body>
<p>helloworld</p>
<button>botton</button>
$('button').click(function() {
$('p').toggle();
})
</script>
</body>
</html>
実行結果(ボタン押下前)
実行結果(ボタン押下後)
【Java script問題集】1-3 セレクタを使ってhtmlの要素を非表示にしてみよう
1-3.html
<html>
<head>
<title>1-3</title>
</head>
<body>
<p>サンプルテキスト</p>
<h1>sample</h2>
<script>
$('p').hide();
</script>
</body>
</html>
実行結果
