반응형
개인 공부용으로 한번 올려봅니다.
html css js의 각 부분들이 상호 작용하는 것을 구현한 예제입니다.
한번 참고하시면 좋을 듯 싶습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문자열에서 단어 찾기</title>
<link rel="stylesheet" href="style.css">
</head>
<header>
<div class="headerContainer">문자열 뒤집기</div>
<br>
</header>
<section>
<textarea class="textareaContainer" id="textarea" placeholder="여기에 문장을 입력하세요"></textarea>
<br>
<input type="text" class="textInputArea" id="textInput" placeholder="여기에 찾을 단어를 입력하세요">
<button class="button" onClick="count()">단어 카운트</button>
<br>
<P>결과:</P>
<span id="result">단어의 출현 횟수: 0</span>
<script>
function count() {
const elementArr = document.getElementById('textarea').value;
const changeValue = elementArr.split(document.getElementById('textInput').value);
let countNum = changeValue.length - 1;
document.getElementById("result").innerHTML = `단어 출현 횟수: ${countNum}`;
}
</script>
</section>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문자열에서 단어 찾기</title>
<link rel="stylesheet" href="style.css">
</head>
<header>
<div class="headerContainer">문자열에서 단어 찾기</div>
<br>
</header>
<section>
<input type="text" class="textInputArea" id="textInput" placeholder="여기에 바꿀 단어를 입력하세요">
<button class="button" onClick="change()">단어 변환</button>
<br>
<P>결과:</P>
<span id="result">단어의 결과:</span>
<script>
function change() {
const elementArr = document.getElementById('textInput').value;
const changeValue = elementArr.split("").reverse().join();
let changeResult = changeValue
document.getElementById("result").innerHTML = `단어 결과: ${changeValue}`;
}
</script>
</section>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문자열에서 단어 찾기</title>
<link rel="stylesheet" href="style.css">
</head>
<header>
<div class="headerContainer">문자열 뒤집기</div>
<br>
</header>
<section>
<textarea class="textareaContainer" id="textarea" placeholder="여기에 문장을 입력하세요"></textarea>
<br>
<button class="button" onClick="change()">단어 첫글자</button>
<br>
<P>결과:</P>
<span id="result">결과는??</span>
<script>
function change() {
const elementArr = document.getElementById('textarea').value;
const changeValue = elementArr.split(" ");
for (let i =
0; i < changeValue.length; i++) {
changeValue[i]= changeValue[i].charAt(0).toUpperCase() + changeValue[i].slice(1);
}
let result=changeValue.join(" ");
document.getElementById("result").innerHTML = result;
}
</script>
</section>
<body>
</body>
</html>
.headerContainer{
font-size: 40px;
margin-top: 20px;
}
.textareaContainer{
width: 500px;
height: 150px;
}
.textInputArea{
width: 300px;
height:30px;
}
.button{
height: 45px;
}
p{
font-size: 30px;
font-weight: bold;
}반응형
'It Study > 프로그래밍 공부' 카테고리의 다른 글
| 동빈 나 선생님의 게시판 블로그 따라하기 - (일부분만 구현) 개인공부용 (1) | 2024.10.10 |
|---|---|
| jsp 구구단 기초 예제 - rq클래스 활용(재수정) (1) | 2024.10.03 |
| jsp 구구단 기초 예제 (1) | 2024.10.03 |
| 팀프로젝트 연습 코드(주소록) (12) | 2024.10.01 |
| 서블릿 구구단 연습 예제 (0) | 2024.10.01 |