"JavaScript related"에 해당되는 글 - 35건
- 2023.02.01 JavaScript Cat MBTI test
- 2023.02.01 JavaScript find & filter & charAt
- 2023.02.01 JavaScript reduce
- 2023.02.01 JavaScript beforeunload
- 2023.01.31 JavaScript Event Delegation
- 2023.01.31 JavaScript target & currentTarget
- 2023.01.30 JavaScript destructuring
- 2023.01.27 JavaScript How to Insert Text
- 2023.01.27 JavaScript innerHTML
- 2023.01.27 JavaScript Nullish Coalescing Operator
Post
Cat MBTI test
HTML
<body>
<header>
<h1>나만 없어 <strong>고양이</strong></h1>
</header>
<div class="start contents-box on">
<div class="inner">
<h2>내가 과연 고양이 집사가 될 관상인가?</h2>
<button class="btn">나를 선택할 고양이는?</button>
</div>
</div>
<div class="question contents-box">
<div class="inner">
<div class="progress">
<div class="bar"></div>
</div>
<div class="question-box">문제가 나오는 곳</div>
<div class="btns">
<button class="btn type01">첫번째 선택</button>
<button class="btn type02">두번째 선택</button>
</div>
</div>
</div>
<div class="result contents-box">
<div class="inner">
<h2>당신을 집사로 삼을 고양이는?</h2>
<img src="" alt="" class="cat" />
<p>당신에게 맞는 고양이는 <strong class="cat-type"></strong></p>
<p class="desc"></p>
</div>
</div>
</body>
JavaScript
const QuestionData = [
{
id: 1,
title: "새로운 고양이를 데려왔다! 나의 반응은?",
answera: "머해? 이름은 뭐로 해줄까? 자꾸 말을 걸고 싶다.",
answerb: "혼자만의 시간이 필요하지? 적응할 시간을 준다.",
type: "EI",
},
{
id: 2,
title: "고양이에 대한 모든 것이 궁금해졌다. 나의 행동은?",
answera: "고양이 관련 커뮤니티에 들어 다른 집사님들과 소통을 하며 고양이에 대한 지식을 쌓는다.",
answerb: "커뮤니티에 가입은 하지만 눈으로 참고만 하고 혼자 찾아보는게 편하다.",
type: "EI",
},
{
id: 3,
title: "아무리봐도 우리 고양이가 정말 이쁜 것 같다. 나의 행동은?",
answera: "'너구리 너무 이쁜 것 같아.. 사람들한테 자랑해야지..!!' 하며 인스타를 만들어서 사진도 공유하고 소통도 한다.",
answerb: "우리 고양이 너무 이쁘다.. 사진찍어서 사진첩에 간직한다.",
type: "EI",
},
{
id: 4,
title: "고양이 유튜브를 시작하려고 한다. 나는 어떤 유튜브를 만들고 싶은가?",
answera: "다른 유튜버들을 가이드 라인 삼아 비슷하게 만든다.",
answerb: "새롭거나 자유로운 방식으로 만들기 위해 생각한다.",
type: "SN",
},
{
id: 5,
title: "고양이에 대해서 모르는 부분들을 검색을 하고 있다. 내가 글을 읽는 방법은?",
answera: "꼼꼼하게 정확하게 읽는다.",
answerb: "전체적인 의미를 파악하며 읽는다.",
type: "SN",
},
{
id: 6,
title: "고양이 밥을 주려고 한다 나의 방법은?",
answera: "손,눈대중으로 대충 이정도면 되겠지 하고 급여한다.",
answerb: "칼로리를 정확히 맞춰 저울이나 스푼으로 계랑해서 급여한다.",
type: "SN",
},
{
id: 7,
title: "같은 집사 친구가 고양이가 아픈 것 같아 슬퍼하고있다. 나의 반응은?",
answera: "'이건 이렇게 하면 어떨까?' 해결책을 함께 생각하며 정보들은 같이 찾아본다.",
answerb: "'아이고,, 어쩌면 좋아..' 일단 먼저 위로를 해준다.",
type: "TF",
},
{
id: 8,
title: "고양이를 키우는데 가족과의 마찰이 생겼다. 이럴땐?",
answera: "나의 생각과 논리가 맞다는 걸 증명하기 위해 가족들에게 먼저 설명한다.",
answerb: "나의 의견이 상대방을 기분 나쁘게 하지 않도록 잘 전달하려고 먼저 생각한다.",
type: "TF",
},
{
id: 9,
title: "고양이가 아파서 병원을 고르려고 리뷰를 보았다. 내가 갈 병원은?",
answera: "성과가 중요하지!! 좋은 성과를 낸 병원",
answerb: "사람이 중요하지!! 원장님의 성격이 좋다고 되어있는 병원",
type: "TF",
},
{
id: 10,
title: "고양이 사료를 급여하는 방법은?",
answera: "'우리 고양이 몸무게는 5키로니까 하루세번 몇시에 이만큼 씩 주고, 간식은 이때 챙겨줘야겠다!' 계획을 세운다. ",
answerb: "사료주면 알아서 먹겠지! 일단 자율급식으로 한꺼번에 줘본다.",
type: "JP",
},
{
id: 11,
title: "고양이 사료가 우연히 여러 종류가 생겼다. 급여방법은?",
answera: "사료를 조금씩 급여해서 고양이의 기호를 테스트 해보고 다 잘먹는다면 날짜에 맞춰서 질리지 않도록 바꿔가며 급여한다.",
answerb: " 끌리는 걸로 그때그때 급여한다.",
type: "JP",
},
{
id: 12,
title: "자기전 나는?",
answera: "내일 할 일을 미리미리 정해놓고 잔다.",
answerb: "누우면 장땡! 일단 눕고 생각한다.",
type: "JP",
},
];
const ResultData = [
{
id: 1,
name: "러시안 블루",
best: "ESTJ",
desc: "겁이 많아요.워낙 온순한 성격에 조용한 고양이라 소심하게 느껴집니다! 낯을 심하게 가리는 편이구요.혼자 놔두면 호기심이 많아서 이것저것 치고 건드리고 즐겁게 보내는 고양이입니다.초보 애묘가가 키우기 좋은 묘종입니다.",
image: `Russianblue`,
},
{
id: 2,
name: "샴",
best: "ESFP",
desc: "대체적으로 온순하고 느긋한 성격이에요.외로움을 잘타며 질투심이 강해요.수다스러운 성격입니다.독립심이 강한 편에 속하지만 특이하게도 사람 손 타는 걸 좋아하는 고양이 입니다.",
image: `Siamese`,
},
{
id: 3,
name: "페르시안",
best: "ENTJ",
desc: "조용하고 성격도 순한편이서 개냥이가 되는 경우가 많습니다. 장모종이어서 털이 굉장히 부드러워요.아이와 함께 키워도 좋을 만큼 굉장히 순하고 독립심이 강한 고양이 입니다.",
image: `Persian`,
},
{
id: 4,
name: "뱅갈",
best: "INTP",
desc: "활동력이 어마어마한 고양이에요! 그렇기 때문에 살이 잘 안찌는 고양이 중에 하나입니다!집사분이 놀아주다가 탈진할 수도!",
image: `Bengal`,
},
{
id: 5,
name: "터키쉬 앙고라",
best: "INTJ",
desc: "우아한 장모종 고양이! 그러다보니 까칠하고 성질이 조금 급해요! 잔머리가 많고 복수심도 많은 고양이! 하지만 고양이마다 성격은 다 다르니 참고하세요!",
image: `Turkishangora`,
},
{
id: 6,
name: "아비시니안",
best: "ISTJ",
desc: "민첩하고 호기심 많고 똑똑한 고양이입니다! 굉장히 수다쟁이여서 집사가 부르면 야옹하고 대답도 잘하는 고양이에요! 물을 굉장히 좋아해서 목욕을 시킬 때, 굉장히 편한 고양이 중 하나! 다만 호기심이 많아서 이것저것 잘 떨구는 고양이!",
image: `Abyssinian`,
},
{
id: 7,
name: "노르웨이 숲",
best: "ESTP",
desc: "조용하고 사람을 매우 좋아하는 고양이 중 하나! 숲에서 살던 고양이라 본능적으로 사냥 놀이를 굉장히 좋아해요. 대형종 고양이라 식욕이 많아요",
image: `Norwegianforest`,
},
{
id: 8,
name: "아메리칸 숏헤어",
best: "INFP",
desc: "주인에 대한 호기심이 높고 애교가 굉장히 많아요!다만! 집사 내꺼야! 독점욕도 굉장히 강합니다. 이미 여러마리의 고양이를 키우는 집사라면 다른 고양이들에게 하악질을 볼 수도..",
image: `Ameshort`,
},
{
id: 9,
name: "코리안 숏헤어",
best: "ISFP",
desc: "많은 고양이의 혈통이 섞여있는 고양이에요! 대부분 활발하고 쾌할한 성격을 가지고 있고, 친밀하고 영리합니다! 사냥본능이 매우 뛰어나서 사냥놀이를 굉장히 좋아해요",
image: `Korshort`,
},
{
id: 10,
name: "엑죠틱",
best: "ISFJ",
desc: "낯을 가리지 않고, 주인 옆에서 느긋하게 일상을 즐기는 고양이에요! 다만 운동량이 그렇게 많지 않아 뚱뚱 고양이가 될 수 있으니 조심하기!",
image: `Exotic`,
},
{
id: 11,
name: "스코티쉬 폴드",
best: "ENFP",
desc: "접힌 귀가 굉장히 귀여운 고양이! 착하고 느긋하며 울음소리가 작은 고양이! 고양이 치고는 애교가 매우 많은 편이며 귀찮을 정도로 집사를 졸졸졸 따라다니는 경우가 있습니다!",
image: `Scottishfold`,
},
{
id: 12,
name: "먼치킨",
best: "INFJ",
desc: "짧은 다리와 귀염한 외모를 가지고 있는 고양이에요! 호기심이 매우 많아서 짧은 다리로 이곳저곳을 돌아다니는 에너지가 넘치는 고양이! 영리하고 애교가 많은 편에 속하는 고양이에요",
image: `Munchkin`,
},
{
id: 13,
name: "렉돌",
best: "ESFJ",
desc: "긴 털과 아주 예쁜 예모로 많이 사랑받는 고양이! 봉제인형이라는 이름처럼 집사가 안으면 인형처럼 안겨있는 고양이입니다! 너무나도 순하고 집사와의 교감을 매우 좋아하는 고양이 중에 하나입니다!",
image: `Ragdoll`,
},
{
id: 14,
name: "브리티쉬 숏헤어",
best: "ENTP",
desc: "이름과 같이 영국 신사와 같은 고양이! 배려심이 깊고 매우 조용하고 인내심이 강한 고양이에요. 덩치가 큰 편이어서 집사 무릎보다는 옆구리에 앉아서 시간을 보내는 것을 좋아하는 고양이입니다!",
image: `British`,
},
{
id: 15,
name: "스핑크스",
best: "ISTP",
desc: "유일하게 털이 없는 고양이입니다! 외모와는 다르게 고양이 중에서 가장 성격이 좋다고 하는 고양이계의 골든리트리버! 다만 피부병이 잘 걸릴 수 있으니 조심조심!",
image: `Sphinx`,
},
{
id: 16,
name: "메인쿤",
best: "ENFJ",
desc: "거인 신사라는 별명을 가진 고양이에요! 조용하고 온화한 성격을 가지고 있으며 매우 똑똑하고 크기와 생김새가 사자나 호랑이처럼 생긴 고양이 입니다!",
image: `Mainecoon`,
},
];
const btnStart = document.querySelector(".start .btn");
const start = document.querySelector(".start");
const question = document.querySelector(".question");
const result = document.querySelector(".result");
const bar = document.querySelector(".question .progress .bar");
const questionBox = document.querySelector(".question .question-box");
const type01 = document.querySelector(".question .type01");
const type02 = document.querySelector(".question .type02");
const catType = document.querySelector(".result .cat-type");
const cat = document.querySelector(".result .cat");
const desc = document.querySelector(".result .desc");
btnStart.addEventListener("click", function () {
start.classList.remove("on");
question.classList.add("on");
});
let count = 0;
questionBox.textContent = QuestionData[0].title;
type01.textContent = QuestionData[0].answera;
type02.textContent = QuestionData[0].answerb;
let score = [
{ id: "EI", num: 0 },
{ id: "SN", num: 0 },
{ id: "TF", num: 0 },
{ id: "JP", num: 0 },
];
function clickFunc(point) {
if (count < 12) {
questionBox.textContent = QuestionData[count].title;
type01.textContent = QuestionData[count].answera;
type02.textContent = QuestionData[count].answerb;
bar.style.width = ((count + 1) / 12) * 100 + "%";
const newScore = score.map(function (item, idx) {
if (item.id === QuestionData[count].type) {
return { id: item.id, num: item.num + point };
} else {
return item;
}
});
score = newScore;
console.log(score);
} else {
question.classList.remove("on");
result.classList.add("on");
const mbti = score.reduce(function (acc, current) {
if (current.num >= 2) {
return acc + current.id.charAt(0);
} else {
return acc + current.id.charAt(1);
}
}, "");
console.log(mbti);
const selectedData = ResultData.find(function (item) {
if (item.best === mbti) {
return item;
}
});
console.log(selectedData);
catType.textContent = selectedData.name;
cat.src = `./images/cat/${selectedData.image}.jpg`;
desc.textContent = selectedData.desc;
}
// map,forEach,find,filter
count++;
}
type01.addEventListener("click", function () {
clickFunc(1);
});
type02.addEventListener("click", function () {
clickFunc(0);
});
ON BROWSER
'JavaScript related' 카테고리의 다른 글
| JavaScript find & filter & charAt (0) | 2023.02.01 |
|---|---|
| JavaScript reduce (0) | 2023.02.01 |
| JavaScript beforeunload (0) | 2023.02.01 |
| JavaScript Event Delegation (0) | 2023.01.31 |
| JavaScript target & currentTarget (0) | 2023.01.31 |
Post
find
JavaScript
const numbers = [15, 66, 1, 3, 115, 53, 66, 13, 14, 55, 100];
const result = numbers.find((e) => e > 20);
console.log(result); // 66
배열에서 조건에 맞는 값을 찾아서 가장 근접한 값을 리턴
filter
JavaScript
const numbers = [15, 66, 1, 3, 115, 53, 66, 13, 14, 55, 100];
const result = numbers.filter((넘버) => 넘버 > 50);
console.log(result); // 66, 115, 53, 66, 55, 100
배열에서 조건에 맞는 값들을 찾아서 배열을 리턴. item, idx 쓸 수 있음
charAt
JavaScript
const sentence = "가나다라마바사아자차카타파";
console.log(sentence.charAt(5)); // 바
'JavaScript related' 카테고리의 다른 글
| JavaScript Cat MBTI test (0) | 2023.02.01 |
|---|---|
| JavaScript reduce (0) | 2023.02.01 |
| JavaScript beforeunload (0) | 2023.02.01 |
| JavaScript Event Delegation (0) | 2023.01.31 |
| JavaScript target & currentTarget (0) | 2023.01.31 |
Post
Reduce
새로운 배열을 반환하는데, 값을 누적시켜서 반환하는 메소드
const calc = [0, 1, 2, 3, 4].reduce(function (
accumulator,
currentValue,
currentIndex,
array
) {
return accumulator + currentValue;
});
console.log(calc); // 10
accumulator: 누산기. 콜백의 반환값을 누적
currentValue: 처리할 현재 요소
currentIndex: 처리할 현재 요소의 인덱스. initialValue가 있는 경우 0, 아니면 1부터 시작.(Optional)
array: reduce()를 호출한 배열.(Optional)
initialValue: 콜백 최초 호출 시 첫번째 인수를 제공하는 값. 초기값을 제공하지 않으면 배열의 첫번째 요소를 사용한다.
JavaScript
const calc = [10, 11, 12, 13, 14].reduce(function (
accumulator,
currentValue,
currentIndex,
array
) {
return accumulator + currentValue;
});
console.log(calc); // 60
JavaScript
const calc = [10, 11, 12, 13, 14].reduce(function (
accumulator,
currentValue,
currentIndex,
array
) {
return accumulator + currentValue;
},
100);
console.log(calc); // 160
Reduce로 배열 내 홀수 개수 찾기
JavaScript
arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const sum = arr.reduce(function (acc, current, idx) {
if (current % 2 == 1) {
acc++;
}
return acc;
}, 0);
console.log(sum); // 5
Reduce로 HTML 조작하기
HTML
<script src="./lodash.js"></script>
<script src="./test.js" defer></script>
</head>
<body>
<div class="test"></div>
</body>
JavaScript
const test = document.querySelector(".test");
const numbers = [1, 2, 3, 4, 5];
const suffled = _.shuffle(numbers);
const html = suffled.reduce(function (acc, item, idx) {
if (idx < suffled.length - 1) {
return (acc += `<li>${item}</li>`);
} else {
return (acc += `<li>${item}</li></ul>`);
}
}, "<ul>");
test.innerHTML = html;
ON BROWSER
'JavaScript related' 카테고리의 다른 글
| JavaScript Cat MBTI test (0) | 2023.02.01 |
|---|---|
| JavaScript find & filter & charAt (0) | 2023.02.01 |
| JavaScript beforeunload (0) | 2023.02.01 |
| JavaScript Event Delegation (0) | 2023.01.31 |
| JavaScript target & currentTarget (0) | 2023.01.31 |
Post
닫기 버튼 눌렀을 때 확인창 띄우기
window.addEventListener("beforeunload", (event) => {
event.preventDefault();
event.returnValue = "";
});
'JavaScript related' 카테고리의 다른 글
| JavaScript find & filter & charAt (0) | 2023.02.01 |
|---|---|
| JavaScript reduce (0) | 2023.02.01 |
| JavaScript Event Delegation (0) | 2023.01.31 |
| JavaScript target & currentTarget (0) | 2023.01.31 |
| JavaScript destructuring (0) | 2023.01.30 |
Post
이벤트 위임(Event Delegation)
(1) 사전 설정
HTML
<body>
<div class="contents-box"></div>
</body>
SCSS
body {
background-color: black;
.contents-box {
background-color: white;
width: 150px;
height: 150px;
margin: 10% auto;
}
}
JavaScript
const contents = document.querySelector(".contents-box");
setTimeout(function () {
contents.innerHTML = `<div class="title">테스트 텍스트</div>`;
}, 3000);
ON BROWSER
아무것도 없는 빈 contents-box에 3초뒤 "테스트 텍스트" 가 나타나도록 설정
(2) 동적으로 생성된 개체에 querySelector???
JavaScript
const contents = document.querySelector(".contents-box");
const title = document.querySelector(".title");
setTimeout(function () {
contents.innerHTML = `<div class="title">테스트 텍스트</div>`;
}, 3000);
title.addEventListener("click", function () {
alert("테스트 텍스트를 클릭함");
});
console.log(title);
ON BROWSER
querySelector&addEventListener로는 동적으로 생성된 개체에 이벤트를 걸 수가 없음
(3) .target을 활용한 이벤트 위임(Event Delegation)
JavaScript
const contents = document.querySelector(".contents-box");
setTimeout(function () {
contents.innerHTML = `<div class="title">테스트 텍스트</div>`;
}, 3000);
contents.addEventListener("click", function (e) {
if (e.target.closest(".title")) {
alert("테스트 텍스트를 클릭함");
}
});
ON BROWSER
그러나 부모 개체에 이벤트를 위임한 상태에서 e.target으로 최하단 태그를 붙잡은 뒤, .closest를 활용해 특정해내면 이벤트를 발생시킬 수 있게 된다.
'JavaScript related' 카테고리의 다른 글
| JavaScript reduce (0) | 2023.02.01 |
|---|---|
| JavaScript beforeunload (0) | 2023.02.01 |
| JavaScript target & currentTarget (0) | 2023.01.31 |
| JavaScript destructuring (0) | 2023.01.30 |
| JavaScript How to Insert Text (0) | 2023.01.27 |
Post
Target & Current Target
HTML
<body>
<div class="background">
<div class="contents-box">
<div class="title">테스트 제목</div>
<div class="phone">테스트 전화번호</div>
<div class="address">테스트 주소</div>
<button class="close"><span class="material-icons">close</span></button>
</div>
</div>
</body>
SCSS
.background {
background-color: black;
width: 800px;
height: 600px;
.contents-box {
background-color: white;
position: absolute;
top: 25%;
left: 25%;
}
}
JavaScript
const contents = document.querySelector(".contents-box");
contents.addEventListener("click", function (e) {
console.log(e);
});
ON BROWSER
마우스 클릭시, 오직 하얀 div 안에서만 콘솔이 찍히며 배열의 형태로 클릭 정보가 뜬다.
Target
JavaScript
const contents = document.querySelector(".contents-box");
contents.addEventListener("click", function (e) {
console.log(e.target);
});
ON BROWSER
위에서부터 차례대로 테스트 제목, 테스트 전화번호, 테스트 주소, 닫기 버튼을 클릭했을 때
즉, console.log(e.target)을 쓰면 이벤트가 전달되는 최하위 태그 정보를 표시하게 된다.
Current Target
JavaScript
const contents = document.querySelector(".contents-box");
contents.addEventListener("click", function (e) {
console.log(e.currentTarget);
});
ON BROWSER
위에서부터 차례대로 테스트 제목, 테스트 전화번호, 테스트 주소, 닫기 버튼을 클릭했을 때
즉, currentTarget을 쓰면 상위 태그에 대한 정보가 표시된다.
'JavaScript related' 카테고리의 다른 글
| JavaScript beforeunload (0) | 2023.02.01 |
|---|---|
| JavaScript Event Delegation (0) | 2023.01.31 |
| JavaScript destructuring (0) | 2023.01.30 |
| JavaScript How to Insert Text (0) | 2023.01.27 |
| JavaScript innerHTML (0) | 2023.01.27 |
Post
Destructuring의 기본
JavaScript
const obj = { name: "장성호", age: 20, weight: 80 };
const { name, age } = obj;
console.log(name); // 장성호
console.log(age); // 20
변수를 줄이기 위해 오브젝트에서 name과 age만 분해한다. 원래 배열은 영향을 받지 않는다.
JavaScript
const animals = ["lion", "tiger", "rabbit"];
const [first, second] = animals;
console.log(first); // "lion"
console.log(second); // "tiger"
원래라면 const first = animals[0] 와 const first = animals[1] 로 써야했는데 구조분해를 통해 간단하게 쓸 수 있게 되었다.
지도 좌표 구조분해
JavaScript
navigator.geolocation.getCurrentPosition(function (position) {
const { coords } = position;
const { latitude: x, longitude: y } = coords;
console.log(x); // 37.5207569
console.log(y); // 126.9003409
});
'JavaScript related' 카테고리의 다른 글
| JavaScript Event Delegation (0) | 2023.01.31 |
|---|---|
| JavaScript target & currentTarget (0) | 2023.01.31 |
| JavaScript How to Insert Text (0) | 2023.01.27 |
| JavaScript innerHTML (0) | 2023.01.27 |
| JavaScript Nullish Coalescing Operator (0) | 2023.01.27 |
Post
텍스트 삽입
(1) innerHTML
innerHTML은 HTML 태그 요소들까지 입력해서 직접 변경할 수 있다.
(2) innerText
마크업 언어가 적용된 상태로 읽어오므로, 태그값은 불러들이지 않는다. 즉, 사용자에게 보이지 않는 값은 불러들이지 않으므로 당연히 display:none 처리가 된 값들도 불러들이지 않는다.
(3) textContent
마크업 태그를 제외한 모든 문자열을 읽고 변경할 수 있다. innerText와 다른 점은 innerText는 사용자에게 보이지 않는 텍스트 값은 가져오지 않지만, textContent는 마크업 태그를 제외한 엑스트라면 모두 불러들일 수 있다.
(4) value
input과 같은 form 요소의 값을 가져오고 싶을 때는 .value를 사용한다.
HTML
<body>
<div class="test01"></div>
<div class="test02"></div>
<div class="test03"></div>
<div class="test04"></div>
</body>
JavaScript
const test01 = document.querySelector(".test01");
const test02 = document.querySelector(".test02");
const test03 = document.querySelector(".test03");
const test04 = document.querySelector(".test04");
test01.innerHTML = `<p> innerHTML로 삽입 <p>`;
test02.innerText = ` innerText로 삽입 `;
test03.textContent = ` textContent로 삽입 `;
test04.value = `<p> value로 삽입 <p>`;
ON BROWSER
'JavaScript related' 카테고리의 다른 글
| JavaScript target & currentTarget (0) | 2023.01.31 |
|---|---|
| JavaScript destructuring (0) | 2023.01.30 |
| JavaScript innerHTML (0) | 2023.01.27 |
| JavaScript Nullish Coalescing Operator (0) | 2023.01.27 |
| JavaScript Array.includes (0) | 2023.01.27 |
Post
(1) 텍스트 내용 변경
HTML
<div class="test">테스트용 텍스트</div>
JavaScript
const test = document.querySelector(".test");
test.innerHTML = "innerHTML로 변경한 텍스트";
ON BROWSER(스크립트 적용 전)
ON BROWSER(스크립트 적용 후)
(2) 태그 추가
Java Script
const test = document.querySelector(".test");
test.innerHTML =
"<ul><li>테스트 리스트1</li><li>테스트 리스트2</li><li>테스트 리스트3</li></ul>";
ON BROWSER
'JavaScript related' 카테고리의 다른 글
| JavaScript destructuring (0) | 2023.01.30 |
|---|---|
| JavaScript How to Insert Text (0) | 2023.01.27 |
| JavaScript Nullish Coalescing Operator (0) | 2023.01.27 |
| JavaScript Array.includes (0) | 2023.01.27 |
| JavaScript How to add JSON to localStorage (0) | 2023.01.26 |
Post
Nullish Coalescing Operator
Nullish coalescing operator는 왼쪽의 피연산자가 null이거나 undefined일 때, 오른쪽의 피연산자를 대신 반환하는 논리연산자이다.
JavaScript
const logic = null ?? true;
const mathresult = undefined ?? 99;
const customArray = [];
const judge01 = customArray ?? "exist?";
let vacant;
const judge02 = vacant ?? "exist?";
console.log(logic); // true
console.log(mathresult); // 99
console.log(judge01); // []
console.log(judge02); // exist?
|| 연산자
JavaScript
const test01 = false || "text";
console.log(test01); // text
const test02 = true || "text";
console.log(test02); // true
const test03 = 0 || 999;
console.log(test03); // 999
const test04 = null || 999;
console.log(test04); // 999
const test05 = false || false;
console.log(test05); // false
const test06 = null || false;
console.log(test06); // false
const test07 = 0 || null;
console.log(test07); // null
'JavaScript related' 카테고리의 다른 글
| JavaScript How to Insert Text (0) | 2023.01.27 |
|---|---|
| JavaScript innerHTML (0) | 2023.01.27 |
| JavaScript Array.includes (0) | 2023.01.27 |
| JavaScript How to add JSON to localStorage (0) | 2023.01.26 |
| JavaScript addEventListener("keyup") (1) | 2023.01.26 |