Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- CSS3
- db
- 페이징
- pagenation
- 자바파일업로드
- PAGING
- html5
- SQL
- mybatis
- select
- poi엑셀
- insert
- 자바타입
- 자바
- 자바스크립트
- JSTL
- jsp
- 파일업로드
- poi
- jquery
- MariaDB
- 스프링
- crud
- mysql
- 스프링파일업로드
- 게시판구현
- ORDERBY
- Java
- spring
- 퍼블리싱
Archives
- Today
- Total
째의 개발 기록방
내가 보려고 기록하는 javascript 기초 본문
비교연산자
=== 는 이항연산자
1===1;
를 consol창에 출력해보면 true라는 값이나온다.
왼쪽에 1과 오른쪽의1이 같다는 말.
1===2;
를 consol창에 출력해보면 false라는 값이나온다.
왼쪽에 1과 오른쪽의2는 다르니까.
불리언(Boolean)
또 다른 비교 연산자로 부등호가 포함된다.
<,>
script에서는 그냥 꺽쇠로 표현해도 되지만 html에서는 < , > 라는 기호로쓴다.
* 태그와 혼란을 줄 수 있기 때문에 기호로 쓰는것을 추천.
1+1 > 1+2
이것의 값은 false다.
리팩토링 - this 사용하기
코드의 비효율적인 부분을 찾아내서 고쳐보는 리팩토링 작업 입니다.
if(document.querySelector('p').value === 'love') {
document.querySelector('body').style.backgroundColor = 'pink';
document.querySelector('p').style.color = 'white';
document.querySelector('p').value = 'loveday';
}
else {
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('p').style.color = 'white';
document.querySelector('p').value = 'day';
}
id는 하나의 태그에만 적용될 수 있으므로 새롭게 만들어진 엘리먼트에는 새로운 id값을 적용해야합니다.
자기 자신= this라는 키워드가 있습니다.
document.querySelector('p') 대신 this를 써도 되는 것이죠.
if(this.value === 'love') {
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
this.value = 'loveday';
}
else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
this.value = 'day';
}
리팩토링 - 중복 제거하기
리팩토링 해 볼 부분은 바로 document.querySelector('body') 입니다.
4번이나 등장하는 이 부분을 변수로 지정하여 중복제거 해봤습니다.
var = body = document.querySelector('body');
if(this.value === 'love') {
body.style.backgroundColor = 'black';
body.style.color = 'white';
this.value = 'loveday';
}
else {
body.style.backgroundColor = 'white';
body.style.color = 'black';
this.value = 'day';
}
'Front End > JavaScript, jQuery' 카테고리의 다른 글
[Javascript/jQuery] GET/POST 방식 | AJAX 란? (0) | 2021.11.25 |
---|---|
JavaScript - 변수 명 규칙과 함수, 주석 처리 방법 (0) | 2021.04.09 |
javascript 기초 / querySelector (0) | 2021.03.31 |