자바스크립트를 활용해보자 (1)
[코드 목록]
1. 조건문 ( if, else if, else )
2. 날짜 계산하기( 방금전, ~분전, ~시간전, ~일전, ~년전 )
3. 파이썬 range 기능 구현하기
4. html안에 다른 html 불러오기
5. 텍스트, 파일 입력시 실시간 화면 출력하기
6. 확산 연산자
[코드]
1. 조건문 ( if, else if, else )
// condition1 을 True면 code1 가 실행합니다.
if ( condition1 ) {
code1
}
// condition1 True면 code1 을 실행하고,
// False면 code2 를 실행합니다.
if ( condition1 ) {
code1
} else {
code2
}
// condition1을 True면 code1 실행하고, condition2을 True면 code2 실행합니다.
if ( condition1 ) {
code1
} else if ( condition2 ) {
code2
}
// condition1을 True면 code1 실행하고, condition2을 True면 code2 실행하고, 둘 다 False code3 실행합니다.
if ( condition1 ) {
code1
} else if ( condition2 ) {
code2
} else {
code3
}
2. 날짜 계산하기( 방금전, ~분전, ~시간전, ~일전, ~년전 )
function betweenTime(value) {
const nowTime = new Date();
const valueTime = new Date(value);
// 현재 시간이랑 계산할 시간 차이 구하기
const timeResult = Math.floor((nowTime.getTime() - valueTime.getTime()) / 1000 / 60);
// 계산할 시간이 현재 시간보다 1분 이상 차이가 안나면 '방금전' 출력
if (timeResult < 1) return '방금전';
// 계산할 시간이 현재 시간보다 60분 이상 차이가 안나면 분단위 출력
if (timeResult < 60) {
return `${timeResult}분전`;
}
// 계산할 시간이 현재 시간보다 24시간 이상 차이가 안나면 시간단위 출력
const hourResult = Math.floor(timeResult / 60);
if (hourResult < 24) {
return `${hourResult}시간전`;
}
// 계산할 시간이 현재 시간보다 365일 이상 차이가 안나면 일단위 출력
const dayResult = Math.floor(timeResult / 60 / 24);
if (dayResult < 365) {
return `${dayResult}일전`;
}
// 위 모든 조건문에 해당하지 않을시 년단위 출력
return `${Math.floor(dayResult / 365)}년전`;
}
3. 파이썬 range 기능 구현하기
function range(start, end) {
// start 랑 end가 같아질때까지 start에 1을 더하여 리스트를 리턴
if(start === end) return [start]; // === : 조건문시 값 뿐만 아니라 형식(type)도 확인하여 실행
return [start,...range(start + 1, end)]; // ... : 확산 연산자
}
4. html안에 다른 html 불러오기
<body>
<div data-include-path="footer.html"></div>
<script>
window.addEventListener('load', function() {
var allElements = document.getElementsByTagName('*');
Array.prototype.forEach.call(allElements, function(el) {
var includePath = el.dataset.includePath;
if (includePath) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
el.outerHTML = this.responseText;
}
};
xhttp.open('GET', includePath, true);
xhttp.send();
}
});
});
</script>
</body>출처 : https://kyung-a.tistory.com/18
5. 텍스트, 파일 입력시 실시간 화면 출력하기
텍스트 형식
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 입력란에 입력을 하면 입력내용에 내용이 출력
// 1. #data 공간에서 keyup이라는 이벤트가 발생했을 때
$("#data").keyup(function(){
// 2. #out 공간에 #data의 내용이 출력된다.
$("#out").text($("#data").val());
// #out의 위치에 text로 데이터를 받는다.(setter)
// 들어가는 데이터는 #data의 값(.val())이다. (getter)
// 메서드 괄호 안에 아무것도 없으면 getter, 파라미터가 있으면 setter이다.
});
});
</script>
<body>
<form>
키보드로 입력한 내용이 아래에 출력(입력값을 가져와서 입력내용에 전달한다.)<br/>
입력 : <input id="data"><br/>
입력 내용:<div id="out">출력되는 곳</div>
</form>
</body>
이미지 파일
// jquery 사용
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// 이미지 미리보기
// input 태그 중 name=original_image 가져오기
let fileTag = document.querySelector("input[name=original_image]");
// fileTag에 변화가 있을 경우 실행될 함수
fileTag.onchange = function() {
// id = PreviewImg 가져오기
let imgTag = document.querySelector("#PreviewImg");
// 파일 유무 확인
if(fileTag.files.length > 0) {
// 파일을 선택한 경우
// 미리보기 생성 == 이미지 태그 src에 데이터(파일태그에서 선택한 파일) 보여주기
let reader = new FileReader();
// reader 읽어들이는 작업(onload)를 끝냈을 떄 함수 실행, 읽어온 데이터를 함수의 매개변수 파라미터로 전달
reader.onload = function(data) {
imgTag.src = data.target.result;
}
reader.readAsDataURL(fileTag.files[0]);
}
else {
// 취소 버튼을 누를 경우
imgTag.src = "/static/img/default.png"
}
</script>
<body>
<!-- 이미지 파일 입력 iuput태그 -->
<input type="file" name="original_image" required="required" value="image" />
<!-- 미리보기 이미지 출력 img태그 -->
<img id="PreviewImg">
</body>
6. 확산 연산자
확산연산자란?
let arr = [1, 2, 3, 4, 5];
console.log(...arr);
우선 arr이라는 배열 안에는 1~5까지의 숫자가 들어있습니다. 그리고 확산연사자를 통해서 콘솔에 값을 확인하면 어떻게 될까요? ...arr은 1 2 3 4 5라는 안 쪽의 값을 리턴합니다. 그리고 [...arr]처럼 배열리터럴을 하고 확산연산자를 쓰면 arr이라는 배열과 값이 같은 배열을 만들어 냅니다. 기본적으로 이 사실을 알면 쉽게 활용할 수 있습니다.
배열에서의 활용
let arr = [1, 2, 3, 4, 5];
let arr2 = [...arr] //arr2의 값은 [1, 2, 3, 4, 5]
확산연산자를 활용하면 예시처럼 쉽게 값을 복사할 수 있습니다. 또 배열을 확장하는데도 아주 편하게 사용할 수 있습니다.
let arr = [1, 2, 3, 4, 5]; let arr2 = [0, ...arr, 6, 7];arr이라는 배열에 몇 개의 숫자를 더해서 arr2라는 배열을 만들어냈습니다. 당연히 arr2의 값은 [0, 1, 2, 3, 4, 5, 6, 7] 입니다. 확산연산자에는 또 하나의 기능이 있습니다. 바로 나머지 값을 할당받는 것입니다.
배열에서 나머지 요소 받기
let arr = [1, 2, 3, 4, 5];
let [arr2, arr3, ...arr4] = arr;
배열리터럴을 할당문 왼쪽에 사용하는 것은 구조분해에서 본 형태죠? arr이라는 배열에 있는 값을 arr2와 arr3, arr4에 할당하고 있습니다. arr4 앞에는 확산연산자가 있다는 것을 주목해주세요. 이처럼 확산연산자를 통해서 나머지 요소를 다 할당받을 수 있습니다. 예시에서 arr2는 1, arr3은 2 그리고 arr4는 [3, 4, 5]라는 값을 가지게 됩니다.
나머지 값을 받으실 땐 확산연산자가 붙은 변수는 항상 맨뒤에 있어야 합니다.
나머지 값을 받는 요소가 가운데나 첫번째에 위치한다면 에러를 일으킵니다. 알아두세요.
함수에서의 활용
let arr = [1, 2, 3, 4, 5];
function sum(a, b, c, d, e){
return a + b + c + d + e;
};
sum(...arr); // 15
sum이라는 함수에는 매개변수가 5개 필요하고, 그 5개의 값을 더한 값을 반환합니다. arr이라는 배열안의 값을 확산연산자를 통해서 함수에 전달했습니다. 나머지 요소들을 받는 확산연산자의 기능을 함수에서도 사용할 수 있습니다.
함수에서 나머지 요소 활용하기
function f(x, ...y) {
// y 는 배열입니다.
console.log(y[0], y[1]);
return x * y.length;
};
console.log(f(3, "hello", true)); //결과값은 6
매개변수에 확산연산자를 사용했습니다. 이때도 주의해야할 건 확산연산자를 쓴 매개변수는 제일 뒤에 위치해야한다는 것입니다. 위치가 맨 뒤가 아닐 시 에러가 납니다. 그리고 매개변수에서 나머지값을 받은 y는 배열처리 된다는 것을 알아주세요.
출처 : https://justmakeyourself.tistory.com/entry/javascript-spread-operator
'Sparta Coding Club > Today I Learned [TIL]' 카테고리의 다른 글
| [TIL] #DAY - 061 - CSS 정리 하는법 (Front End) (0) | 2022.12.01 |
|---|---|
| [TIL] #DAY - 060 - 파이썬 코딩 컨벤션 (Python coding convention) (0) | 2022.12.01 |
| [TIL] #DAY - 058 - forEach를 이용하여 div 추가 (javascript, Django) (0) | 2022.11.25 |
| [TIL] #DAY - 057 - ImageField 저장 시 이름 변경(python, Django) (1) | 2022.11.24 |