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>
|