-会員ページFree-JavaScript実践-文字数チェッカーを作成しましょう!-


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実践-文字数チェッカーを作成しましょう!-ビデオ1
作成するプログラムを見てみましょう!

■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);

})();