웹브라우저 자바스크립트 - 조작 API
조작 API - https://opentutorials.org/course/1375/6746
Text객체의 정보를 조작할 수 있는 API이다.
appendData()
deleteData()
insertData()
replaceData()
substringData() - 정보중에 일부정보만 가공하는 API
아래 예제를 통해 API를 모두 확인해 볼 수 있다.
<!DOCTYPE html>
<html>
<head>
<style>
#target{
font-size:77px;
font-family: georgia;
border-bottom:1px solid black;
padding-bottom:10px;
}
p{
margin:5px;
}
</style>
</head>
<body>
<p id="target">Cording everybody!</p>
<p> data : <input type="text" id="datasource" value="JavaScript" /></p>
<p> start :<input type="text" id="start" value="5" /></p>
<p> end : <input type="text" id="end" value="5" /></p>
<p><input type="button" value="appendData(data)" onclick="callAppendData()" /> <!--버튼 클릭시 callAppendData() 함수 실행-->
<input type="button" value="deleteData(start,end)" onclick="callDeleteData()" /> <!--버튼 클릭시 callDeleteData() 함수 실행-->
<input type="button" value="insertData(start,data)" onclick="callInsertData()" /> <!--버튼 클릭시 callInsertData() 함수 실행-->
<input type="button" value="replaceData(start,end,data)" onclick="callReplaceData()" /> <!--버튼 클릭시 callReplaceData() 함수 실행-->
<input type="button" value="substringData(start,end)" onclick="callSubstringData()" /></p> <!--버튼 클릭시 callSubstringData() 함수 실행-->
<script>
var target = document.getElementById('target').firstChild; //Cording everybody! 텍스트를 target변수에 넣는다.
var data = document.getElementById('datasource'); //id가 datasource인 p태그 엘리먼트를 data변수에 넣는다.
var start = document.getElementById('start'); //id가 start인 p태그 엘리먼트를 start변수에 넣는다.
var end = document.getElementById('end'); //id가 end인 p태그 엘리먼트를 end변수에 넣는다.
function callAppendData(){
target.appendData(data.value); //data.value는 data변수의 value값인 JavaScript이며 이 값을 인자로 appendData을 통해 target변수 뒤에 값이 추가된다.
}
function callDeleteData(){
target.deleteData(start.value, end.value); //start.value는 start변수의 value값인 5, end.value는 end변수의 value값인 5, Cording everybody!에서 5번째 값인 n부터 공백을 포함하여 v까지 값이 삭제되어 Cordierybody! 값이 된다.
}
function callInsertData(){
target.insertData(start.value, data.value); //start.value는 값을 넣을 곳, data.value는 어떤 값을 넣을지 이다. 값을 넣을 곳은 5이므로 Cording everybody!에서 i뒷부분이며 넣을 값은 JavaScript이다. CordiJavaScriptng everybody! 이 값이 된다.
}
function callReplaceData(){
target.replaceData(start.value, end.value, data.value); //start.value는 값을 넣을 시작지점, end.value는 값이 끝나는 지점, data.value는 어떤 값을 넣을지 이다. Cording everybody! 시작지점 5와 끝나는 지점이 5이므로 'ng ev'구간이 사라지면서 그 자리에 JavaScript가 들어간다. CordiJavaScripterybody! 값이 된다.
}
function callSubstringData(){
alert(target.substringData(start.value, end.value)); //target인 Cording everybody!에서 start.value값인 5, end.value값인 5 사이의 데이터를 리턴해준다. 알럿창으로 ng ev가 출력된다.
}
</script>
</body>
</html>
각 함수와 연결되어 있는 버튼을 같은 색상으로 표시함.
[appendData(data)버튼 클릭시 실행화면]
[deleteData(start, end)버튼 클릭시 실행화면]
[insertData(start, data)버튼 클릭시 실행화면]
[replaceData(start, end, data)버튼 클릭시 실행화면]
[substringData(start, end, data)버튼 클릭시 실행화면]
