[Javascript]Javascript

chaewon·2023년 4월 6일

1. 대화상자

1) prompt

사용자에 대한 값을 입력 받을 수 있다.

prompt('값을 넣으세요');
//''안에 값을 입력하면된다.

const num = prompt('값을 넣으세요');
//변수를 선언하여서 prompt에 입력된 값을 저장할 수 있다.

const num = parseInt(prompt('값을 넣으세요'));
//prompt에 저장되는 값은 문자열로 저장되기에 'parseInt'를 이용해서 숫자로 변환할 수 있다.

console.log(num);
//값이 들어갔는지 확인이 가능하다.

typeOf(num)
//typeOf로 변수 number의 자료형을 볼 수 있다.

2) alert

경고창

alert('경고입니다.');
//사용자에게 경고창을 보여줄 경우에 사용

3) confirm

사용자에게 '확인', '취소'를 받을 수 있다.

confirm('확인하시겠습니까?')
//bloomearn로 값을 받을 수 있다
// 확인 -> true, 취소 -> false

2. 태그 선택

document.querySelectorAll('선택자')
// 선택된 모든 것 (2개 이상) class를 부여해서 선택해도 된다.
document.querySelector('선택자')
// 선택하고 싶은 것 id를 부여해서 선택해도 된다.

document.querySelector('선택자').addEventListener('이벤트 이름', 리스너함수)
//어떤 동작을 실행하고 연이어 실행되는 함수를 콜백함수(리스너함수)라고 한다.
//함수명을 선언하지 않았을 경우에는 익명함수라고도 부를 수 있다.

태그를 입력하면 된다. id값이나 class값을 이용해서 넣어줄 수 있다.

input이라는 태그를 잡고 click이라는 이벤트를 추가해주고 함수에 클릭하고 나서의 실행되는 문장을 넣으면된다.

document.querySelector('button').addEventListener('click', function(){
    console.log('클릭했을 때마다 실행됩니다.');
})
//이 방식을 화살표 함수 또는 변수로 선언할 수 있다.

document.querySelector('button').addEventListener('click', () => {
    console.log('클릭했을 때마다 실행됩니다.');
})
//화살표 함수로 선언

const onClick = () => {
	console.log('클릭했을 때마다 실행됩니다.');
}
document.querySelector('button').addEventListener('click', onClick);
//변수 선언
//여기서 'onClick' 함수를 만들어 실행하였는데 이걸 '리스너함수' 또는 '콜백함수'라고 한다.

화살표 함수를 사용했을 때

변수를 선언해서 사용했을 때

3. 사용되는 것들

🛠 textContent

const $span = document.querySelector('span');

$span.textContent = '글자'
//선언한 부분에 텍스트를 입력할 수 있다. (button, div, span 등..)

문자열이다.

🛠 value

const $input = document.querySelector('input');

$input.value = '글자'
//input의 경우에는 value로 변경한다. 무언가를 입력하는 애들은 value다. (select, textarea 등..)

문자열이다.

🛠 focus()

const $input = document.querySelector('input');

$input.focus();
//선택한 input에 포커스가 간다.

🛠 Math.random()

Math.random()
//0 <= Math.random() < 1까지 표현됨 (0 ~ 0.9999...까지 표현)

자동으로 랜덤하게 0이상 1미만 으로 표현된다. 0 ~ 0.9999... 암호화적으로는 완전한 무작위가 아니다. 보안(비밀번호)을 위한 window.crypto.getRandomValues()함수가 따로 있다.

Math.random() * 9
// 0 <= Math.random() * 9 < 9 까지 표현하게 된다. ( 0 ~ 8까지 표현)
Math.random() * 9 + 1
// 1 <= Math.random() * 9 + 1 < 10 까지 표현하게 된다. ( 1 ~ 9까지 표현)

0 ~ 8, 1 ~ 9까지 자유롭게 표현할 수 있다.

🛠 Math.floor() , ceil(), round()

Math.floor(Math.random());
//소수점 이하를 버린다.
Math.ceil(Math.random());
//소수점 이하를 올림한다.
Math.round(Math.random());
//소수점 이하를 반올림한다.

0부터 0.999.. 이기에 Math.floor()의 경우에는 '0'이 출력될거고 Math.ceil()의 경우에는 '1'이 계속 출력 된다. Math.round()의 경우에는 5이상일 경우에 반올림 후 '1'출력 5미만일 경우 '0'이 출력된다.

Math.floor(Math.random() * 9 + 1);
//소수점 이하를 버린다.
Math.ceil(Math.random() * 9 + 1);
//소수점 이하를 올림한다.
Math.round(Math.random() * 9 + 1);
//소수점 이하를 반올림한다.

계산식을 추가하여 정수로 랜덤하게 출력할 수 있다.

🛠 join()

let fruit = ['딸기', '바나나', '수박']
let furit2 = fruit.join();
console.log(furit2);
// 딸기,바나나,수박
let furit3 = fruit.join('');
console.log(furit3);
// 딸기바나나수박
let furit4 = fruit.join(' > ');
console.log(furit4);
//딸기 > 바나나 > 수박

join()으로 사용 되었을 때 ,로 나누어 지며 join('')로 사용되었을 때 배열이 이어진다. 그리고 join(' 여러가지 구분법 ')이 들어갔을 때 구분에 맞게 출력이된다.

4. 고차함수(higher order function)

함수의 중복을 제거하기 위해 사용하며 함수가 함수를 return하는 것을 고차함수라고 한다.

const order = (a) => {
 
  return () => {
	tensole.log(a);
  }
}

// '{}'와 'return' 만나면 제거하여 길이를 줄일 수 있다.

const order = (a) => () => {
	console.log(a);
}

const inner1 = order('hello');
const inner2 = order('test');
const inner3 = order();

5. 중복 if문, 길이 줄이기

if문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다.

분기점에서 짧은 절차부터 실행하게 if문을 작성한다. if(true) -> if(!true)

짧은 절차가 끝나면 return(함수 내부으 ㅣ경우)이나 break(for 문 내부의 경우)로 중단한다.

else 를 제거한다(이때 중첩 하나가 제거된다.)

// 1)
function chaewon() {
	let result = '';
  	if (a) {
		if (!b) {
          result = 'c';
        }
  	} else {
    	result = 'a';
    }
	result += 'b'; // 공통된 절차를 각 분기점에 넣는 것들
  	return result; // 공통된 절차를 각 분기점에 넣는 것들

}

// 2)
function chaewon() {
	let result = '';
  	if (a) {
		if (!b) {
          result = 'c';
        }
    	result += 'b'; //분기점에 넣음
  		return result; //분기점에 넣음
  	} else {
    	result = 'a';
      	result += 'b'; //분기점에 넣음
  		return result; //분기점에 넣음
    }
}

// 3)
function chaewon() {
	let result = '';
  	if (!a) { // 2) 올리고나서 '!'를 넣어서 true와 flase를 반대로 바꿔주고
      	result = 'a'; // 1) 짧은 것들을 위로 올린다.
      	result += 'b'; 
  		return result; // 3) return 또는 break를 넣는데 기존에 있기에 넘어간다.
  	} else {
    	if (!b) {
          result = 'c';
        }
    	result += 'b'; 
  		return result; 
    }
}

// 4)
function chaewon() {
	let result = '';
  	if (!a) {
      	result = 'a';
      	result += 'b'; 
  		return result; 
  	} // 이 자리에 있던 else를 제거해주면 끝
  	if (!b) {
    	result = 'c';
  	}
  	result += 'b'; 
  	return result; 
}

6. form

기본적인 HTML 규칙(웹표준)을 맞추기 위해서 사용 button이 있는 input의 경우에는 form을 묶어서 사용하는게 좋다.

<form id="form"> <!-- 기본적으로 form으로 묶어야 한다. -->
	<input type="input" id="input">
    <button>확인</button>
</form>

submit

const $form = document.querySelector('#form');

//form안의 button을 누르면 'submit'호출(이벤트가 발생)이 된다.
$form.addEventListener('submit', () => { 
	console.log('서브밋');
})

기존 화면에서 확인 버튼을 클릭 했을 때

URL 끝에 '?'가 붙으며 '서브밋'이라는 글자가 깜박거리며 잠깐 보여지며 사라진다.
form의 기본 동작으로 즉 'submit' form안의 확인 버튼을 눌렀을 때 새로고침한다.
form의 기본 동작으로 서버에 전달하고 돌려받는 기본적인 동작이다.

form의 기본 동작 막기

form의 기본 동작인 새로고침은 기존에 변수에 넣어 두었던 값들을 날려버리기 때문에 이 기본 동작을 변경할 수 없지만 막을 수 있다.

const $form = document.querySelector('#form');

//form안의 button을 누르면 'submit'호출(이벤트가 발생)이 된다.
$form.addEventListener('submit', (event) => { //매개변수 추가
  	event.preventDefault(); //기본동작을 막을 수 있다.
	console.log('서브밋');
})