18.04.08. 일
- 번역기복습(패캠)
- 계산기(project book)
- 계산기(패캠)
- etc ?
1
<!DOCTYPE html> // 패캠 번역기 예제
<html>
<head>
<meta name="title" content="팜므어 번역기"/>
<meta name="description"
content="당신의 언어를 팜므어로 번역해드립니다."/>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<link rel="stylesheet" href="index.css">
<!-- og -->
<meta property="og:site_name" content="팜므어 번역기"/>
<meta property="og:title" content="팜므어 번역기"/>
<meta property="og:description"
content="당신의 언어를 팜므어로 번역해드립니다."/>
<meta property="og:image"
content="img/thumbnail.png"/>
<!-- twitter -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="팜므어 번역기"/>
<meta name="twitter:description"
content="당신의 언어를 팜므어로 번역해드립니다."/>
<meta name="twitter:image:src"
content="img/thumbnail.png"/>
</head>
<body>
<div class='pre-container'>
<div class='header'>팜므어 번역기</div>
<textarea rows="4" class="original-text" placeholder="팜므어로 변형할 문장을 입력해주세요. (e.g. 확인->호가인)"></textarea>
</div>
<div class='result-container'>
<button type="button" class='change'>변환</button>
<div class='result-text'></div>
<div class='copyright'>
copyright by <a href='https://www.facebook.com/jay.jin.0427'>YOOLMOO</a> in <a href='http://www.smartstudy.co.kr/'>SMARTSTUDY</a> <br>
<a href='https://github.com/milooy/femme-translator'>View Github Source</a>
</div>
</div>
<script src="hangul.js"></script>
<script src="script.js"></script>
</body>
</html>
1
/*
1. 문장을 입력받고 변수에 저장
2. 입력받은 변수를 분해한다
- 분해 후 배열로 저장을 함
- 분해 된 배열을 분석하여서 3번째 받침글자를 4번째와 바꾼다?
3. 그렇게 재조합된 글자를 다시 머지 한다.
4. 리턴값으로 출력
5. 버튼 이벤트 등 HTML 과 연동 가능하도록 (함수 및 클래스 or 아이디 맞춰준다)
*/
function translator(str) {
return str.split('').map(char => { //문장을 글자별로 쪼개고 map 을돌린다.map??
var d = Hangul.disassemble(char); //npm install hangul-js 설치
//4번째 자모음이 있고, 2째 3째 모음이면 --> 4째와 3째 교환
//규칙성의 문제네 그냥..
if (d[3] && Hangul.isVowel(d[1]) && Hangul.isVowel(d[2])) { //isVowel ??
var tmp = d[3];
d[3] = d[2];
d[2] = tmp; //바꿔치기에서 자주사용되는 로직
}
return Hangul.assemble(d);// 자모음 다시 조립
}).join('');
//console.log('workingggg');
};
window.addEventListener('DOMContentLoaded', function () { //addEventListner 검색?? 매개변수??? DOMContentLoaded??
//변환 버튼을 누르면 result에 텍스트 변형해 넣어준다.
document.querySelector('.change').addEventListener('click', () => { //querySelector ??
const changedText = translator(document.querySelector('e.original-text').value);
document.querySelector('.result-text').innerText = changedText; // 변형된 문장을 결과에 넣어준다
});
//console.log('working');
});
DOMContentLoaded
event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading
<script>
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
</script>
querySelector()
returns the first element within the document that matches the specified selector, or group of selectors.
If no matches are found,
null
is returned.
I want to PICK the HTML CODE !! I WILL CATCH UP YOU !! --> querySelector ( ' . ') . is used
It is just Selector !
Also, I can try a variety of trials with google editor !! like sentence by sentence !! feels like so exiting !
addEventListener()works by adding a function or an object that implements
EventListener to the list of event listeners for the specified event type on the EventTarget
on which it's called.
// Function to add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", function(){modifyText("four")}, false);
function modifyText() {
var t2 = document.getElementById("t2");
if (t2.firstChild.nodeValue == "three") {
t2.firstChild.nodeValue = "two";
} else {
t2.firstChild.nodeValue = "three";
}
}
// add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);
map
map()
method creates a new array with the results of calling a provided function on every element in the calling array.
var array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
map , you need to figure out more and more.
계산기 ( js project book _ ch6)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<meta name="author" content="tailofmoon">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="style.css">
</head>
<body>
<form name="cal">
<table>
<caption>계산기</caption>
<tr>
<th colspan="4"><input type="text" name="result" value="0"></th>
</tr>
<tr>
<td><input type="button" value="7"></td>
<td><input type="button" value="8"></td>
<td><input type="button" value="9"></td>
<td><input type="button" value="+"></td>
</tr>
<tr>
<td><input type="button" value="4"></td>
<td><input type="button" value="5"></td>
<td><input type="button" value="6"></td>
<td><input type="button" value="-"></td>
</tr>
<tr>
<td><input type="button" value="1"></td>
<td><input type="button" value="2"></td>
<td><input type="button" value="3"></td>
<td><input type="button" value="*"></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="0"></td>
<td><input type="button" value="%"></td>
<td><input type="button" value="/"></td>
</tr>
<tr>
<td colspan="2"><input type="button" class="cls_btn" value="clear" ></td>
<td colspan="2"><input type="button" class="result_btn" value="=" ></td>
</tr>
</table>
</form>
<script src="app.js"></script>
</body>
</html>
1
// 변수 선언
var inp = document.forms['cal'];
var input = inp.getElementsByTagName('input'); //왜 ? inp 를 거쳐서 ? 변수선언을 하지
var cls_btn = document.getElementsByClassName('cls_btn')[0];
var result_btn = document.getElementsByClassName('result_btn')[0]; // up to these are the main, global var
// 계산기 초기화(clear)
function clr(){
inp['result'].value = 0; // thru inp var , [ ] means form tag
}
// 계산기 입력 처리 함수
function calc(value){ // the argument needed? (value)
// 입력이 들어가면 0을 지움
if(inp['result'].value == 0){
inp['result'].value = '';
}
// 입력값을 결과창에 출력
inp['result'].value += value;
}
// 계산 결과 처리 함수
function my_result(){
var result = document.forms['cal']['result']; // these cuz, forms tag [ form name] [ element name ] syntax
var calc = eval(result.value); // the most curious thing. MDN said eval function is very bad for system
//결과창에 표시
inp['result'].value = calc;
}
// 이벤트 핸들러 Event Handler --> JS definite Guide read
// -------------------------------------------------------------------
// 숫자 및 사칙연산 버튼 //제일 의아
for(var i = 0; i < input.length;i++){ //most curious parts . how they can calculate, and how the array expression can be used ?
// 숫자와 사칙 연산자만 입력 처리
if(input[i].value != '=' && input[i].value !='clear'){ //how the array expression can be used ?
input[i].onclick = function(){ // event handler syntax
calc(this.value);
}
} // end if
} // end for
// 초기화 버튼
cls_btn.onclick = function(){
clr();
}
// 결과 버튼
result_btn.onclick = function(){
try{
my_result();
}
catch(err){ //why the argument "err" have to be used ?
var result = inp['result'];
result.value = '입력오류';
}
}
18.04.11.화
JS guide CH7. Light Box
Initially, We have to make all division. Both Light Box and Block Box. but firstly, CSS File can manage the light box.
var indicator = document.querySelectorAll('.indicator button'); // class 는 .
var lightbox = document.querySelector('#lightbox'); // id 는 #
var block = document.querySelector('#blcok'); //querySelectorAll vs querySelector . # what ? 차이점 찾기
// light box 배경
function lightbox_open(num){
lightbox.setAttribute('class','active'); //왜 안돼지 . .. . . . // 왜 에러가 나나.
block.setAttribute('class','active');
change_img(num);
indicator[num-1].focus();
}
//라이트 박스 종료
function lightbox_close(){
lightbox.removeAttribute('class');
block.removeAttribute('class');
}
//이미지 전환 표시 함수
function change_img(val){
var imgs = document.querySelectorAll('figure > img '); // !!!!!
for(var i=0 ; i<imgs.length; i++){
imgs[i].removeAttribute('class');
}
console.log(val);
imgs[val-1].setAttribute('class','active');
}
lightbox.setAttribute('class','active'); //왜 안돼지 . .. . . . // 왜 에러가 나나.
setAttribute vs getElementById 왜 인식을 못할까 ?
프로그래머스
Lv2. 소수 구하
- 뭔가 조잡한? 첫작품알고리즘.ㅋㅋ
```js
function numberOfPrime(n) {var result = 0;var not=0;
// 함수를 완성하세요.
for( var i=2; i<=n;i++){
for( var j=2 ; j<=i; j++) {
if(i%j == 0 && i!=j) {
not +=1;
console.log("it's me :" + i);
break;
}
}
}
console.log(not);
console.log("upto");
result = (n-1) - not ;
console.log("input : " + n);
return result ;
}
// 아래는 테스트로 출력해 보기 위한 코드입니다.
console.log( numberOfPrime(5) )
Lv2. 미니멈 곱 구하기
- 나 분명히 ㅡㄴ데 . ㅗ류나네 ? i dont know , why my code is not functional, i think that web service happening wrong.
```js
function getMinSum(A,B){var answer = 0;A.sort();B.reverse();
console.log(A.length);
for(var i =0 ; i<A.length; i++){answer += A\[i\]\*B\[i\]; //console.log\(cross\); //answer += cross;}
return answer ;
}
//아래 코드는 테스트를 위한 출력 코드 입니다.
var tA = [1,2],
tB = [3,4];
console.log(getMinSum(tA,tB));
18.04.11. 수
- js project book , # Calendar
아직 많이 부족함.
1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calendar</title>
<style>
#calendar_wrap{
background: #333;
width: 350px;
text-align: center;
}
caption{
font-size: 1.5em;
color: orange; padding: 10px;
}
table,th,td{
color: white;
border: 1px solid #666;
border-collapse: collapse;
}
th,td{ width: 30px; padding: 10px;}
th:first-child, td:first-child{ color: red;}
#prev, #next{
display: inline-block;
text-decoration: none;
color: white; padding: 5px;
}
</style>
</head>
<body>
<div id="calendar_wrap">
<table id="calendar">
<caption>
<span class="year"></span>년
<span class="month"></span>월
</caption>
<tr>
<th>일</th><th>월</th><th>화</th><th>수</th>
<th>목</th><th>금</th><th>토</th>
</tr>
<tr>
<td> </td><td> </td>
<td> </td><td> </td>
<td> </td><td> </td>
<td> </td>
</tr>
<tr>
<td> </td> // nbsp can be used
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<a href="#" id="prev">이전달</a>
<a href="#" id="next">다음달</a>
</div>
<script>
// calendar 함수
// calendar 함수
function calendar(new_year, new_month){
// 특정 年月을 시작일부터 조회(year, month, date)
var d = new Date(new_year, new_month-1, 1),
// 월별 일수 구하기
d_length = 32 - new Date(new_year, new_month-1, 32).getDate(),
year = d.getFullYear(),
month = d.getMonth(),
date = d.getDate(),
day = d.getDay();
// caption 영역 날짜 표시 객체
var caption_year = document.querySelector('.year'),
caption_month = document.querySelector('.month');
var start_day = document.querySelectorAll('tr td');
// 테이블 초기화
for(var i = 0; i < start_day.length; i++){
start_day[i].innerHTML = ' ';
}
// 한달치 날짜를 테이블에 시작 요일부터 순서대로 표시
for(var i = day; i < day + d_length; i++){
start_day[i].innerHTML = date;
date++;
}
// caption 날짜 표시
caption_year.innerHTML = year;
caption_month.innerHTML = month + 1;
}
(function(){
var prev = document.getElementById('prev'),
next = document.getElementById('next'),
year = new Date().getFullYear(),
month = new Date().getMonth() + 1;
//개인 추가 부분 날짜 누르면 뭔가 클릭되는? 그런거. 추가하고픈데
//var select = document.querySelectorAll('tr td');
calendar(year, month);
prev.onclick = function(){
calendar(year, --month);
console.log(month);
};
next.onclick = function(){
calendar(year, ++month);
console.log(month);
};
})();
</script>
</body>
</html>
** 신기한게js기준 코드 50줄 넘어가면 좀부담을 느낌
- 프로그래머스
- sort
function sortNumber(a,b){
return a-b;
}
function sortNumber_reverse(a,b){
return b-a;
}
function getMinSum(A,B){
var answer = 0;
var AA = A.sort(sortNumber);
console.log(AA);
var BB = B.sort(sortNumber_reverse);
console.log(BB);
console.log(AA.length);
for(var i =0 ; i<AA.length; i++){
answer += AA[i]*BB[i];
//console.log(cross);
//answer += cross;
}
return answer ;
}
//아래 코드는 테스트를 위한 출력 코드 입니다.
var tA = [1,2],
tB = [3,4];
console.log(getMinSum(tA,tB));
sort 는 알파벳을 근거로 배열로 세팅하기때문에,
숫자를 나열하는데 있어서는 맞지 않다\(그러나 콘솔에서는 잘 인식되고 동작은 하지만\)
신택스 에러라고 봄.
이런부분에 대해서 유념있게 볼필요가 있따. ES6 의 개선점이라고 볼수있는데,
아직은 와닿지는 않는다.
- codepen
#코드펜 스탑워치 만들기
<!DOCTYPE html>
<html>
<head>
STOP Watch
</head>
<body>
<h1>Stopwatch</h1>
<div id="timer">00:00</div>
<button id="start">Start</button>
<button id="reset">Reset</button>
<button id="stop">stop</button>
<script>
var watch = (function(){
var timer = document.getElementById("timer"); //변수 저장
var stop = document.getElementById("stop"); // 변수저장
var reset = document.getElementById("reset"); // 변수저장
var time = "00:00" //초기화면
var seconds = 0;
var minutes = 0;
var t; // 타임아웃 되는 기능의 js 내장메소드를 사용하기 위한 변수
timer.textContent = time; //textContent : js 내장매소드
function buildTimer () {
seconds++;
if (seconds >= 60) { //초가 만약 60이 넘어가면, 분을 1 올려준다.
seconds = 0;
minutes++;
if (minutes >= 60) { // 분이 60 넘어가면 리셋된다
minutes = 0;
seconds = 0;
}
}
timer.textContent = (minutes < 10 ? "0" + minutes.toString(): minutes) + ":" + (seconds < 10 ? "0" + seconds.toString(): seconds);
} //위 문장은 좀...
function stopTimer () {
stop.addEventListener("click", function(){ //addEventListener("클릭동작", "함수 ")
clearTimeout(t); // js 내장 메소드임.
})
}
function startTimer () {
start.addEventListener("click", function(){
clearTimeout(t);
t = setInterval(buildTimer,100); //js 내장 메소드 setinterval .
});
}
function resetTimer () {
reset.addEventListener("click", function(){
timer.textContent = time;
seconds = 0; minutes = 0;
});
}
//최종 리턴값
return {
start: startTimer(), //html 에서 받아온 클리값(id) 와 기능 함수 매칭
stop: stopTimer(),
reset: resetTimer()
};
})()
</script>
</body>
</html>
<!-- 결국엔 내장 메소드를 충분히 검색해보고 사용할수있는 방법들을 고안한 뒤에 개발 시작이네
1초 단위 올라가는거말고 밀리세크로 올라가게 만들고싶다면?? setInterval 에서 숫자만조정해주면 됨.
- 프로그래머스
function is_pair(s){
var result = true;
var f = 0;
s.split('');
for(var i=0;i<s.length;i++){
if(s[i]==='('){
f+=1;
// console.log(f);
} else if(s[i]===')'){
f-=1;
// console.log(f)
}
if(f<0) { return false;}
else { return result;}
//else if { return 'true' ;}
}
}
// 아래는 테스트로 출력해 보기 위한 코드입니다.
console.log( is_pair("(hello)()(") )
console.log( is_pair(")(") )
거의 다온거같은데 .ㅠㅠㅠ 일단 중지 ......
18.04.12. 금
계산기 복습 ``` <!DOCTYPE html>
Calculator_SeyoungBaik