JavaScript #9

윤동민·2024년 6월 21일
CreateElementappendChildcreateTextNodeelementgetElementByIdjquery

JavaScript

목록 보기
9/12

Test

이름/학년/학과 입력받아 학생추가 버튼 누르면 테이블에 추가되는 HTML

 <h2>학생 정보 입력</h2>
 <input type="text" id="name" placeholder="이름"/>
 <br>
 <input type="text" id="grade" placeholder="학년">
 <br>
 <input type="text" id="department" placeholder="학과">
 <br>
 <button onclick="addStudent()">학생 추가</button>

 <br>
 <hr>
    <table border="1">
        <thead>
            <tr>
                <th>이름</th>
                <th>학년</th>
                <th>학과</th>
            </tr>
        </thead>
        <tbody id="studentTable"></tbody>
    </table>
   <script>
    function addStudent(){
        let name = document.getElementById("name").value;
        let grade = document.getElementById("grade").value;
        let department = document.getElementById("department").value;

        let table = document.getElementById("studentTable");

        let tr = document.createElement('tr');
        let td1 = document.createElement('td');
        let td2 = document.createElement('td');
        let td3 = document.createElement('td');
        let insertName = document.createTextNode(name);
        let insertGrade = document.createTextNode(grade);
        let insertDepartment = document.createTextNode(department);

        td1.appendChild(insertName);
        td2.appendChild(insertGrade);
        td3.appendChild(insertDepartment);

        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);

        table.appendChild(tr);
    }
</script>


let table = document.getElementById("studentTable");

	    let tr = document.createElement('tr');
        let td1 = document.createElement('td');
        let td2 = document.createElement('td');
        let td3 = document.createElement('td');
        let insertName = document.createTextNode(name);
        let insertGrade = document.createTextNode(grade);
        let insertDepartment = document.createTextNode(department);

        td1.appendChild(insertName);
        td2.appendChild(insertGrade);
        td3.appendChild(insertDepartment);

        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);

        table.appendChild(tr);

let table = tbody id="studentTable"로 tbody 요소를 잡아온다.

그 다음 createElement('tr');로
학생 추가시 행을 계속 만들어준다.
createElement('td');는 셀을 만들어주고
createTextNode로 텍스트 자리를 잡아준다
텍스트 노드 변수에는 addStudent()함수에 입력받은 값들을 넣어준다.

생성 된 셀 td1~3에 insert이름/학년/학과를 자식으로 넣어주고.
그 값을 각 tr(행)에 넣어준다. 그리고 그 값을 넣은 tr(행을)
table의 자식으로 부여해 또 값을 넣어준다

  1. 테이블 끌고오기 ▶ let table = tbody id="studentTable"로 tbody
  2. 끌고 온 테이블에 행 생성 ▶ createElement('tr');
  3. 끌고 온 테이블에 셀 생성 ▶ createElement('td');
  4. 생성된 셀에 텍스트 자리 생성 ▶ createTextNode

    텍스트 노드 자리에 addStudent() 함수 값 입력

  5. 생성 된 셀 td1~3에 텍스트 노드 자리 자식으로 넣어주기

    <td1.> 텍스트 노드(insert이름/학년/학과) <td1.>

  6. 생성된 셀 td를 행 tr에 자식으로 부여

    <tr1.>
    <td1.>텍스트 노드(insert이름/학년/학과) <td1.>
    <tr1.>

  7. tr(행) 테이블에 다시 자식으로 부여(입력)

    <table.>
    <tr1.>
    <td1.>텍스트 노드(insert이름/학년/학과) <td1.>
    <tr1.>
    <table.>

Test 2

정보 불러오기 버튼 클릭 시,

배열 cars에 들어있는 자동차 정보 불러오기.

<h1>자동차 정보</h1>
    <div id="carInfo"></div>
    <button onclick="displayCarInfo()">정보 불러오기</button>

    <script>
      let cars = [
        { name: 'Sonata', color: 'blue', speed: 100 },
        { name: 'Sonata', color: 'red', speed: 70 },
        { name: 'Andi', color: 'White', speed: 150 },
      ];

      function displayCarInfo() {
        let div = document.getElementById('carInfo');
        div.innerHTML = ''; // 이전 내용 초기화
        for (let i = 0; i < cars.length; i++) {
          let pname = document.createElement('p');
          let insertcName = document.createTextNode('자동차 이름: ' + cars[i].name);
          pname.appendChild(insertcName);

          let pcolor = document.createElement('p');
          let insertccolor = document.createTextNode('자동차 색상: ' + cars[i].color);
          pcolor.appendChild(insertccolor);

          let pspeed = document.createElement('p');
          let insertpspeed = document.createTextNode('자동차 속도: ' + cars[i].speed);
          pspeed.appendChild(insertpspeed);

          let speedUpButton = document.createElement('button');
          speedUpButton.textContent = '속도 올리기';

          speedUpButton.setAttribute('data-index', i);

          speedUpButton.onclick = function () {
            let index = this.setAttribute('data-index');
            cars[index].speedUp = function () {
              this.speed += 10;
            };
            cars[index].speedUp;
            displayCarInfo();
          };

          let hr = document.createElement('hr');

          div.appendChild(pname);
          div.appendChild(pcolor);
          div.appendChild(pspeed);
          div.appendChild(hr);
          div.appendChild(speedUpButton);
        }
      }
    </script>

근데 여기서 강사님 속도올리기가 안되서 챗Gpt로 변경함

 speedUpButton.onclick = function () {
	let index = this.getAttribute('data-index');
	cars[index].speed += 10; // 속도 증가
	displayCarInfo();
};

배열 cars에 들어있는 자동자 정보 불러오기 부분

 for (let i = 0; i < cars.length; i++) {
          let pname = document.createElement('p');
          let insertcName = document.createTextNode('자동차 이름: ' + cars[i].name);
          pname.appendChild(insertcName);

          let pcolor = document.createElement('p');
          let insertccolor = document.createTextNode('자동차 색상: ' + cars[i].color);
          pcolor.appendChild(insertccolor);

          let pspeed = document.createElement('p');
          let insertpspeed = document.createTextNode('자동차 속도: ' + cars[i].speed);
          pspeed.appendChild(insertpspeed);

for문을 돌려서 각각 p문단을 생성
cars[i].name ~ cars[i].spped 첫번째부터 돌기 시작해서 각각 insertcName~speed에 넣어준다.
이후 부모-자식 메서드 이용해서 insert변수명에 들어가있는 것들을 전부 p 문단 안으로 넣어준다

speedUpButton.setAttribute('data-index', i);

	speedUpButton.onclick = function () {
	let index = this.getAttribute('data-index');
	cars[index].speed += 10; // 속도 증가
	displayCarInfo();
};
  • 이 메서드는 지정된 요소에 새로운 속성을 추가하거나, 기존 속성의 값을 변경합니다. 문법은 element.setAttribute(name, value)입니다.

    i : 이 변수는 현재 반복의 인덱스를 나타냅니다. for 루프에서 i는 0부터 cars 배열의 길이까지 증가합니다. 따라서 i는 cars 배열의 인덱스를 나타냅니다.

  • this.getAttribute('data-index')는 버튼의 data-index 속성 값을 가져옵니다.
  • 이 값은 문자열로 반환되지만, 배열 인덱스로 사용할 수 있습니다.
  • index는 cars 배열의 특정 자동차 객체를 가리키는 인덱스입니다.
  • cars[index]는 cars 배열의 특정 위치에 있는 자동차 객체를 반환합니다.
  • cars[index].speed += 10;는 해당 자동차 객체의 speed 속성 값을 10만큼 증가시킵니다.

Jquery

<script src="jquery-3.7.1.min.js"></script>
<script>
	$(document).ready(function(){
		//Dom이 준비되었는지 확인, 준비되면 함수를 수행
		$("button.hide").click(function(){
			$("p").hide();
		});
		$("button.show").click(function(){
			$("p").show();
		});
	});
</script>
</head>
<body>
	<p>제이쿼리</p>
	<p>문서 ready이벤트는 여러 다중 함수 구현도 가능하다.</p>
	<button class = "hide">메세지 삭제</button>
	<button class = "show">메세지 출력</button>

	<!-- <script>
		document.addEventListener("DOMContentLoaded",function(){
		document.querySelector("button.hide").addEventListener("click"
		,function(){
			document.querySelectorAll("p").forEach(function(p){
				p.style.display = "none";
				 });
			});
		});
	</script> -->

</body>

q쿼리를 이용해서 기존과 다르게 더 간간하게 실행할수있다

$("button.hide").click(function(){
$("p").hide();

$("button.hide")는 button요소와 hide요소를 둘다 가진 버튼을 가져온다.
그뒤로 click(function(){ ~ 으로 클릭시 p문단을 숨기는 기능을 작동한다.

show도 마찬가지.

jquery - 순서대로 실행하는지 확인

HTML 문서를 문저 순서대로 실행하고 제일 마지막에 Jquery 실행한다.

<script>
	alert("상단");
</script>
</head>
<body>
	<h1>Hello World</h1>
	<h2>Hello World</h2>
	<script>
		$(document).ready(function(){
			alert("중단");
		});
	</script>
	<h3>Hello world</h3>
	<h4>Hello world</h4>

	<script>
		alert("하단");
	</script>

Jquery는 html 구문을 다 끝내고 난 다음에 실행한다.
그래서 결과 값이 상단 -> 하단 -> 중단으로 진행하게 된다.

profile
윤동민
나를 한줄로 소개하자
이전 포스트

JavaScript #8

다음 포스트

JavaScript #9

0개의 댓글