Software Maestro 웹프로그래밍 문제 대비

티스토리 뷰

Node.js/javascript

Software Maestro 웹프로그래밍 문제 대비

kkoon9 2022. 1. 30. 00:09

문제를 아예 알려줄 수는 없지만 나는 아래 내용을 공부하고 풀이했었다.

getElementById
- HMTL 코드
```
<!doctype html>
<html>

  <body>
    <h2>Hello World</h2>
    **<h3 id="result"></h3>**
  </body>

</html>
```
- id="블라블라" 를 통해 javascript 코드와 연결시킬 수 있다.
- javascript 코드
```
const name = 'HongGilDong';
//document.write(name);
**document.getElementById**("result").innerHTML = name;
alert(name);
console.log(name);
```
- document.getElementById("블라블라") 코드를 통해 HTML 코드에 있는 id가 블라블라인 부분을 javascript를 통해 건드릴 수 있다.
- innerHTML을 통해 name을 HTML에 나타낼 수 있다.

이벤트 핸들러

HMTL 코드

<!doctype html>
<html>
<head>

</head>
<body>
<form>
<input type="button" value="Button1" **onclick="btnClick(event)**">

**<input id="b2" type="button" value="Button2">**
</form>

</body>

id="블라블라" 를 통해 javascript 코드와 연결시킬 수 있다.
- button도 연결시킬 수 있음!
또는 onClick이라는 것을 사용하여 btnClick(event) 라는 함수를 불러올 수 있다.
javascript 코드

function btnClick(event) { // Button1과 연결됨
	alert(event.target.value+"클릭됨!!");
}
// Button2와 연결됨
**document.getElementById('b2').onclick** = 
	function(event) {
		alert(event.target.value+"클릭됨!!")
	}

document.getElementById("블라블라") 코드를 통해 onclick을 구현할 수 있다.

DOM 핸들링
- HMTL 코드
```
<!doctype html>
<html>
<head>

</head>
<body>
<h2>Hello World</h2>
<hr>
**<div id="t1">**
1. Text1
</div>
**<div id="t2">**
2. Text2
</div>
**<div class="t3">**
3. Text3
</div>
</body>
```
- id="블라블라" 를 통해 javascript 코드와 연결시킬 수 있다.
  - button도 연결시킬 수 있음!
- 또는 onClick이라는 것을 사용하여 btnClick(event) 라는 함수를 불러올 수 있다.
- javascript 코드
```
let txt4 = document.**createElement**('h2');
txt4.innerHTML = 'Text4';
**document.body.append**(txt4);

console.log(document.getElementById('t1').innerText);

console.log(document.querySelectorAll**('div')[1].innerHTML);**

console.log(document.querySelector('div.t3').innerHTML);
```
- 4.Text4 는 createElement()를 이용해 원래 HTML에는 없는 태그요소를 만들어 추가한 것임.
- 콘솔에 출력되는 Text1,2,3 는 각각 서로 다른 방법으로 요소를 선택하여 출력.
- querySelectorAll()의 경우 지정한 모든 요소가 선택되므로 배열형식으로 처리해야 함.
- querySelectorAll('div')[1] 이 의미하는 것은 div를 다 불러오는데 그중 2번째 div 값을 가져오는 것이다.

이벤트 사용하는 예제

이름과 전화번호를 입력 후 저장 버튼을 누르면
하단 목록에 입력 내용을 계속 추가해 나가는 종합예제
HMTL 코드

<!doctype html>
<html>
  <body>
    <h2>주소록 예제</h2>
    <form>
      **이름: <input type="text" name="name"**><br> 
			**전화번호: <input type="text" name="tel">**<br>
      <input type=button value="저장" onclick='addAddr()'>
      <input type=button value="리셋" onclick='resetAddr()'>
      <input type=button value="배경변경" onclick='changeBg()'>
    </form>
    <hr>
    <h3>주소록 목록</h3>
    **<ul id="addrlist">**

    </ul>
  </body>
</html>

javascript 코드

function addAddr() {
	  const result = **document.getElementById('addrlist');**
    const newAddr = document.getElementsByName("name")[0].value + ' , ' + document.getElementsByName('tel')[0].value;

    const item = **document.createElement**('li');
    const txt = **document.createTextNode**(newAddr);

    **item.appendChild(txt);
    result.appendChild(item);**
}

function resetAddr() {
	**document.getElementById('addrlist').innerHTML="";**
}

function changeBg() {
	**body=document.querySelector('body');
  body.className="bgyellow";**
}

4.Text4 는 createElement()를 이용해 원래 HTML에는 없는 태그요소를 만들어 추가한 것임.
콘솔에 출력되는 Text1,2,3 는 각각 서로 다른 방법으로 요소를 선택하여 출력.
querySelectorAll()의 경우 지정한 모든 요소가 선택되므로 배열형식으로 처리해야 함.

저작자표시 비영리

'Node.js > javascript' 카테고리의 다른 글

[javascript] Node.js와 javascript (0)	2020.01.17

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

깃허브

TAG more

« 2025/03 »
일	월	화	수	목	금	토
						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	29
30	31

글 보관함

티스토리 뷰

Software Maestro 웹프로그래밍 문제 대비

'Node.js > javascript' 카테고리의 다른 글

티스토리툴바