| 1 | <!doctype html>
|
| 2 | <html>
|
| 3 | <head>
|
| 4 | <title>Hangul.js 된소리 예제</title>
|
| 5 | <script src="../hangul.js"></script>
|
| 6 | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
|
| 7 | </head>
|
| 8 | <body>
|
| 9 | <div class="container">
|
| 10 | <h1>Hangul.js 된소리 예제</h1>
|
| 11 | <p>이 예제는 입력으로 주어진 문장에 있는 예사소리와, 거센소리를 모두 된소리로 바꾼 문장을 보여줍니다.</p>
|
| 12 | <table class="table table-stripped table-bordered">
|
| 13 | <tr>
|
| 14 | <th>입력</th>
|
| 15 | <th>출력</th>
|
| 16 | </tr>
|
| 17 | <tr><td>ㄱ, ㅋ</td><td>ㄲ</td></tr>
|
| 18 | <tr><td>ㄷ, ㅌ</td><td>ㄸ</td></tr>
|
| 19 | <tr><td>ㅂ, ㅍ</td><td>ㅃ</td></tr>
|
| 20 | <tr><td>ㅅ</td><td>ㅆ</td></tr>
|
| 21 | <tr><td>ㅈ, ㅊ</td><td>ㅉ</td></tr>
|
| 22 | </table>
|
| 23 |
|
| 24 | <ul>
|
| 25 | <li>가나다라마바사아자차카타파하 → 까나따라마빠싸아짜짜까따빠하</li>
|
| 26 | <li>도레미파솔라시도 → 또레미빠쏠라씨또</li>
|
| 27 | </ul>
|
| 28 |
|
| 29 | <form>
|
| 30 | <div class="form-group">
|
| 31 | <label for="input">입력 문장</label>
|
| 32 | <textarea class="form-control" id="input" placeholder="아버지가 방에 들어가신다"></textarea>
|
| 33 | </div>
|
| 34 | </form>
|
| 35 | <label for="output">출력 문장</label>
|
| 36 | <div class="form-control" id="output"></div>
|
| 37 | <h2>코드</h2>
|
| 38 | <div id="code">
|
| 39 | <pre>
|
| 40 | function stronger(x){
|
| 41 | if(x == 'ㄱ' || x == 'ㅋ') return 'ㄲ';
|
| 42 | if(x == 'ㄷ' || x == 'ㅌ') return 'ㄸ';
|
| 43 | if(x == 'ㅂ' || x == 'ㅍ') return 'ㅃ';
|
| 44 | if(x == 'ㅅ') return 'ㅆ';
|
| 45 | if(x == 'ㅈ' || x == 'ㅊ') return 'ㅉ';
|
| 46 | return x;
|
| 47 | }
|
| 48 |
|
| 49 | $('#output').innerHTML = Hangul.assemble(Hangul.disassemble(input).map(stronger));</pre>
|
| 50 | </div>
|
| 51 | </div>
|
| 52 |
|
| 53 | <script>
|
| 54 | function ready(fn) {
|
| 55 | if (document.readyState != 'loading'){
|
| 56 | fn();
|
| 57 | } else {
|
| 58 | document.addEventListener('DOMContentLoaded', fn);
|
| 59 | }
|
| 60 | }
|
| 61 |
|
| 62 | function stronger(x){
|
| 63 | if(x == 'ㄱ' || x == 'ㅋ') return 'ㄲ';
|
| 64 | if(x == 'ㄷ' || x == 'ㅌ') return 'ㄸ';
|
| 65 | if(x == 'ㅂ' || x == 'ㅍ') return 'ㅃ';
|
| 66 | if(x == 'ㅅ') return 'ㅆ';
|
| 67 | if(x == 'ㅈ' || x == 'ㅊ') return 'ㅉ';
|
| 68 | return x;
|
| 69 | }
|
| 70 |
|
| 71 | var $ = document.querySelector.bind(document);
|
| 72 |
|
| 73 | ready(function(){
|
| 74 | $('#input').addEventListener('keyup', function(){
|
| 75 | var input = this.value;
|
| 76 | $('#output').innerHTML = Hangul.assemble(Hangul.disassemble(input).map(stronger));
|
| 77 | });
|
| 78 | });
|
| 79 | </script>
|
| 80 |
|
| 81 | </body>
|
| 82 | </html>
|