"JavaScript related"에 해당되는 글 - 35건
- 2023.01.23 JavaScript Date
- 2023.01.23 JavaScript Arrow Function
- 2023.01.23 JavaScript Callback Function
- 2023.01.22 JavaScript Progress Scroll Bar
- 2023.01.22 JavaScript Basic
- 2023.01.22 JavaScript preventDefault
- 2023.01.22 JavaScript addEventListener Basic
- 2023.01.21 JavaScript setInterval
- 2023.01.21 JavaScript Style Control
- 2023.01.21 JavaScript Number vs parseInt
Post
Date
(1) Date()와 new Date()의 차이
JavaScript
console.log(Date()); //Mon Jan 23 2023 17:54:53 GMT+0900 (Korean Standard Time)
console.log(typeof Date()); // string
console.log(new Date()); // 2023-01-23T09:04:57.705Z
console.log(typeof new Date()); // object
Date()함수는 인수를 무시하며 현재 날짜 및 시간을 나타내는 문자열을 반환한다.
반면 new Date()는 현재 날짜와 시간을 나타내는 Date 객체를 생성한다.
(2) new Date()의 인수 형태
console.log(new Date()); // 2023-01-23T09:09:47.762Z
console.log(new Date("2023-01-23")); // 2023-01-23T00:00:00.000Z
console.log(new Date(2023, 01, 23)); // 2023-02-22T15:00:00.000Z
console.log(new Date(2023, 01, 23, 18, 09, 00)); // 2023-02-23T09:09:00.000Z
// 주의!!! 월 단위의 경우 0부터 시작
(3) new Date()에서 추출가능한 시간적 정보들
const now = new Date();
console.log(new Date()); // 2023-01-23T09:42:11.844Z
console.log(now.getFullYear()); // 2023
console.log(now.getYear()); // 123 ※밀레니엄 문제. FullYear 사용을 권장
console.log(now.getMonth()); // 0
console.log(now.getDate()); // 23
console.log(now.getDay()); // 1 ※일요일(0)~토요일(6)
console.log(now.getHours()); // 18
console.log(now.getMinutes()); // 42
console.log(now.getSeconds()); // 11
(4) getTime
console.log(now.getTime(2023, 00, 23)); // 1674468012999
1970년 1월 1일 UTC를 기준으로 밀리세컨드 단위로 환산한 시간을 반환한다.
'JavaScript related' 카테고리의 다른 글
| JavaScript Sorting (0) | 2023.01.25 |
|---|---|
| JavaScript Append Items (0) | 2023.01.23 |
| JavaScript Arrow Function (0) | 2023.01.23 |
| JavaScript Callback Function (0) | 2023.01.23 |
| JavaScript Progress Scroll Bar (0) | 2023.01.22 |
Post
화살표 함수는 기존 함수를 좀 더 가볍게 할 수 있다.
매개변수가 부재한 함수
function add() {
return 5 + 5;
}
console.log(add()); // 10
화살표 함수
const add = () => {
return 5 + 5;
};
console.log(add()); // 10
화살표 함수 축약
const add = () => 5 + 5;
console.log(add()); // 10
함수 내부의 내용에 반환값(return)만 존재한다면, 코드블록인 중괄호{}와 return도 생략가능
매개변수가 2개 있는 함수
function add(num1, num2) {
return num1 + num2;
}
console.log(add(3, 4)); // 7
화살표 함수
const add = (num1, num2) => {
return num1 + num2;
};
console.log(add(3, 4)); // 7
화살표 함수 축약
const add = (num1, num2) => num1 + num2;
console.log(add(3, 4)); // 7
마찬가지로 함수 내부의 내용에 반환값(return)만 존재했으므로, 코드블록인 중괄호{}와 return 생략가능
매개변수가 1개만 있는 함수
function add(num) {
return num + 6;
}
console.log(add(3)); // 9
화살표 함수
const add = (num) => {
return num + 6;
};
console.log(add(3)); // 9
화살표 함수 축약
const add = (num) => num + 6;
console.log(add(3)); // 9
물론 콜백함수로서도 활용가능
function callBackTestFunc(callback) {
setTimeout(callback, 1000);
console.log("Hello");
}
callBackTestFunc(function () {
console.log("waited 1 second");
});
// Hello
// waited 1 second
화살표 함수 버전
function callBackTestFunc(callback) {
setTimeout(callback, 1000);
console.log("Hello");
}
callBackTestFunc(() => {
console.log("waited 1 second");
});
// Hello
// waited 1 second
화살표 함수 역시 어엿한 함수이기에 콜백 함수로서도 얼마든지 쓰일 수 있다.
'JavaScript related' 카테고리의 다른 글
| JavaScript Append Items (0) | 2023.01.23 |
|---|---|
| JavaScript Date (0) | 2023.01.23 |
| JavaScript Callback Function (0) | 2023.01.23 |
| JavaScript Progress Scroll Bar (0) | 2023.01.22 |
| JavaScript Basic (0) | 2023.01.22 |
Post
콜백함수(Callback Function)
콜백은 간단히 말하면 함수 안에서 실행하는 또 다른 함수 이다. 또 다른 함수를 만들 때 인풋(parameters)을 함수로 받아서 사용할 수 있는데, 이 때 인자로 사용되는 함수를 말한다. 즉, 파라미터로 변수가 아닌 함수를 전달하는 것을 말하며, 또한 함수이름 없이 익명으로도 전달 가능한 함수(익명함수, Anonymous function)를 일컫는다.
JavaScript
function callBackTestFunc(callback) {
setTimeout(callback, 1000);
console.log("Hello");
}
callBackTestFunc(() => {
console.log("waited 1 second");
});
// Hello
// waited 1 second
'JavaScript related' 카테고리의 다른 글
| JavaScript Date (0) | 2023.01.23 |
|---|---|
| JavaScript Arrow Function (0) | 2023.01.23 |
| JavaScript Progress Scroll Bar (0) | 2023.01.22 |
| JavaScript Basic (0) | 2023.01.22 |
| JavaScript preventDefault (0) | 2023.01.22 |
Post
HTML
<div class="header-bar">
<div class="progress-bar" id="myBar"></div>
</div>
SCSS
body {
height: 4000px;
}
.header-bar {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
}
.progress-bar {
height: 2px;
background: black;
width: 0%;
}
JavaScript
window.onscroll = function () {
myFunction();
};
function myFunction() {
let winScroll = document.body.scrollTop || document.documentElement.scrollTop;
let height =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
let scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
'JavaScript related' 카테고리의 다른 글
| JavaScript Arrow Function (0) | 2023.01.23 |
|---|---|
| JavaScript Callback Function (0) | 2023.01.23 |
| JavaScript Basic (0) | 2023.01.22 |
| JavaScript preventDefault (0) | 2023.01.22 |
| JavaScript addEventListener Basic (0) | 2023.01.22 |
Post
배열(Array)
Javascript
const animals = ["lion", "tiger", "rabbit"];
const myAnimals = animals;
animals.push("dog"); //animals 배열 끝에 "dog"를 추가
animals.pop(); //animals 배열 끝의 요소를 제거
console.log(typeof animals); //animals 배열의 타입을 콘솔 로그에 표시
console.log(myAnimals === animals); //myAnimals와 animals가 동일한지 콘솔 로그 표시
const total = animals.length; //animals 배열의 길이를 total이라고 선언
for (let i = 0; i < total; i++) {
console.log(animals[i]);
} //콘솔 로그에 animals 배열의 요소를 전부 표시
Math.
| Math.min() | 인수로 전달받은 값 중에서 가장 작은 수를 반환. 인수가 전달되지 않으면 Infinity를 반환하며, 인수 중에 비교할 수 없는 값이 포함되어 있으면 NaN을 반환 |
| Math.max() | 인수로 전달받은 값 중에서 가장 큰 수를 반환. 인수가 전달되지 않으면 Infinity를 반환하며, 인수 중에 비교할 수 없는 값이 포함되어 있으면 NaN을 반환 |
| Math.random() | 0보다 크거나 같고 1보다 작은 무작위 숫자를 반환 |
| Math.round() | 인수로 전달받은 값을 소수점 첫 번째 자리에서 반올림하여 그 결과값을 반환 |
| Math.floor() | 인수로 전달받은 값과 같거나 작은 수 중에서 가장 큰 정수를 반환 |
| Math.ceil() | 인수로 전달받은 값과 같거나 큰 수 중에서 가장 작은 정수를 반환 |
| Math.sin() | 인수로 전달받은 값의 사인 함수값을 반환 |
| Math.abs() | 인수로 전달받은 값의 절대값을 반환 |
| Math.sqrt() | 인수로 전달받은 값의 제곱근을 반환 |
| Math.power(x,y) | 인수로 전달받은 값(x)의 y승을 반환 |
| Math.trunc() | 인수로 전달받은 값의 모든 소수 부분을 삭제하고 정수 부분만을 반환 |
'JavaScript related' 카테고리의 다른 글
| JavaScript Callback Function (0) | 2023.01.23 |
|---|---|
| JavaScript Progress Scroll Bar (0) | 2023.01.22 |
| JavaScript preventDefault (0) | 2023.01.22 |
| JavaScript addEventListener Basic (0) | 2023.01.22 |
| JavaScript setInterval (0) | 2023.01.21 |
Post
a태그를 상대로 addEventListener("click",)을 활약시키는 방법
HTML
<div class="test">
<p class="testtext">테스트01</p>
<p class="testtext">테스트02</p>
<p class="testtext">테스트03</p>
<p class="testtext">테스트04</p>
<a href=""><button class="btn">텍스트 변환</button></a>
</div>
JavaScript
const testtext = document.querySelectorAll(".testtext");
const btn = document.querySelector(".btn");
for (let i = 0; i < testtext.length; i++) {
btn.addEventListener("click", function () {
testtext[i].textContent = "자바스크립트로 텍스트 변경함";
});
}
ON BROWSER
해결법① a태그 링크 란에 #를 적는다
<div class="test">
<p class="testtext">테스트01</p>
<p class="testtext">테스트02</p>
<p class="testtext">테스트03</p>
<p class="testtext">테스트04</p>
<a href="#"><button class="btn">텍스트 변환</button></a>
</div>
해결법② 이벤트를 막기위해 매개변수를 설정한 후, 「.preventDefault()」를 추가한다.
html 에서 a 태그나 submit 태그는 고유의 동작이 있다. 페이지를 이동시킨다거나 form 안에 있는 input 등을 전송한다던가 그러한 동작이 있는데 e.preventDefault 는 그 동작을 중단시킨다.
const testtext = document.querySelectorAll(".testtext");
const btn = document.querySelector(".btn");
for (let i = 0; i < testtext.length; i++) {
btn.addEventListener("click", function (e) {
testtext[i].textContent = "자바스크립트로 텍스트 변경함";
e.preventDefault();
});
}
ON BROWSER
'JavaScript related' 카테고리의 다른 글
| JavaScript Progress Scroll Bar (0) | 2023.01.22 |
|---|---|
| JavaScript Basic (0) | 2023.01.22 |
| JavaScript addEventListener Basic (0) | 2023.01.22 |
| JavaScript setInterval (0) | 2023.01.21 |
| JavaScript Style Control (0) | 2023.01.21 |
Post
addEventListener에서 사용가능한 이벤트 목록
| change | 변동이 있을 때 |
| click | 클릭시 |
| focus | 포커스를 얻었을 때 |
| keydown | 키를 눌렀을 때 |
| keyup | 키에서 손을 뗄 때 |
| load | 로드가 완료되었을 때 |
| mousedown | 마우스를 클릭했을 때 |
| mouseover | 마우스가 특정 객체 위로 올려졌을 때 |
| mouseout | 마우스가 특정 객체 밖으로 나갔을 때 |
| mousemove | 마우스가 움직였을 때 |
| mouseup | 마우스에서 손을 뗄 때 |
| select | 옵션 태그 등에서 선택을 했을 때 |
※ addEventListner를 쓸 때, 모바일 환경에서는 마우스를 쓰지 않으므로 "mouseenter" 같은 이벤트가 동작하지 않는다는 점을 유념한다.
'JavaScript related' 카테고리의 다른 글
| JavaScript Basic (0) | 2023.01.22 |
|---|---|
| JavaScript preventDefault (0) | 2023.01.22 |
| JavaScript setInterval (0) | 2023.01.21 |
| JavaScript Style Control (0) | 2023.01.21 |
| JavaScript Number vs parseInt (0) | 2023.01.21 |
Post
setInterval 텍스트 추가
HTML
<div class="test"></div>
<button class="btn">시작하기</button>
JavaScript
const btn = document.querySelector(".btn");
function text() {
document.querySelector(".test").innerText += "안녕!";
}
let textAdd;
let toggle = true;
btn.addEventListener("click", function () {
if (toggle) {
textAdd = setInterval(text, 1000);
toggle = false;
btn.textContent = "멈추기";
} else {
clearInterval(textAdd);
toggle = true;
btn.textContent = "재시작";
}
});
ON BROWSER(버튼 누르기 전)
ON BROWSER(버튼 누른 후)
setInterval 이미지 로테이션
HTML
<div class="test">
<img src="../images/banner/investor1.png" alt="" />
<img src="../images/banner/investor2.png" alt="" />
<img src="../images/banner/investor3.png" alt="" />
<img src="../images/banner/investor4.png" alt="" />
<img src="../images/banner/investor5.png" alt="" />
<img src="../images/banner/investor6.png" alt="" />
<img src="../images/banner/investor7.png" alt="" />
</div>
<button class="btn">시작하기</button>
SCSS
.test {
> img {
position: absolute;
display: none;
}
}
.btn {
position: absolute;
top: 15%;
}
JavaScript
const btn = document.querySelector(".btn");
const images = document.querySelectorAll(".test > img");
function imgRot() {
let j = parseInt(Math.random() * images.length);
for (let i = 0; i < images.length; i++) {
images[i].style.display = "none";
images[j].style.display = "block";
}
}
let toggle = true;
let init;
btn.addEventListener("click", function () {
if (toggle) {
init = setInterval(imgRot, 200);
toggle = false;
btn.textContent = "멈추기";
} else {
clearInterval(init);
toggle = true;
btn.textContent = "재시작";
}
});
ON BROWSER(버튼 누르기 전)
ON BROWSER(버튼 누른 후)
'JavaScript related' 카테고리의 다른 글
| JavaScript preventDefault (0) | 2023.01.22 |
|---|---|
| JavaScript addEventListener Basic (0) | 2023.01.22 |
| JavaScript Style Control (0) | 2023.01.21 |
| JavaScript Number vs parseInt (0) | 2023.01.21 |
| JavaScript Return (0) | 2023.01.21 |
Post
스타일 변경 기초
HTML
<div class="test">
<p class="text">테스트용 텍스트</p>
</div>
JavaScript
const text = document.querySelector(".text");
text.style.color = "red";
ON BROWSER(변경 전)
ON BROWSER(변경 후)
복수 개체의 스타일 일괄 변경
HTML
<div class="test">
<p class="text">테스트용 텍스트</p>
<p class="text">테스트용 텍스트</p>
<p class="text">테스트용 텍스트</p>
<p class="text">테스트용 텍스트</p>
</div>
JavaScript
const text = document.querySelectorAll(".text");
for (let i = 0; i < text.length; i++) {
text[i].style.color = "red";
}
ON BROWSER(변경 전)
ON BROWSER(변경 후)
CSS가 사전설정되어 있는 텍스트를 변경
HTML
<div class="test">
<p class="text01">테스트용 텍스트(css 사전설정 단일)</p>
<p class="text02">테스트용 텍스트(css 사전설정 복수)</p>
</div>
SCSS
.text01 {
font-size: 25px;
}
.text02 {
font-size: 25px;
font-weight: 700;
color: red;
}
JavaScript
const text01 = document.querySelector(".text01");
const text02 = document.querySelector(".text02");
text01.style.fontSize = "40px";
text01.style.fontWeight = "700";
text02.style.color = "blue";
text02.style.backgroundColor = "grey";
ON BROWSER(변경 전)
ON BROWSER(변경 후)
복수 개체의 스타일, 내용 일괄 변경
HTML
<div class="test">
<p class="text">한꺼번에 스타일변경과 동시에 텍스트 내용 변경</p>
<p class="text">한꺼번에 스타일변경과 동시에 텍스트 내용 변경</p>
<p class="text">한꺼번에 스타일변경과 동시에 텍스트 내용 변경</p>
<p class="text">한꺼번에 스타일변경과 동시에 텍스트 내용 변경</p>
<button class="btn">변경하기!</button>
</div>
SCSS
.text {
line-height: 3;
color: red;
}
JavaScript
const text = document.querySelectorAll(".text");
const btn = document.querySelector(".btn");
btn.addEventListener("click", function () {
for (let i = 0; i < text.length; i++) {
text[i].style.color = "gold";
text[i].style.fontSize = "20px";
text[i].textContent = `${i + 1}번째 텍스트 변경 완료`;
}
btn.style.pointerEvents = "none";
});
ON BROWSER(변경 전)
ONBROWSER(변경 후)
'JavaScript related' 카테고리의 다른 글
| JavaScript addEventListener Basic (0) | 2023.01.22 |
|---|---|
| JavaScript setInterval (0) | 2023.01.21 |
| JavaScript Number vs parseInt (0) | 2023.01.21 |
| JavaScript Return (0) | 2023.01.21 |
| JavaScript querySelector & querySelectorAll (0) | 2023.01.21 |
Post
Number
문자열이 숫자가 아닌 경우 NaN이 저장되며, 문자열이 숫자로 시작하더라도 NaN이 저장된다. 소수점 아래 자리가 있는 경우, 소수점은 모두 표시되며 숫자형으로 바뀐다.
parseInt
문자열이 숫자가 아닌 경우 NaN이 저장되며, 문자열이 숫자로 시작하면 그 숫자가 끝날 때까지만 형 변환을 실시하여 숫자로서 저장된다. 소수점 아래 자리가 있는 경우, 소수점은 모두 무시되고 정수만 표시되며 숫자형으로 바뀐다.
JavaScript
let num00 = `천원`;
console.log(Number(num00)); // NaN
console.log(parseInt(num00)); // NaN
let num01 = `1000`;
console.log(Number(num01)); // 1000
console.log(parseInt(num01)); // 1000
let num02 = `1000만1000원`;
console.log(Number(num02)); // NaN
console.log(parseInt(num02)); // 1000
let num03 = `1000.9999`;
console.log(Number(num03)); // 1000.9999
console.log(parseInt(num03)); // 1000
'JavaScript related' 카테고리의 다른 글
| JavaScript setInterval (0) | 2023.01.21 |
|---|---|
| JavaScript Style Control (0) | 2023.01.21 |
| JavaScript Return (0) | 2023.01.21 |
| JavaScript querySelector & querySelectorAll (0) | 2023.01.21 |
| JavaScript Function Basic (0) | 2023.01.21 |