ㅁ 문제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>
<button onclick="fnPractice1();">연습1</button>
<button onclick="fnPractice2();">연습2</button>
<div id="practiceResult"></div>
<script>
function fnPractice1() {
// 하단의 이미지명들이 담겨있는 배열을 통해서
// 연습1 버튼 클릭시 동적으로 img요소들을 생성해서
// #practiceResult 영역에 출력하시오.
// 반복문으로
// 단, 모든 이미지의 가로길이는 128px, margin은 5px로 반영.
const images = ['flower1.jpg', 'city1.jpg', "river1.jpg"]; // 전체경로 아님
}
function fnPractice2() {
// 하단의 링크명, 링크경로가 담겨있는 배열을 통해서
// 연습2 버튼 클릭시 동적으로 a 요소들을 생성해서
// #practiceResult 영역에 출력하시오.
// 단, 링크 클릭시 새탭에 열리도록 설정
const sites = [
];
}
</script>
</body>
</html>
(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>
<button onclick="fnPractice1();">연습1</button>
<button onclick="fnPractice2();">연습2</button>
<div id="practiceResult"></div>
<script>
function fnPractice1() {
// 하단의 이미지명들이 담겨있는 배열을 통해서
// 연습1 버튼 클릭시 동적으로 img요소들을 생성해서
// #practiceResult 영역에 출력하시오.
// 반복문으로
// 단, 모든 이미지의 가로길이는 128px, margin은 5px로 반영.
const images = ['flower1.jpg', 'city1.jpg', "river1.jpg"]; // 전체경로 아님
// <img src="../assets/assets/image/flower1.jpg" style="width: 128px; margin: 5px;" >
const result = document.getElementById("practiceResult");
result.innerHTML=''; // 비워주기
for(let i=0; i<images.length; i++) {
result.innerHTML += '<img src="../assets/assets/image/' + images[i]
+ '" style="width: 128px; margin: 5px;" >';
}
}
function fnPractice2() {
// 하단의 링크명, 링크경로가 담겨있는 배열을 통해서
// 연습2 버튼 클릭시 동적으로 a 요소들을 생성해서
// #practiceResult 영역에 출력하시오.
// 단, 링크 클릭시 새탭에 열리도록 설정
const sites = [
];
// (5) 문자열.link(href) : "<a href='href'>문자열</a>" 반환
const result = document.getElementById("practiceResult");
result.innerHTML=''; // 비워주기
for(let i=0; i<sites.length; i=i+2) {
result.innerHTML += '<a href="' + sites[i+1] + '" target="_blank">' + sites[i] + '</a><br>'
}
}
</script>
</body>
</html>
- result.innerHTML='';
이 구문을 반복문 전에 넣어줘야 이전 것들이 계속 누적되지 않음.
=========== 문제 6개 (기본문법 2개, 배열실습문제 4개) ==========
ㅁ 실습문제04_기본문법
<!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>
.result, .food {
border: 1px solid red;
width: 100%;
height: 150px;
}
</style>
</head>
<body>
<h2>기본 문법 문제</h2>
문제1.다음 보기에 있는 텍스트 필드에 작성한 문자열의 길이를 알아올 수 있도록 구현하시오.<br><br>
<form id="form1">
<fieldset>
<legend>보기</legend>
<input type="text" name="inputText" id="01" placeholder="글자를 작성해보세요." size="100">
</fieldset>
</form>
<br>
<div class="result"></div>
<button onclick="length();">확인하기</button>
<script>
function length() {
const uu = document.querySelector("form input"); // 해당되는 처음 요소객체 하나
const rr = document.getElementsByClassName("result"); // 배열
rr[0].innerHTML = "보기의 문자열 길이는 " + uu.value.length + "글자 입니다.";
}
</script>
<!-- -->
<br><br>
문제2. 다음 보기에 있는 문자열을 콤마 기준으로 잘라내어 하나하나 출력하시오.<br><br>
<form>
<fieldset>
<legend>보기</legend>
<div id="3333">콜라, 사이다, 햄버거, 피자, 한약</div>
</fieldset>
</form>
<br>
<div class="food"></div>
<button onclick="slice();">확인하기</button>
<script>
function slice() {
const allFood = document.getElementById("3333");
const cc = document.getElementsByClassName("food"); // 배열
// cc[0].innerHTML = allFood.innerHTML; 콜라, 사이다, 햄버거, 피자, 한약
// cc[0].innerHTML = allFood.innerHTML.replace(",", " "); 콜라 사이다, 햄버거, 피자, 한약
cc[0].innerHTML = "";
var array = allFood.innerHTML.split(",");
for(let i=0; i<array.length; i++) {
cc[0].innerHTML += (i+1) + ". " + array[i] + "<br>";
}
}
</script>
</body>
</html>
- input 요소 text 상자의 길이는 width가 아닌 size 속성으로 지정.
- (11) 문자열.replace(pattern, replacement)
ㄴ 전달된 pattern(문자열 또는 정규식) 과 일치하는 항목 일부 또는 전체가 replacement로 대치된 새로운 문자열 반환
ㄴ pattern이 정규식이 아닌 문자열일 경우 첫번째 일치 항목만 대치됨
그래서 split으로 배열로 만든 다음, 하나씩 출력했다.
ㅁ 실습문제05_간이계산기만들기
<!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>
<h2>간이 계산기 만들기</h2>
<label for="11">첫번째 값 :</label>
<input type="text" size="20" id="11"> <br>
<label for="22">두번째 값 :</label>
<input type="text" size="20" id="22"> <br>
<input type="button" value="+" onclick="plus();">
<input type="button" value="-" onclick="minus();">
<input type="button" value="x" onclick="multiply();">
<input type="button" value="/" onclick="divide1();">
<input type="button" value="%" onclick="divide2();">
<br><br>
<div id="result">계산결과 : </div>
<script>
var value1 = document.getElementById("11");
var value2 = document.getElementById("22");
var rrr = document.getElementById("result");
function plus() {
rrr.innerHTML = ''; // 빈문자열로 비워주기
// rrr.innerHTML += value1.value + value2.value; 문자열끼리 더해진다.
rrr.innerHTML += Number(value1.value) + Number(value2.value);
}
function minus() {
rrr.innerHTML = ''; // 빈문자열로 비워주기
rrr.innerHTML += Number(value1.value) - Number(value2.value);
}
function multiply() {
rrr.innerHTML = ''; // 빈문자열로 비워주기
rrr.innerHTML += Number(value1.value) * Number(value2.value);
}
function divide1() {
rrr.innerHTML = ''; // 빈문자열로 비워주기
rrr.innerHTML += Number(value1.value) / Number(value2.value);
}
function divide2() {
rrr.innerHTML = ''; // 빈문자열로 비워주기
rrr.innerHTML += Number(value1.value) % Number(value2.value);
}
</script>
</body>
</html>
ㅁ 실습문제06_배열실습문제 (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>
<h2>배열 실습 문제1</h2>
다음 보기에 있는 데이터들은 배열로 받고 하나의 배열로 합쳐보세요.<br>
이때 입력 필드에 배열에 있는 데이터를 전송하면 배열의 alert를 통하여<br>
배열의 위치를 알려주고, 없으면 "존재하지 않습니다"를 알려주면 됩니다.
<form>
<fieldset>
<legend>보기</legend>
<label id="la1">사과,바나나,당근</label><br>
<label id="la2">김밥,치즈,떡볶이,햄버거</label><br>
<label id="la3">환타,사이다,콜라</label><br>
<label id="la4">고양이,강아지</label>
</fieldset>
</form>
<br>
<input type="text" id="232" size="130" placeholder="찾을 문자열을 입력하세요"> <br>
<button onclick="ffff();">전송 및 처리</button>
<script>
function ffff() {
var a1 = document.getElementById("la1").innerHTML.split(",");
var a2 = document.getElementById("la2").innerHTML.split(",");
var a3 = document.getElementById("la3").innerHTML.split(",");
var a4 = document.getElementById("la4").innerHTML.split(",");
var a5 = a1.concat(a2, a3, a4);
var input = document.getElementById("232");
if(a5.indexOf(input.value) == -1) {
alert("존재하지 않습니다.");
}
else {
alert(input.value + "는 배열 index " + a5.indexOf(input.value) + "번째에 존재합니다.");
}
}
</script>
</body>
</html>
ㅁ 실습문제07_배열실습문제 (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>
<style>
input {
width: 100%;
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>배열 실습 문제2</h2>
다음 보기에 있는 문자열을 가지고 정답과 같이 만드세요. (별도의 문자열을 쓰면 안됨) <br>
그리고 출력 부분에 출력하도록 하면 됩니다. 정답 : "brlove"
<form>
<fieldset>
<legend>보기</legend>
<label id="stringla1">r b</label><br>
<label id="stringla2">e v o l</label><br>
</fieldset>
</form>
<br><br>
<input type="text" id="ii"><br><br>
<button onclick="ans();">처리</button>
<script>
function ans() {
var a1 = document.getElementById("stringla1").innerHTML.split(" ").reverse();
var a2 = document.getElementById("stringla2").innerHTML.split(" ").reverse();
var a3 = a1.concat(a2);
var print = document.getElementById("ii");
var final = "";
for(let i=0; i<a3.length; i++) {
final += a3[i];
}
print.value = final;
}
</script>
</body>
</html>
- input 요소의 size 속성은 입력 필드의 실제 너비를 조정하지 않기 때문에 CSS 스타일을 사용해야 한다.
(input 태그에 size="100%" 해도 화면 가로의 100%를 차지하지 않음)
- 텍스트 상자가 화면의 오른쪽 끝에 닿지 않도록 하려면, input 요소에 적절한 여백(margin)을 추가하거나 padding을 사용할 수 있습니다.
이때, box-sizing 속성을 사용하여 입력 필드의 너비를 설정해야 한다.
(이 문제 box-sizing: border-box;을 주기 전에는 input 텍스트 상자가 화면 오른쪽 끝에 닿았다. 저걸 주니까 안 닿음.
그러나 여전히 margin이나 padding은 적용 안 됨.)
- 이 문제에서 컴마로 구분되어있는 문자열이 아닌데, 컴마로 구분하려 함. 공백으로 구분해야 한다.
- input 요소에는 innerHTML 속성이 없습니다. 대신, input 요소의 값을 가져오거나 설정할 때는 value 속성을 사용합니다.
ㅁ 실습문제08_배열실습문제 (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>
#result {
border: 1px solid red;
width: 100%;
height: 25px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>배열 실습 문제3</h2>
문자열을 여러 개 입력받은 후 출력 버튼 클릭시 입력했던 모든 문자열이 출력되도록 만드세요. <br>
예) 개구리 -> 입력, 바나나 -> 입력, 복숭아 -> 입력 <br>
출력: 개구리,바나나,복숭아
<form>
<fieldset>
<legend>입력</legend>
<input type="text" id="inputText">
<button onclick="fn1();" type="button">입력</button>
</fieldset>
</form>
<br><br>
<div id="result"></div> <br> <!-- 이거 form 바깥에. -->
<button onclick="fn2();">출력</button>
<script>
var all = [];
function fn1() {
var tt = document.getElementById("inputText");
all.push(tt.value);
rr.innerHTML = ''; // 출력란 비워주기
}
function fn2() {
var rr = document.getElementById("result");
rr.innerHTML = all.toString();
}
</script>
</body>
</html>
- div가 form 태그 안쪽에 있지 않게끔 하기. fieldset으로 묶은거 끝났으면 바로 form 닫기.
- 중요한 점. form 안에 있는 button은 기본이 submit이 되기 때문에 원하는 결과가 안 나옴.
type="button"을 추가해주기!
ㅁ 실습문제09_배열실습문제 (4)
<!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>
#result {
border: 1px solid red;
width: 100%;
box-sizing: border-box;
height: 20px;
}
</style>
</head>
<body>
<h2>배열 실습 문제4</h2>
다음 보기의 문자열을 바탕으로 <br>
삭제할 음식과 추가할 음식을 입력받아서 <br>
지우고,추가하는 코드를 작성하여라. (단, 1개씩 입력) <br><br>
예시) 삭제 : 당근 / 추가 : 타코야끼 <br>
결과 -> 피자 치킨 햄버거 떡볶이 타코야끼
<form>
<fieldset>
<legend>보기</legend>
<div id="option">피자 치킨 당근 햄버거 떡볶이</div>
</fieldset>
</form>
<br><br>
<input type="text" id="t1" size="25" placeholder="삭제할 음식이름을 입력하세요">
<input type="text" id="t2" size="25" placeholder="추가할 음식이름을 입력하세요"> <br><br>
<div id="result"></div> <br>
<button onclick="delAndAdd();">처리 및 출력</button>
<script>
var str = document.getElementById("option").innerHTML.split(" "); // 배열
function delAndAdd() {
var del = document.getElementById("t1").value;
var add = document.getElementById("t2").value;
for(var i=0; i<str.length; i++) {
if( str[i] == del ) {
str.splice(i, 1);
}
}
str.push(add);
const rr = document.getElementById("result");
rr.innerHTML = "";
rr.innerHTML = str.join(" ");
}
</script>
</body>
</html>
'03. 웹 표준 기술 > JavaScript' 카테고리의 다른 글
| [자바스크립트] 07. 함수 - (2) callback 함수 (0) | 2024.08.13 |
|---|---|
| [자바스크립트] 07. 함수 (0) | 2024.08.13 |
| [자바스크립트] 06. 배열 (객체), 배열 관련 속성 및 메소드 (0) | 2024.08.12 |
| [자바스크립트] 05. 문자열, 수학, 형변환 관련 메소드 (0) | 2024.08.12 |
| [자바스크립트] 04. DOM - (3) 복습 (0) | 2024.08.12 |
