250x250
Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

개린이 개발노트

국비지원 JAVA(자바) 프로그래밍(자바스크립트,JSON) 본문

국비지원(국비교육) 웹 개발자 과정

국비지원 JAVA(자바) 프로그래밍(자바스크립트,JSON)

개린이9999 2022. 12. 26. 01:17
728x90
let div= document.createElement('div');

div.className = 'alert';  /**첫줄에 div태그를 만들고 3번쨰줄에 class를 만든것임*/

div.innerHTML = '<b>ㅎㅇ</b>'; /**이너html은 태그까지 다 인식해주기때문에 안에 태그까지 다 입력가능 */

document.body.append(div);

개발자 도구를 열어보면 무엇을 만들었는지 더 자세히 확인가능하다 ↓

태그.append: 해당 태그 끝에 추가

태그.prepend: 맨앞에 추가 

태그.before: (해당)태그 이전에 삽입 

태그.after:(해당)태그 이후에 삽입

 

ol.before('이전');
ol.after('이후');

let a = document.createElement('li');
a.innerHTML=('앞에')
ol.prepend(a); 

let b = document.createElement('li');
b.innerHTML=('뒤에')
ol.append(b,'<li>ㅎㅇ<li>');

 

 

ol.append(b,'<li>ㅎㅇ<li>');

그냥 생글자가 들어가버림(li태그안에 ㅎㅇ를 넣으려고 했지만)

 

div.insertAdjacentHTML('beforebegin','<b>ㅎㅇ</b>')

이렇게하면

잘 나옴

 

.insertAdjacentHTML(위치,내용)

-위치-

beforebegin:앞에 추가(=before)

afterend : 뒤에 추가(=after)

afterbegin:안쪽 앞에 추가 ( =prepend) 

beforeend: 안쪽 뒤에 추가(=append) 

div.insertAdjacentHTML('beforebegin','<b>ㅎㅇ</b>')

ol.insertAdjacentHTML('afterbegin', `<li class='a'>앞에추가함</li>`)

ol.before('이전');
ol.after('이후');

let a = document.createElement('li');
a.innerHTML=('앞에')
ol.prepend(a); 

let b = document.createElement('li');
b.innerHTML=('뒤에')
ol.append(b,'<li>ㅎㅇ<li>');

태그.remove(); 지우기

setTimeout(() => { div.remove()
  
}, 3000); /** 나타났다가 3초뒤에 사라짐 */
나타났다가 3초뒤에 사라짐 ↑
 
<body>

  <div id="first">첫번째</div>
  <div id="second">두번째</div>

<script src="1.js"></script>
</body>

첫번째를 두번째 뒤로 옮기고 싶을 때 

 

second.after(first);

let div2 = div.cloneNode(true);

div2.querySelector('b').innerHTML = 'ㅂㅇ'

div.after(div2);

let a = document.createElement('p');
a.innerHTML = 'p태그 추가';

div.appendChild(a); 

setTimeout(() => {
  document.write('<b>아주옛날</b>');
}, 3000); /** document.write('<b>아주옛날</b>'); 써버리면 기존의 내용 싹 다 날리면서 추가가 되어버림*/
 document.write('<b>아주옛날</b>'); 써버리면 기존의 내용 싹 다 날리면서 추가가 되어버림 그래서 *잘안씀*

쇼핑몰 같은 느낌 만들기 

사과 이미지 넣음

제목 apple

내용 빨개요 

let fruits = [
  {name:'apple', memo:'빨개요'},
  {name:'mango', memo:'달달함'},
  {name:'melon', memo:'맛있음'},
];

for(let i=0; i<=fruits.length;i++){
  console.log(fruits[i]);
}

fruits에 들어있는 것 for문으로 뽑아내는 방법 ↑

결과값 

 

fruits에 들어있는 것 foreach문으로 뽑아내는 방법 ↓

let fruits = [
  {name:'apple', memo:'빨개요'},
  {name:'mango', memo:'달달함'},
  {name:'melon', memo:'맛있음'},
];

fruits.forEach((data) => {
  console.log(data.name);
});

 

.setAttribute -> 해당 속성 변경 가능 

 

.setAttribute('src','img/apple.jpg' )

src에 있는 속성을 'img/apple.jpg'로 바꿔라

let fruits = [
  {name : 'apple', memo : '빨개요'},
  {name : 'mango', memo : '달달함'},
  {name : 'melon', memo : '맛있음'},
]

// 내용 집어넣기
document.querySelectorAll('.card-title')[0].innerHTML = fruits[0].name;
document.querySelectorAll('.card-text')[0].innerHTML = fruits[0].memo;

// 이미지 넣기 속성변경 .setAttribute
document.querySelectorAll('.card-img-top')[0].setAttribute('src', `img/${fruits[0].name}.jpg`)
위에꺼 아래꺼 둘이 같은것임
document.querySelectorAll('.card-img-top')[0].setAttribute('src', 'img/'+fruits[0].name+'.jpg');
document.querySelectorAll('.card-title')[0].innerHTML = fruits[0].name;
document.querySelectorAll('.card-text')[0].innerHTML = fruits[0].memo;
document.querySelectorAll('.card-img-top')[0].setAttribute('src', `img/${fruits[0].name}.jpg`)

위에것(자바스크립트문법)을 제이쿼리로  바꾸는 법 ↓

$('.card-body h5').eq(0).html(fruits[0].name);
$('.card-text').eq(0).html(fruits[0].memo);
$('.card-img-top').eq(0).attr('src', `img/${fruits[0].name}.jpg`)

setAttribute->attr로 바뀜

 

$('.card-body h5').eq(0).html(fruits[0].name);
$('.card-text').eq(0).html(fruits[0].memo);
$('.card-img-top').eq(0).attr('src', `img/${fruits[0].name}.jpg`)

$('.card-body h5').eq(1).html(fruits[1].name);
$('.card-text').eq(1).html(fruits[1].memo);
$('.card-img-top').eq(1).attr('src', `img/${fruits[1].name}.jpg`)

$('.card-body h5').eq(2).html(fruits[2].name);
$('.card-text').eq(2).html(fruits[2].memo);
$('.card-img-top').eq(2).attr('src', `img/${fruits[2].name}.jpg`)

위에것을 for문으로 간단하게 바꾸기 ↓

for (let i = 0; i <= fruits.length; i++) {
  $('.card-body h5').eq(i).html(fruits[i].name);
  $('.card-text').eq(i).html(fruits[i].memo);
  $('.card-img-top').eq(i).attr('src', `img/${fruits[i].name}.jpg`)
}

foreach문 사용해서 줄이기 ↓

fruits.forEach((data,i) => {
$('.card-body h5').eq(i).html(fruits[i].name);
$('.card-text').eq(i).html(fruits[i].memo);
$('.card-img-top').eq(i).attr('src', `img/${fruits[i].name}.jpg`)
  
});

foreach문 사용해서 더욱 더 줄이기 ↓

fruits.forEach((data,i) => {
$('.card-body h5').eq(i).html(data.name);
$('.card-text').eq(i).html(data.memo);
$('.card-img-top').eq(i).attr('src', `img/${data.name}.jpg`)
  
});

↑ data안에 뭐가 들어가있는 지 생각해보기 

 <div class="col">
        <div class="card" style="width: 18rem;">
          <img src="이미지" class="card-img-top">
          <div class="card-body">
            <h5 class="card-title">제목</h5>
            <p class="card-text">내용</p>
            <button class="btn btn-primary">담기</button>
          </div>
        </div>
         </div>
      
      
         <div class="col">
        <div class="card" style="width: 18rem;">
          <img src="이미지" class="card-img-top">
          <div class="card-body">
            <h5 class="card-title">제목</h5>
            <p class="card-text">내용</p>
            <button class="btn btn-primary">담기</button>
          </div>
        </div>
         </div>
      
      
         <div class="col">
        <div class="card" style="width: 18rem;">
          <img src="이미지" class="card-img-top">
          <div class="card-body">
            <h5 class="card-title">제목</h5>
            <p class="card-text">내용</p>
            <button class="btn btn-primary">담기</button>
          </div>
        </div>
         </div>

위에 중복되는 html태그 를 자바스크립트로 깔끔하게 변경하기 ↓

첫번째 방법 

//첫번째 방법 
let first = document.createElement('div'); 
first.className = 'col';
first.innerHTML=`<div class="card" style="width: 18rem;">
                  <img src="이미지" class="card-img-top">
                  <div class="card-body">
                    <h5 class="card-title">제목</h5>
                    <p class="card-text">내용</p>
                    <button class="btn btn-primary">담기</button>
                  </div>
                  </div>`;

document.querySelector('.row').append(first);

두번째 방법 ↓

let second= `<div class="col">
              <div class="card" style="width: 18rem;">
                <img src="이미지" class="card-img-top">
                <div class="card-body">
                  <h5 class="card-title">제목</h5>
                  <p class="card-text">내용</p>
                  <button class="btn btn-primary">담기</button>
                </div>
              </div>
              </div>`;

document.querySelector('.row').insertAdjacentHTML('beforeend',second)
document.querySelector('.row').insertAdjacentHTML('beforeend',second)

↑을 제이쿼리 방식으로 변경하기 ↓

$('.row').append(second);

 

위의 방식들 for문으로 리팩토링하기! ↓

let fruits = [
  {name : 'apple', memo : '빨개요'},
  {name : 'mango', memo : '달달함'},
  {name : 'melon', memo : '맛있음'},
];

for (let i = 0; i <= fruits.length; i++){
let second= `<div class="col">
              <div class="card" style="width: 18rem;">
                <img src="img/${fruits[i].name}.jpg" class="card-img-top">
                <div class="card-body">
                  <h5 class="card-title">${fruits[i].name}</h5>
                  <p class="card-text">${fruits[i].memo}</p>
                  <button class="btn btn-primary">담기</button>
                </div>
              </div>
              </div>`;
            
// document.querySelector('.row').insertAdjacentHTML('beforeend',second)
  $('.row').append(second);

}

 

다시foreach로 리팩토링하기! 

fruits.forEach((data)=> {
let second= `<div class="col">
              <div class="card" style="width: 18rem;">
                <img src="img/${data.name}.jpg" class="card-img-top">
                <div class="card-body">
                  <h5 class="card-title">${data.name}</h5>
                  <p class="card-text">${data.memo}</p>
                  <button class="btn btn-primary">담기</button>
                </div>
              </div>
              </div>`;
            
// document.querySelector('.row').insertAdjacentHTML('beforeend',second)
  $('.row').eq(0).append(second);

})

이벤트 (마우스나 키보드 등 발생되는 현상들을)

마우스 이벤트

click- 클릭했을 때 실행 

dblclick- 더블클릭 

contextmenu- 우클릭

mousedown -  마우스를 누른상태

mouseup - 마우스를 눌렀다가 뗀 상태

mouseover- 마우스를 올려둠

mouseout-올려둔 마우스가 나감 

폼(form요소)

submit- 전송

focus- 포커스를 얻을 경우

키보드

keydown - 키보드 누름

keyup- 키보드 땜

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="2.css">
</head>
<body>
                                              <!--핸들러-->
  <input type="button" value="클릭" onclick="alert('ㅎㅇ')">
  <input type="button" value="js클릭" onclick="msg()">
  <input id="btn" type="button" value="dom" onclick="alert('ㅎㅇ')">
  <script src="2.js"></script>
</body>
</html>
function msg() {
  alert('hi');
}

btn.onclick = msg;
/**btn.onclick = msg(); 하면 적용이 안됨 */
btn.onclick = msg(); 하면 적용이 안되는 이유는? 
 

 

btn.onclick= function(event) {
  console.log(event.type)
  console.log(event.curretTarget);
  console.log(event.clientX)
  console.log(event.clientY)
};

event 혹은 e라고 씀 

 

이렇게 결과값 나옵니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="2.css">
</head>
<body>
  
  <input id="btn" type="button" value="클릭">
  <div id="text">글자써있음</div>
  
  <script src="2.js"></script>
</body>
</html>

버튼을 클릭하면 글자가 사라지게끔 하는 자바스크립트 만들기

document.querySelector('#btn').addEventListener('click',function(){

  document.querySelector('#text').style.display='none'
});

제이쿼리로 만들기

$('#btn').on('click',function(){
  $('#text').css('display','none')
})

로컬 스토리지 - 브라우저 내의 저장공간

 localStorage.setItem('name','hong');
 localStorage.setItem('age','20');
 localStorage.setItem('name','kim');
 localStorage.removeItem('age'); /**키 값만 입력하면 지워짐 */
 
 console.log(localStorage.getItem('name'));

JSON이란?   

키와 값(value)으로 이루어진 것, 배열, object 인 데이터들을  -> 사람이 읽을 수 있는 텍스트로 사용하는 표준 포멧

데이터를 주고 받을 때 싹 다 text화 시켜서 주고받을 수 있게끔 만들어줌  

 

제이슨 예시 반드시 기억할것!!! ↓

let arr = [1,2,3,4,5];
//json으로 변환
let arrjson = JSON.stringify(arr);

localStorage.setItem('arr',arrjson);

let getarr = localStorage.getItem('arr');

console.log(getarr[0]);/**아직 json 형태 */

getarr =JSON.parse(getarr); /**원래 오브젝트 형태로 다시 돌려줌,json에서 배열로 변환 */

console.log(getarr[0]);
$('.cart').on('click', function(e) {
  //클릭한 담기에 해당되는 과일 이름이 필요함
  let name= e.target.previousElementSibling.previousElementSibling.innerHTML; /*내꺼 전에 있는 형제 요소 찾기*/ 
  alert(name);
});
.previousElementSibling-> 이전 형제를 찾아줌. 자바스크립트이용 ↑
 
 
제이쿼리이용 ↓
$('.cart').on('click', function(e) {
 	let name = $(e.target).siblings('h5').html();
  alert(name);
});
$('.cart').on('click', function(e) {
  let name = $(e.target).siblings('h5').html(); 

  if(localStorage.getItem('name')!=null) {
 
  let temp = JSON.parse(localStorage.name); /*로컬스토리지에 있는 name을 빼와서 다시 배열형태로 전환*/

  temp.push(name); /*거기에 클릭한 과일 이름을 배열에 추가*/

  localStorage.setItem('name',JSON.stringify(temp)); /*다시 json으로 변환 후 로컬 스토리지에 저장시킴 temp는 배열 자체라 [] 안씌움*/
} else {
  localStorage.setItem('name',JSON.stringify([name])) /**name은 문자라 [name]으로 배열형태로  */
}
});

 

728x90

'국비지원(국비교육) 웹 개발자 과정' 카테고리의 다른 글

국비지원 JAVA(자바) 프로그래밍(자바스크립트)  (0) 2022.12.28
국비지원 JAVA(자바) 프로그래밍(자바스크립트)  (0) 2022.12.27
국비지원 JAVA(자바) 프로그래밍(자바스크립트)  (0) 2022.12.23
국비지원 JAVA(자바) 프로그래밍 (자바스크립트)  (2) 2022.12.22
국비지원 JAVA(자바) 프로그래밍  (0) 2022.12.21
'국비지원(국비교육) 웹 개발자 과정' Related Articles more