반응형
1) 요소출력
1-1) id속성값 이용
1-2)태그이름 이용
1-3)name속성 이용
1-4)class속성값 이용
1-5)선택자를 이용
1-6) 정리
2)문자열
2-1)기본메서드
2-2)문자열관련 HTML(비권장)
3)Math
3-1)숫자관련메서드
3-2)문자열 숫자간의 산술,형변환
3-3) 예제
4)조건문 반복문
4-1) 조건문
4-2) 반복문
4-3) 예제
5) 최종예제
1) 요소출력
1-1) id속성값 이용해 조회
overflow : auto; --> 영역의 범위이상이 되면
내부에서 태그를 만듬(벗어나지않음)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.area{
border: 1px solid black;
width: 300px;
height: 100px;
overflow: auto;
/*
영역의 범위이상이 되면
내부에서 태그를 만듬(벗어나지않음)
*/
}
</style>
</head>
<body>
<h1>HTML 요소에 접근하기(태그객체 조회)</h1>
<h3>아이디 속성을 이용해 조회하기</h3>
<div class="area" id="area1" style="background-color: rgb(153, 209, 49);"></div>
<button onclick="accessId()">아이디로 접근</button>
</body>
<script src="ex05_요소.js"></script>
</html>
JS코드
function accessId(){
//divEl : <div id="area1"..></div>태그 객체 요소(Element)
const divEl = document.getElementById('area1');
divEl.innerHTML += "아이디로 접근완료<br>"
divEl.style.color = "white";
divEl.style.fontWeight = "bold";
//함수 작동(버튼 클릭) 시 style적용
//현재배경색이 red--> yellow -->red-->,....
if( divEl.style.backgroundColor== "red"){
divEl.style.backgroundColor = "yellow";
divEl.style.color= "black";
}
else if(divEl.style.backgroundColor =="yellow" ){
divEl.style.backgroundColor ="red";
}
//divEl태그의 크기변경
divEl.style.width="200px";
divEl.style.height="200px";
}
1-2) 태그(요소)이름으로 조회
JS코드에서는 태그를 이용한 조회도 가능하다
document.getElementsByTagName('태그명')
<h3>태그 이름을 이용해 조회하기 : document.getElementsByTagName</h3>
<ul>
<li>목록1</li><li>목록2</li><li>목록3</li><li>목록4</li>
<li>목록5</li>
</ul>
<button onclick="accessTagName();">태그로 접근</button>
<script src="ex05_요소.js"></script>
JS코드
function accessTagName(){
const liEl = document.getElementsByTagName("li");
liEl[0].innerHTML = "Hello";
//li태그는 여러개이므로 배열로 조회 될것임
//innerHTML 이라는 속성이 존재하지않음
//배열에 값을 넣듯 인덱스번호로 넣어야함
//타입과 갯수 확인
console.log(liEl, typeof(liEl));
console.log("li요소의 갯수 ",liEl.length);
let blueColor = 30;
for(let i=0 ; i<liEl.length ; i++){
liEl[i].innerHTML = "안녕하세요";
liEl[i].style.backgroundColor =
"rgb(200,125,"+blueColor+")";
blueColor+=60;
//루프를돌수록 글씨가 진해짐(blue색상)
}
}
1-3) name속성으로 접근
document.getElementsByName('name명')
- 현재페이지에서 name속성값을 가진 모든요소조회(배열)
<h3>name속성값 이용해 조회하기 : document.getElementsByName</h3>
<form action="">
<fieldset>
<legend>취미</legend>
<input type="checkbox" id="game" name="hobby" value="game">
<label for="game">게임</label>
<input type="checkbox" id="movie" name="hobby" value="movie">
<label for="movie">영화</label>
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="reading">독서</label>
<input type="checkbox" id="sports" name="hobby" value="sports">
<label for="sports">운동</label>
<!--
label은 for 과 id가 일치할 시
태그내에 문장을 누르면 check해줌
-->
</fieldset>
</form>
<br>
<button onclick="accessName();">name으로 접근</button>
<div class="area" id="area3"></div>JS
function accessName(){
//getElementsByName('속성값')
//현재페이지에서 name속성값을 가진 모든요소조회(배열)
const hobby=document.getElementsByName('hobby');//배열
const divEl = document.getElementById('area3');//요소객체
let ho =" "; //문장을 쌓아둘 변수
for(let i = 0; i<hobby.length; i++){
//hobby[i].checked : checkbox선택 여부
if(hobby[i].checked){
ho += hobby[i].value + "<br>"
}
}
//쌓아둔 문장을 innerHTML로 넣는다
divEl.innerHTML = ho;
}
1-4) class속성값 이용해 조회하기 :
document.getElementsByClassName('class명')
# 단점 : 클래스명이 포함된 객체의
하위객체까지 가져오게 됨
<h3>class속성값 이용해 조회하기 : document.getElementsByClassName</h3>
<div class="test"></div>
<p class="test"></p>
<ul class="test">
<!--조회 시 ul태그 전체의 객체를 보내게 됨-->
<li></li>
</ul>
<pre class="test test1"></pre>
<!--class속성은 " "로 구분하기때문에
class명에 test가 포함되면 조회가능-->
<button onclick="accessClass();">Class로 접근</button>
<br><hr>function accessClass(){
const arr = document.getElementsByClassName("test");
for(let i=0 ; i<arr.length ; i++){
console.log(arr[i]);
}
}
1-5) 선택자를 이용해 접근( 가장많이사용)
document.querySelector("선택자");
<h3>선택자를 이용해 요소 조회해보기 : document.querySelector</h3>
<div id="test1">테스트입니다</div>
<div class="test">
<h2>안녕</h2>
<h2>잘가렴</h2>
<span>lfjsofjwofwf</span>
</div>
<span> zzzzzz</span>
<h2>BYE</h2>
<button onclick="accessSelector();">클릭</button>
function accessSelector(){
const divEl = document.querySelector("#test1");
const divEl2 = document.querySelector(".test>h2");//하위 1개만
const divEl3 = document.querySelectorAll(".test>h2");//배열객체로전달
console.log("테스트1 "+divEl.innerHTML);
console.log("테스트2 "+divEl2.innerHTML);
for(let i =0 ; i<divEl3.length ; i++){
console.log("테스트3 "+divEl3[i].innerHTML);
}
}
1-6) 정리
Dom(Document Object Model ): 문서객체모델
- HTML 문서의 태그들을 객체로 처리하는 방식
- 객체조회방식
1)document.getElementById("id속성값") : 요소리턴
2)document.getElementByName("name속성값") : 배열리턴
3)document.getElementByTagName("Tag명") : 배열리턴
4)document.getElementByClassName("class속성값") : 배열리턴
5)document.querySelector("선택자") : 요소리턴
6)document.querySelectorAll("선택자") : 배열리턴
-조회 할 태그가 반드시 스크립트 실행 전에 먼저인식되어야함
(함수내에서의 DOM처리는 가능)
2) 문자열
2-1) 기본메서드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.area{
width: 500px;
border: 1px solid black;
overflow: auto;
}
.big{height: 500px;}
.small{height: 250px;}
</style>
</head><body>
<h3>문자열과 관련된 기본메서드</h3>
<button onclick="stringTest();">문자열처리 메서드</button>
<div class="area big" id="area1"></div>
<script src="ex06.js"></script>
</body>
알아야하는것
문자열과 함수를 같이 사용 시
백틱(`) 을 사용해보자 작은따옴표(')와 다름
JS
function stringTest(){
const divEl = document.querySelector("#area1");
let str1 = "Hello World";
divEl.innerHTML = "str1 : "+str1+"<br>";
divEl.innerHTML+=`toUpperCase(): ${str1.toUpperCase()}<br>`;
//' 가 아니라 백틱(`) 로 사용(~쪽 버튼에있음)
divEl.innerHTML += `toLowerCase() : ${str1.toLowerCase()}<br>`
for(let i=0 ; i<str1.length ; i++){
divEl.innerHTML+= `${i}번쨰 인덱스 : ${str1.charAt(i)}<br>`
}
//indexof : 문자의 위치리턴
divEl.innerHTML += "<h3>indexOf</h3>"
divEl.innerHTML += `문자열의 길이 : ${str1.length}<br>`
divEl.innerHTML += `앞에서부터 첫 l의위치 : ${str1.indexOf('l')}<br>`
divEl.innerHTML += `뒤에서부터 첫 l의위치 : ${str1.lastIndexOf('l')}<br>`
divEl.innerHTML += `a문자의 위치 : ${str1.indexOf('a')}<br>`
//부분문자열 : substring(시작인덱스,종료인덱스-1)
// substr(시작인덱스,글자수)
divEl.innerHTML += "<h3>부분문자열</h3>"
divEl.innerHTML +=`substring(시작인덱스) : ${str1.substring(6)}<br>`
divEl.innerHTML +=`substring(시작인덱스,끝) : ${str1.substring(6,9)}<br>`
divEl.innerHTML +=`substr(시작인덱스) : ${str1.substr(6)}<br>`
divEl.innerHTML +=`substr(시작,글자수) : ${str1.substr(1,4)}<br>`
//startsWith , endsWith
divEl.innerHTML += "<h3>startsWith , endsWith</h3>"
divEl.innerHTML +=`startsWith('H')로 시작? : ${str1.startsWith('H')}<br>`
divEl.innerHTML +=`endsWith('d'')로 끝? : ${str1.endsWith('d')}<br>`
//문자의 치환
divEl.innerHTML += "<h3>replace(치환)</h3>"
let str2 = "JavaJavaJavaJavaJavaJava"
divEl.innerHTML += "str2원본 : "+str2+"<br>";
divEl.innerHTML += `replace(원본,치환):${str2.replace('Java','자바')}<br>`;
divEl.innerHTML += `replaceAll(원본,치환):${str2.replaceAll('Java','자바')}<br>`;
//문자열의 분리
divEl.innerHTML += "<h3>문자열의 분리</h3>"
let str3 = "사과 바나나 복숭아 키위"
let fruits = str3.split(" "); //배열 (" "을 기준으로 나눔)
divEl.innerHTML += `fruits의자료형 ${typeof(fruits)}<br>`
divEl.innerHTML += `fruits의 크기 ${str3.length}<br>`
for(let i =0 ; i< fruits.length ; i++){
divEl.innerHTML += fruits[i]+"<br>"
}
divEl.innerHTML += `배열요소를 하나의 문자열로 : ${fruits.join("-")}<br>`
}
2-2) 문자열과 관련된 HTML 메서드 (비권장)
<body>
<h3>문자열관련 html메소드</h3>
<button onclick="stringHtmlTest();">문자열html코드</button>
<div id="area2" class="area small"></div>
<script src="ex06_htmlString.js"></script>
</body>function stringHtmlTest(){
const divEl = document.querySelector("#area2");
let str = "javascript"
divEl.innerHTML = `str : ${str}<br>`
divEl.innerHTML+= `bold() : ${str.bold}<br>`
divEl.innerHTML += `italics() : ${str.italics()}<br>`
divEl.innerHTML += `sub(),sup() : ${str.sub()},${str.sup()}<br>`
divEl.innerHTML += `link() : ${str.link("http://www.naver.com") }<br>`
//이와같은 방식을 더 추천함
divEl.innerHTML += `link() : ${`<a href="http://www.naver.com" target="_blank">${str}</a>`}<br>`
}CSS와 역할이겹치므로 권장은 하지않는다
3) Math
3-1) 숫자관련 메서드
<body>
<h3>숫자 (수학)관련 메서드</h3>
<button onclick="mathTest();">수학관련 메서드</button>
<div id="area1" class="area small"></div>
<script src="ex07_Math.js"></script>
</body>
JS
function mathTest(){
const divEl = document.querySelector("#area1");
divEl.innerHTML += `<h3>Math</h3>`
divEl.innerHTML += `절대값 : ${Math.abs(-123)}<br>`
divEl.innerHTML += `랜덤값 : ${Math.random()}<br>`
divEl.innerHTML += `랜덤값(1~10정수) : ${parseInt(Math.random()*10)+1}<br>`
divEl.innerHTML += `반올림 : ${Math.round(123.533)}<br>`
divEl.innerHTML +=
`반올림(위치지정 불가능) : ${Math.round(123.563,2)}<br>`;
divEl.innerHTML += `버림 : ${Math.floor(123.631)}<br>`
divEl.innerHTML += `올림 : ${Math.ceil(123.001)}<br>`
}제한이 많다 int형으로 바꾸는것도 잘 안됨
3-2) 문자열과 숫자간의 산술 , 형변환
<body>
<h3>문자열과 숫자간의 산술연산 / 형변환</h3>
<button onclick="arithmetic();">산술연산</button>
<div id="area2" class="area small"></div>
<script src="ex07_Math.js"></script>
</body>function arithmetic(){
const divEl = document.querySelector("#area2")
divEl.innerHTML = `test1:${7+7}<br>`//14
divEl.innerHTML += `test2:${7+"7"}<br>`//77
divEl.innerHTML += `test3:${"7"+7}<br>`//77
divEl.innerHTML += `test4:${"7"+7+7}<br>`//777
divEl.innerHTML += `test5:${"7" - 7}<br>`//0
divEl.innerHTML += `test6:${"7" / 14}<br>`//0.5
divEl.innerHTML += `test7:${"7" * "7"}<br>`//14
//문자열과 숫자간 : 덧셈 외의 산술연산은 가능
//문자열이 자동형변환된 후 산술연산 진행
//덧셈연산(+) : 문자열 연결결
//형변환 함수
//숫자 <= Number(문자열) : 숫자형이아닌경우 NaN 리턴
//정수형숫자 <= parseInt(문자열) : 숫자만 찾아 리턴
//실수형숫자 <= parseFloat(문자열) : 숫자만찾아리턴
divEl.innerHTML += `test8 : ${7+ Number("7")}<br>`
divEl.innerHTML += `test9 : ${7+ parseInt("7")}<br>`
divEl.innerHTML += `test10 : ${7+ parseFloat("7")}<br>`
divEl.innerHTML += `test11 : ${7+ parseFloat("7.5")}<br>`
divEl.innerHTML += `test12 : ${7+ "1.234원"}<br>`//71.234 원
divEl.innerHTML += `test13 : ${7+ Number("1.234원")}<br>`//NaN
divEl.innerHTML += `test14 : ${7+ parseInt("1.234원")}<br>`//8
divEl.innerHTML += `test15 : ${7+ parseFloat("1.234원")}<br>`//8.234
//eval 함수 : 사용하지 않는것을 권장함
// 문자열을 수식으로 인식. 결과 리턴
let str = "100 + 20 * 3";
divEl.innerHTML+= `test16: ${eval(str)}<br>`
}
3-3) 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.area{
width: 500px;
border: 1px solid black;
overflow: auto;
}
.big{height: 500px;}
.small{height: 250px;}
</style>
</head>
<body>
<p>0~9사이의 임의의 수 2개선택 해 연산의결과를 출력 <br>
연산의종류는 +,-,*,/,% 중 한개를 임의의 선택 <br>
결과값을 prompt 창을 이용해 입력받고 ,<br>
정답인경우 : 정답 <br>
정답이 아닌경우 : 틀렸습니다 .정답:0 입력값:1 <br>
</p>
<h3>임의의 수의 연산</h3>
<button onclick="start();">계산</button>
<script src="ex07_exam.js"></script>
</body>
</html>function start(){
let num1 = parseInt(Math.random()*10);
let num2 = parseInt(Math.random()*10);
let op = ['+','-','/','*','%'];
let a = op[Math.floor(Math.random()*op.length)];
let str = num1 + a +num2;
let result = prompt(`결과값을 입력해주세요${str} `);
let result2 = eval(str)
if(result == result2){
document.writeln("<div style=color:blue>정답</div>")
}
else{
document.writeln("<div style=color:red> 오답</div>")
document.writeln(`입력값 : ${result} 정답은 ${result2}`)
}
}
4) 조건문 반복문
4-1) 조건문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<div>국어점수 <span id="kor">81</span>점</div>
<div>영어점수 <span id="eng">93</span>점</div>
<div>수학점수 <span id="math">100</span>점</div>
</div>
<div>
<div>평균점수<span id="average"></span>점</div>
<div>학점<span id="grade"></span>학점</div>
</div>
<script src="ex08_조건.js"></script>
</body>
</html>
JS
let kor = document.querySelector("#kor").textContent;
let eng = document.querySelector("#eng").textContent;
let math =document.querySelector("#math").textContent;
let average = (Number(kor)+Number(eng)+Number(math))/3; //text이므로 number로 형변환시도
document.querySelector("#average").textContent = average;
let grade;
// if(average>=90){grade = 'A';}
// else if(average>=70){grade = 'B';}
// else if(average>=70){grade = 'c';}
// else{grade = 'F';}
switch(true){//js 에서는 case구문에 비교연산이 가능함함
case average>=90 : grade = 'A'; break;
case average>=80 : grade = 'B'; break;
case average>=70 : grade = 'C';break;
case average>=60 : grade = 'D'; break;
default : grade = 'F';
}
document.querySelector("#grade").textContent = grade;
4-2) 반복문
<h3>반복문 연습</h3>
while : <div id="box1"></div>
for : <div id="box2"></div>
do-while : <div id="box3"></div>
<script src="ex08_조건반복.js"></script>let n = 1;
while(n<=5){
document.querySelector("#box1").innerHTML += (n + " ");
n++;
}
for(n = 1 ; n<=5 ; n++){
document.querySelector("#box2").innerHTML += (n + " ");
}
n=1
do{
document.querySelector("#box3").innerHTML += (n + " ");
n++;
}
while(n<=5);
4-3 예제)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>< select name = 'month'><br>
< option value = '1'>1월</option><br>
< option value = '2'>2월</option><br>
...
< option value = '12'>12월</option><br>
</select><br>
위와 같은 select 태그를 구현해 box1에 저장하자
</p>
<div id="box1"></div>
<script src="ex08_exam.js"></script>
</body>
</html>let query = "<select name='month'>"
for(i=1 ; i<=12 ; i++){
query+= `<option value='${i}'>${i}월</option>`
}query += `</select>`
document.querySelector("#box1").innerHTML = query;
//한번에 쿼리문을 전달
예제2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
nums 폴더의 이미지를 num0.jpg~num9.jpg 이미지를 화면에출력하기<br>
slect태그를 구현해 box1에 출력
</p>
<div id="box1"></div>
<div id="box2"></div>
<img src="./nums/num0.jpg"> <!--테스트용-->
<script src="ex08_exam2.js"></script>
</body>
</html>let box = `<table><tr>`
for(i=0 ; i<10 ; i++){
box+=`<td><img src="./nums/num${i}.jpg"></td>`
}box+=`</tr></table>`
document.querySelector("#box1").innerHTML = box;
let box2='<h1>방법2</h1>';
for(i=0 ; i<10 ; i++){
box2+=`<img src="./nums/num${i}.jpg"><br>`
}
document.querySelector("#box2").innerHTML = box2;
예제3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 > table{ /*box1의자식인 table에 style을 적용*/
font-size: 50px;
background-color: rgba(149, 147, 147, 0.801);
}
</style>
</head>
<body>
<p>3행3열짜리 테이블 생성 , 내용은 1~9 까지의 값을 넣어서
box1 태그에 출력
</p>
<div class= bo id="box1"></div>
<script src="ex08_exam3.js"></script>
</body>
</html>let box = '<table border=1><tr>';
for(i=1; i<10; i++){
box+=`<td>${i}</td>`;//${}을 이용해 i값을요소에넣기
if(i%3 ==0){//3열 마다 행을 바꿔줌
box+=`</tr><tr>`
}
}
box+='</tr></table>';
//다 작성된 table태그를 한번에
//querySelector를 이용해 div태그에 넣자
document.querySelector("#box1").innerHTML = box;주의점 : 쿼리를 넣을 때 작은따옴표(') 대신에
백 (`) 안에 ${} 이용해 쿼리를 넣자 물론 편한대로하면 되긴한다
5) Date
let box1 = document.querySelector("#box1");
let now = new Date();
box1.innerHTML += now+"<br>";
let date1 = new Date(2025,(3-1),10,15,20);
//2025-03-10 15:20 의미 (입력값+1month 의 날짜가 들어감)
box1.innerHTML += date1+"<br>";
let date2 = new Date(2025,(3-1),10);
//2025-03-10 의미 (1달뒤에 날짜가 들어감)
box1.innerHTML += date2+"<br>";
let date3 = new Date("2025-03-20 15:20");//문자열로하면 1달차이가나지않음
box1.innerHTML += date3+"<br>";
//-------------------------------보기좋게 넣기-----------------------
let year = now.getFullYear();//2025
let month = now.getMonth()+1; //getMonth는 현재 달의 -1이 반환될것임
let day = now.getDate();//20
let weekNo = now.getDay();// 0:일 ~ 6:토
let hours = now.getHours();
let minute = now.getMinutes();
let second = now.getSeconds();
box1.innerHTML +=
`${year}-${month}-${day} (${weekNo}) ${hours}:${minute}:${second}<br>`;
//UTC 타임기준
year = now.getUTCFullYear();
month = now.getUTCMonth()+1; //getMonth는 현재 달의 -1이 반환될것임
day = now.getUTCDate();//20
weekNo = now.getUTCDay();
hours = now.getUTCHours();//UTC기준은 우리나라보다 9시간이 느림
minute = now.getUTCMinutes();
second = now.getUTCSeconds();
box1.innerHTML +=
`${year}-${month}-${day} (${weekNo}) ${hours}:${minute}:${second}<br>`;
//------------------------------------예제------------------------------
// 3월30일의 요일출력해보기
// getDay()의 반환값 -> 0:일 ~ 6:토
date = new Date(2025,2,30);
let arr= ['일','월','화','수','목','금','토']
weekName = arr[date.getDay()];
box1.innerHTML += `2025-03-30 ${weekName}요일<br>`
//오늘의 요일 출력하기
5) 최종예제
1번)
이건 짧을 것 같아서 internal방식으로진행함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="money"></div>
<script>
let total = 0 ;
let a = ''; //저축문장을 넣어둘 변수
while(total < 100){ //저축금액이 100보다 적을동안만 반복
let money = parseInt(Math.random()*10)+1;
total += money;
if(money>5){
a += `저축을 많이하셨습니다 ${money}원 /잔액${total}<br>`;
}
else{
a += `저축을 적게하셨습니다 ${money}원 /잔액${total}<br>`;
}
}
document.querySelector("#money").innerHTML += a;
document.querySelector("#money").innerHTML += total+"저축 만료"
</script>
</body>
</html>
2번)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>행 열 갯수 입력받아 테이블 생성</h1>
<caption>행 : </caption>
<input type="number" id="row"><br>
<caption>열 : </caption>
<input type="number" id="cols"><br>
<button onclick="createTable();">테이블생성</button>
<div id="box"></div>
<script src="test2.js"></script>
</body>
</html>
JS코드
function createTable(){
let row = document.querySelector("#row").value;
let cols = document.querySelector("#cols").value;
let qu = `<table border=1><tr>`
for(i=1 ; i<=(row*cols) ; i++){
qu+=`<td>${i}</td>`;
if(i % cols ==0){
qu+=`</tr><tr>`
}
}
qu+=`</tr></table>`
document.querySelector("#box").innerHTML += qu;
}행*열 만큼의 for문을 돌린다
그 후 i % cols 가 0 이 된다면
cols의 길이를 다 채웠다는 뜻이므로
해당행을 끝내고
다음 행으로 넘어간다 </tr><tr>
3번)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.area{
width: 100px;
height: 100px;
border: 1px solid rgb(85, 49, 49);
}
.size{
width: 100px;
height: 100px;
border: 1px solid red
}
</style>
</head>
<body>
<h1>문제1 색상 선택 후 변경버튼 클릭하면 색상이변경되도록</h1>
<div class="area" id="di"></div>
<input type="color" id="color">
<button onclick="colorChange();">변경</button>
<br><hr><br>
<h1>버튼에따른 크기조절이 가능하게 해보세요</h1>
<div class="size" id="si"></div>
<button onclick="sizeChange(50);">50x50</button>
<button onclick="sizeChange(100);">100(원본)</button>
<button onclick="sizeChange(200);">200x200</button>
<script src="test3.js"></script>
</body>
</html>
JS코드
function colorChange(){
const di = document.getElementById("di");
let color = document.querySelector("#color").value;
di.innerHTML = `${color}색`
di.style.backgroundColor = color;
}
function sizeChange(num){
const si = document.getElementById("si");
si.style.width = num+"px";
si.style.height = num+"px";
}색깔을 선택하는 태그를 조회 시
value를 조회 해
document.querySelector("#color").value;
#xx xx xx의 (16진수RGB)형태로 가져오게 됨
div 태그의 style.backgroundColor를 해당 value로 변경해주면 됨
di.style.backgroundColor = color;
문제2)
크기변경의 부분은 버튼을 만든 후
각각 onClick 시 다른매개변수를전달
si.style.width = "@@@px";
si.style.height = "@@@px";
와 같은 방식으로 div 의크기를 바꿔줄 수 있음
예제4)
Tag , name 으로 접근 시 배열이 반환됨을 잊지말자
document.getElementsByTagName('태그명') : 배열이 반환
document.getElementsByName('name 속성명') : 배열이반환
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#area {
width: 400px;
height: 150px;
background: #ffff99;
border: 1px solid #6666ff;
}
</style>
</head>
<body>
<h2>HTML 태그에 접근 테스트</h2>
단, 구매자는 태그 이름으로 접근, 상품명은 아이디로 접근, 구매가격은 name값으로 접근할 것 <br><br>
구매자 : <input type="text" placeholder="구매자의 이름을 입력하세요.">
<br><br>
상품명 : <input type="text" id="pname" placeholder="구매 상품명을 입력하세요">
<br><br>
가격 : <input type="text" name="price" placeholder="구매 가격을 입력하세요.">
<br><br>
<button onclick="printValue();">입력값 출력하기</button>
<br><br>
<div id="area"></div>
<script src="test4.js"></script>
</body>
</html>
JS코드
function printValue(){
let buyer = document.getElementsByTagName("input");
let product = document.getElementById("pname").value;
let price = document.getElementsByName("price");
//tag , name 으로 조회하는것들을
//배열형태로 조회함
let area = document.querySelector("#area");
area.innerHTML= `구입자 : ${buyer[0].value}님 <br>
구입상품 : ${product} <br>
구매가격 : ${price[0].value}`
}배열이므로 [0] 과 같이 인덱스요소를 지정한 후 값을 조회하자
예제5)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div {
border: 1px solid red;
height: 150px;
}
</style>
</head>
<body>
<h1>기본 문법 문제</h1>
문제1. 다음 보기에 있는 텍스트 필드에 작성한 문자열의 길이를 알아올 수 있도록 구현하시오
<fieldset>
<legend>보기</legend>
<input type="text" placeholder="글자를 작성해보세요" size="100" id="text1">
</fieldset>
<br>
<div id="result1"></div>
<button onclick="stringLength();"> 확인하기</button>
<br><br>
문제2. 다음 보기에 있는 문자열을 ,(콤마) 를 기준으로 잘라내어 하나하나 출력하시오
<fieldset>
<legend>보기</legend>
<label id="la1">콜라,사이다,햄버거,피자,한약</label>
</fieldset>
<br>
<div id="result2"> </div>
<button onclick="stringSplit();"> 확인하기</button>
<script src="test5.js"></script>
</body>
</html>
JS코드
function stringLength(){
let text1 = document.querySelector("#text1").value;
//어차피 text형태이므로 String이 반환될것이다.
let result1 = document.querySelector("#result1");
result1.innerHTML += `<h4>보기의 문자열의
길이는${text1.length}</h4>`
//String.length : 문자열길이반환
}
function stringSplit(){
let la1 =document.querySelector("#la1").textContent; //text조회(Object??)
let result2 = document.querySelector("#result2");
let arr = la1.split(",");//,을 기준으로 배열을 만듬
console.log(arr , typeof(arr))
for(i=0 ; i<arr.length ; i++){
result2.innerHTML+= `${i+1} . ${arr[i]}<br>`
}
}
내가만든 추가예제
<body>
<h2> 문제 3 다음보기에있는 문자열을보기좋게 리스트로 정렬해보자</h2>
<fieldset>
<legend>보기</legend>
<label id="la2">콜라,사이다,햄버거,피자,한약,삼겹살,목살</label>
</fieldset>
<button onclick="list();">리스트로만들기</button>
<div id="result3"></div>
<script src="test5.js"></script>
</body>function list(){
let la2 = document.querySelector("#la2").textContent;
//text로 읽어와야 split으로 나눌 수 있음
let arr= la2.split(",");
let query = '<ul type="square">';
console.log(arr , typeof(arr));
for(i=0 ; i<arr.length ; i++){
query += `<li>${arr[i]}</li>`;
}
query+=`</ul>`;
document.querySelector("#result3").innerHTML +=query;
}
'JavaScript' 카테고리의 다른 글
| 부트캠프39일(jquery{요소선택자,필터링,요소탐색,예제}) (0) | 2025.03.28 |
|---|---|
| 부트캠프38일차 (게임들 , jquery , 예제) (0) | 2025.03.27 |
| 부트캠프37일차(BOM,game) (0) | 2025.03.26 |
| 부트캠프35일차 (JS(시간함수,Event,배열) (0) | 2025.03.21 |
| 부트캠프33일차(JS) (0) | 2025.03.19 |