JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ1
JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ2
JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ3
JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ4
JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ5
JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ6
JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ7
JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ8
JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ9
JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ10
JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ11
JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ12
JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ13
JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ14
作成するプログラムを見てみましょう!
■JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ2
HTMLファイルとCSSファイル、JSファイルを作成しましょう!
■JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ3
テキストエリアとボタンを作成しましょう!
■JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ4
文字数を表示する要素を作成しましょう!
■JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ5
bodyとtextareaのスタイルを適用させましょう!
■JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ6
ボタンのスタイルを整えていきましょう!
■JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ7
p要素のスタイルを指定しましょう!
■JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ8
JSを書き始めましょう!
use strictを使用しましょう!
■JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ9
変数を定義して、HTMLの要素を取得していきましょう!
■JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ10
HTMLでmain.jsを読み込めるようにしましょう!
ボタンの要素を取得しましょう!
■JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ11
addEventListenerを使いましょう!
■JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ12
テキストエリアの文字を取得して、文字数を数えましょう!
■JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ13
正規表現を使って、改行を数えないようにしましょう!
■JavaScript実践-文字数チェッカーを作成しましょう!-ビデオ14
window.onloadを見てみましょう!
■デモページはこちら
デモページ
■「Webブラウザ」と「テキストエディタ」を準備しましょう!
https://onsaturdays.com/会員ページfree-htmlcssの学習を始める前に/
■MDNリファレンス
https://developer.mozilla.org/ja/
■MDNリファレンス – JavaScript
https://developer.mozilla.org/ja/docs/Web/JavaScript
「ブラウザ」と「エディタ」は下記のWebページからダウンロードできます。
■Google Chrome (ウェブブラウザ)
https://www.google.com/intl/ja_ALL/chrome/
■Atom (テキストエディタ)
https://atom.io/
index.html
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>文字数チェッカー</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”container”>
<textarea id=”text” placeholder=”ここに文字を入力します”></textarea>
<div class=”btn” id=”btn”>文字数チェック</div>
<p>文字数は<span id=”char”></span>です。</p>
</div>
<script src=”main.js”></script>
</body>
</html>
styles.css
@charset “UTF-8”;
body {
background-color: #f5f5f5;
}
.container {
width: 500px;
margin: 30px auto;
}
textarea {
width: 500px;
margin-bottom: 5px;
box-sizing: border-box;
height: 150px;
padding: 10px;
font-size: 16px;
border: 1px solid #dcdcdc;
border-radius: 10px;
line-height: 1.5;
}
textarea:focus {
outline: none;
}
.btn {
display: inline-block;
width: 150px;
background-color: #00aaff;
padding: 5px;
color: #fff;
border-radius: 5px;
text-align: center;
cursor: pointer;
box-shadow: 0 4px 0 #0088cc;
float: right;
}
p {
margin: 0;
padding: 8px;
font-size: 16px;
}
span {
font-weight: bold;
}
main.js
(function() {
‘use strict’;
let char = document.getElementById(“char”);
let strLen = 0;
char.innerText = strLen;
let btn = document.getElementById(“btn”);
btn.addEventListener(‘click’, function() {
let str = document.getElementById(“text”).value;
//正規表現
str = str.replace(/\n/g,””);
strLen = str.length;
char.innerText = strLen;
}, false);
})();